/* Kouloula : feuille unique, sans framework ni JavaScript.
 *
 * Même système que loan-gicquel-psychologue.fr et auxmillefeuilles.com : titres
 * en géométrique, corps en system-ui, conteneur à 68rem, colonne de lecture à
 * 44rem, rayon 14px, boutons en pilule, cartes à ombre douce et sections
 * alternées. Seule la palette change : elle est relevée sur les photos du site
 * et sur le jaune du logo.
 *
 * Clair uniquement : pas de variante sombre.
 */

@font-face { font-family: 'Poppins'; src: url('/fonts/poppins-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fonts/poppins-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('/fonts/poppins-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --brousse: #3c4a2a;
  --brousse-fonce: #27311b;
  --brousse-vif: #5c7139;  /* 5,4:1 sur blanc, AA sur les petits libellés */
  --brousse-pale: #f4f7ee;
  --soleil: #fecc04;          /* le jaune des deux O du logo */
  --terre: #a8542c;   /* 5,3:1 sur blanc, AA sur le petit texte des eyebrows */
  --encre: #1e2118;
  --gris: #5a6152;
  --bord: #dee5d3;

  --titre: Poppins, system-ui, sans-serif;
  --texte: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --large: 68rem;
  --etroit: 44rem;
  --rayon: 14px;
  --ombre: 0 1px 2px rgb(39 49 27 / .06), 0 8px 24px -12px rgb(39 49 27 / .22);
  --gouttiere: clamp(1.15rem, 4vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: #fff;
  color: var(--encre);
  font: 400 17px/1.65 var(--texte);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
figure { margin: 0; }
:where(a) { color: inherit; }

:focus-visible { outline: 3px solid var(--brousse-vif); outline-offset: 3px; border-radius: 4px; }

.saut {
  position: absolute; left: -100vw; top: .5rem; z-index: 100;
  padding: .7rem 1.1rem; background: var(--brousse); color: #fff;
  border-radius: 999px; text-decoration: none; font-weight: 600;
}
.saut:focus { left: .5rem; }

.invisible {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------------------------------------------------------------- titres */
h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--brousse);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4.2vw, 2.7rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); }
p { margin: 0 0 1.1em; }

.eyebrow {
  font-family: var(--titre);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--terre);
  margin: 0 0 .8rem;
  display: flex; align-items: center; gap: .55rem;
}
/* Un trait du jaune du logo devant chaque surtitre : la signature se répète de
   section en section sans jamais peser. */
.eyebrow::before {
  content: ''; width: 1.4rem; height: 3px; flex: none;
  border-radius: 2px; background: var(--soleil);
}

::selection { background: rgb(254 204 4 / .32); color: var(--encre); }

.chapo { font-size: 1.09rem; color: var(--gris); line-height: 1.7; }

/* --------------------------------------------------------------- en-tête */
.entete {
  position: sticky; top: 0; z-index: 30;
  background: rgb(255 255 255 / .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bord);
}
.entete > div {
  max-width: var(--large); margin: 0 auto;
  padding: .8rem var(--gouttiere);
  display: flex; align-items: center; gap: 1.2rem;
}

.logo {
  font-family: var(--titre); font-weight: 700; font-size: 1.32rem;
  letter-spacing: .005em; text-transform: uppercase; text-decoration: none;
  color: var(--encre); white-space: nowrap; display: flex; align-items: center;
}
.logo .o {
  display: inline-block; width: .72em; height: .72em;
  border: .16em solid var(--soleil); border-radius: 50%;
  margin-inline: .02em; overflow: hidden; text-indent: 2em; line-height: 1;
}

/* Trois entrées, et le Guide en bouton : c'est le produit d'appel, il ne se
   noie pas dans une liste de rubriques. Le panneau mobile est un <details>,
   le seul élément natif qui ouvre un tiroir avec l'état annoncé aux lecteurs
   d'écran et le clavier qui marche, sans une ligne de JavaScript. */
.nav { display: flex; align-items: center; gap: .3rem; }
.nav > a, .sousmenu > summary {
  text-decoration: none; font-family: var(--titre); font-size: .93rem;
  font-weight: 500; color: var(--gris);
  padding: .5rem .8rem; border-radius: 999px; white-space: nowrap;
  transition: background .18s, color .18s;
}
.nav > a:hover, .sousmenu > summary:hover { background: var(--brousse-pale); color: var(--brousse); }
.nav > a[aria-current] { background: var(--brousse-pale); color: var(--brousse); font-weight: 600; }
/* Le bouton d'appel garde ses propres couleurs : sans ça, la règle générique
   ci-dessus le repeignait en vert sur vert. */
.nav a.bouton { color: #fff; font-weight: 600; margin-left: .6rem; padding: .58rem 1.15rem; font-size: .9rem; }
.nav a.bouton:hover { background: var(--brousse-fonce); color: #fff; }
.nav a.bouton svg { width: 1.05rem; height: 1.05rem; flex: none; }

/* sous-menu du blog */
.sousmenu > summary {
  display: flex; align-items: center; gap: .4rem;
  cursor: pointer; list-style: none; min-height: 40px;
}
.sousmenu > summary::-webkit-details-marker { display: none; }
.sousmenu > summary.actif { background: var(--brousse-pale); color: var(--brousse); font-weight: 600; }
.chevron {
  width: .5rem; height: .5rem; flex: none; margin-top: -.22em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .2s;
}
.sousmenu[open] > summary .chevron { transform: rotate(-135deg); margin-top: .16em; }
.sousmenu-panneau a {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .9rem; border-radius: 10px; text-decoration: none;
  font-family: var(--titre); font-size: .93rem; font-weight: 500; color: var(--encre);
}
.sousmenu-panneau a:hover { background: var(--brousse-pale); color: var(--brousse); }
.sousmenu-panneau a[aria-current] { background: var(--brousse-pale); color: var(--brousse); font-weight: 600; }
.sousmenu-panneau span { font-size: 1.05rem; line-height: 1; }

/* raccourci vers le Guide, visible seulement quand la barre passe en tiroir */
.entete-appel {
  display: none; align-items: center; gap: .42rem;
  min-height: 44px; padding: .5rem 1rem; border-radius: 999px;
  background: var(--brousse); color: #fff; text-decoration: none;
  font-family: var(--titre); font-weight: 600; font-size: .9rem; white-space: nowrap;
}
.entete-appel:hover { background: var(--brousse-fonce); }
.entete-appel svg { width: 1.05rem; height: 1.05rem; flex: none; }

/* déclencheur du tiroir */
.menu { margin-left: auto; }
.menu-bouton {
  display: none; align-items: center; gap: .5rem;
  min-height: 44px; padding: .5rem .9rem;
  border: 1.5px solid var(--bord); border-radius: 999px;
  background: #fff; color: var(--brousse);
  font-family: var(--titre); font-weight: 600; font-size: .9rem;
  cursor: pointer; list-style: none;
}
.menu-bouton::-webkit-details-marker { display: none; }
.menu-bouton:hover { border-color: var(--brousse-vif); background: var(--brousse-pale); }
.menu-barres { position: relative; width: 18px; height: 12px; flex: none; }
.menu-barres::before, .menu-barres::after, .menu-barres span {
  content: ''; position: absolute; left: 0; right: 0; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.menu-barres::before { top: 0; }
.menu-barres span { top: 5px; }
.menu-barres::after { bottom: 0; }
.menu[open] .menu-barres::before { transform: translateY(5px) rotate(45deg); }
.menu[open] .menu-barres span { opacity: 0; }
.menu[open] .menu-barres::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 61.99rem) {
  .entete-appel, .menu-bouton { display: inline-flex; }
  /* le raccourci se range à droite, contre le bouton Menu, plutôt que de rester
     collé à la marque */
  .entete-appel { margin-left: auto; }
  .menu { position: relative; margin-left: .5rem; }
  .menu > .nav {
    position: absolute; right: 0; top: calc(100% + .7rem); z-index: 40;
    flex-direction: column; align-items: stretch; gap: .2rem;
    width: max(17rem, 70vw); max-width: calc(100vw - 2rem); padding: .45rem;
    background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon);
    box-shadow: var(--ombre);
  }
  .nav > a, .sousmenu > summary {
    display: flex; padding: .8rem .9rem; border-radius: 10px;
    font-size: 1rem; color: var(--encre);
  }
  .sousmenu > summary { justify-content: space-between; }
  .sousmenu-panneau { padding-left: .55rem; }
  .sousmenu-panneau a { font-size: .95rem; }
  /* le bouton reste dans le tiroir : le masquer laissait un lien invisible mais
     bien présent dans la navigation, et privait le tiroir de son seul appel */
  .nav a.bouton { margin: .45rem .2rem .2rem; padding-inline: 1rem; }
}

@media (min-width: 62rem) {
  /* le <details> sort de la mise en page, la barre redevient une navigation
     horizontale ; sans cette règle son contenu resterait replié */
  .menu { display: contents; }
  .menu-bouton { display: none; }
  .menu::details-content { content-visibility: visible; block-size: auto; opacity: 1; }
  .nav { margin-left: auto; }
  .sousmenu { position: relative; }
  .sousmenu-panneau {
    position: absolute; left: 0; top: calc(100% + .55rem); z-index: 40;
    min-width: 15rem; padding: .4rem;
    background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon);
    box-shadow: var(--ombre);
  }
}

/* Sous 26rem (416 px), la marque, le raccourci et le bouton Menu ne tiennent
   plus sur une ligne : la barre débordait de 26 px sur un écran de 360. Le
   raccourci perd son libellé le premier, son icône se suffit. */
@media (max-width: 26rem) {
  .entete-appel span { display: none; }
  .entete-appel { padding-inline: .8rem; }
  .entete > div { gap: .55rem; }
}
/* les plus petits téléphones : le libellé du bouton Menu saute à son tour */
@media (max-width: 21rem) {
  .menu-bouton { font-size: 0; gap: 0; padding-inline: .8rem; }
  .menu-barres { font-size: 1rem; }
  .logo { font-size: 1.14rem; }
}

/* --------------------------------------------------------------- boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.6rem; min-height: 44px;
  border-radius: 999px;
  font-family: var(--titre); font-size: .97rem; font-weight: 600;
  text-decoration: none; border: 1.5px solid transparent;
  background: var(--brousse); color: #fff;
  transition: background .18s, transform .18s, box-shadow .18s;
}
/* sans taille explicite, un SVG en `flex` se dilate et casse le libellé sur
   trois lignes ; sans nowrap, « Voir les 10 vidéos » se coupe à « Voir les ». */
.bouton { white-space: nowrap; }
.bouton svg { width: 1.15rem; height: 1.15rem; flex: none; }
.bouton:hover { background: var(--brousse-fonce); transform: translateY(-1px); box-shadow: var(--ombre); }
.bouton--clair { background: #fff; color: var(--brousse); border-color: var(--bord); }
.bouton--clair:hover { background: var(--brousse-pale); border-color: var(--brousse-vif); }
.bouton--soleil { background: var(--soleil); color: var(--brousse-fonce); }
.bouton--soleil:hover { background: #e9ba00; }
.entete .bouton { padding: .62rem 1.15rem; font-size: .9rem; }

.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

/* -------------------------------------------------------------- sections */
.bande { max-width: var(--large); margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) var(--gouttiere); }
.teinte { background: var(--brousse-pale); }
.teinte + .teinte { padding-top: 0; }
.etroit { max-width: var(--etroit); }

.fil { font-size: .87rem; color: var(--gris); margin-bottom: 1.4rem; }
.fil ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .4rem; margin: 0; padding: 0; }
.fil li { display: flex; align-items: center; }
.fil li:not(:last-child)::after { content: '›'; margin-left: .4rem; opacity: .55; }
.fil a { display: inline-flex; align-items: center; min-height: 24px; color: var(--gris); text-underline-offset: 3px; }
.fil a:hover { color: var(--brousse); }

/* ------------------------------------------------------------------ hero */
.hero { border-bottom: 1px solid var(--bord); }
.hero > div {
  max-width: var(--large); margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--gouttiere);
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 62rem) { .hero > div { grid-template-columns: 1.05fr .95fr; } }
.hero h1 { margin-bottom: .6rem; }
.hero .chapo { max-width: 34rem; }

.hero-visuel { position: relative; }
.hero-visuel img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--rayon); box-shadow: var(--ombre);
}
/* Carte flottante sur l'image, comme sur les deux autres sites, mais ici elle
   est cliquable : c'est le raccourci le plus direct vers le Guide. */
.vignette {
  position: absolute; left: -1rem; bottom: -1.2rem;
  display: flex; align-items: center; gap: .75rem;
  background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: .85rem 1.1rem; max-width: 18.5rem;
  text-decoration: none;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.vignette:hover { transform: translateY(-2px); border-color: var(--brousse-vif); }
.vignette-texte { min-width: 0; }
.vignette span { display: block; font-size: .82rem; color: var(--gris); line-height: 1.4; }
.vignette b { font-family: var(--titre); font-size: .95rem; color: var(--brousse); display: block; }
.vignette .pastille {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--soleil); display: grid; place-items: center;
  color: var(--brousse-fonce);
}
.vignette .pastille svg { width: 1.5rem; height: 1.5rem; }
.vignette-fleche {
  flex: none; margin-left: auto; color: var(--brousse-vif);
  font-size: 1.1rem; transition: transform .18s;
}
.vignette:hover .vignette-fleche { transform: translateX(3px); }
@media (max-width: 61.99rem) { .vignette { position: static; margin-top: 1rem; max-width: none; } }

/* ------------------------------------------------- façades vidéo (accueil) */
/* Une intégration YouTube pèse 700 Ko et parle à Google avant le premier clic.
   L'aperçu est une image locale : l'iframe attend la page du Guide. */
.facade {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--rayon); box-shadow: var(--ombre);
  background: var(--brousse-fonce); text-decoration: none;
  transition: transform .18s, box-shadow .18s;
}
.facade:hover { transform: translateY(-3px); }
.facade img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.facade-lecture {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: 3.6rem; height: 3.6rem; border-radius: 50%;
  background: rgb(255 255 255 / .93); color: var(--brousse-fonce);
  display: grid; place-items: center; transition: transform .18s, background .18s;
}
.facade-lecture svg { width: 2.1rem; height: 2.1rem; }
.facade:hover .facade-lecture { background: var(--soleil); transform: translate(-50%, -50%) scale(1.08); }
.facade-texte {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.6rem .95rem .85rem;
  background: linear-gradient(transparent, rgb(20 25 15 / .88));
  color: #fff;
}
.facade-texte b { font-family: var(--titre); font-size: .97rem; line-height: 1.35; display: block; }
.facade-numero {
  display: block; font-family: var(--titre); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--soleil); margin-bottom: .25rem;
}
.vedettes { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: 2.2rem; }

/* --------------------------------------------- en-tête de section à deux pôles */
.entete-section {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 1.2rem 2rem;
}
.entete-section > div { flex: 1 1 26rem; min-width: 0; }
.entete-section h2, .entete-section .chapo { margin-bottom: 0; }
.entete-section h2 { margin-bottom: .5rem; }
.entete-section .bouton { flex: none; }

/* les trois temps du parcours, sous les vidéos vedettes */
.etapes {
  display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  list-style: none; margin: 2.2rem 0 0; padding: 0; counter-reset: etape;
}
.etapes li {
  padding: 1.1rem 1.2rem; background: #fff;
  border: 1px solid var(--bord); border-radius: var(--rayon);
}
.etapes b { font-family: var(--titre); font-size: .97rem; color: var(--brousse); display: block; margin-bottom: .3rem; }
.etapes span { font-size: .92rem; color: var(--gris); line-height: 1.55; }
/* le fond de la section Guide est plus chaud : c'est le produit d'appel */
.teinte--guide { background: linear-gradient(180deg, #f4f7ee, #fbf6e4); }

/* aperçu d'étagère sur l'accueil : une seule rangée, pas de tablette de fond */
.etagere--apercu { border-bottom: 0; padding-bottom: 0; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }

/* ------------------------------------------------------------------- FAQ */
.faq details {
  border: 1px solid var(--bord); border-radius: var(--rayon);
  background: #fff; margin-bottom: .7rem;
}
.faq summary {
  padding: 1rem 1.2rem; cursor: pointer;
  font-family: var(--titre); font-weight: 600; font-size: 1.02rem; color: var(--brousse);
}
.faq summary::marker { color: var(--brousse-vif); }
.faq details[open] summary { border-bottom: 1px solid var(--bord); }
.faq details p { padding: 1rem 1.2rem 0; margin-bottom: 1rem; color: var(--gris); }
.faq h2 { margin-bottom: 1.6rem; }

/* --------------------------------------------------------- bloc signature */
.signature { display: grid; gap: 2rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 54rem) { .signature { grid-template-columns: 1.25fr .75fr; gap: 3rem; } }
.signature p { color: var(--gris); }
.signature img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--rayon); box-shadow: var(--ombre); }
.signature .actions { margin-top: 1.4rem; }

.puces { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; padding: 0; list-style: none; }
.puces li {
  font-size: .87rem; color: var(--gris);
  border: 1px solid var(--bord); border-radius: 999px; padding: .38rem .85rem;
  background: #fff;
}

/* ----------------------------------------------------------------- grille */
.grille {
  display: grid; gap: 1.4rem; list-style: none; margin: 2.2rem 0 0; padding: 0;
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
}
.grille--piliers { grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); }

.carte {
  background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon);
  overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s;
}
.carte:hover { transform: translateY(-3px); box-shadow: var(--ombre); border-color: var(--soleil); }
.carte a { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.carte img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--brousse-pale); }
.carte img.contenu { object-fit: contain; padding: 1rem 1.4rem; }
.carte .dedans { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.carte .eyebrow { font-size: .72rem; margin-bottom: .5rem; color: var(--brousse-vif); }
.carte h2 { font-size: 1.06rem; margin-bottom: .45rem; line-height: 1.35; font-weight: 600; }
.carte p { font-size: .92rem; color: var(--gris); margin: 0; line-height: 1.55; }
.carte time { font-size: .8rem; color: var(--gris); margin-top: auto; padding-top: .9rem; }

/* Cartes de rubrique, avec une pastille d'icône comme sur les deux autres sites. */
.rubriques { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); list-style: none; padding: 0; margin: 2.2rem 0 0; }
.rubriques a {
  display: block; height: 100%; padding: 1.5rem;
  background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon);
  text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s;
}
.rubriques a:hover { transform: translateY(-3px); box-shadow: var(--ombre); border-color: var(--soleil); }
.rubriques .pastille {
  width: 2.75rem; height: 2.75rem; border-radius: 12px;
  background: var(--brousse-pale); display: grid; place-items: center;
  font-size: 1.35rem; margin-bottom: 1rem;
}
.rubriques h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.rubriques p { font-size: .93rem; color: var(--gris); margin: 0 0 .7rem; }
.rubriques .compte { font-family: var(--titre); font-size: .82rem; font-weight: 600; color: var(--brousse-vif); }

/* Quatre règles : deux rangées de deux, ou une seule rangée de quatre quand il
   y a la place. Jamais 3 + 1, qui laisse une carte orpheline. */
.rubriques.regles { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
@media (min-width: 40rem) and (max-width: 68rem) { .rubriques.regles { grid-template-columns: repeat(2, 1fr); } }

/* L'étagère : la bibliothèque, c'est la moitié du site. */
.etagere {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 15.5rem));
  justify-content: space-between;
  gap: 1.8rem 1.3rem; list-style: none; margin: 2.2rem 0 0; padding: 0 0 1.5rem;
  border-bottom: 4px solid var(--bord);
}
.etagere a { text-decoration: none; display: flex; flex-direction: column; gap: .6rem; }
.etagere img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: 3px 8px 8px 3px;
  box-shadow: var(--ombre), -3px 0 0 rgb(39 49 27 / .1);
  transition: transform .18s;
}
.etagere a:hover img { transform: translateY(-5px); }
.etagere span { font-family: var(--titre); font-size: .86rem; font-weight: 500; line-height: 1.35; color: var(--encre); }

/* ---------------------------------------------------------------- article */
.papier { max-width: var(--etroit); margin-inline: auto; }
.papier-tete { margin-bottom: 0; }
/* Le titre, la couverture et le corps partagent le même bord gauche. Le titre
   a sa propre bande, la couverture passe en pleine largeur, puis le corps et sa
   colonne reprennent la grille, sans qu'aucun des trois ne soit recentré, ce
   qui les décalait les uns par rapport aux autres. */
.papier-tete-bande { padding-bottom: 2rem; }
.papier-tete-bande > * { max-width: var(--etroit); }
.article-grille { padding-top: 0; display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
.article-grille > article { min-width: 0; max-width: var(--etroit); }
/* La colonne n'apparaît qu'au-delà de 76rem : en dessous, la coller à côté d'une
   colonne de lecture de 44rem étranglerait les deux. Elle passe alors dessous. */
@media (min-width: 76rem) {
  .article-grille {
    grid-template-columns: minmax(0, var(--etroit)) minmax(15rem, 17rem);
    gap: 3.5rem; justify-content: start; align-items: start;
  }
  .article-grille > article { max-width: none; }
  .article-grille .corps :is(p, ul, ol, blockquote, h2, h3, h4) { max-width: none; }
  .article-grille .corps figure, .article-grille .corps hr { max-width: none; }
  .colonne { position: sticky; top: 5.5rem; }
}
.colonne { display: grid; gap: 1.2rem; align-content: start; }
.colonne-bloc {
  padding: 1.3rem 1.4rem; border: 1px solid var(--bord);
  border-radius: var(--rayon); background: #fff;
}
.colonne-bloc h2 { font-size: .8rem; letter-spacing: .11em; text-transform: uppercase; color: var(--terre); margin-bottom: 1rem; }
.colonne-appel { background: var(--brousse-pale); border-color: var(--brousse-vif); text-align: center; }
.colonne-appel .pastille {
  width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--soleil);
  display: grid; place-items: center; margin: 0 auto .8rem; color: var(--brousse-fonce);
}
.colonne-appel .pastille svg { width: 1.6rem; height: 1.6rem; }
.colonne-appel b { font-family: var(--titre); font-size: 1.05rem; color: var(--brousse); display: block; margin-bottom: .4rem; }
.colonne-appel p { font-size: .89rem; color: var(--gris); line-height: 1.55; margin-bottom: 1.1rem; }
.colonne-appel .bouton { width: 100%; padding-inline: 1rem; }
.colonne-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.colonne-liste a { display: flex; gap: .8rem; align-items: center; text-decoration: none; }
.colonne-liste img {
  width: 72px; height: 72px; flex: none; border-radius: 10px;
  object-fit: cover; background: var(--brousse-pale);
}
.colonne-liste b { font-family: var(--titre); font-size: .91rem; font-weight: 600; line-height: 1.35; color: var(--encre); display: block; }
.colonne-liste .eyebrow { font-size: .68rem; margin: .3rem 0 0; color: var(--brousse-vif); }
.colonne-liste a:hover b { color: var(--brousse); text-decoration: underline; text-underline-offset: 3px; }
.colonne-tout {
  display: inline-flex; align-items: center; min-height: 24px; margin-top: 1.1rem;
  font-family: var(--titre); font-size: .87rem; font-weight: 600;
  color: var(--brousse); text-decoration: none;
}
.colonne-tout:hover { text-decoration: underline; text-underline-offset: 3px; }

/* vidéo retirée côté YouTube */
.video-absente {
  max-width: var(--etroit); margin: 2rem auto;
  padding: .9rem 1.2rem; border-radius: var(--rayon);
  background: var(--brousse-pale); border: 1px dashed var(--bord);
  font-size: .92rem; color: var(--gris);
}
.signes {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center;
  font-size: .87rem; color: var(--gris);
  margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--bord);
}

/* La couverture vit hors des `.bande` : elle porte donc elle-même la gouttière,
   sinon elle collait aux bords de l'écran sur téléphone. */
.couverture {
  margin: 0 auto 2.4rem; max-width: var(--large);
  padding-inline: var(--gouttiere);
}
.couverture img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rayon); }
/* jamais d'agrandissement : une photo de 400 px étalée sur 704 est floue */
.couverture--petite img { aspect-ratio: auto; width: auto; max-width: min(100%, var(--etroit)); }
/* logos, schémas et cartes : posés entiers sur le fond pâle, pas recadrés */
.couverture--vignette img {
  aspect-ratio: auto; width: auto; max-width: min(100%, 26rem);
  padding: 1.6rem 2rem; background: var(--brousse-pale); border: 1px solid var(--bord);
}
.couverture figcaption { max-width: var(--etroit); margin: .65rem 0 0; font-size: .82rem; color: var(--gris); }

.corps { font-size: 1.06rem; line-height: 1.75; }
.corps > * { margin-inline: auto; }
.corps :is(p, ul, ol, blockquote, h2, h3, h4) { max-width: var(--etroit); }
.corps h2 { margin-top: 2.6rem; }
.corps h3 { margin-top: 2rem; }
.corps a { color: var(--brousse); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.corps a:hover { color: var(--terre); }
/* Les « Voir sur Amazon » faisaient 20 px de haut, sous le minimum de 24 px de
   WCAG 2.2 (2.5.8). En petit bouton, ils sont cliquables et se repèrent. */
.corps a[href*="amazon."] {
  display: inline-flex; align-items: center; min-height: 34px;
  padding: .25rem 1rem; margin: .15rem 0;
  border: 1px solid var(--bord); border-radius: 999px;
  background: var(--brousse-pale); text-decoration: none;
  font-family: var(--titre); font-size: .9rem; font-weight: 600;
}
.corps a[href*="amazon."]:hover { background: #fff; border-color: var(--brousse-vif); color: var(--brousse); }
.corps figure { margin: 2.2rem auto; max-width: var(--large); }
/* Une image nue héritée de WordPress n'a pas de <figure> : sans cette règle,
   `margin-inline: auto` la centrait à sa largeur propre, décalée du texte. */
.corps > img { width: 100%; max-width: var(--etroit); margin-block: 2.2rem; border-radius: var(--rayon); }
.corps figure img { width: 100%; border-radius: var(--rayon); background: var(--brousse-pale); }
.corps figcaption { max-width: var(--etroit); margin: .65rem auto 0; font-size: .87rem; color: var(--gris); }
.corps ul, .corps ol { padding-left: 1.3em; }
.corps li { margin-bottom: .45em; }
.corps li::marker { color: var(--brousse-vif); }
.corps blockquote {
  margin: 2rem auto; padding: 1.1rem 1.4rem;
  background: var(--brousse-pale); border-left: 4px solid var(--soleil);
  border-radius: 0 var(--rayon) var(--rayon) 0; color: var(--gris);
}
.corps blockquote p:last-child { margin-bottom: 0; }
.corps hr { max-width: var(--etroit); border: 0; border-top: 1px solid var(--bord); margin: 2.8rem auto; }

/* Deux articles portent un tableau que l'export a laissé sans aucun style : à
   320 px, ses trois colonnes collaient le texte au bord de l'écran. Il défile
   plutôt que de déborder. */
.corps table {
  display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  max-width: var(--etroit); margin: 2rem auto;
  border-collapse: collapse; font-size: .95rem;
}
.corps :is(td, th) {
  border: 1px solid var(--bord); padding: .7rem .9rem;
  vertical-align: top; min-width: 8rem;
}
.corps th { background: var(--brousse-pale); font-family: var(--titre); text-align: left; }
.corps :is(td, th) > p:last-child { margin-bottom: 0; }

/* Vidéos : intégrées, en ratio 16/9, sans script. */
.video {
  max-width: var(--large); margin: 2.2rem auto;
  aspect-ratio: 16 / 9; border-radius: var(--rayon); overflow: hidden;
  background: var(--brousse-fonce); box-shadow: var(--ombre);
}
.video iframe { width: 100%; height: 100%; border: 0; display: block; }

.sommaire {
  background: var(--brousse-pale); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: 1.3rem 1.5rem; margin: 0 auto 2.4rem;
  max-width: var(--etroit);
}
.sommaire .eyebrow { color: var(--brousse-vif); margin-bottom: .7rem; }
.sommaire ol { margin: 0; padding-left: 1.15em; }
.sommaire li { margin-bottom: .35em; font-size: .95rem; }
.sommaire a { color: var(--brousse); text-decoration: none; }
.sommaire a:hover { text-decoration: underline; }

.affiliation {
  max-width: var(--etroit); margin: 2.2rem auto;
  padding: 1rem 1.2rem; border-radius: var(--rayon);
  background: var(--brousse-pale); border: 1px solid var(--bord);
  font-size: .89rem; color: var(--gris);
}
.affiliation p { margin: 0; }

/* --------------------------------------------------------------- le guide */
/* Deux colonnes dès qu'il y a la place : en une seule, les dix vidéos faisaient
   douze écrans de haut et on ne retrouvait plus celle qu'on cherchait. */
.guide-liste { display: grid; gap: 2.2rem 1.8rem; margin-top: 2.4rem; grid-template-columns: 1fr; }
@media (min-width: 52rem) {
  .guide-liste { grid-template-columns: repeat(2, 1fr); }
  /* cinq vidéos sur deux colonnes laisseraient un trou en fin de grille : la
     première passe en vedette, les quatre autres se rangent en 2×2 */
  .guide-liste > :first-child { grid-column: 1 / -1; }
  .guide-liste > :first-child .video { max-width: 46rem; }
  .guide-liste > :first-child h3 { font-size: 1.3rem; }
}
.guide-etape { display: flex; flex-direction: column; gap: .9rem; scroll-margin-top: 6rem; }
/* La vidéo est bornée par sa colonne : sans ça, le `max-width: 68rem` du
   composant générique fait éclater la grille. */
.guide-etape .video { max-width: none; margin: 0; }
.guide-etape-texte { display: flex; flex-direction: column; }
.guide-etape .numero {
  font-family: var(--titre); font-weight: 700; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--terre);
  order: -1; margin-bottom: .25rem;
}
.guide-etape h3 { margin: 0; font-size: 1.1rem; line-height: 1.35; }
.guide-etape p { color: var(--gris); font-size: .96rem; margin: 0; }

/* sommaire du guide : dix ancres, pour ne pas avoir à chercher */
.guide-sommaire { padding-block: clamp(2rem, 4vw, 3rem); }
.guide-sommaire-grille { display: grid; gap: 1.6rem 2.5rem; grid-template-columns: 1fr; margin-top: .4rem; }
@media (min-width: 46rem) { .guide-sommaire-grille { grid-template-columns: repeat(2, 1fr); } }
.guide-sommaire-temps > b {
  font-family: var(--titre); font-size: 1.02rem; color: var(--brousse);
  display: block; margin-bottom: .6rem;
}
.guide-sommaire ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.guide-sommaire a {
  display: flex; align-items: center; gap: .7rem; min-height: 40px;
  padding: .4rem .7rem; border-radius: 10px;
  text-decoration: none; color: var(--gris); font-size: .94rem;
}
.guide-sommaire a:hover { background: var(--brousse-pale); color: var(--brousse); }
.guide-sommaire a span {
  font-family: var(--titre); font-weight: 700; font-size: .78rem;
  color: var(--terre); flex: none;   /* le jaune du logo ne fait que 1,7:1 sur blanc */
}

/* les articles qui creusent chaque étape */
.guide-suite {
  margin-top: 2.4rem; padding: 1.2rem 1.4rem;
  border: 1px solid var(--bord); border-radius: var(--rayon); background: #fff;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem;
}
.guide-suite .eyebrow { margin: 0; flex: 1 0 100%; }
.guide-suite a {
  font-family: var(--titre); font-size: .92rem; font-weight: 600;
  color: var(--brousse); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 28px;
}
.guide-suite a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------- liste de préparation */
.checklist { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr)); margin-top: 2.4rem; }
.checklist-bloc { background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1.4rem 1.5rem; }
.checklist-bloc h3 { font-size: 1.02rem; margin-bottom: 1rem; padding-bottom: .7rem; border-bottom: 1px solid var(--bord); }
.checklist-bloc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.checklist-bloc li {
  position: relative; padding-left: 1.9rem;
  font-size: .93rem; line-height: 1.55; color: var(--gris);
}
/* la case à cocher est dessinée, pas interactive : sans stockage, une vraie
   case se viderait au premier rechargement et mentirait au lecteur */
.checklist-bloc li::before {
  content: ''; position: absolute; left: 0; top: .18em;
  width: 1.15rem; height: 1.15rem; border-radius: 5px;
  border: 1.5px solid var(--brousse-vif); background: #fff;
}
.checklist-bloc strong { color: var(--encre); }

/* ------------------------------------------------------------- pagination */
.pages { display: flex; gap: .45rem; flex-wrap: wrap; justify-content: center; margin-top: 3rem; padding: 0; list-style: none; }
.pages a, .pages span {
  display: grid; place-items: center; min-width: 2.6rem; min-height: 2.6rem;
  padding: 0 .7rem; text-decoration: none;
  border: 1px solid var(--bord); border-radius: 999px;
  font-family: var(--titre); font-size: .94rem; color: var(--gris);
}
.pages a:hover { border-color: var(--brousse-vif); background: var(--brousse-pale); color: var(--brousse); }
.pages [aria-current] { background: var(--brousse); color: #fff; border-color: var(--brousse); font-weight: 600; }

/* ------------------------------------------------------------ pied de page */
.pied { margin-top: clamp(3.5rem, 8vw, 6rem); background: var(--brousse-fonce); color: #e8ece2; }
.pied > div {
  max-width: var(--large); margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) var(--gouttiere) 2rem;
  display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
}
.pied .logo { color: #fff; font-size: 1.25rem; }
.pied h2 { font-size: .78rem; letter-spacing: .11em; text-transform: uppercase; color: rgb(255 255 255 / .55); margin: 0 0 .9rem; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: .35rem; }
/* 24 px de haut minimum sur toute cible cliquable : WCAG 2.2, critère 2.5.8. */
.pied a {
  display: inline-flex; align-items: center; min-height: 24px;
  text-decoration: none; color: #e8ece2; font-size: .94rem; opacity: .85;
}
.pied a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.pied-baille { margin-top: .9rem; font-size: .92rem; color: rgb(255 255 255 / .7); max-width: 22rem; }
.pied small {
  display: flex; flex-wrap: wrap; gap: .3rem .55rem; align-items: center;
  max-width: var(--large); margin: 0 auto;
  padding: 1.4rem var(--gouttiere) 2rem;
  border-top: 1px solid rgb(255 255 255 / .14);
  font-size: .84rem; color: rgb(255 255 255 / .55);
}
.pied small a {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 24px;
  color: rgb(255 255 255 / .72); text-decoration: none;
}
.pied small a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.point-vert { width: .5rem; height: .5rem; border-radius: 50%; background: #4ade80; flex: none; }

/* Les assistants IA sont devenus une porte d'entrée : on leur ouvre la requête
   plutôt que d'attendre la citation. */
.pied-ia {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem;
  max-width: var(--large); margin: 0 auto;
  padding: 0 var(--gouttiere) 1.6rem;
  font-size: .87rem; color: rgb(255 255 255 / .6);
}
.pied-ia a {
  display: inline-flex; align-items: center; min-height: 32px;
  padding: .3rem .85rem; border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .18); background: rgb(255 255 255 / .05);
  color: #e8ece2; text-decoration: none;
  font-family: var(--titre); font-size: .85rem; font-weight: 500;
}
.pied-ia a:hover { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .35); color: #fff; }

/* -------------------------------------------------------- pages éditoriales */
/* Une largeur de lecture SANS recentrage : `.etroit` recentre le bloc entier et
   fait zigzaguer la page quand il alterne avec des sections pleine largeur. */
.mesure { max-width: var(--etroit); }
.corps.mesure > * { margin-inline: 0; }

.portraits { display: grid; gap: 1.4rem; grid-template-columns: 1fr; margin-top: 2.2rem; }
@media (min-width: 46rem) { .portraits { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
.portraits article { padding: 1.6rem 1.7rem; background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); }
/* pas de photo : les seuls clichés du fonds sont des animaux, en mettre un sous
   un prénom laisserait croire à un portrait */
.portrait-initiale {
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: 50%; background: var(--soleil); color: var(--brousse-fonce);
  font-family: var(--titre); font-weight: 700; font-size: 1.35rem; margin-bottom: 1rem;
}
.portraits h3 { margin-bottom: .15rem; }
.portrait-role { font-family: var(--titre); font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--terre); margin-bottom: .9rem; }
.portraits p { color: var(--gris); margin: 0; }

/* les règles de travail : mêmes cartes que les rubriques, sans le lien */
.regles li > div { display: block; height: 100%; padding: 1.5rem; background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); }
.regles h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.regles p { font-size: .93rem; color: var(--gris); margin: 0; }

/* la galerie : une mosaïque qui laisse chaque photo à son format */
.galerie {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  padding-top: 0;
}
.galerie-item { position: relative; overflow: hidden; border-radius: var(--rayon); box-shadow: var(--ombre); background: var(--brousse-pale); }
.galerie img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .3s; }
.galerie-item:hover img { transform: scale(1.04); }
.galerie figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.2rem .9rem .8rem;
  background: linear-gradient(transparent, rgb(20 25 15 / .85));
  color: #fff; font-family: var(--titre); font-size: .88rem; line-height: 1.35;
}
.galerie-fond, .galerie-fermer { display: none; }

/* Agrandissement au clic, sans JavaScript : `:target` suffit. Le lien de fond
   couvre l'écran et renvoie à la grille, donc un clic à côté referme. */
.galerie-item:target {
  position: fixed; inset: 0; z-index: 60; margin: 0;
  display: grid; place-items: center;
  border-radius: 0; box-shadow: none; overflow: auto;
  background: rgb(20 25 15 / .93);
  padding: clamp(1rem, 4vw, 3rem);
  animation: paraitre .18s ease-out;
}
@keyframes paraitre { from { opacity: 0 } to { opacity: 1 } }
.galerie-item:target .galerie-fond { display: block; position: fixed; inset: 0; }
.galerie-item:target .galerie-lien { position: relative; pointer-events: none; display: block; }
.galerie-item:target img {
  width: auto; max-width: min(100%, 1000px); max-height: 82vh;
  aspect-ratio: auto; object-fit: contain;
  border-radius: var(--rayon); box-shadow: 0 24px 60px -20px rgb(0 0 0 / .7);
  transform: none;
}
.galerie-item:target figcaption {
  position: relative; padding: 1rem 0 0; background: none;
  text-align: center; font-size: .95rem; color: #e8ece2;
}
.galerie-item:target .galerie-fermer {
  position: fixed; top: 1rem; right: 1rem; z-index: 2;
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: rgb(255 255 255 / .14);
  color: #fff; text-decoration: none; font-size: 1.2rem;
}
.galerie-item:target .galerie-fermer:hover { background: var(--soleil); color: var(--brousse-fonce); }

/* --------------------------------------------------------------------- 404 */
.perdu { text-align: center; padding-block: clamp(3.5rem, 12vw, 7rem); }
.perdu p { max-width: 32rem; margin-inline: auto; color: var(--gris); }

.voir-tout { margin-top: 2.2rem; }
.voir-tout a { color: var(--brousse); font-family: var(--titre); font-weight: 600; text-decoration: none; }
.voir-tout a:hover { text-decoration: underline; }
.liste-articles { margin-top: 2.2rem; }

@media print {
  .entete, .pied, .sommaire, .video { display: none; }
  body { color: #000; }
}