/*
 * Retzien Libre — composition éditoriale
 *
 * Cette couche reste séparée du CSS historique de Berlin afin de préserver les
 * gabarits et les mises à jour Dotclear. Elle transpose la maquette de la
 * charte sans modifier le contenu du blog.
 */

:root {
  --retzien-green: #00473e;
  --retzien-yellow: #faae2b;
  --retzien-pink: #ffa8ba;
  --retzien-grey: #f3f3f3;
  --retzien-ink: #111;
  --retzien-paper: #fff;
  --retzien-border: 3px solid var(--retzien-ink);
  --retzien-shadow: 7px 7px 0 var(--retzien-ink);
}

html {
  background: var(--retzien-paper);
}

body {
  margin: 0;
  color: var(--retzien-ink);
  background: var(--retzien-paper);
  font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

body * {
  box-sizing: border-box;
}

img,
video,
iframe {
  max-width: 100%;
}

img {
  height: auto;
}

#page {
  max-width: none;
  margin: 0;
  overflow: hidden;
}

a,
a:link,
a:visited {
  color: var(--retzien-green);
  text-decoration-color: var(--retzien-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

a:hover,
a:focus,
a:active {
  color: var(--retzien-ink);
  background: var(--retzien-yellow);
  outline: 2px solid transparent;
}

/* En-tête blanc compact, sans répéter l'introduction sur chaque page. */
.header {
  display: grid;
  grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem 2rem;
  width: min(100% - 2rem, 75rem);
  max-width: 75rem;
  margin: 0 auto;
  padding: 1.35rem 0 0;
  color: var(--retzien-ink);
  background: var(--retzien-paper);
}

.skip-links {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  z-index: 20;
}

.skip-links:focus-within {
  top: 0.5rem;
  right: 0.5rem;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.5rem;
  overflow: visible;
  clip: auto;
  background: var(--retzien-paper);
  border: 2px solid var(--retzien-ink);
}

.banner {
  display: contents;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.site-title {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.site-title__link,
.site-title__link:link,
.site-title__link:visited {
  display: block;
  width: 100%;
  min-height: 4rem;
  background: url("img/logo.svg") left center / contain no-repeat;
  border: 0;
}

.header nav {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.header__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
  clear: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
}

.header__nav li {
  display: block;
  margin: 0;
  padding: 0;
  white-space: normal;
}

.header__nav li a,
.header__nav li a:link,
.header__nav li a:visited {
  display: block;
  padding: 0.55rem 0.72rem;
  color: var(--retzien-ink);
  font-weight: 650;
  line-height: 1.2;
  border: 2px solid transparent;
  border-radius: 0.65rem;
  text-decoration: none;
}

.header__nav li a:hover,
.header__nav li a:focus,
.header__nav li.active a {
  color: var(--retzien-ink);
  background: var(--retzien-yellow);
  border-color: var(--retzien-ink);
}

.header__nav .li-last a {
  color: var(--retzien-ink);
  background: var(--retzien-paper);
  border-color: var(--retzien-ink);
  box-shadow: 3px 3px 0 var(--retzien-ink);
}

.header__nav .li-last a:hover,
.header__nav .li-last a:focus {
  background: var(--retzien-pink);
}

.site-baseline {
  display: none;
  grid-column: 1 / -1;
  grid-row: 2;
  max-width: none;
  margin: 0.5rem 0 0;
  padding: clamp(1.8rem, 5vw, 3.7rem);
  color: var(--retzien-paper);
  background: var(--retzien-green);
  border: var(--retzien-border);
  border-radius: 2rem;
  box-shadow: var(--retzien-shadow);
  font-family: inherit;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-style: normal;
  line-height: 1.65;
}

.site-baseline::before {
  content: "Le Blog du Retzien Libre";
  display: block;
  max-width: 55rem;
  margin-bottom: 1rem;
  color: var(--retzien-yellow);
  font-size: clamp(2.35rem, 5.8vw, 5rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

/* Corps du blog : cartes éditoriales et modules latéraux distincts. */
#wrapper {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 19rem);
  gap: clamp(2rem, 4vw, 3.5rem);
  width: min(100% - 2rem, 75rem);
  max-width: 75rem;
  margin: clamp(3.5rem, 7vw, 6rem) auto;
  padding: 0;
  background: transparent;
}

#wrapper::before,
#wrapper::after {
  display: none;
}

#main,
#sidebar {
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}

#main {
  background: transparent;
}

.dc-home #content {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  align-items: start;
}

.dc-home .post {
  max-width: none;
  margin: 0;
  padding: clamp(1.35rem, 3vw, 2.1rem);
  overflow: hidden;
  color: var(--retzien-ink);
  background: var(--retzien-pink);
  border: var(--retzien-border);
  border-radius: 1.75rem;
  box-shadow: var(--retzien-shadow);
}

.dc-home .post:nth-of-type(3n) {
  background: var(--retzien-yellow);
}

.dc-home .post:nth-of-type(3n + 1) {
  background: var(--retzien-grey);
}

.dc-home .post.first {
  grid-column: 1 / -1;
  padding: clamp(2rem, 5vw, 3.75rem);
  color: var(--retzien-paper);
  background: var(--retzien-green);
}

/*
 * Berlin affiche le premier billet en entier sur la page d'accueil. On garde
 * son extrait et son lien, mais pas les nombreuses pages de contenu complet.
 */
.dc-home .post.first .post-content {
  display: none;
}

.post-title {
  margin: 0.4rem 0 1.2rem;
  color: var(--retzien-green);
  font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif !important;
  font-size: clamp(1.55rem, 2.5vw, 2.35rem);
  font-weight: 780;
  line-height: 1.12;
  text-align: left;
  letter-spacing: -0.025em;
}

.post-title a,
.post-title a:link,
.post-title a:visited {
  color: inherit;
  border: 0;
  text-decoration: none;
}

.post-title a:hover,
.post-title a:focus,
.post-title a:active {
  color: var(--retzien-ink);
  background: var(--retzien-yellow);
}

.dc-home .post.first .post-title {
  max-width: 52rem;
  color: var(--retzien-paper);
  font-size: clamp(2.4rem, 5vw, 4.4rem);
}

.dc-home .post.first .post-title a:hover,
.dc-home .post.first .post-title a:focus {
  color: var(--retzien-ink);
}

.post-day-date {
  display: inline-flex;
  width: auto;
  margin: 0 0 0.5rem;
  padding: 0.25rem 0.65rem;
  color: var(--retzien-ink);
  background: var(--retzien-yellow);
  border: 2px solid var(--retzien-ink);
  border-radius: 99rem;
  font-size: 0.76rem;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-align: left;
}

.post-excerpt,
.post-content {
  overflow-wrap: anywhere;
}

.dc-home .post.first .post-excerpt {
  max-width: 55rem;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
}

.dc-home .post.first .post-excerpt img {
  display: none;
}

.dc-home .post img {
  border-radius: 1rem;
}

.post-read-it {
  margin: 1.5rem 0 1rem;
}

.post-read-it a,
.post-read-it a:link,
.post-read-it a:visited {
  display: inline-flex;
  align-items: center;
  padding: 0.48rem 0.8rem;
  color: var(--retzien-ink);
  background: var(--retzien-paper);
  border: 2px solid var(--retzien-ink);
  border-radius: 0.65rem;
  box-shadow: 3px 3px 0 var(--retzien-ink);
  font-weight: 750;
  text-decoration: none;
}

.post-read-it a::after {
  content: " →";
  margin-left: 0.25rem;
}

.post-read-it a:hover,
.post-read-it a:focus {
  background: var(--retzien-yellow);
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--retzien-ink);
}

.post-meta {
  margin: 1.25rem 0 0;
  padding: 0.8rem 1rem;
  color: var(--retzien-ink);
  background: rgba(255, 255, 255, 0.72);
  border: 2px solid var(--retzien-ink);
  border-radius: 0.9rem;
}

.post-meta a {
  color: var(--retzien-green);
}

.dc-home .pagination {
  grid-column: 1 / -1;
}

/* Les pages de billet gardent une lecture longue, mais reprennent le cadre. */
body:not(.dc-home) .post,
.content-info,
.post-feedback {
  max-width: 52rem;
  margin: 0 auto 3rem;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background: var(--retzien-paper);
  border: var(--retzien-border);
  border-radius: 1.75rem;
  box-shadow: var(--retzien-shadow);
}

body:not(.dc-home) .post-title {
  font-size: clamp(2rem, 4vw, 3.7rem);
}

.post-content h2,
.post-content h3,
.post-content h4 {
  color: var(--retzien-green);
  font-weight: 760;
}

pre,
code {
  max-width: 100%;
  overflow: auto;
}

/* Sidebar claire : aucun vestige du panneau sombre Berlin. */
.sidebar {
  color: var(--retzien-ink);
  background: transparent;
  border: 0;
  text-shadow: none;
}

.blognav__widgets,
.blogextra__widgets {
  display: contents;
}

.blognav__widgets .widget,
.blogextra__widgets .widget {
  float: none;
  width: auto;
  margin: 0 0 1.5rem;
  padding: 1.2rem;
  color: var(--retzien-ink);
  background: var(--retzien-paper);
  border: var(--retzien-border);
  border-radius: 1.35rem;
  box-shadow: 5px 5px 0 var(--retzien-ink);
  font-size: 0.92rem;
  line-height: 1.55;
}

.sidebar .widget.text {
  background: var(--retzien-pink);
}

.sidebar #search {
  background: var(--retzien-yellow);
}

.sidebar .categories {
  color: var(--retzien-paper);
  background: var(--retzien-green);
}

.sidebar h3,
.sidebar h4,
.blognav__widgets h3,
.blogextra__widgets h3,
.blognav__widgets h4,
.blogextra__widgets h4 {
  margin-top: 0;
  color: var(--retzien-green);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
}

.sidebar .categories h3,
.sidebar .categories h4 {
  color: var(--retzien-yellow);
}

.sidebar a,
.sidebar a:link,
.sidebar a:visited {
  color: var(--retzien-green);
  border: 0;
  font-weight: 650;
}

.sidebar .categories a,
.sidebar .categories a:link,
.sidebar .categories a:visited {
  color: var(--retzien-paper);
}

.sidebar a:hover,
.sidebar a:focus,
.sidebar a:active,
.sidebar li:hover,
.sidebar li:focus {
  color: var(--retzien-ink);
  background: var(--retzien-yellow);
}

.blognav__widgets ul,
.blogextra__widgets ul {
  padding-left: 0;
}

.blognav__widgets li,
.blogextra__widgets li {
  padding: 0.38rem 0;
  border-color: rgba(17, 17, 17, 0.22);
}

.tags ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.tags li {
  padding: 0;
  border: 0;
}

.tags a,
.tags a:link,
.tags a:visited {
  display: block;
  padding: 0.2rem 0.55rem;
  color: var(--retzien-ink);
  background: var(--retzien-pink);
  border: 2px solid var(--retzien-ink);
  border-radius: 99rem;
  font-size: 0.82rem !important;
}

#q {
  width: 100%;
  margin: 0 0 0.6rem;
  padding: 0.55rem;
  background: var(--retzien-paper);
  border: 2px solid var(--retzien-ink);
  border-radius: 0.55rem;
}

input[type="submit"],
button,
.button {
  color: var(--retzien-ink);
  background: var(--retzien-paper);
  border: 2px solid var(--retzien-ink);
  border-radius: 0.55rem;
  box-shadow: 3px 3px 0 var(--retzien-ink);
  font-weight: 750;
}

input[type="submit"]:hover,
button:hover,
.button:hover {
  color: var(--retzien-ink);
  background: var(--retzien-pink);
  border-color: var(--retzien-ink);
}

#offcanvas-on,
#offcanvas-off {
  display: none !important;
}

#gotop {
  right: 1rem;
  bottom: 1rem;
  width: auto;
  padding: 0.45rem 0.8rem;
  background: var(--retzien-yellow);
  border: 2px solid var(--retzien-ink);
  border-radius: 0.65rem;
  box-shadow: 3px 3px 0 var(--retzien-ink);
}

#gotop a,
#gotop a:link,
#gotop a:hover,
#gotop a:active {
  color: var(--retzien-ink);
}

.footer {
  width: min(100% - 2rem, 75rem);
  max-width: 75rem;
  margin: 5rem auto 0;
  padding: 2.25rem;
  color: var(--retzien-paper);
  background: var(--retzien-green);
  border: var(--retzien-border);
  border-bottom: 0;
  border-radius: 2rem 2rem 0 0;
  text-align: center;
}

.footer a,
.footer a:link,
.footer a:visited {
  color: var(--retzien-yellow);
}

.footer a:hover,
.footer a:focus {
  color: var(--retzien-ink);
}

/* Tablettes : sidebar sous les cartes, sans mécanisme off-canvas fragile. */
@media screen and (max-width: 68rem) {
  #wrapper {
    grid-template-columns: minmax(0, 1fr);
  }

  .off-canvas #main,
  .footer.off-canvas,
  .off-canvas .sidebar {
    position: static;
    float: none;
    width: auto;
    margin: 0;
  }

  .sidebar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .blognav__widgets .widget,
  .blogextra__widgets .widget {
    margin: 0;
  }
}

@media screen and (min-width: 60.01rem) {
  .header__nav {
    display: flex !important;
  }

  #hamburger {
    display: none !important;
  }
}

@media screen and (max-width: 60rem) {
  .header {
    display: block;
    padding-top: 1rem;
  }

  .banner {
    display: block;
    min-height: 4rem;
    margin: 0;
  }

  .site-title {
    width: min(18rem, calc(100% - 4rem));
  }

  .header nav {
    margin-top: 0.8rem;
  }

  .header__nav {
    display: block;
    margin: 0;
    background: var(--retzien-paper);
    border: var(--retzien-border);
    border-radius: 1rem;
    box-shadow: 4px 4px 0 var(--retzien-ink);
    text-align: left;
  }

  .header__nav li {
    border-bottom: 1px solid rgba(17, 17, 17, 0.25);
  }

  .header__nav li:last-child {
    border-bottom: 0;
  }

  .header__nav li a,
  .header__nav li a:link,
  .header__nav li a:visited {
    border: 0;
    border-radius: 0;
  }

  .header__nav .li-last a {
    border: 0;
    box-shadow: none;
  }

  #hamburger,
  #hamburger:visited {
    top: 1.6rem;
    right: 0;
    background-color: var(--retzien-yellow);
    border: 2px solid var(--retzien-ink);
    box-shadow: 3px 3px 0 var(--retzien-ink);
  }

  .site-baseline {
    display: none;
  }
}

@media screen and (max-width: 44rem) {
  .dc-home #content {
    grid-template-columns: minmax(0, 1fr);
  }

  .dc-home .post.first,
  .dc-home .pagination {
    grid-column: 1;
  }

  .sidebar {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-baseline,
  .dc-home .post,
  body:not(.dc-home) .post,
  .content-info,
  .post-feedback {
    border-radius: 1.35rem;
    box-shadow: 5px 5px 0 var(--retzien-ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}