/* ══════════════════════════════════════════════════════════════════════════════
   LES GUIDES — /guides/, les piliers, les articles (pages fabriquées par
   .claude/guides.py). Chargé par ces pages SEULEMENT : les pages principales
   ne le voient jamais, rien ne peut bouger chez elles.

   Même maison que les mentions légales : le crème du site, un panneau blanc
   pour le texte, les titres en rouge encre, Nunito. Une page qui se LIT : une
   colonne de lecture d'environ 70 signes, des intertitres francs, des
   tableaux qui tiennent dans l'écran du téléphone sans défiler de côté.
   ══════════════════════════════════════════════════════════════════════════════ */

.guide {
  padding-block: calc(var(--hauteur-entete) + clamp(40px, 6vh, 80px)) var(--souffle-bas);
}

.guide__enveloppe {
  max-width: 880px;
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
}

/* ─── Le fil d'Ariane ────────────────────────────────────────────────────── */
.ariane ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.5;
  color: var(--eteint);
}
.ariane li + li::before {
  content: "›";
  margin-inline: 8px;
  color: var(--eteint);
}
.ariane a {
  color: var(--sourdine);
  text-decoration: underline;
  text-decoration-color: var(--trait-fort);
  text-underline-offset: 3px;
}
.ariane a:hover { color: var(--rouge-texte); text-decoration-color: currentColor; }
.ariane [aria-current="page"] { color: var(--sourdine); }
/* Au téléphone, le dernier maillon (la page elle-même) répète le titre écrit
   juste en dessous, et se coupait en laissant un « ? » seul sur sa ligne : il
   disparaît de l'écran, pas de la lecture (lecteurs d'écran, données Google). */
@media (max-width: 619px) {
  .ariane [aria-current="page"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ─── Le titre ───────────────────────────────────────────────────────────── */
.guide__tete { display: grid; gap: 10px; }
.guide__rubrique {
  font-size: 14px;
  font-weight: 700;
  color: var(--rouge-texte);
}
.guide__titre {
  font-size: clamp(30px, 4.6vw, 48px);
  line-height: 1.08;
  color: var(--rouge-texte);
}

/* ─── Le texte ───────────────────────────────────────────────────────────── */
.guide__corps {
  min-width: 0;
  padding: clamp(22px, 3.6vw, 48px);
  border-radius: var(--arrondi);
  border: 1px solid var(--verre-bord);
  background: rgb(255 255 255 / .94);
  box-shadow: var(--ombre-douce);
}
.guide__corps > * + * { margin-top: 1em; }
.guide__corps > h2 { margin-top: 1.9em; }
.guide__corps > h3 { margin-top: 1.5em; }
.guide__corps > :first-child { margin-top: 0; }
.guide__corps > h2 + *,
.guide__corps > h3 + * { margin-top: .55em; }

.guide__corps p,
.guide__corps li {
  line-height: 1.7;
  text-wrap: pretty;
}
.guide__chapo {
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1.6;
}
.guide__corps h2 {
  font-size: clamp(21px, 2.4vw, 26px);
  line-height: 1.2;
  color: var(--rouge-texte);
  scroll-margin-top: 24px;
}
.guide__corps h3 {
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1.3;
  letter-spacing: -.01em;
}
.guide__corps strong { font-weight: 800; }
.guide__corps a:not(.guide-carte) {
  color: var(--rouge-texte);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.guide__corps a:not(.guide-carte):hover { text-decoration-thickness: 2px; }

.guide__corps ul,
.guide__corps ol { padding-left: 1.35em; }
.guide__corps ul { list-style: disc; }
.guide__corps ol { list-style: decimal; }
.guide__corps li + li { margin-top: .45em; }
.guide__corps li::marker { color: var(--rouge-texte); font-weight: 700; }

.guide__corps hr {
  border: 0;
  border-top: 2px dashed var(--trait-fort);
  margin-block: 2em;
}

/* Les tableaux : ils TIENNENT dans l'écran, même à 320 px. Les mots longs se
   coupent (avec un trait d'union, en français) plutôt que de pousser la page
   de côté ; le cadre défile seulement si un tableau futur était trop large. */
.guide__tableau {
  overflow-x: auto;
  margin-block: 1.4em;
  border: 1px solid var(--trait);
  border-radius: 14px;
  background: #fff;
}
.guide__tableau table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.45;
}
.guide__tableau th,
.guide__tableau td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--trait);
  hyphens: auto;
}
.guide__tableau tbody tr:last-child > * { border-bottom: 0; }
.guide__tableau thead > tr > * {
  background: var(--page);
  font-size: 14px;
  font-weight: 800;
  color: var(--encre);
}
.guide__tableau tbody th { font-weight: 700; color: var(--encre); }

/* Au téléphone, trois ou quatre colonnes ne tiennent pas sans couper les
   mots en morceaux : chaque rang devient une fiche, l'intitulé du rang en
   tête, puis « colonne : valeur ». */
@media (max-width: 559px) {
  .guide__tableau table,
  .guide__tableau tbody,
  .guide__tableau tbody tr,
  .guide__tableau tbody th,
  .guide__tableau tbody td { display: block; }
  .guide__tableau thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .guide__tableau tbody tr {
    padding: 12px 14px;
    border-bottom: 1px solid var(--trait);
  }
  .guide__tableau tbody tr:last-child { border-bottom: 0; }
  .guide__tableau tbody th,
  .guide__tableau tbody td {
    padding: 0;
    border: 0;
  }
  .guide__tableau tbody th { margin-bottom: 4px; font-size: 15px; font-weight: 800; }
  .guide__tableau tbody td + td { margin-top: 4px; }
  .guide__tableau td[data-label]::before {
    content: attr(data-label) " : ";
    font-weight: 700;
    color: var(--encre);
  }
}

/* L'invitation de fin : la seule ligne qui renvoie vers le restaurant. */
.guide__invitation {
  margin-top: 2em;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--page-creuse);
}
.guide__invitation p { font-weight: 600; }

/* ─── La date et la signature ────────────────────────────────────────────── */
.guide__pied {
  display: grid;
  gap: 4px;
  padding-inline: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sourdine);
}

/* ─── Les cartes : les thèmes du hub, les guides d'un pilier, les articles
   associés. Toute la carte est le lien. ─────────────────────────────────── */
.guide__liste { display: grid; gap: 14px; margin-top: 8px; }
.guide__liste > h2 {
  font-size: clamp(21px, 2.4vw, 26px);
  line-height: 1.2;
  color: var(--rouge-texte);
}
.guide__liste > h2 a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* une cible confortable pour le doigt */
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: rgb(176 58 38 / .35);
  text-underline-offset: 5px;
}
.guide__liste > h2 a:hover { text-decoration-color: currentColor; }

.guides-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 14px;
}
.guide__corps .guides-cartes { margin-top: 1em; }

.guide-carte {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 44px;
  padding: 18px 20px;
  border: 1px solid var(--trait);
  border-radius: 16px;
  background: #fff;
  color: var(--encre);
  text-decoration: none;
  transition: transform var(--duree) var(--courbe),
              box-shadow var(--duree) var(--courbe),
              border-color var(--duree) var(--courbe);
}
a.guide-carte:hover {
  transform: translateY(-2px);
  border-color: rgb(176 58 38 / .45);
  box-shadow: var(--ombre-douce);
}
.guide-carte__titre {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--rouge-texte);
}
.guide-carte__texte {
  font-size: 15px;
  line-height: 1.5;
  color: var(--sourdine);
}
.guide-carte__infos {
  font-size: 13px;
  font-weight: 700;
  color: var(--eteint);
}
.guide-carte__infos:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .guide-carte { transition: none; }
  a.guide-carte:hover { transform: none; }
}