/* Guides — pages de référence, une colonne, faites pour être lues en entier
   et citées depuis les fiches. Séparé d'app.css sur le modèle de legal.css :
   ces pages n'utilisent aucun composant du catalogue, et elles ne bougeront
   presque jamais une fois écrites.

   Règle tenue partout ici : un chiffre s'affiche en Space Mono. C'est le seul
   signal typographique du site qui dise « ceci est une mesure, pas une
   opinion » — et ces pages ne valent que par leurs mesures. */

.guide { max-width: 46rem; margin: 0 auto; padding: 0 0 90px; }

.guide h2 {
  font-size: 1.3rem;
  text-transform: uppercase;
  margin: 46px 0 13px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--edge-2);
}
.guide h3 { font-size: 1.02rem; font-family: Barlow; font-weight: 600; margin: 28px 0 8px; }

.guide p, .guide li { font-size: .95rem; line-height: 1.74; color: var(--muted); }
.guide p { margin: 0 0 15px; }
.guide ul, .guide ol { margin: 0 0 17px; padding-left: 1.35em; }
.guide li { margin-bottom: 8px; }
.guide li::marker { color: var(--faint); }
.guide strong { color: var(--ink); font-weight: 600; }
.guide a { color: var(--acc); }
.guide a:hover { text-decoration: underline; }
.guide code {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: .86em;
  color: var(--acc-2);
  background: var(--glass-3);
  border: 1px solid var(--edge-2);
  border-radius: 3px;
  padding: 1px 5px;
}

/* Le chapô : la thèse de la page en deux phrases, avant le sommaire. Plus
   grand que le corps, jamais plus de trois lignes. */
.guide .chapo {
  font-size: 1.06rem;
  line-height: 1.66;
  color: var(--ink);
  margin-bottom: 26px;
}

/* Sommaire — repris de .tsommaire des pages légales, en pastilles. */
.guide__som { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.guide__som a {
  font-size: .8rem;
  padding: 5px 11px;
  border-radius: 980px;
  border: 1px solid var(--edge-2);
  color: var(--muted);
}
.guide__som a:hover { border-color: var(--acc); color: var(--acc); text-decoration: none; }

/* ── LE CHIFFRE CLÉ ───────────────────────────────────────────────
   Un encart par page au maximum. Il porte la mesure que le lecteur doit
   retenir s'il ne retient rien d'autre. Au-delà d'un encart par page, plus
   rien ne ressort. */
.cle {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin: 26px 0;
  padding: 18px 20px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent);
  background: var(--acc-soft);
}
.cle b {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 1.72rem;
  line-height: 1;
  color: var(--acc-2);
  font-weight: 700;
  flex: none;
}
.cle p { margin: 0; font-size: .92rem; color: var(--ink); line-height: 1.62; }
@media (max-width: 520px) { .cle { flex-direction: column; gap: 10px; } }

/* ── TABLEAU DE MESURES ───────────────────────────────────────────
   Les colonnes de chiffres sont en Space Mono et alignées à droite : on lit
   une colonne de pourcentages en la balayant verticalement, ce qui suppose
   que les unités soient l'une sous l'autre. */
.gtable { margin: 22px 0; border: 1px solid var(--edge-2); border-radius: 8px; overflow: hidden; }
.gtable table { margin: 0; }
.gtable td.n, .gtable th.n {
  font-family: 'Space Mono', ui-monospace, monospace;
  text-align: right;
  white-space: nowrap;
}
.gtable td.n { color: var(--ink); }
.gtable caption {
  caption-side: bottom;
  text-align: left;
  padding: 10px 14px;
  font-size: .79rem;
  color: var(--faint);
  line-height: 1.55;
  border-top: 1px solid var(--edge-2);
}
/* La ligne qui porte la démonstration. Jamais plus d'une par tableau. */
.gtable tr.pique td { background: var(--bad-soft); }
.gtable tr.pique td.n { color: var(--bad); font-weight: 700; }
.gtable tr.bonne td.n { color: var(--ok); font-weight: 700; }

/* Sur un téléphone, un tableau de quatre colonnes chiffrées ne rentre pas.
   Il défile dans son propre cadre plutôt que de pousser la page de côté —
   c'est la seule zone de défilement horizontal tolérée sur le site. */
.gtable { overflow-x: auto; }
/* Le plancher empêche l'écrasement des colonnes, il n'impose pas le
   défilement : sur 390 px il reste 342 px utiles, donc un tableau à trois
   colonnes tient dans l'écran et seuls ceux à quatre défilent. Un plancher à
   30rem faisait défiler les deux. */
.gtable table { min-width: 21rem; }

/* ── CE QUI EST DIT / CE QUI NE L'EST PAS ─────────────────────────
   Deux colonnes de listes. Sert aux pages où la moitié de la valeur tient
   dans ce qu'on refuse d'affirmer. */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
@media (max-width: 640px) { .duo { grid-template-columns: 1fr; } }
.duo > div { padding: 16px 18px; border-radius: 8px; border: 1px solid var(--edge-2); background: var(--glass-3); }
.duo h4 {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 11px;
  font-weight: 400;
}
.duo--ok h4 { color: var(--ok); }
.duo--non h4 { color: var(--bad); }
.duo ul { margin: 0; padding-left: 1.15em; }
.duo li { font-size: .89rem; line-height: 1.6; margin-bottom: 8px; }
.duo li:last-child { margin-bottom: 0; }

/* Encart de nuance : ce qui est vrai mais mérite d'être borné. Repris du
   `.avert` des pages légales, avec le liseré d'accent. */
.guide .note {
  margin: 24px 0;
  padding: 15px 18px;
  border-left: 3px solid color-mix(in srgb, var(--acc) 55%, transparent);
  background: var(--glass-3);
  border-radius: 0 6px 6px 0;
}
.guide .note p { margin: 0; font-size: .91rem; }
.guide .note p + p { margin-top: 10px; }

/* Une étape numérotée — l'anatomie d'un dossier, les blocs d'une fiche. */
.pas { display: flex; gap: 15px; margin: 0 0 20px; }
.pas > .n {
  flex: none;
  width: 27px; height: 27px;
  border-radius: 5px;
  display: grid; place-items: center;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: .74rem; font-weight: 700; color: #fff;
  background: linear-gradient(150deg, var(--acc-2), var(--acc));
  box-shadow: 0 4px 12px -5px var(--acc);
}
.pas > div { min-width: 0; }
.pas h3 { margin: 3px 0 6px; }
.pas p:last-child { margin-bottom: 0; }

/* ── PIED DE PAGE DU GUIDE ────────────────────────────────────────
   Deux ou trois pages voisines. C'est le maillage interne : chaque guide
   doit mener aux autres, sinon la section n'existe que dans le plan du site. */
.suite { margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--edge-2); }
.suite h4 {
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); font-weight: 400; margin: 0 0 14px;
}
.suite__l { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
@media (max-width: 640px) { .suite__l { grid-template-columns: 1fr; } }

/* ── CARTES DE GUIDE (index + pages suivantes) ────────────────────
   Même contrat de survol que les cartes du catalogue : peinture uniquement,
   jamais de transform (voir la note dans app.css). */
.gcard {
  display: block;
  padding: 17px 19px;
  border-radius: 8px;
  border: 1px solid var(--edge-2);
  background: var(--glass);
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.gcard:hover {
  border-color: color-mix(in srgb, var(--acc) 45%, transparent);
  background: var(--glass-2);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc) 14%, transparent);
  text-decoration: none;
}
.gcard b {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.16rem;
  text-transform: uppercase;
  line-height: 1.12;
  margin-bottom: 7px;
  color: var(--ink);
}
.gcard:hover b { color: var(--acc-2); }
.gcard p { margin: 0; font-size: .86rem; line-height: 1.58; color: var(--muted); }
/* L'accroche chiffrée sous le titre : ce que la page apprend, en une mesure. */
.gcard .mes {
  display: inline-block;
  margin-top: 10px;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: .74rem;
  color: var(--acc-2);
}

/* L'index : les cartes en deux colonnes, et un intertitre par public. */
.glist { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 14px; }
@media (max-width: 720px) { .glist { grid-template-columns: 1fr; } }