/* ==========================================================================
   Afoodi — pages de guides (/guides/{slug})
   Un guide fait 2 000 mots : il se lit en entier, ou en diagonale par le
   sommaire. D'où la colonne latérale collante à partir de 1100 px, et les
   trois points essentiels posés avant le texte, pour ceux qui repartiront
   avec ça seulement.
   ========================================================================== */

.has-gsap [data-reveal] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .has-gsap [data-reveal] { opacity: 1 !important; transform: none !important; }
}
/* Les ancres du sommaire ne doivent pas glisser sous la barre de navigation. */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 92px; }

/* ==========================================================================
   EN-TÊTE
   ========================================================================== */
.top {
  background:
    radial-gradient(1100px 620px at 50% -8%, oklch(0.33 0.05 163 / .85), transparent 60%),
    linear-gradient(175deg, var(--green-dark), var(--green-ink) 70%);
  padding-bottom: clamp(44px, 5.5vw, 78px);
}
.fil {
  padding-top: clamp(26px, 3vw, 40px);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.fil a { color: var(--mint); }
.fil a:hover { color: var(--orange-bright); }

.hero { padding: clamp(20px, 2.4vw, 32px) 0 0; max-width: 940px; }
.hero h1 {
  font-size: clamp(32px, 4.6vw, 66px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.02;
  text-wrap: balance;
}
.hero__lead {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.6;
  color: var(--cream-dim);
  margin-top: clamp(20px, 2.4vw, 30px);
  max-width: 70ch;
  text-wrap: pretty;
}
.hero__lead strong { color: var(--cream); font-weight: 800; }
.hero__lead em { font-style: italic; }

/* ==========================================================================
   MISE EN COLONNES
   ========================================================================== */
.light { background: var(--cream); color: var(--green-ink); position: relative; z-index: 2; }
.light a { color: var(--green-ink); }
.light a:hover { color: var(--orange); }

.guide {
  border-radius: 34px 34px 0 0;
  margin-top: -22px;
  padding: clamp(48px, 6vw, 88px) 0 clamp(52px, 6.5vw, 96px);
}
/* Trois colonnes : le sommaire interne à gauche, le texte au centre, les
   ressources à droite. Les deux colonnes latérales sont collantes — sur un
   texte de 2 000 mots, elles restent accessibles tout du long. */
.guide__grid {
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr) minmax(0, 250px);
  gap: clamp(26px, 3vw, 48px);
  align-items: start;
}
.guide__corps { max-width: 72ch; }
.rail { position: sticky; top: 92px; }

.sommaire__boite {
  position: sticky;
  top: 92px;
  background: var(--cream-pure);
  border: 1px solid var(--ink-line);
  border-radius: 18px;
  padding: clamp(20px, 2vw, 26px);
}
.sommaire__t { font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.sommaire ol { list-style: none; counter-reset: som; margin-top: 14px; display: grid; gap: 10px; }
.sommaire li { counter-increment: som; }
.sommaire a {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-wrap: pretty;
}
.sommaire a::before { content: counter(som, decimal-leading-zero); color: var(--orange); font-size: 11px; padding-top: 2px; }

/* ==========================================================================
   LES 3 POINTS ESSENTIELS
   ========================================================================== */
.essentiels {
  background: var(--green-ink);
  color: var(--cream);
  border-radius: 22px;
  padding: clamp(24px, 2.8vw, 38px);
}
.essentiels__t { font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--mint); }
.essentiels ol { list-style: none; counter-reset: pt; margin-top: 18px; display: grid; gap: 14px; }
.essentiels li {
  counter-increment: pt;
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--cream-dim);
  text-wrap: pretty;
}
.essentiels li::before {
  content: counter(pt);
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--orange);
  color: oklch(0.99 0.01 90);
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.essentiels li strong { color: var(--cream); font-weight: 800; }
.essentiels li em { font-style: italic; }

/* ==========================================================================
   CORPS DU GUIDE
   ========================================================================== */
.guide__corps p {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-top: 16px;
  text-wrap: pretty;
}
.guide__corps p strong { color: var(--green-ink); font-weight: 800; }
.guide__corps p em { font-style: italic; }
.guide__corps a { text-decoration: underline; text-underline-offset: 3px; }

.guide__h2 {
  font-size: clamp(23px, 2.4vw, 34px);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.15;
  margin-top: clamp(40px, 4.4vw, 64px);
  text-wrap: balance;
}
.guide__h3 {
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.25;
  margin-top: clamp(28px, 3vw, 40px);
  text-wrap: balance;
}
.guide__h2 + p, .guide__h3 + p { margin-top: 14px; }

.puces, .etapes { margin-top: 18px; display: grid; gap: 10px; }
.puces { list-style: none; }
.etapes { list-style: none; counter-reset: etape; }
.puces li, .etapes li {
  position: relative;
  padding-left: 26px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.puces li strong, .etapes li strong { color: var(--green-ink); font-weight: 800; }
.puces li em, .etapes li em { font-style: italic; }
.puces li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}
.etapes li { counter-increment: etape; }
.etapes li::before { content: counter(etape) "."; position: absolute; left: 0; font-weight: 900; color: var(--orange); }

/* Le renvoi vers le cas mesuré, en fin de section « La preuve » : c'est le
   moment où le lecteur vient de voir des chiffres et veut savoir d'où ils
   sortent. Pas de soulignement — c'est un bouton, pas un lien dans le texte. */
.preuve-cta { margin-top: clamp(22px, 2.4vw, 30px); }
.preuve-cta a { text-decoration: none; }

/* Listes numérotées, encadrés de formule et tableaux : aucun guide n'en
   contient aujourd'hui, mais le générateur les produit dès qu'un miroir en
   introduit un. Les règles restent, sinon la mise en page casserait en
   silence à la prochaine réécriture. */
.formule {
  margin-top: clamp(20px, 2.2vw, 28px);
  background: var(--cream-pure);
  border: 1px solid var(--ink-line);
  border-left: 3px solid var(--orange);
  border-radius: 0 16px 16px 0;
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 30px);
}
.formule p { margin-top: 8px; }
.formule p:first-child { margin-top: 0; color: var(--green-ink); }

.tableau { margin-top: clamp(20px, 2.2vw, 28px); overflow-x: auto; }
.tableau table { border-collapse: collapse; width: 100%; min-width: 560px; }
.tableau th, .tableau td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.5;
  border-bottom: 1px solid var(--ink-line);
}
.tableau thead th {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange);
  border-bottom-width: 2px;
}
.tableau tbody th { font-weight: 800; color: var(--green-ink); }
.tableau td { color: var(--ink-soft); }

/* ==========================================================================
   QUESTIONS FRÉQUENTES
   ========================================================================== */
.faq { margin-top: 8px; display: grid; gap: 2px; }
.qr {
  background: var(--cream-pure);
  border: 1px solid var(--ink-line);
  padding: clamp(20px, 2.2vw, 28px);
}
.qr:first-child { border-radius: 18px 18px 0 0; }
.qr:last-child { border-radius: 0 0 18px 18px; }
.qr__q { font-size: clamp(16.5px, 1.5vw, 19px); font-weight: 800; letter-spacing: -.02em; line-height: 1.3; text-wrap: balance; }
.qr__r { margin-top: 10px; }

/* ==========================================================================
   ALLER PLUS LOIN + SOURCES
   ========================================================================== */
.actions { list-style: none; margin-top: clamp(20px, 2.2vw, 28px); display: grid; gap: 12px; }
.actions li {
  display: grid;
  gap: 4px;
  border-left: 2px solid var(--orange);
  padding-left: 16px;
}
.actions a, .actions strong { font-size: 16.5px; font-weight: 800; letter-spacing: -.02em; }
.actions a { text-decoration: none; }
.actions a:hover { text-decoration: underline; text-underline-offset: 3px; }
.actions span { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }

.sources {
  margin-top: clamp(40px, 4.4vw, 64px);
  padding-top: clamp(24px, 2.8vw, 36px);
  border-top: 1px solid var(--ink-line);
}
.sources__t { font-size: 11.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.sources ul { list-style: none; margin-top: 14px; display: grid; gap: 10px; }
.sources li { font-size: 14px; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }
.sources li strong { color: var(--green-ink); font-weight: 700; }
.sources li em { font-style: italic; }

/* ==========================================================================
   Responsive — sous 1100 px le sommaire repasse au-dessus du texte
   ========================================================================== */
/* Sous 1280 px, le rail passe sous le texte : à trois colonnes, la colonne
   de lecture tomberait sous 55 caractères. */
@media (max-width: 1280px) {
  .guide__grid { grid-template-columns: minmax(0, 210px) minmax(0, 1fr); }
  .rail { position: static; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* L'encadré newsletter du rail ferait doublon avec celui du pied de page,
     à deux écrans de distance : on ne garde que les deux sommaires. */
  .rail__news { display: none; }
}
@media (max-width: 1100px) {
  .guide__grid { grid-template-columns: 1fr; }
  .sommaire__boite { position: static; }
  .sommaire ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .rail { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .sommaire ol { grid-template-columns: 1fr; }
  .tableau table { min-width: 440px; }
}