/* Les pages qui n'ont pas de maquette : légales, téléchargement, 404.
 *
 * Elles reprennent le vocabulaire de la maquette de la fiche — le fil, le
 * hero, les blocs, les boutons — et cette feuille n'ajoute QUE ce qu'aucune
 * maquette ne porte : la prose longue d'une page de droit, ses listes de
 * définitions, et l'encadré des versions du téléchargement.
 *
 * Écrite dans les jetons du socle, jamais en valeurs brutes : le jour où la
 * marque change une couleur, elle change ici aussi.
 */

/* ——— La prose d'une page de droit ———
   Une mesure lisible, et rien d'autre. Une page qu'on lit d'un bout à l'autre
   n'a pas besoin de colonnes, de cartes ni d'illustrations : elle a besoin
   qu'on retrouve où l'on en était. */
.prose { max-width: 74ch; font-size: 15.5px; line-height: 1.75; color: var(--gris-chaud) }
.prose > * + * { margin-top: var(--e2) }
.prose h2 {
  margin-top: var(--e5); font-family: var(--f-titre); font-size: clamp(21px, 2.4vw, 26px);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.25; color: var(--craie);
}
.prose h2:first-child { margin-top: 0 }
.prose h3 {
  margin-top: var(--e4); font-size: 17px; font-weight: 650;
  letter-spacing: -.01em; color: var(--craie);
}
.prose b, .prose strong { color: var(--craie); font-weight: 650 }
.prose a { color: var(--bleu-glacier); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px }
.prose a:hover { color: var(--craie) }
.prose ul, .prose ol { padding-left: 1.3em }
.prose li + li { margin-top: 6px }
.prose code, .prose .mono { font-family: var(--f-mono); font-size: .92em;
  color: var(--craie); background: var(--panneau); border: 1px solid var(--filet);
  border-radius: 6px; padding: 1px 6px }

/* ——— Les listes de définitions ———
   « Éditeur / Pierre Marsanne » : deux colonnes tant que l'écran les tient,
   l'une sous l'autre ensuite. Le terme reste lisible quand il passe seul. */
.prose .kv { margin-top: var(--e3); display: grid; gap: 1px;
  background: var(--filet); border: 1px solid var(--filet);
  border-radius: var(--r-carte); overflow: hidden }
.prose .kv > div { display: grid; grid-template-columns: minmax(140px, 17ch) 1fr;
  gap: var(--e2); padding: 14px var(--e2); background: var(--panneau) }
.prose .kv dt { color: var(--gris-cendre); font-size: 13.5px }
.prose .kv dd { margin: 0; color: var(--craie) }
@media (max-width: 599px) {
  .prose .kv > div { grid-template-columns: 1fr; gap: 4px }
}

/* ——— L'encadré d'une remarque ——— */
.prose .note, .note {
  margin-top: var(--e3); padding: var(--e2) var(--e3);
  background: var(--panneau); border: 1px solid var(--filet);
  border-left: 3px solid var(--bleu-nexus); border-radius: var(--r-ctrl);
  font-size: 14.5px; line-height: 1.7;
}
.prose .note > * + * { margin-top: 10px }

/* La date de mise à jour : elle compte, et elle ne doit pas se lire comme une
   phrase de plus. */
.prose .maj { margin-top: var(--e5); padding-top: var(--e3);
  border-top: 1px solid var(--filet); font-size: 13.5px; color: var(--gris-fumee) }

/* ——— Le fil d'Ariane du catalogue ———
   La maquette du catalogue n'en a pas ; les trente-six fiches, si, et leur
   règle vit dans la feuille portée de LEUR maquette. Le catalogue est la page
   qu'on atteint depuis une fiche : sans fil, c'est la seule page du site où
   l'on ne sait plus d'où l'on vient. Mêmes valeurs que `.fil`, à l'identique —
   deux fils d'aspect différent seraient pires qu'un seul absent. */
.fil-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--gris-fumee); margin-bottom: var(--e3) }
.fil-ariane a { color: var(--gris-chaud) }
.fil-ariane a:hover { color: var(--bleu-glacier) }

/* ——— La page de téléchargement ———
   Son balisage est écrit à la main : aucune maquette ne la porte. Les cartes
   reprennent la mesure et les jetons des blocs de la fiche, pour qu'on ne voie
   pas la couture entre une page portée et celle-ci. */
.tel-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: var(--e3); font-size: 13.5px; color: var(--gris-cendre) }
.tel-note .dot { width: 7px; height: 7px; border-radius: 999px;
  background: var(--vert-valide); flex: 0 0 auto }
.tel-note .mono { font-family: var(--f-mono); color: var(--craie) }

.tel-panneau { margin-top: var(--e4); padding: var(--e3);
  background: var(--panneau); border: 1px solid var(--filet);
  border-radius: var(--r-carte) }
.tel-panneau > h3 { font-size: 17px; font-weight: 700; letter-spacing: -.01em;
  color: var(--craie) }
.tel-intro { margin-top: 6px; font-size: 14.5px; line-height: 1.6;
  color: var(--gris-chaud); max-width: 62ch }

/* Deux colonnes quand l'écran les tient, une seule ensuite. `auto-fit` plutôt
   qu'un nombre : à trois cartes sur une rangée de quatre, la dernière ne reste
   pas seule à mi-largeur. */
.tel-grille { margin-top: var(--e4); display: grid; gap: var(--e2);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) }
.tel-grille--deux { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)) }
/* LE `min(…, 100%)` N'EST PAS UNE PRECAUTION, C'EST LA REGLE DE `minmax`.
   Quand la borne basse depasse la largeur disponible, la piste la GARDE et la
   grille deborde : mesure dans Chromium a 375 px, la carte sortait de 25 px du
   bloc qui coupe, donc sans barre de defilement et sans que rien ne le dise.
   La page des prix et celle d'A propos l'ont montre ; `/telecharger/` portait le
   meme defaut depuis le 30 septembre 2026, invisible parce que personne n'avait
   regarde ses deux colonnes sous 380 px. */
.tel-carte { padding: var(--e3); background: var(--panneau);
  border: 1px solid var(--filet); border-radius: var(--r-carte) }
.tel-carte h3 { font-size: 15.5px; font-weight: 650; letter-spacing: -.01em;
  color: var(--craie) }
.tel-carte p { margin-top: 8px; font-size: 14px; line-height: 1.65;
  color: var(--gris-chaud) }
.tel-carte .mono { font-family: var(--f-mono); font-size: .92em; color: var(--craie) }

/* Les gestes numérotés du premier lancement : on les SUIT, donc le numéro
   compte autant que le texte. */
.tel-etapes { margin-top: var(--e2); padding-left: 0; list-style: none;
  counter-reset: etape }
.tel-etapes li { counter-increment: etape; position: relative;
  padding-left: 34px; font-size: 14px; line-height: 1.65; color: var(--gris-chaud) }
.tel-etapes li + li { margin-top: 12px }
.tel-etapes li::before { content: counter(etape); position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; display: grid; place-items: center;
  background: var(--bleu-nuit); color: var(--bleu-glacier);
  border-radius: 999px; font-size: 12px; font-weight: 700 }
.tel-etapes strong { color: var(--craie); font-weight: 650 }

/* ——— QUESTIONS : `<details>`, donc ouvertes sans script ———
   RECOPIÉES de `page-cas-usage.css`, où elles sont nées avec la maquette des
   cas d'usage. Les pages écrites ici (Prix, À propos) posent la même FAQ, et
   `faq_de()` la déclare en données structurées : sans ces règles, le bloc
   s'affiche en liste système, avec le triangle du navigateur. Charger la feuille
   des cas d'usage en entier pour treize règles ferait venir quatre-vingts
   règles `cu-*` et `cas-*` qui n'ont rien à faire là. */
.faq { border-top: 1.5px solid var(--filet) }
.faq details { border-bottom: 1.5px solid var(--filet) }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  gap: var(--e3); padding: 22px 0; font-size: 18px; font-weight: 700; letter-spacing: -.02em; transition: color .2s var(--ease) }
.faq summary::-webkit-details-marker { display: none }
.faq summary:hover { color: var(--bleu-glacier) }
.faq summary svg { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: var(--gris-cendre); stroke-width: 2;
  stroke-linecap: round; transition: rotate .25s var(--ease) }
.faq details[open] summary svg { rotate: 45deg; stroke: var(--bleu-glacier) }
.faq details p { padding: 0 0 24px; max-width: 74ch; font-size: 15.5px; line-height: 1.65; color: var(--gris-chaud) }
.faq details p b { color: var(--craie); font-weight: 600 }

/* ——— UNE CARTE QUI EST UN LIEN LE DIT, ET LE MOT SUFFIT ———
   Les pages de cas d'usage posent deux grilles de cartes CLIQUABLES : les
   fonctionnalités sur lesquelles le travail s'appuie, et les cas voisins de la
   même famille. `a { color: inherit; text-decoration: none }` de la feuille de
   l'accueil les rend indiscernables d'une carte inerte : rien ne dit qu'on peut
   cliquer, et le pointeur seul ne se voit pas sur un écran tactile. Le titre
   prend donc la couleur d'accent, et une flèche paraît au survol — jamais la
   couleur seule. */
a.tel-carte { display: block; transition: border-color .2s var(--ease), background .2s var(--ease) }
a.tel-carte h3 { color: var(--bleu-glacier) }
a.tel-carte h3::after { content: " ↗"; opacity: 0; transition: opacity .2s var(--ease) }
a.tel-carte:hover, a.tel-carte:focus-visible { border-color: var(--bleu-glacier); background: var(--releve) }
a.tel-carte:hover h3::after, a.tel-carte:focus-visible h3::after { opacity: 1 }

/* ——— LES ÉTIQUETTES DE TECHNOLOGIE ———
   RECOPIÉES de `page-cas-usage.css`, où elles sont nées avec la maquette. C'est
   la SEULE règle que les cinquante-sept pages de cas lui empruntaient : charger
   trente kilo-octets de feuille BLOQUANTE sur chacune, pour deux déclarations,
   était un coût qu'on ne voyait pas — mesuré, c'était 30 204 octets sur 101 Ko
   de chemin critique. `margin-top:auto` vient de la carte d'origine, où
   l'étiquette est collée en bas ; sous un chapeau elle ne gêne pas. */
.etiq { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px }
.etiq span { padding: 3px 8px; border-radius: 6px; border: 1px solid var(--filet); background: var(--noir-chaud);
  font-family: var(--f-mono); font-size: 11px; color: var(--gris-chaud) }