/* ==========================================================================
   sortir-a-merignac.fr — identité « l'objet éditorial »
   ---------------------------------------------------------------------------
   Ce guide n'est pas un blog : c'est un document de référence, relevé à une
   date, sourcé ligne par ligne. Il est donc mis en pages comme un imprimé et
   non comme une application :
     · une GRILLE, des FILETS et du BLANC tiennent la page — pas des boîtes
       blanches à coins arrondis posées sur un fond gris ;
     · un titrage à fort contraste (Playfair Display, didone) contre un texte
       neutre (Inter) : la hiérarchie se voit avant d'être lue ;
     · des sections NUMÉROTÉES (01, 02, 03) : on sait toujours où on est ;
     · la vérification est un ÉLÉMENT DE DESSIN, pas une note de bas de page —
       cachet de relevé sur la une, crédit de source réglé sous chaque fiche ;
     · deux couleurs d'encre, comme une presse à deux passages : l'encre bleu
       nuit (texte, liens) et le vermillon (rubriques, numéros, cachet).
   Rigueur ≠ austérité : le vermillon, le lettrine, le cachet gravé et le fond
   papier chaud sont là pour que ça respire.
   Thème clair (« édition du jour », papier) ET sombre (« édition du soir »).
   Tous les couples texte/fond sont recalculés à chaque build (build.py,
   vérification 10) : sous 4,5:1, le build échoue.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* --- thème clair : papier --- */
  --bg:            #f4f0e6;
  --surface:       #fffdf7;
  --surface-2:     #e9e2d3;
  --border:        #d6cdb9;
  --border-strong: #a89d85;
  --text:          #16181c;   /* 15.92:1 sur --bg */
  --muted:         #54514a;   /* 6.96:1  sur --bg */
  --accent:        #1d3d5e;   /* 9.85:1  sur --bg — encre bleu nuit */
  --accent-strong: #132b44;
  --accent-ink:    #ffffff;   /* 10.75:1 sur --accent */
  --accent-soft:   #dde5ed;
  --amber:         #a03412;   /* 6.16:1  sur --bg — vermillon, 2e passage */
  --amber-soft:    #f8e6dc;
  --danger:        #9a1f16;   /* 7.55:1  sur --bg */
  --danger-soft:   #f9e3e0;
  --shadow-sm:     none;
  --shadow:        none;
  /* Crépuscule : la seule couleur non typographique du site. Elle ne porte
     jamais de texte — c'est le ciel de fin de journée derrière la lisière. */
  --dusk-1:        #fffdf7;
  --dusk-2:        #f6e3c4;
  --dusk-3:        #e7c9a4;   /* la bande chaude, juste au-dessus des cimes */
  --rule-open:     #16181c;   /* le filet de tête d'une fiche aux horaires publiés */
  --trame:         .3;        /* la trame gravée du fond de manchette */
  --ridge:         #26332a;
  --ridge-loin:    #7d8b7c;   /* la lisière lointaine, deux tons en arrière */

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --display: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --max-w: 1080px;
  --radius: 0;
  --gutter: 1.15rem;
  /* UNE seule mesure de texte pour tout le corps d'une fiche : le paragraphe,
     l'adresse, la table d'horaires et le crédit de source tombent au même bord
     droit. En REM, pas en ch : « ch » se mesure sur le corps de l'élément, et
     le crédit de source (0,78 rem) traçait un filet un quart plus court que la
     table d'horaires posée juste au-dessus. */
  --mesure-texte: 45rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* --- thème sombre : l'édition du soir --- */
    --bg:            #131417;
    --surface:       #1a1c20;
    --surface-2:     #24262b;
    --border:        #343740;
    --border-strong: #4f5460;
    --text:          #ebe7de;   /* 15.31:1 sur --bg */
    --muted:         #a9a49a;   /* 7.42:1  sur --bg */
    --accent:        #93b9e0;   /* 9.69:1  sur --bg */
    --accent-strong: #b7d2f0;
    --accent-ink:    #0a1119;   /* 10.99:1 sur --accent */
    --accent-soft:   #1b2632;
    --amber:         #f0a077;   /* 9.44:1  sur --bg */
    --amber-soft:    #2b1a12;
    --danger:        #f3928b;   /* 8.42:1  sur --bg */
    --danger-soft:   #2d1a17;
    --shadow-sm:     none;
    --shadow:        none;
    /* Le soir, la lisière se lit à contre-jour : le ciel doit être PLUS clair
       que la page, sinon les pins disparaissent (vu à la capture). */
    --dusk-1:        #1a1c20;
    --dusk-2:        #2f3b53;
    --dusk-3:        #5b4a55;   /* le rose sale d'un ciel de 22h en août */
    /* Pas --text ici : dix-sept filets de 2 px en blanc cassé seraient, de nuit,
       l'élément le plus lumineux de la page. */
    --rule-open:     #8d8880;
    /* De nuit, la même trame ne se lit plus comme un fond de titre imprimé mais
       comme un balayage d'écran : on l'atténue de moitié. */
    --trame:         .16;
    --ridge:         #080f0d;
    --ridge-loin:    #3c4a56;
  }
}

html { font-size: 17px; scroll-behavior: smooth; }
/* L'en-tête collant fait 2 bandes (bandeau-titre + barre de rubriques). Sa
   hauteur RÉELLE, mesurée : 139 px à 360, 125 de 390 à 640, 137-143 jusqu'à 879,
   99 au-delà (la barre passe alors sur une seule ligne). Une ancre doit atterrir
   SOUS lui, sinon le titre visé se cache derrière la manchette. */
[id] { scroll-margin-top: 148px; }
@media (min-width: 390px) { [id] { scroll-margin-top: 134px; } }
@media (min-width: 660px) { [id] { scroll-margin-top: 152px; } }
@media (min-width: 880px) { [id] { scroll-margin-top: 110px; } }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: underline; text-underline-offset: .18em;
    text-decoration-thickness: .06em; text-decoration-color: var(--border-strong); }
a:hover { text-decoration-thickness: .12em; text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 3px;
}

/* ---------- titrage : didone à fort contraste ---------- */
h1, h2, h3 {
  font-family: var(--display); color: var(--text);
  line-height: 1.1; letter-spacing: -.005em; font-weight: 700;
  /* Un titre didone se juge à sa silhouette : « Trois choses à savoir avant de /
     sortir ici » laissait deux mots seuls en deuxième ligne. */
  text-wrap: balance;
}
p, li, figcaption { text-wrap: pretty; }
h1 { font-size: clamp(1.98rem, 6.4vw, 3.5rem); line-height: 1.02; letter-spacing: -.015em; }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.05rem); }
h3 { font-size: 1.28rem; line-height: 1.15; }
h4 { font-family: var(--font); font-size: .95rem; font-weight: 700; letter-spacing: 0;
     line-height: 1.2; color: var(--text); }
p + p, p + ul, p + ol, ul + p, ol + p, p + .fiche, .fiche + p { margin-top: .9rem; }
ul, ol { padding-left: 1.2rem; }
li + li { margin-top: .4rem; }
/* La puce ronde du navigateur était le seul signe non dessiné du site : encarts,
   réponse courte et listes simples portent tous un filet court à l'encre
   vermillon. Seules les pages légales avaient gardé les puces rondes — c'est
   exactement le genre d'oubli qui trahit un gabarit. */
.legal ul { list-style: none; padding-left: 0; }
.legal ul > li { position: relative; padding-left: 1.35rem; }
.legal ul > li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: .72rem; height: 1px; background: var(--amber);
}
strong { font-weight: 650; }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
/* Page de contenu : une COLONNE de 920 px, pas toute la largeur de l'accueil.
   Un annuaire imprimé a des marges ; sans elles, les fiches flottent dans le vide
   et les lignes de « la réponse courte » atteignent 110 signes. */
.mesure { max-width: 920px; }
.narrow { max-width: 760px; }

/* ---------- rubrique : le micro-libellé de l'imprimé ---------- */
.kicker {
  display: inline-block; font-family: var(--font);
  font-size: .68rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--amber);
}

/* ==========================================================================
   BANDEAU-TITRE + BARRE DE RUBRIQUES
   Deux bandes, comme la manchette d'un quotidien. Sur 390 px la barre de
   rubriques devient une GRILLE 3×2 réglée de filets : la nav ne « casse » plus
   sur deux lignes, elle est composée sur deux lignes.
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--surface);
  border-bottom: 2px solid var(--text); }
.masthead { border-bottom: 1px solid var(--border); }
.masthead-inner { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 54px; }
.logo { display: inline-flex; align-items: baseline; gap: .55rem;
  color: var(--text); text-decoration: none; }
.logo-mark {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem; line-height: 1;
  width: 27px; height: 27px; flex: 0 0 27px; align-self: center;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--surface); background: var(--text);
}
.logo-text { font-family: var(--display); font-size: 1.42rem; font-weight: 700;
  line-height: 1; letter-spacing: -.012em; }
.dateline { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums;
  text-align: right; }
.dateline b { color: var(--amber); font-weight: 700; }

.site-nav { display: grid; grid-template-columns: repeat(3, 1fr); }
.site-nav a {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: .48rem .3rem; min-height: 40px;
  font-size: .69rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  border-left: 1px solid var(--border); border-top: 1px solid var(--border);
}
.site-nav a:nth-child(3n+1) { border-left: 0; }
.site-nav a:nth-child(-n+3) { border-top: 0; }
.site-nav a:hover { color: var(--amber); background: var(--surface-2); }
.site-nav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -3px 0 var(--amber); }

@media (min-width: 720px) {
  .masthead-inner { min-height: 60px; }
  .logo-text { font-size: 1.6rem; }
}
/* 880 px, pas 720 : entre les deux, six colonnes font 128 px et « Venir, se
   garer » se casse en deux lignes DANS SA CASE — la barre grandit d'un cran et
   la rubrique active a l'air en panne. La grille 3×2 tient jusque-là. */
@media (min-width: 880px) {
  .site-nav { grid-template-columns: repeat(6, 1fr); }
  .site-nav a { border-top: 0; min-height: 36px; }
  .site-nav a:nth-child(3n+1) { border-left: 1px solid var(--border); }
  .site-nav a:first-child { border-left: 0; }
}

/* ---------- fil d'ariane ---------- */
.breadcrumb { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--muted); padding: 1.1rem 0 0; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--amber); text-decoration: underline; }
.breadcrumb .sep { margin: 0 .5rem; color: var(--border-strong); }

/* ==========================================================================
   LA UNE
   ========================================================================== */
.hero { background: var(--surface); border-bottom: 2px solid var(--text);
  padding: 2.4rem 0 0; position: relative; overflow: hidden; }
/* Trame gravée : des filets fins, comme un fond de titre imprimé. Aucune image,
   aucune requête — c'est un dégradé répété. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg,
    var(--border) 0 1px, transparent 1px 7px);
  opacity: var(--trame);
  -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 55%);
          mask-image: linear-gradient(180deg, #000 0, transparent 55%);
}
.hero > .container { position: relative; }
/* Sur mobile l'ordre est titre → cachet → texte : on voit la promesse dessinée
   AVANT d'entrer dans le pavé. Sur écran large, le cachet passe en colonne de
   droite et le texte reste sous le titre. */
.hero-grid { display: grid; gap: 1.6rem; align-items: start; }
.hero-inner { max-width: 62ch; }
.hero h1 { max-width: 17ch; }
/* La rubrique tire un filet jusqu'au bord de la colonne : c'est la marque de
   niveau la plus haute du site, identique sur la une et sur les pages. */
.hero .kicker, .page-hero .kicker { display: flex; align-items: center; gap: .7rem; }
.hero .kicker::after, .page-hero .kicker::after {
  content: ""; flex: 1; height: 1px; background: var(--border-strong); }
.hero h1 { margin-top: .7rem; }
.hero h1 em { font-style: italic; font-weight: 400; }
.lede { font-size: 1.06rem; color: var(--text); margin-top: 1.1rem; max-width: 62ch; }
.hero-grid > .lede { border-top: 1px solid var(--border); padding-top: 1.1rem; margin-top: 0; }
/* La lettrine ne sert plus la une : le chapô y fait trois lignes, une capitale
   de 3 rem par-dessus faisait ornement pour l'ornement. Elle est réservée au
   paragraphe de méthode, qui est long et qui ouvre une section. */
/* Pas de filet ici : c'est le bloc suivant (le chapô « la réponse courte », filet
   de 3 px) qui ouvre la page. Deux filets à 50 px d'écart faisaient accident. */
.page-hero { padding: 1.6rem 0 2.1rem; margin-bottom: 0; }
.page-hero h1 { margin-top: .55rem; max-width: 20ch; }
.page-hero .lede { color: var(--muted); }
.updated { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-top: .9rem; font-variant-numeric: tabular-nums; }

/* La une d'une page intérieure porte, à droite, la gravure de sa rubrique en
   filigrane : sans elle, la moitié droite du bandeau restait vide alors que
   l'accueil y pose son cachet. Même vocabulaire, même encre. */
.page-une .container { position: relative; }
.page-vignette { display: none; }
@media (min-width: 900px) {
  .hero { padding: 3.2rem 0 0; }
  .page-vignette {
    display: block; position: absolute; right: 0; top: 2.4rem;
    width: 150px; height: 150px; color: var(--border-strong); opacity: .55;
    pointer-events: none;
  }
  .page-vignette svg { width: 100%; height: 100%; display: block; }
  .page-une .page-hero { padding-right: 190px; }
  .page-une .narrow .page-hero { padding-right: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) 244px; gap: 1.4rem 3rem;
    grid-template-areas: "titre cachet" "texte cachet"; align-items: start; }
  .hero-inner { grid-area: titre; }
  .hero > .container > .hero-grid > .lede { grid-area: texte; margin-top: 0; }
  .stamp { grid-area: cachet; }
  .page-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.05rem); }
}

/* ---------- le cachet de relevé : la vérification, dessinée ---------- */
.stamp { justify-self: center; text-align: center; }
.stamp svg { width: 190px; height: 190px; display: block; margin: 0 auto;
  color: var(--amber); transform: rotate(-6deg); }
.stamp .s-arc { font-family: var(--font); font-size: 12.4px; font-weight: 700;
  letter-spacing: 2.9px; fill: currentColor; }
.stamp .s-lab { font-family: var(--font); font-size: 8.6px; font-weight: 700;
  letter-spacing: 2.6px; }
.stamp .s-date { font-family: var(--display); font-size: 23.5px; font-weight: 700; }
.stamp .s-year { font-family: var(--font); font-size: 12px; font-weight: 700;
  letter-spacing: 3.4px; }
.stamp figcaption { margin-top: .8rem; font-size: .66rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); font-weight: 600; line-height: 1.5; }
@media (max-width: 899px) {
  .stamp { justify-self: start; display: flex; align-items: center; gap: 1rem;
    text-align: left; border-top: 1px solid var(--border); padding-top: 1.2rem; width: 100%; }
  .stamp svg { width: 104px; height: 104px; flex: 0 0 104px; }
  .stamp figcaption { margin-top: 0; }
}

/* ==========================================================================
   SECTIONS NUMÉROTÉES
   ========================================================================== */
/* Le compteur porte sur les h2 ENFANTS DIRECTS d'une section, pas sur les
   sections : le bloc « la réponse courte » a son propre h2, imbriqué, qui ne doit
   pas consommer un numéro — sinon le lecteur voit une page qui commence à 02. */
main { counter-reset: section; }
.section { padding: 2.6rem 0; border-top: 1px solid var(--border-strong); }
.section > h2 { counter-increment: section; }
.section:first-of-type { border-top: 0; padding-top: 1.6rem; }
/* « La réponse courte » se ferme déjà sur un filet : la section suivante n'en
   retrace pas un quarante pixels plus bas. Deux filets parallèles si proches se
   lisent comme un raté d'impression, pas comme une articulation. */
.section:has(> .answer) + .section { border-top: 0; }
.page-hero + .section { border-top: 0; padding-top: 0; }
.section > h2 { position: relative; margin-bottom: .5rem; max-width: 22ch; }
.section > h2::before {
  content: counter(section, decimal-leading-zero);
  display: block; font-family: var(--font); font-size: .72rem; font-weight: 700;
  letter-spacing: .2em; color: var(--amber); margin-bottom: .55rem;
}
.section-intro { color: var(--muted); margin-bottom: 1.6rem;
  max-width: var(--mesure-texte); font-size: 1.02rem; }
/* Un paragraphe posé directement dans une section n'avait pas de mesure et
   courait jusqu'au filet : sur une page de contenu, il finissait 100 px à droite
   des encarts et des fiches. Un texte, un seul bord droit. */
.section > p, .section > ol, .legal > p, .legal > ul, .legal > ol {
  max-width: var(--mesure-texte); }
@media (min-width: 1180px) {
  .section > h2::before {
    position: absolute; left: -4.6rem; top: .28em; margin: 0;
    font-family: var(--display); font-size: 1.7rem; font-weight: 400;
    letter-spacing: 0; color: var(--border-strong);
  }
  .section > h2 { margin-bottom: .6rem; }
}

/* ---------- « la réponse courte » : le chapô encadré ---------- */
.answer { background: transparent; border: 0;
  border-top: 3px solid var(--text); border-bottom: 1px solid var(--border-strong);
  padding: 1.15rem 0 1.35rem; }
.answer h2 { font-family: var(--font); font-size: .7rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--amber); margin-bottom: .75rem; font-weight: 700; }
.answer h2::before { display: none; }
.answer p, .answer li { font-size: 1.08rem; line-height: 1.55;
  max-width: var(--mesure-texte); }
.answer ul { margin: 0; padding-left: 0; list-style: none; }
.answer li { padding-left: 1.5rem; position: relative; }
.answer li + li { margin-top: .7rem; padding-top: .7rem; border-top: 1px dotted var(--border); }
.answer li::before { content: ""; position: absolute; left: 0; top: .62em;
  width: .7rem; height: 1px; background: var(--amber); }
.answer li + li::before { top: 1.32em; }

/* ==========================================================================
   FICHE LIEU — une entrée d'annuaire imprimé, pas une carte à ombre
   ========================================================================== */
.fiche { background: transparent; border: 0; border-top: 2px solid var(--border-strong);
  padding: 1.35rem 0 1.6rem; }
.fiche + .fiche { margin-top: 0; }
/* Le filet de tête d'une fiche est une RÉGLURE, pas un surligneur : en thème
   sombre, --accent est un bleu ciel pâle et dix-sept filets de 2 px devenaient
   l'élément le plus criard de la page. L'ouverture se marque à l'encre du texte,
   la fermeture tardive au vermillon. */
.fiche--late { border-top-color: var(--amber); }
.fiche--open { border-top-color: var(--rule-open); }
/* La tête de fiche tient dans la MÊME mesure que son corps : sans cela les
   mentions se calaient 150 px plus à droite que la dernière heure, et la fiche
   avait deux bords droits. */
.fiche-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem .9rem;
  max-width: var(--mesure-texte); }
.fiche h3 { margin: 0; flex: 1 1 auto; min-width: 12ch; }
.fiche .addr {
  font-size: .9rem; color: var(--muted); margin-top: .5rem;
  max-width: var(--mesure-texte);
  font-variant-numeric: tabular-nums;
}
.fiche p { margin-top: .8rem; max-width: var(--mesure-texte); }
/* Les seules BOÎTES qui restaient dans un site tenu par des filets et du blanc,
   et le seul élément qui se cassait en escalier sur 390 px. Une mention d'annuaire
   se compose : petite capitale, filet dessous, jamais un cadre. */
.tag {
  font-size: .63rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  padding: 0 0 .16rem; border: 0; border-bottom: 1px solid var(--border-strong);
  background: transparent; color: var(--muted); white-space: nowrap;
}
/* Un tag long (un itinéraire de tram) ne doit PAS rester insécable : sur 390 px
   il pousse la page en débordement horizontal. Vérifié par capture. */
.tag--wrap { white-space: normal; }
.tag--late { color: var(--amber); border-bottom-color: var(--amber); }
.tag--open { color: var(--accent); border-bottom-color: var(--accent); }
.tag--closed { color: var(--danger); border-bottom-color: var(--danger); }

/* ---------- horaires : la donnée qu'on vient chercher ----------
   Filets de conduite pointillés entre le jour et l'heure, chiffres tabulaires,
   heure en encre pleine. C'est la seule zone où la lisibilité prime sur tout. */
.hours { list-style: none; padding: 0; margin: 1.15rem 0 0;
  max-width: var(--mesure-texte);
  border-top: 1px solid var(--border-strong); font-variant-numeric: tabular-nums; }
/* La conduite pointillée est un filet posé DERRIÈRE la ligne, que les deux
   étiquettes masquent avec la couleur du papier. Surtout pas un flex sur .d :
   le <sup> de « 1er » deviendrait un élément flex et la date se disloquerait
   en « 1 · er · juin » — vu à la capture. */
.hours li { display: flex; justify-content: space-between; align-items: baseline;
  gap: .4rem; position: relative;
  padding: .45rem 0; border-bottom: 1px solid var(--border); margin: 0; font-size: .95rem; }
.hours li::before { content: ""; position: absolute; left: 0; right: 0; bottom: .5em;
  border-bottom: 1px dotted var(--border-strong); }
.hours .d { color: var(--muted); position: relative; background: var(--bg);
  padding-right: .55rem; }
.hours .h { font-weight: 650; white-space: nowrap; color: var(--text);
  position: relative; background: var(--bg); padding-left: .55rem;
  font-variant-numeric: tabular-nums; letter-spacing: .01em; }
/* La dernière ligne d'horaires ne referme pas la table : c'est le filet du
   crédit de source qui le fait, 18 px plus bas. Deux filets parallèles si
   proches se lisent comme un accident d'impression. */
.hours li:last-child { border-bottom: 0; }
.hours .h--closed { color: var(--danger); font-weight: 650; }
td.h--closed { color: var(--danger); font-weight: 650; }

/* ---------- crédit de source : la signature de ce guide ----------
   Filet, coche dessinée, casse haute espacée. Traité comme un élément de
   dessin — c'est ce qui distingue ce guide d'un annuaire recopié. */
/* Surtout PAS de flex ici : la ligne de source contient des liens longs et
   insécables (un nom de domaine), et un élément flex ne descend pas sous sa
   largeur de min-content — la page débordait de 99 px sur 390 px. La coche est
   donc posée en absolu dans une gouttière. */
.source-line {
  position: relative; margin-top: 1.15rem; padding: .6rem 0 0 1.55rem;
  border-top: 1px solid var(--border);
  font-size: .78rem; line-height: 1.5; color: var(--muted);
  max-width: var(--mesure-texte);
  overflow-wrap: anywhere;
}
.source-line::before {
  content: ""; position: absolute; left: 0; top: .82rem;
  width: .85rem; height: .85rem;
  background-color: var(--amber);
  -webkit-mask: var(--glyph-check) no-repeat center / contain;
          mask: var(--glyph-check) no-repeat center / contain;
}
.source-line a { color: var(--muted); text-decoration-color: var(--border-strong); }
.source-line a:hover { color: var(--amber); }
:root {
  --glyph-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 13.2 C5 14 7.2 16 9 19.4 C12 12 16.4 6.6 21.6 3.4' fill='none' stroke='%23000' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- encarts ---------- */
/* Le dernier rectangle plein d'un site tenu par des filets : l'encart neutre
   était une boîte blanche sur du papier crème. Il garde sa forte marque de
   gauche et perd son aplat — les encarts TEINTÉS, eux, gardent leur fond, parce
   que chez eux la teinte est le signal. */
.callout { border: 1px solid var(--border); border-left: 4px solid var(--accent);
  background: transparent; padding: 1.1rem 1.2rem; margin: 1.5rem 0;
  /* Un encart qui court sur 1080 px donne des lignes de 110 signes : on lit une
     ligne sur deux. Il se cale sur la mesure du corps de texte. */
  max-width: var(--mesure-texte); }
.callout h3 { font-family: var(--font); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 700; color: var(--accent); margin-bottom: .55rem; }
.callout--warn { border-left-color: var(--amber); background: var(--amber-soft); }
.callout--warn h3 { color: var(--amber); }
.callout--stop { border-left-color: var(--danger); background: var(--danger-soft); }
.callout--stop h3 { color: var(--danger); }
.callout ul { padding-left: 0; list-style: none; }
.callout li { padding-left: 1.2rem; position: relative; }
.callout li::before { content: ""; position: absolute; left: 0; top: .68em;
  width: .62rem; height: 1px; background: var(--amber); }

/* ==========================================================================
   SOMMAIRE (accueil) — une table de matières réglée, pas six rectangles
   ========================================================================== */
.grid {
  display: grid; gap: 0; counter-reset: entry;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--border-strong);
  border-left: 1px solid var(--border);
}
/* Un sommaire de revue : DEUX colonnes, huit entrées, quatre rangées pleines.
   La table de matières se ferme au lieu de s'arrêter sur une case vide, et le
   titre de chaque entrée tient sur une ligne. Le nombre de colonnes est posé à
   la main, jamais en auto-fill : c'est le nombre d'entrées qui décide, sinon la
   grille laisse un trou en bas à droite (vu à la capture). */
@media (min-width: 660px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .grid--three { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 940px) {
  .grid--three { grid-template-columns: repeat(3, 1fr); }
}
/* Le numéro d'entrée ne pend plus dans une gouttière de 3,4 rem : il ouvre la
   ligne de rubrique, comme le folio d'un sommaire de revue. On gagne la largeur
   qu'il volait (décisif sur 390 px) et surtout on supprime la collision avec le
   numéro de section, qui vivait à 20 px de là dans exactement le même dessin. */
.card {
  display: flex; flex-direction: column; position: relative; counter-increment: entry;
  background: transparent; border: 0;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 1.3rem 1.4rem 1.35rem;
  color: var(--text); text-decoration: none;
  transition: background-color .15s;
}
.card > .kicker::before {
  content: counter(entry, decimal-leading-zero);
  margin-right: .62rem; color: var(--border-strong);
  font-variant-numeric: tabular-nums; letter-spacing: .1em;
}
a.card:hover { background: var(--surface); }
a.card:hover > .kicker::before { color: var(--amber); }
/* Les trois avertissements de l'accueil n'ont pas de rubrique : leur numéro
   prend la place de l'oeil-de-boeuf, au même corps et à la même encre. */
.grid--three .card::before {
  content: counter(entry, decimal-leading-zero);
  display: block; margin-bottom: .5rem;
  font-family: var(--font); font-size: .68rem; font-weight: 700; letter-spacing: .18em;
  color: var(--border-strong); font-variant-numeric: tabular-nums;
}
/* balance équilibre le NOMBRE DE SIGNES et coupait « Luchey-Halde » sur son
   propre trait d'union. pretty ne fait que refuser la ligne veuve : c'est ce
   qu'on veut sur un titre court. */
.card h3 { font-size: 1.24rem; margin-top: .3rem; max-width: 26ch;
  text-wrap: pretty; }
.card p { font-size: .9rem; color: var(--muted); margin-top: .5rem; max-width: 46ch; }
.card .kicker { font-size: .62rem; }
/* « Lire → » est chassé en pied de carte : sans cela deux entrées voisines dont
   les titres ne font pas le même nombre de lignes affichaient leur appel à 26 px
   d'écart, et la rangée partait de travers. */
.card-go { display: inline-block; margin-top: auto; padding-top: .9rem;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
a.card:hover .card-go { text-decoration: underline; text-underline-offset: .3em; }
/* La vignette occupe le coin haut droit : le titre ne doit pas venir buter
   dessous. */
.card h3, .card > .kicker { padding-right: 3.6rem; }

/* ---------- listes ---------- */
.list-plain { list-style: none; padding-left: 0; }
.list-plain > li { position: relative; padding-left: 1.5rem; }
.list-plain > li::before { content: ""; position: absolute; left: 0; top: .72em;
  width: .8rem; height: 1px; background: var(--amber); }

/* ---------- tableau ---------- */
.table-wrap { overflow-x: auto; margin-top: 1.2rem;
  border-top: 2px solid var(--text); }
table { border-collapse: collapse; width: 100%; font-size: .92rem;
  font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: .62rem .8rem .62rem 0;
  border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: .66rem; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); background: transparent;
  border-bottom: 1px solid var(--border-strong); padding-top: .7rem; padding-bottom: .5rem; }

/* ==========================================================================
   L'OURS (pied de page)
   ========================================================================== */
.site-footer { background: var(--surface); border-top: 2px solid var(--text);
  margin-top: 3.4rem; padding: 2.6rem 0 1.6rem; }
.footer-grid { display: grid; gap: 1.9rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.footer-grid h4 { font-size: .66rem; text-transform: uppercase; letter-spacing: .18em;
  color: var(--amber); margin-bottom: .7rem; font-weight: 700;
  padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
.footer-grid ul { list-style: none; padding-left: 0; font-size: .9rem; }
.footer-grid li + li { margin-top: .42rem; }
/* Huit entrées en colonne face à trois : le pied de page se terminait sur un
   grand vide en bas à droite. La liste des pages se compose sur deux colonnes,
   et les trois blocs finissent à la même hauteur. */
@media (min-width: 720px) {
  .footer-grid > div:nth-child(2) ul { columns: 2; column-gap: 1.6rem; }
  .footer-grid > div:nth-child(2) li { break-inside: avoid; }
  .footer-grid > div:nth-child(2) li:first-child { margin-top: 0; }
}
.footer-grid p { font-size: .88rem; color: var(--muted); }
.footer-grid a { color: var(--text); text-decoration: none; }
.footer-grid a:hover { color: var(--amber); text-decoration: underline; }
/* Transparence éditoriale : discrète, mais réellement lisible (jamais en 11px
   gris sur gris). Le build refuse de passer si cette ligne disparaît. */
.footer-disclosure { margin-top: 2rem; padding: .9rem 1.1rem;
  background: transparent;
  border: 1px solid var(--border); border-left: 4px solid var(--border-strong);
  font-size: .86rem; color: var(--muted); max-width: 78ch; }
.footer-disclosure a { color: var(--muted); }
.footer-legal { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--border);
  font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; justify-content: space-between;
  font-variant-numeric: tabular-nums; }

/* ---------- divers ---------- */
.legal h2 { margin-top: 2rem; margin-bottom: .5rem; }
.legal h2:first-of-type { margin-top: 2.2rem; }
.legal h2::before { display: none; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: .6rem; z-index: 60; background: var(--surface);
  border: 2px solid var(--amber); padding: .5rem .8rem; }

@media (max-width: 640px) {
  :root { --gutter: 1.05rem; }
  /* La manchette tient sur UNE ligne à 390 px : c'est ce qui empêchait la barre
     de rubriques de ressembler à une navigation cassée. */
  .logo-text { font-size: 1.16rem; }
  .logo-mark { width: 23px; height: 23px; flex: 0 0 23px; font-size: .92rem; }
  .masthead-inner { min-height: 46px; }
  .dateline { font-size: .56rem; letter-spacing: .1em; line-height: 1.7; }
  .site-nav a { font-size: .63rem; letter-spacing: .06em; min-height: 38px;
    padding: .42rem .2rem; }
  /* Sur 390 px on lisait 1 100 px de une avant la première porte du sommaire.
     Le chapô descend d'un cran, le cachet se resserre, les entrées se densifient :
     la première porte remonte d'environ un écran et demi. */
  .hero-grid > .lede { font-size: .99rem; line-height: 1.52; }
  .hero-grid { gap: 1.15rem; }
  .card { padding: 1rem 1rem 1.15rem; }
  .card h3 { font-size: 1.14rem; }
  .card p { line-height: 1.5; margin-top: .4rem; }
  .card-go { padding-top: .7rem; }
  .card h3, .card > .kicker { padding-right: 3rem; }
  .hero { padding: 1.4rem 0 0; }
  .stamp { padding-top: 1rem; }
  .stamp svg { width: 92px; height: 92px; flex: 0 0 92px; }
  .section { padding: 2rem 0; }
  /* Sur 390 px la période et l'heure passent l'une sous l'autre : plus de place
     pour une conduite pointillée, donc on la retire (sinon un filet flotte après
     l'heure, vu à la capture). L'heure gagne en corps — c'est LA donnée. */
  .hours li { flex-direction: column; gap: .05rem; align-items: flex-start;
    padding: .5rem 0; }
  .hours li::before { display: none; }
  .hours .d { width: 100%; padding: 0; background: none; font-size: .88rem; }
  .hours .h { padding: 0; background: none; font-size: 1.05rem; }
  .footer-legal { flex-direction: column; gap: .35rem; }
  /* Le titre de fiche prend sa ligne : sans cela une mention partait se coller à
     droite du nom et les suivantes retombaient à gauche, en escalier. */
  .fiche-head h3 { flex: 1 1 100%; }
  /* 18,4 px pour « la réponse courte » : à 390 px, trois points en gras faisaient
     une pleine page. Le corps reste au-dessus de celui du texte courant. */
  .answer p, .answer li { font-size: 1.02rem; }
  /* Un titre d'encart en capitales espacées sur trois lignes a besoin d'air
     entre ses lignes, et de moins d'approche. */
  .callout h3 { letter-spacing: .1em; line-height: 1.45; }
  /* Sur une page intérieure, le chapô à 1,06 rem interligné 1,62 poussait « la
     réponse courte » — ce qu'on vient chercher — au deuxième écran. */
  .page-hero { padding: 1.1rem 0 1.5rem; }
  .page-hero .lede { font-size: 1rem; line-height: 1.5; }
  .breadcrumb { font-size: .64rem; padding-top: .85rem; }
}
/* ==========================================================================
   L'HORIZON — la lisière de pins
   --------------------------------------------------------------------------
   Aucune photo n'est disponible (et en prendre une sur le web serait une
   contrefaçon) : l'image du lieu est donc DESSINÉE, calculée par build.py à
   chaque build. Elle ferme la une sur un ciel de fin de journée et repose sur
   le pied de page, où elle donne au document un bas de page au lieu d'une
   coupure. Aucun texte ne se pose dessus : elle n'entre pas dans le calcul de
   contraste, elle ne fait que respirer.
   ========================================================================== */
/* Trois arrêts, pas deux : le ciel du haut, la bande chaude posée sur les cimes,
   et le fond qui reprend sous les troncs. Un dégradé à deux arrêts donnait un
   aplat de couleur ; celui-ci a une heure de la journée. */
.horizon { position: relative; line-height: 0; margin-top: 1.9rem;
  background: linear-gradient(180deg,
    var(--dusk-1) 0%, var(--dusk-2) 54%, var(--dusk-3) 88%, var(--dusk-2) 100%); }
.horizon svg { display: block; width: 100%; height: 104px; color: var(--ridge); }
/* La lisière lointaine : la même forêt, deux tons en arrière et à demi-hauteur.
   C'est elle qui donne de la PROFONDEUR ; une seule rangée de troncs donnait une
   haie de sucettes. */
.horizon .loin { color: var(--ridge-loin); opacity: .55; }
.hero .horizon { margin-top: 1.4rem; }
/* Le sol de la lisière : un filet plein, comme la ligne de terre d'une gravure. */
.horizon::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--text); }
.horizon--page { margin-top: .8rem; }
.horizon--page svg { height: 74px; }
/* La « une » d'une page intérieure : même papier que l'accueil, même lisière,
   en plus bas. C'est ce qui empêche le site de redevenir une colonne de texte
   dès la deuxième page. */
.page-une { padding-top: 0; }
.page-une .breadcrumb { padding-top: .9rem; }
/* Le bas de page reprenait la lisière en --border sur du papier : à peine plus
   clair que le fond, elle ressemblait à un champ d'ombelles. Elle garde son ciel,
   en sourdine, et une encre qui existe. */
.horizon--foot { margin-top: 3.4rem;
  background: linear-gradient(180deg, var(--bg) 0%, var(--dusk-2) 100%); }
.horizon--foot svg { height: 76px; color: var(--ridge); opacity: .62; }
.horizon--foot .loin { opacity: .3; }
.horizon--foot::after { display: none; }
.site-footer { margin-top: 0; }
@media (max-width: 640px) {
  .horizon svg { height: 74px; }
  .horizon--page svg { height: 54px; }
  .horizon--foot svg { height: 56px; }
}

/* ---------- la vignette d'une rubrique ---------- */
.vignette { position: absolute; right: 1.1rem; top: 1.15rem; width: 54px; height: 54px;
  color: var(--border-strong); pointer-events: none; }
.vignette svg { width: 100%; height: 100%; display: block; }
a.card:hover .vignette { color: var(--amber); }
@media (max-width: 640px) {
  .vignette { width: 42px; height: 42px; right: .85rem; top: 1rem; }
}

/* ---------- le pavé de méthode, descendu sous son titre ----------
   L'accueil ouvrait sur ce paragraphe : on lisait 70 mots d'explication avant
   qu'il ne se passe quoi que ce soit. Il est désormais posé là où il explique
   réellement quelque chose — sous « Comment ce guide est fait ». */
.lede--method { max-width: var(--mesure-texte); margin-bottom: 1.5rem; }
.lede--method::first-letter {
  float: left; font-family: var(--display); font-weight: 700; color: var(--amber);
  font-size: 3.05rem; line-height: .82; padding: .07em .14em 0 0;
}

/* ---------- encarts : hachures « état daté » ----------
   Un encart d'avertissement porte une information qui vieillit. La hachure
   diagonale dans sa marge droite est la convention du plan : « zone datée,
   à revérifier ». C'est un dégradé répété, pas une image. */
.callout--warn, .callout--stop { position: relative; overflow: hidden;
  /* La marge droite est RÉSERVÉE à la hachure. Sans cette réserve le texte
     passait dessous et se lisait sur des diagonales — vu à la capture, dans les
     deux thèmes et sur 390 px. */
  padding-right: calc(58px + 1.2rem); }
.callout--warn::after, .callout--stop::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 58px;
  background: repeating-linear-gradient(-45deg,
    currentColor 0 1px, transparent 1px 8px);
  color: var(--amber); opacity: .3; pointer-events: none;
}
.callout--stop::after { color: var(--danger); }
/* Un lien dans un encart teinté ne se met pas en bleu de lien : sur un fond
   vermillon pâle (ou brun de nuit), c'est la seule tache froide de la page. Il
   garde l'encre du texte et se signale par son soulignement. */
.callout--warn a, .callout--stop a { color: var(--text);
  text-decoration-color: var(--amber); text-decoration-thickness: .08em; }
.callout--stop a { text-decoration-color: var(--danger); }
.callout--warn a:hover, .callout--stop a:hover { text-decoration-thickness: .14em; }
@media (max-width: 640px) {
  .callout--warn, .callout--stop { padding-right: calc(34px + .9rem); }
  .callout--warn::after, .callout--stop::after { width: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}