/* =========================================================
   Les guides publics de la rôtisserie ambulante (/guide/).
   Ils s'appuient sur /pro/styles.css : même palette, mêmes
   polices, mêmes boutons. Ici seulement ce qui est propre
   à une page de lecture : la tête, la réponse directe, le
   sommaire, l'encadré « ce que la formation ajoute », les
   guides voisins et les sources.
   ========================================================= */
.guide__tete{
  padding-block:clamp(40px, 6vw, 72px) clamp(28px, 4vw, 44px);
  background:
    radial-gradient(120% 90% at 85% 8%, rgba(176,32,30,.09), transparent 55%),
    radial-gradient(110% 110% at 5% 100%, rgba(198,137,47,.12), transparent 50%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border-bottom:1px solid var(--line);
}
.guide__tete h1{ font-size:clamp(1.9rem, 4.4vw, 3.1rem); max-width:22ch; }
.guide__tete .lead{ margin-top:var(--sp-5); }
.guide__meta{ margin-top:var(--sp-5); font-size:.86rem; color:var(--ink-mute); display:flex; flex-wrap:wrap; gap:6px 18px; }
.guide__meta b{ color:var(--ink-soft); font-weight:600; }
.fil{ font-size:.82rem; color:var(--ink-mute); margin-bottom:var(--sp-5); }
.fil a{ color:var(--ink-mute); text-decoration:none; }
.fil a:hover{ color:var(--red); }
.fil span{ margin:0 8px; }

.guide__corps{ padding-block:var(--sp-7) var(--sp-9); }
.guide__corps > p, .guide__corps li, .guide__corps td{ max-width:72ch; }
.guide__corps h2{ font-size:clamp(1.5rem, 3vw, 2rem); margin:var(--sp-8) 0 var(--sp-4); scroll-margin-top:90px; }
.guide__corps h3{ font-size:1.18rem; margin:var(--sp-6) 0 var(--sp-3); }
.guide__corps p + p{ margin-top:var(--sp-4); }
.guide__corps a{ color:var(--red); text-decoration-thickness:1px; text-underline-offset:2px; }
.guide__corps a.btn{ color:#fff; text-decoration:none; }
.guide__corps a.voisin{ color:var(--ink); text-decoration:none; }
.guide__corps .liste{ margin-top:var(--sp-4); }
.guide__corps .sept{ margin-top:var(--sp-5); }
.guide__corps .sept span{ max-width:68ch; }
.guide__corps .chiffres{ margin-top:var(--sp-5); }
.guide__corps .chiffres td:last-child{ white-space:normal; font-weight:600; min-width:14ch; }
.guide__corps .faq{ margin-top:var(--sp-5); }

/* Le renvoi vers une source : petit numéro doré, cliquable. */
sup.s{ font-size:.68em; line-height:0; vertical-align:super; margin-left:1px; }
sup.s a{ color:var(--gold-deep); text-decoration:none; font-weight:600; }
sup.s a:hover{ text-decoration:underline; }

/* La réponse directe, en tête : ce que lit un moteur ou un assistant IA. */
.reponse{
  background:var(--white); border:1px solid var(--line-strong); border-left:4px solid var(--red);
  border-radius:var(--radius); padding:var(--sp-5) var(--sp-6);
}
.reponse__f{ font-size:.74rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--red); margin-bottom:var(--sp-2); }
.reponse p{ font-size:1.04rem; max-width:none; }

/* Le sommaire. */
.sommaire{ margin-top:var(--sp-6); padding:var(--sp-4) var(--sp-5); background:var(--paper-2); border-radius:var(--radius); font-size:.94rem; }
.sommaire__f{ font-size:.74rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:var(--sp-2); }
.sommaire ol{ padding-left:1.3em; display:grid; gap:4px; columns:2; }
.sommaire li{ break-inside:avoid; }
.sommaire a{ color:var(--ink-soft); text-decoration:none; }
.sommaire a:hover{ color:var(--red); text-decoration:underline; }

/* Une remarque en marge : nuance, avertissement. */
.nuance{
  margin-top:var(--sp-5); padding:var(--sp-4) var(--sp-5); border:1px solid var(--line-strong);
  border-left:4px solid var(--gold); background:var(--gold-soft); border-radius:var(--radius); font-size:.96rem; color:var(--ink-soft);
}
.nuance b{ color:var(--ink); }

/* Ce que la formation ajoute : le seul encadré sombre de la page. */
.ajoute{
  margin-top:var(--sp-8); background:var(--ink); color:var(--paper);
  border-radius:var(--radius-lg); padding:clamp(24px, 4vw, 44px);
}
.ajoute__f{ font-size:.74rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin-bottom:var(--sp-3); }
.ajoute h2{ color:var(--paper); font-size:clamp(1.35rem, 2.6vw, 1.8rem); margin:0 0 var(--sp-4); }
.ajoute p{ color:color-mix(in srgb, var(--paper) 78%, transparent); max-width:64ch; }
.ajoute p + p{ margin-top:var(--sp-3); }
.ajoute__actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-5); }
.ajoute .btn{ background:var(--gold-deep); }
.ajoute .btn:hover{ background:#7d4f13; }
.ajoute .btn--ghost{ background:transparent; color:var(--paper); border-color:color-mix(in srgb, var(--paper) 40%, transparent); }
.ajoute .btn--ghost:hover{ background:color-mix(in srgb, var(--paper) 10%, transparent); border-color:var(--paper); }
.ajoute__note{ margin-top:var(--sp-4); font-size:.86rem; color:color-mix(in srgb, var(--paper) 58%, transparent); }

/* Les guides voisins. */
.voisins{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:var(--sp-4); margin-top:var(--sp-5); }
.voisin{
  display:flex; flex-direction:column; gap:6px; background:var(--white); border:1px solid var(--line-strong);
  border-top:3px solid var(--red); border-radius:var(--radius); padding:var(--sp-5); text-decoration:none; color:var(--ink);
  transition:transform .2s ease, box-shadow .2s ease;
}
.voisin:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.voisin--or{ border-top-color:var(--gold); }
.voisin__f{ font-size:.7rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-mute); }
.voisin__n{ font-family:var(--font-display); font-size:1.12rem; font-weight:600; line-height:1.25; }
.voisin__d{ font-size:.9rem; color:var(--ink-soft); }
.voisin__t{ margin-top:auto; padding-top:6px; font-size:.9rem; font-weight:600; color:var(--red); }

/* Les sources, en fin de page. */
.sources{ margin-top:var(--sp-8); padding-top:var(--sp-5); border-top:1px solid var(--line-strong); font-size:.88rem; color:var(--ink-soft); }
.sources h2{ font-size:1.2rem; margin:0 0 var(--sp-3); }
.sources ol{ padding-left:1.6em; display:grid; gap:8px; }
.sources li{ max-width:80ch; scroll-margin-top:90px; }
.sources li:target{ background:var(--gold-soft); }
.sources a{ color:var(--ink-soft); }

/* L'index des guides. */
.guides-liste{ padding-block:var(--sp-7) var(--sp-9); }
.guides-liste .voisins{ grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); margin-top:var(--sp-6); }
.guides-liste .ajoute{ margin-top:var(--sp-8); }

@media (max-width:640px){
  .entete .btn{ padding:10px 16px; font-size:.88rem; white-space:nowrap; }
  .marque__nom{ font-size:1.02rem; }
  .sommaire ol{ columns:1; }
  .reponse{ padding:var(--sp-4) var(--sp-5); }
  .ajoute__actions .btn{ width:100%; }
}