/* Narrimage · direction A « La régie » (DESIGN.md).
   Feuille commune des pages du socle. Les pages d'outils déjà construites gardent leurs styles propres. */
:root{
  --fond:#0F0F10;--surface:#17171A;--encre:#EDEBE6;--texte:#CFCBC4;--sourdine:#9A968F;--ligne:#2B2B2F;--tally:#FF4B3E;
  --courbe:cubic-bezier(.16,1,.3,1);--t-court:.25s;--t-moyen:.6s;--t-long:1.1s;
  --gouttiere:clamp(16px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--fond);color:var(--encre);font:17px/1.6 "Hanken Grotesk",system-ui,sans-serif;overflow-x:hidden}
a{color:inherit;text-underline-offset:.18em}
:focus-visible{outline:2px solid var(--tally);outline-offset:3px}
.saut{position:absolute;left:-999px;top:0;background:var(--encre);color:var(--fond);padding:8px 12px;z-index:9}
.saut:focus{left:8px}
.page{padding:0 var(--gouttiere) 96px;max-width:1340px;margin:0 auto}

.entete{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;border-bottom:1px solid var(--ligne);font:500 13px/1 "IBM Plex Mono",monospace;color:var(--sourdine)}
.marque{display:flex;align-items:center;gap:10px;color:var(--encre);font:400 22px/1 "Instrument Serif",serif;text-decoration:none}
.tally{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--tally);box-shadow:0 0 0 3px rgba(255,75,62,.18)}
.menu{display:flex;gap:22px}
.menu a{text-decoration:none;padding:12px 0}
.menu a[aria-current]{color:var(--encre)}
@media (max-width:720px){.menu{gap:14px;font-size:12px}}
@media (max-width:480px){.entete{flex-wrap:wrap;row-gap:2px}.menu{width:100%;justify-content:space-between;gap:8px}}

.fil{margin-top:22px;font:400 12px/1.4 "IBM Plex Mono",monospace;color:var(--sourdine)}
.fil a{text-decoration:none}
h1{font:400 clamp(40px,6.6vw,92px)/.96 "Instrument Serif",serif;letter-spacing:-.02em;margin-top:28px;max-width:16ch}
h1 em,h2 em{color:var(--tally)}
h2{font:400 clamp(28px,3.6vw,48px)/1.04 "Instrument Serif",serif;letter-spacing:-.01em;max-width:24ch}
h3{font:500 12px/1.3 "IBM Plex Mono",monospace;color:var(--sourdine);text-transform:uppercase;letter-spacing:.06em}
.reponse{margin-top:26px;max-width:62ch;font-size:clamp(18px,1.7vw,21px);color:var(--texte)}
.reponse strong{color:var(--encre);font-weight:500}
.maj{margin-top:16px;font:400 12px/1.5 "IBM Plex Mono",monospace;color:var(--sourdine)}

/* Lecture longue : titre de section à gauche, texte à 66 caractères à droite. */
.section{margin-top:clamp(56px,8vw,104px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,66ch);gap:clamp(24px,5vw,80px)}
@media (max-width:900px){.section{grid-template-columns:minmax(0,1fr)}}
.texte p,.texte li{color:var(--texte);margin-top:14px;overflow-wrap:break-word}
.texte a{overflow-wrap:anywhere}
.texte ul,.texte ol{padding-left:20px}
.texte strong{color:var(--encre);font-weight:500}
.texte h3{margin-top:28px}
/* Tableau de données : lisible au doigt, défile seul sur téléphone sans élargir la page. */
.tableau{width:100%;border-collapse:collapse;margin-top:18px;font-size:15px;display:block;overflow-x:auto}
.tableau caption{text-align:left;font:400 12px/1.5 "IBM Plex Mono",monospace;color:var(--sourdine);padding-bottom:8px}
.tableau th,.tableau td{text-align:left;vertical-align:top;padding:10px 14px 10px 0;border-bottom:1px solid var(--ligne);color:var(--texte)}
.tableau thead th{font:500 11px/1.3 "IBM Plex Mono",monospace;color:var(--sourdine);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--encre)}
.tableau tbody th{color:var(--encre);font-weight:500;min-width:150px}
.tableau td{min-width:120px}
.champ-editeur{font:500 .92em/1 "IBM Plex Mono",monospace;color:var(--tally);background:rgba(255,75,62,.08);padding:2px 6px;border-radius:2px}

/* Conducteur : une ligne par élément, code temporel à gauche, jamais une grille de cartes. */
.conducteur{list-style:none;margin-top:30px;border-top:1px solid var(--encre)}
.conducteur li{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:20px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--ligne)}
@media (max-width:720px){.conducteur li{grid-template-columns:minmax(0,1fr);gap:8px}}
.conducteur .tc{font:500 13px/1 "IBM Plex Mono",monospace;color:var(--tally)}
.conducteur .titre{display:block;font:400 clamp(24px,2.6vw,34px)/1.1 "Instrument Serif",serif;text-decoration:none}
.conducteur a.titre:hover{text-decoration:underline}
/* Outil pas encore ouvert (lien retiré par publier.mjs) : même titre, en retrait. */
.conducteur span.titre{color:var(--sourdine)}
.conducteur p{color:var(--texte);margin-top:6px;max-width:62ch}
.conducteur .etat{font:500 11px/1 "IBM Plex Mono",monospace;color:var(--sourdine);border:1px solid var(--ligne);padding:6px 8px;white-space:nowrap}

/* Chiffre mis en avant avec sa source juste dessous. */
.chiffre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);margin-top:clamp(36px,6vw,72px)}
.chiffre div{padding:22px 22px 22px 0;border-right:1px solid var(--ligne)}
.chiffre div+div{padding-left:22px}
.chiffre div:last-child{border-right:0}
.chiffre b{display:block;font:400 clamp(44px,5.4vw,76px)/1 "Instrument Serif",serif;letter-spacing:-.02em}
.chiffre span{display:block;margin-top:10px;color:var(--texte);font-size:15px}
.chiffre small{display:block;margin-top:8px;font:400 12px/1.5 "IBM Plex Mono",monospace;color:var(--sourdine)}
@media (max-width:820px){.chiffre{grid-template-columns:minmax(0,1fr)}.chiffre div{border-right:0;padding:20px 0;border-bottom:1px solid var(--ligne)}.chiffre div+div{padding-left:0}.chiffre div:last-child{border-bottom:0}}

.mention{margin-top:clamp(48px,7vw,88px);font-size:14px;color:var(--sourdine);border-left:2px solid var(--ligne);padding-left:12px;max-width:80ch}
.pied{margin-top:72px;padding-top:22px;border-top:1px solid var(--ligne);font:400 12px/1.6 "IBM Plex Mono",monospace;color:var(--sourdine);display:flex;gap:10px 22px;flex-wrap:wrap}
.pied a{text-decoration:none}
.pied a:hover{color:var(--encre)}

/* Titre « dit » mot par mot (accueil) : lisible dès le départ, désactivé en mouvement réduit. */
h1.lecture .mot{color:#3A3936;transition:color var(--t-court) var(--courbe)}
h1.lecture .mot.dit{color:inherit}
@media (prefers-reduced-motion:reduce){h1.lecture .mot{color:inherit;transition:none}}