/* ============================================================================
   Lancely — la feuille des guides publics (/guides/…).
   ============================================================================
   S'ajoute à /legal/legal.css (mêmes jetons, même police, même en-tête et même pied) : ce fichier ne
   redéclare AUCUN jeton et n'écrit AUCUNE couleur en dur, il n'emploie que les `var(--…)` de legal.css.
   Il est copié dans dist/guides/ par web/outils/guides.mjs.

   MODE DE LECTURE. Ce sont des pages qu'on LIT, souvent sur téléphone : le texte garde la mesure de ligne des pages
   légales, les tableaux s'empilent en cartes sous 48 rem (aucun défilement horizontal), rien ne bouge, rien de collant.
   ========================================================================== */

.guide { max-width: 56rem; }
.guide > article { max-width: none; }
.guide article > header { padding-top: var(--e-4); }
.guide article > header h1 { max-width: 20ch; }
.guide article section > *,
.guide article > header { max-width: var(--largeur-lecture); }
.guide article section > .guide-tableau { max-width: none; }

/* --- Fil d'Ariane (la même liste que le JSON-LD) -------------------------- */
.guide-fil { padding-top: var(--e-5); font-size: var(--t-petit); color: var(--encre-3); }
.guide-fil ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; gap: 0 var(--e-2); }
.guide-fil li { margin: 0; }
.guide-fil li + li::before { content: '›'; margin-right: var(--e-2); color: var(--encre-3); }
.guide-fil a { display: inline-flex; align-items: center; min-height: 44px; color: var(--encre-2); }
.guide-fil [aria-current='page'] { color: var(--encre); }

/* --- La réponse courte, puis la ligne de signature ------------------------ */
.guide-reponse {
  margin: var(--e-4) 0;
  padding: var(--e-4) var(--e-5);
  background: var(--information-voile);
  border-left: var(--trait-fort) solid var(--marque);
  border-radius: var(--rayon-petit);
  font-size: 1.0625rem;
}
.guide-meta { font-size: var(--t-petit); color: var(--encre-3); }

/* --- Les sections --------------------------------------------------------- */
.guide section { margin-bottom: var(--e-7); }
.guide section > h2 { margin-bottom: var(--e-3); }
.guide section h3 { margin: var(--e-5) 0 var(--e-2); }
.guide li a, .guide p a { overflow-wrap: anywhere; }

/* --- La FAQ : les questions sont des titres, les réponses des paragraphes ---- */
.guide-faq h3 { font-size: var(--t-titre-3); }

/* --- La page d'entrée : la question, puis sa réponse en une phrase ---------- */
.guide-liste { margin: var(--e-5) 0; padding: 0; list-style: none; }
.guide-liste li { margin: 0; padding: var(--e-4) 0; border-top: var(--trait-fin) solid var(--trait); }
.guide-liste li:last-child { border-bottom: var(--trait-fin) solid var(--trait); }
.guide-liste h2 { margin: 0 0 var(--e-2); font-size: var(--t-titre-3); }
.guide-liste h2 a { display: block; min-height: 44px; padding: var(--e-2) 0; text-decoration: none; color: var(--encre); }
.guide-liste h2 a:hover { color: var(--action); text-decoration: underline; }
.guide-liste p { margin: 0; color: var(--encre-2); }

/* --- Les tableaux ----------------------------------------------------------- */
.guide-tableau { margin: var(--e-4) 0 var(--e-5); }
.guide-tableau table { width: 100%; border-collapse: collapse; font-size: var(--t-petit); }
.guide-tableau th, .guide-tableau td { padding: var(--e-2) var(--e-3); border: var(--trait-fin) solid var(--trait); text-align: left; vertical-align: top; }
.guide-tableau thead th { background: var(--surface-2); font-weight: 700; }
.guide-tableau tbody th { font-weight: 700; }

/* Sous 48 rem : chaque ligne devient une carte, chaque case porte son intitulé (l'attribut data-label). */
@media (max-width: 47.99rem) {
  .guide-tableau table, .guide-tableau tbody, .guide-tableau tr, .guide-tableau th, .guide-tableau td { display: block; }
  .guide-tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .guide-tableau tr { margin-bottom: var(--e-4); border: var(--trait-fin) solid var(--trait); border-radius: var(--rayon-petit); background: var(--surface); }
  .guide-tableau tbody th { padding: var(--e-3) var(--e-4); border: 0; background: var(--surface-2); border-radius: var(--rayon-petit) var(--rayon-petit) 0 0; }
  .guide-tableau td { padding: var(--e-2) var(--e-4); border: 0; border-top: var(--trait-fin) solid var(--trait-doux); }
  .guide-tableau td::before { content: attr(data-label); display: block; font-size: var(--t-legende); font-weight: 700; color: var(--encre-3); }
}