/* theme.css — Design system commun des encyclopédies de l'usine.
 *
 * SEUL fichier CSS partagé. Les pages spécialisées (angles de lecture, jeux) définissent
 * leurs styles propres dans un <style> inline, mais consomment TOUJOURS les tokens ci-dessous.
 *
 * Instanciation (phase S2) : remplacer les valeurs de :root par la palette de charte.json.
 * Les noms de tokens, eux, ne changent JAMAIS — c'est ce qui rend les pages interchangeables.
 *
 * Contraintes tenues ici :
 *   - contrastes WCAG 2.1 AA (4,5:1 texte courant, 3:1 texte large et composants)
 *   - focus toujours visible, jamais supprimé
 *   - prefers-reduced-motion neutralise animations et transitions
 *   - prefers-color-scheme + data-theme (choix explicite du lecteur)
 *   - aucune police distante : @font-face local uniquement
 */

/* ------------------------------------------------------------------ */
/* 0. Polices embarquées                                               */
/* ------------------------------------------------------------------ */
/* La charte declarait trois familles « embarquees localement » ; le disque n'en
   portait AUCUNE, et la seule occurrence de la regle d'embarquement dans ce
   fichier etait un commentaire. Le site rendait donc en Georgia, Segoe UI et
   Consolas — l'identite typographique de l'ouvrage n'existait pas, seulement son
   intention. Les trois familles sont ici, sous licence ouverte (SIL Open Font
   License 1.1), dans shared/fonts/.
   Sous-ensemble LATIN seulement : sa plage couvre le francais, accents,
   ligature oe et apostrophe typographique comprises. Environ 97 Ko au total.
   font-display: swap — le texte s'affiche immediatement dans la police de repli
   et bascule quand la police arrive ; jamais de texte invisible.
   Newsreader et Public Sans sont VARIABLES : un seul fichier couvre 400 a 700,
   d'ou la plage declaree en font-weight. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/newsreader-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/public-sans-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ */
/* 1. Tokens — remplacés à l'instanciation par la palette de charte.json */
/* ------------------------------------------------------------------ */
:root {
  --bg:          #f8f7f4;
  --surface:     #ffffff;
  --surface-2:   #eeece6;
  --text:        #1b1f1d;
  --text-muted:  #5a615d;
  --accent:      #186a5a;
  --accent-2:    #7a3b5e;
  /* Deux bordures, volontairement distinctes :
     --border      = filet DECORATIF (cartes, séparateurs) : aucun seuil de contraste imposé
     --border-fort = bordure d'un COMPOSANT INTERACTIF (champ, bouton) : ≥ 3:1 (WCAG 1.4.11) */
  --border:      #ded9d0;
  --border-fort: #6f746f;
  --focus:       #0f4a3e;

  --font-titres: "Newsreader", Georgia, "Times New Roman", serif;
  --font-texte:  "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:   "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --mesure:      68ch;
  --rayon:       10px;

  /* --pas (0,25rem) et --duree (160ms) vivaient ici sans etre employes une seule
     fois. Un jeton jamais consomme n'est pas une reserve : c'est une reponse a
     une question que personne ne pose, et qui divergera du jour ou quelqu'un la
     posera vraiment. Les espacements ont leurs jetons dedies depuis ux-060, et
     le produit ne declare aucune animation ni aucune transition. Le jour ou du
     mouvement sera introduit, la garde de mouvement reduit de cette feuille le
     couvre deja, et la duree se decidera avec le mouvement qu'elle regle. */

  /* Hauteur de l'en-tete COLLANT. Elle etait ecrite en dur dans une seule page —
     l'index alphabetique, dont la barre de lettres se cale dessous — et nulle part
     ailleurs, si bien qu'aucune ancre ne s'en souciait : cliquer sur un lien interne
     amenait la cible SOUS l'en-tete, invisible.
     Mesure : barre de 0,65rem de marge haute et basse autour d'une ligne de 1,05rem
     a l'interligne du corps, plus un filet — soit environ 3,6rem. Le token porte
     desormais cette valeur, et tout element ancrable garde sa distance. */
  --hauteur-entete: 3.6rem;

  /* ---- Teintes de visualisation ----------------------------------------
     Treize teintes vivaient EN DUR dans sept pages d'angle, cinquante et une
     fois. Elles echappaient donc au theme sombre - les quatre couloirs de
     l'angle signature tombaient entre 1,6 et 2,2 pour un seuil de 3 - et au
     gate de contrastes, qui controle la palette declaree.
     Le jeu clair reprend les valeurs d'origine : toutes franchissent deja 3:1
     contre les trois fonds clairs, la plus basse a 3,21. Le jeu sombre les
     eclaircit vers le blanc, ce qui conserve la teinte et donc la
     reconnaissance d'une couleur a l'autre.
     --viz-encre est l'encre POSEE SUR ces pastilles : blanche sur les teintes
     sombres du theme clair, sombre sur les teintes eclaircies du theme sombre.
     Eclaircir la pastille sans retourner l'encre remplacerait un defaut de
     contraste par un autre. */
  --viz-vert:       #186a5a;
  --viz-bleu:       #1f4e79;
  --viz-vert-fonce: #2c5f2d;
  --viz-bleu-gris:  #33526e;
  --viz-gris:       #5a615d;
  --viz-gris-clair: #6f746f;
  --viz-prune:      #7a3b5e;
  --viz-ocre:       #7a4a12;
  --viz-grenat:     #7b1f2b;
  --viz-or:         #8a6a12;
  --viz-brique:     #a8503f;
  --viz-sable:      #a97a3c;
  --viz-rose:       #b0505c;
  --viz-encre:      #ffffff;
  /* Canal de la TRAME posee sur les pastilles. Les motifs sont ce qui empeche la
     couleur de porter seule l'information, regle affichee par ces pages elles-memes :
     une trame blanche sur une pastille eclaircie en theme sombre s'effacerait, et
     la redondance disparaitrait avec elle. On expose donc le canal, pas la couleur
     complete, pour conserver les cinq opacites d'origine telles quelles. */
  --viz-trame-rvb:  255, 255, 255;
}

/* Thème sombre : par préférence système, sauf choix explicite contraire */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --bg:         #121614;
    --surface:    #1a201d;
    --surface-2:  #232b27;
    --text:       #e9ede9;
    --text-muted: #a3ada7;
    --accent:     #6fc3a8;
    --accent-2:   #d59ab6;
    --border:      #2c3531;
    --border-fort: #8a958f;
    --focus:      #a8e6cf;
    /* Teintes de visualisation, jeu sombre. Eclaircies vers le blanc jusqu'a
       franchir 3:1 contre le plus clair des trois fonds sombres, qui est le
       contraignant. « gris-clair » est pousse au-dela du strict necessaire :
       au plancher, il devenait indiscernable de « gris », et ces deux teintes
       distinguent deux etats voisins sur la meme frise. */
    --viz-vert:       #4b8b7e;
    --viz-bleu:       #6283a1;
    --viz-vert-fonce: #638964;
    --viz-bleu-gris:  #6c8297;
    --viz-gris:       #7b817d;
    --viz-gris-clair: #a3a9a4;
    --viz-prune:      #9f728b;
    --viz-ocre:       #9d7950;
    --viz-grenat:     #ab7077;
    --viz-or:         #987c2e;
    --viz-brique:     #b4695a;
    --viz-sable:      #c39a63;
    --viz-rose:       #d9a3aa;
    --viz-encre:      #101413;
    --viz-trame-rvb:  0, 0, 0;
  }
}

/* Choix explicite du lecteur : prime dans les deux sens */
:root[data-theme="sombre"] {
  --bg:         #121614;
  --surface:    #1a201d;
  --surface-2:  #232b27;
  --text:       #e9ede9;
  --text-muted: #a3ada7;
  --accent:     #6fc3a8;
  --accent-2:   #d59ab6;
  --border:      #2c3531;
  --border-fort: #8a958f;
  --focus:      #a8e6cf;
  /* Les memes teintes que le bloc precedent, et il FAUT qu'elles soient ici
     aussi : ce bloc est celui du lecteur qui choisit explicitement le sombre
     sous un systeme clair. Les oublier lui donnerait des pastilles du jeu clair
     sur un fond sombre, c'est-a-dire exactement le defaut qu'on corrige. */
  --viz-vert:       #4b8b7e;
  --viz-bleu:       #6283a1;
  --viz-vert-fonce: #638964;
  --viz-bleu-gris:  #6c8297;
  --viz-gris:       #7b817d;
  --viz-gris-clair: #a3a9a4;
  --viz-prune:      #9f728b;
  --viz-ocre:       #9d7950;
  --viz-grenat:     #ab7077;
  --viz-or:         #987c2e;
  --viz-brique:     #b4695a;
  --viz-sable:      #c39a63;
  --viz-rose:       #d9a3aa;
  --viz-encre:      #101413;
  --viz-trame-rvb:  0, 0, 0;
}

/* ------------------------------------------------------------------ */
/* 1 bis. Pilule de filtre et bouton d'action                          */
/* ------------------------------------------------------------------ */
/* Le bouton-filtre est le controle le PLUS MANIPULE du site, et il existait en
   quinze versions, dont onze copies mot pour mot a prefixe pres. Trois defauts
   s'ajoutaient a la duplication : aucune pilule n'avait d'etat au survol, aucune
   n'avait de hauteur minimale — la cible tactile tombait a 33 px la ou le reste
   du site tient 40 — et l'etat actif employait deux tokens de texte differents
   selon les pages.
   La forme est arretee ici, une fois : PILULE pour un filtre, qui restreint une
   liste ; RAYON STANDARD pour un bouton d'action, qui declenche quelque chose.
   Deux gestes differents ne doivent pas avoir la meme silhouette. */
.enc-pilules { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.enc-pilules li { margin: 0; max-width: none; }

.enc-pilule {
  display: inline-flex;
  align-items: center;
  min-height: 40px;              /* cible tactile : la meme partout */
  padding: 0.3rem 0.85rem;
  font: inherit;
  font-size: var(--corps-3);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-fort);
  border-radius: 999px;
  cursor: pointer;
}
.enc-pilule:hover { border-color: var(--accent); }
.enc-pilule:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Deux notations d'etat coexistent dans le produit : aria-pressed sur les angles,
   une classe sur les index. Les deux sont servies plutot que d'imposer une
   migration du balisage — et le texte actif emploie --bg, retenu par treize pages
   sur quinze contre deux. */
.enc-pilule[aria-pressed="true"],
.enc-pilule.est-actif {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  font-weight: 700;
}

.enc-bouton {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.4rem 1rem;
  font: inherit;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-fort);
  border-radius: var(--rayon);
  cursor: pointer;
}
/* L'etat desactive existait dans un seul jeu ; il remonte ici pour ne pas se
   perdre a la factorisation. Le curseur dit ce que la couleur seule ne dit pas. */
.enc-bouton[disabled] { color: var(--text-muted); cursor: not-allowed; }
.enc-bouton:hover:not([disabled]) { border-color: var(--accent); }
.enc-bouton:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ------------------------------------------------------------------ */
/* 1 ter. Sorties laterales d'un angle                                 */
/* ------------------------------------------------------------------ */
/* Mesure avant correction : aucune page d'angle ne contenait le moindre lien
   statique dans son contenu principal. Une fois entre dans un angle, la seule
   sortie vers les douze autres etait l'entree de navigation — alors que l'index
   des angles, lui, les regroupe par axe. Ce bloc rend ce regroupement utilisable
   la ou le lecteur se trouve. */
.enc-lateraux {
  max-width: var(--mesure);
  margin: 2.5rem 0 0;
  padding: 1rem 1.15rem;
  background: var(--surface-2);
  border-left: var(--filet-encart) solid var(--border-fort);
  border-radius: var(--rayon);
}
.enc-lateraux h2 { font-size: var(--corps-1); margin: 0 0 0.5rem; }
.enc-lateraux p { margin: 0 0 0.4rem; font-size: var(--corps-2); }
.enc-lateraux p:last-child { margin-bottom: 0; }
.enc-lateraux-axe { color: var(--text-muted); }

/* ------------------------------------------------------------------ */
/* 2. Base                                                             */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-texte);
  font-size: var(--corps-1);          /* >= 16px : exigence de lisibilité */
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-titres);
  line-height: 1.25;
  margin: 2.2rem 0 0.75rem;
  text-wrap: balance;
}
/* ECHELLE DE TITRES — source unique.
   Dix-sept regles locales fixaient la taille des titres de niveau deux des cartes
   entre 0,72 et 1,15 rem, tandis que la feuille commune donnait 1,15 rem aux
   titres de niveau trois. Sur une meme page, un titre de niveau deux etait donc
   plus PETIT qu'un titre de niveau trois : la structure documentaire et la
   structure visuelle se contredisaient, et le lecteur qui parcourt une page a
   l'oeil y lisait une hierarchie inverse de celle que le document declare.
   La propriete a tenir n'est pas « chaque niveau a une taille » mais « chaque
   niveau reste plus grand que le suivant A TOUTES LES LARGEURS ». Des clamps mal
   accordes la rompent au milieu de leur plage sans qu'on le voie aux extremes :
   les coefficients en vw suivent donc le meme ordre que les bornes.
     titre-1 > titre-2 > titre-carte > titre-3 > titre-4
   Le titre de CARTE est le maillon qui manquait : un titre de niveau deux qui
   ouvre un panneau de detail, un encart ou un bilan reste un titre de section pour
   le document, mais il n'a pas a peser comme un titre de page. Il se pose avec la
   classe .enc-titre-carte, une fois, au lieu de dix-sept surcharges. */
/* LE FILET GAUCHE — motif identitaire, et sa regle.
   Quatre-vingt-neuf occurrences dans le produit, qui se declinaient en CINQ
   largeurs — 2, 3, 4, 5 et 7 pixels — sans qu'aucune regle dise si l'epaisseur
   code une importance, une nature, ou rien du tout. Un motif signature qui varie
   sans loi cesse d'etre un signe : le lecteur ne peut rien en deduire.
   Trois largeurs, et une seule question a se poser — QU'EST-CE QUE CE BLOC ?
     --filet-citation  un aparte : citation, chapeau, resume, ecart, jalon ;
     --filet-encart    un bloc second : legende, avertissement, correction, bilan ;
     --filet-carte     une carte de detail : le panneau que le lecteur vient d'ouvrir.
   La COULEUR, elle, etait deja coherente et n'est pas touchee : accent pour ce que
   l'ouvrage avance, accent-2 pour ce qu'il reserve ou conteste, border-fort pour ce
   qui est neutre. C'est elle qui distingue, par exemple, la carte signature de
   l'index des angles — laquelle perd donc son septieme pixel, redondant.
   UNE SEULE EXCEPTION, et ce n'en est pas vraiment une : .ag-borne, dans la frise
   des ages, n'est pas un filet de bloc mais un TRAIT DE GRAPHIQUE qui traverse les
   pistes. Il ne releve pas de ce motif et garde ses deux pixels. */
/* ECHELLE DE CORPS — cinq tailles, et la raison de s'y tenir.
   Le produit employait TRENTE-CINQ tailles de police distinctes, ecrites en dur,
   dont ONZE se pressaient entre 10,4 et 12,8 pixels : deux valeurs separees de
   trois dixiemes de pixel sont indiscernables a l'ecran, elles ne codent donc rien.
   Ce qu'elles produisaient, en revanche, est tres reel : a chaque nouveau composant
   il fallait TRANCHER, faute de reponse deja prise — et c'est ainsi que treize
   blocs locaux ont diverge.
   Les cinq valeurs ne sont pas choisies pour faire une belle progression : ce sont
   les MODES des grappes observees, c'est-a-dire les tailles que le produit employait
   deja le plus souvent. La substitution deplace donc le moins de pixels possible.
     --corps-1  texte courant
     --corps-2  texte second : legendes, extraits, notes
     --corps-3  mentions : sources, meta, libelles de donnee
     --corps-4  jetons et etiquettes
     --corps-5  surtitres et marques, toujours en capitales
   Le SURTITRE — capitales, monospace, lettres espacees — se declinait en cinq
   espacements de .04 a .08em sans qu'aucune regle ne les distingue. Un seul jeton,
   sur la valeur la plus employee.
   Les tailles de TITRE ne sont pas ici : elles ont leur echelle propre, plus haut. */
:root {
  --corps-1: 1rem;
  --corps-2: 0.9rem;
  --corps-3: 0.85rem;
  --corps-4: 0.8rem;
  --corps-5: 0.72rem;
  --surtitre-espacement: 0.07em;

  /* RYTHME VERTICAL A DEUX NIVEAUX.
     Sur les pages d'angle, TOUS les blocs de premier niveau recevaient le meme
     ecart : la frise, piece centrale de la page, etait separee de la legende qui la
     commente par la valeur qui separe deux paragraphes d'un encart. Vingt-cinq
     valeurs distinctes cohabitaient, dont quatre — 19,2, 20,8, 22,4 et 24 px —
     indiscernables entre elles et employees pour tout. La page defilait sans
     respiration, et l'oeil n'avait aucun repere de section.
     Deux ecarts, et un seul rapport a retenir : la SECTION vaut le double du BLOC.
     C'est ce rapport qui se voit ; une difference de trois pixels ne se voit pas.
       --ecart-bloc     entre deux blocs d'une meme section
       --ecart-section  a une charniere : la piece centrale, le panneau de detail,
                        les sorties laterales */
  --ecart-bloc:    1.25rem;
  --ecart-section: 2.5rem;

  /* PLANCHER DU TEXTE PORTEUR D'INFORMATION — RGAA 10.4.
     --corps-4 est le plus petit corps autorise des lors que le texte APPREND
     quelque chose. Deux cent quatorze declarations passaient sous cette valeur,
     seize sous onze pixels, et le plus souvent en cumulant les trois autres
     facteurs qui coutent a la lecture : capitales, lettres espacees, couleur
     attenuee. C'est la combinaison la moins lisible possible, et elle portait des
     libelles qui font sens — nature d'un jalon, source d'une donnee, marque de
     statut.
     Les soixante-dix-sept regles posees au plus petit corps ont ete relevees UNE A
     UNE avant de decider : aucune n'etait decorative. Le plancher et « le texte
     porteur d'information » coincidaient donc, et tout est remonte.
     --corps-5 reste declare, et RESERVE : c'est le corps des mentions purement
     decoratives, celles dont la disparition ne retirerait aucune information. Il
     n'en existe aujourd'hui aucune dans ce produit, et le banc verifie qu'il en
     reste ainsi tant qu'un cas n'est pas argumente. Un jeton reserve et surveille
     n'est pas un jeton mort : c'est une frontiere ecrite. */
  --corps-plancher: var(--corps-4);

  --filet-citation: 3px;
  --filet-encart:   4px;
  --filet-carte:    5px;

  --titre-1: clamp(1.75rem, 4vw, 2.6rem);
  --titre-2: clamp(1.3rem, 2.6vw, 1.7rem);
  --titre-carte: clamp(1.15rem, 1.9vw, 1.35rem);
  --titre-3: clamp(1.05rem, 1.6vw, 1.2rem);
  --titre-4: 1rem;
}
h1 { font-size: var(--titre-1); margin-top: 0; }
h2 { font-size: var(--titre-2); }
h3 { font-size: var(--titre-3); }
h4 { font-size: var(--titre-4); }
.enc-titre-carte { font-size: var(--titre-carte); }

p, li { max-width: var(--mesure); }
p { margin: 0 0 1rem; }

a {
  color: var(--accent);
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 2px; }

code, pre, .mono { font-family: var(--font-mono); font-size: var(--corps-2); }
pre {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--rayon);
  padding: 1rem;
  overflow-x: auto;
}

blockquote {
  margin: 1.5rem 0;
  padding: 0.25rem 0 0.25rem 1.1rem;
  border-left: var(--filet-citation) solid var(--accent);
  color: var(--text-muted);
  font-style: italic;
}

img, svg, video { max-width: 100%; height: auto; }

figure { margin: 1.75rem 0; }
figcaption { color: var(--text-muted); font-size: var(--corps-2); margin-top: 0.5rem; }

hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }

/* ------------------------------------------------------------------ */
/* BARRE ALPHABETIQUE — composant partage                              */
/* ------------------------------------------------------------------ */
/* Elle vivait dans le <style> de l'index alphabetique, et le glossaire n'en avait
   donc pas — alors que ses ancres de termes existaient deja et n'attendaient qu'un
   moyen d'etre atteintes. Un composant qui ne vit que dans une page n'est pas un
   composant : c'est un style local que la page suivante recopiera, ou pas.
   Les lettres sans entree restent VISIBLES mais inertes : la barre garde ainsi la
   meme forme d'une page a l'autre, et le lecteur apprend en un coup d'oeil ce qui
   manque plutot que de chercher une lettre absente.
   Elle colle sous l'en-tete : d'ou le recours au jeton de hauteur d'en-tete, sans
   lequel elle passerait dessous en defilant. */
.enc-alphabet {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin: 1.5rem 0;
  padding: .5rem 0;
  list-style: none;
  position: sticky;
  top: var(--hauteur-entete);
  background: var(--bg);
  z-index: 10;
}
.enc-alphabet li { margin: 0; max-width: none; }
.enc-alphabet a {
  display: inline-block;
  min-width: 40px;
  min-height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid var(--border-fort);
  border-radius: var(--rayon);
  text-decoration: none;
  font-weight: 600;
}
/* WCAG 4.1.2. Les lettres sans entree etaient rendues en LIENS marques desactives.
   Or aria-disabled n'empeche rien : le lien restait activable, et un clic ramenait
   le lecteur en haut de page — vers l'ancre vide « # » — sans le moindre
   avertissement. Un attribut qui DECRIT un etat ne le PRODUIT pas.
   Elles sont desormais rendues en element non interactif. Il ne reste donc rien a
   desactiver : ce qui n'est pas un lien ne s'active pas. La regle porte sur la
   balise, et non plus sur un attribut qui promettait ce qu'il ne tenait pas. */
.enc-alphabet span {
  display: inline-block;
  min-width: 40px;
  min-height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--rayon);
  color: var(--text-muted);
  font-weight: 400;
}

/* ------------------------------------------------------------------ */
/* FRISE — un seul composant, et il est ici.                           */
/* ------------------------------------------------------------------ */
/* Quatre pages d'angle dessinaient la MEME frise avec des mesures
   gratuitement differentes : canevas de 58 ou 62 rem, colonne d'etiquettes de
   19, 20 ou 21 rem, piste de 1,8 ou 1,9 rem, graduations de 1,1 ou 1,2 rem,
   interligne de 0,28 ou 0,3 rem, carte de detail de 6,5 ou 7 rem. Aucune de ces
   differences ne codait quoi que ce soit : un lecteur qui passe d'une frise a
   l'autre devait reapprendre l'objet.
   Les valeurs retenues sont celles de la MAJORITE — trois pages sur quatre les
   portaient deja —, ce qui deplace le moins de pixels possible.
   DEUX ECARTS N'EN ETAIENT PAS, ils etaient des manques, et l'unification les
   comble : lexique et technologies n'avaient AUCUNE reduction sous 40 rem, et
   seule la frise des plans dessinait le trait sous la graduation.
   Les pages gardent leurs classes prefixees : le script les interroge, et ce
   sont elles qui portent les couleurs de section. Ce qui reste legitimement
   local : les trames et teintes, les bornes d'age de la frise par age avec leur
   empilement, la marque de datation incertaine, le nom de l'axe. Rien d'autre. */
.enc-frise-defilement {
  overflow-x: auto;
  margin: var(--ecart-section) 0 0;
  padding-bottom: .5rem;
  border: 1px solid var(--border);
  border-radius: var(--rayon);
}
.enc-frise { min-width: 58rem; padding: .75rem .9rem 1rem; }
.enc-frise-echelle,
.enc-frise-ligne { display: grid; grid-template-columns: 20rem 1fr; gap: .6rem; }
.enc-frise-echelle { margin-bottom: .4rem; }
.enc-frise-ligne { align-items: center; }
.enc-frise-ligne + .enc-frise-ligne { margin-top: .28rem; }
.enc-frise-etiquette { font-size: var(--corps-3); line-height: 1.25; }
.enc-frise-etiquette a { color: var(--text); }
.enc-frise-etiquette a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.enc-frise-piste {
  position: relative;
  height: 1.8rem;
  background: var(--surface-2);
  border-radius: 3px;
  border: 1px solid var(--border);
}
.enc-frise-graduations { position: relative; height: 1.1rem; }
.enc-frise-tick {
  position: absolute;
  top: 0;
  font-family: var(--font-mono);
  font-size: var(--corps-4);
  color: var(--text-muted);
  transform: translateX(-50%);
}
/* Le trait qui relie la graduation a la piste. Sans lui, le nombre flotte
   au-dessus du graphique sans designer d'abscisse. */
.enc-frise-tick::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 1.05rem;
  width: 1px;
  height: .3rem;
  background: var(--border-fort);
}
.enc-frise-plage {
  position: absolute;
  min-width: 24px;
  top: 0;
  bottom: 0;
  font: inherit;
  font-size: var(--corps-4);
  color: var(--viz-encre);
  border: 1px solid rgba(0,0,0,.35);
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  padding: 0 .3rem;
}
.enc-frise-plage:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; z-index: 3; }
.enc-frise-plage[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #fff; }
.enc-frise-detail {
  max-width: var(--mesure);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: var(--filet-carte) solid var(--accent);
  border-radius: var(--rayon);
  padding: .9rem 1.05rem;
  margin: var(--ecart-section) 0 0;
  min-height: 6.5rem;
}
.enc-frise-detail h2 { margin: .15rem 0 .3rem; }
.enc-frise-detail p { margin: .45rem 0 0; }
/* SOUS QUARANTE REM. 58 rem de canevas et 20 rem de libelles laissent une
   cinquantaine de pixels de graphique sur un telephone de 375 : le lecteur
   devait faire defiler avant de voir la moindre plage. La colonne tombe a 9 rem
   et le canevas a 34 rem. Le defilement horizontal subsiste — une frise de
   quatre-vingts ans ne tient pas dans un telephone, et pretendre le contraire
   produirait des plages de trois pixels — mais il commence APRES que quelque
   chose est visible. */
@media (max-width: 40rem) {
  .enc-frise { min-width: 34rem; }
  .enc-frise-ligne, .enc-frise-echelle { grid-template-columns: 9rem 1fr; }
}

/* Tableaux : débordement contenu, jamais la page */
.table-wrap { overflow-x: auto; }
/* GRAMMAIRE DE TABLEAU — une seule, et elle est ici.
   Quatre conventions cohabitaient dans les pages d'angle, toutes REDEFINIES
   localement au lieu d'etendre celle-ci, et les tableaux des articles en employaient
   une cinquieme. Corps, marge interne, position du filet et traitement de l'en-tete
   differaient a chaque fois — sans qu'aucune difference ne code quoi que ce soit.
   Les choix, et pourquoi :
     — le FILET est en haut. Trois des quatre tableaux locaux le posaient deja ainsi,
       et c'est la seule position qui permette a l'en-tete de supprimer proprement
       son bord superieur sans laisser de trait flottant ;
     — la MARGE INTERNE est la mediane des quatre valeurs rencontrees ;
     — l'EN-TETE prend la grammaire du surtitre — mono, capitales, lettres espacees,
       fond — qui etait celle de trois tableaux sur quatre et qu'aucune raison ne
       reservait aux angles ;
     — les COLONNES DE NOMBRES s'alignent a droite en chasse fixe : c'est une regle
       de lecture, pas une preference locale, et elle vivait dans deux pages sur cinq.
   Ce qui reste legitimement local : une largeur minimale propre au nombre de
   colonnes, une mise en evidence de ligne, un etat de cellule. Rien d'autre. */
table { border-collapse: collapse; width: 100%; }
caption {
  text-align: left;
  padding: 0 0 0.4rem;
  font-size: var(--corps-3);
  color: var(--text-muted);
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.45rem 0.6rem;
  border-top: 1px solid var(--border);
  font-size: var(--corps-2);
}
thead th {
  border-top: 0;
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: var(--corps-4);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--surtitre-espacement);
  white-space: nowrap;
}
th.num, td.num { text-align: right; font-family: var(--font-mono); }

/* Marge de defilement sous l'en-tete collant.
   Elle porte sur TOUT element identifie : c'est la seule regle qui couvre a la fois
   les ancres ecrites a la main, celles produites par les scripts, et celles qu'une
   page ajoutera demain. La propriete n'a aucun effet visuel — elle ne joue qu'au
   moment ou le navigateur fait defiler vers la cible. */
[id] { scroll-margin-top: calc(var(--hauteur-entete) + 0.75rem); }

/* ------------------------------------------------------------------ */
/* 3. Focus — jamais supprimé                                          */
/* ------------------------------------------------------------------ */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Repli pour les navigateurs sans :focus-visible */
:focus:not(:focus-visible) { outline: none; }

/* ------------------------------------------------------------------ */
/* 4. Lien d'évitement                                                 */
/* ------------------------------------------------------------------ */
.enc-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--surface);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--rayon) 0;
  font-weight: 600;
  text-decoration: none;
}
.enc-skip:focus {
  left: 0;
}

.enc-visuellement-masque {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ */
/* 5. Mise en page                                                     */
/* ------------------------------------------------------------------ */
.enc-conteneur {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

header[role="banner"] {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 20;
}
.enc-barre {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.65rem 0;
}
.enc-marque {
  font-family: var(--font-titres);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  text-decoration: none;
}

footer[role="contentinfo"] {
  margin-top: 4rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--corps-2);
}
footer[role="contentinfo"] .enc-conteneur { padding-top: 2rem; padding-bottom: 2.5rem; }

/* ------------------------------------------------------------------ */
/* 6. Navigation (mobile-first, hamburger injecté par enc-commun.js)   */
/* ------------------------------------------------------------------ */
.enc-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px; min-height: 44px;   /* cible tactile */
  background: transparent;
  border: 1px solid var(--border-fort);
  border-radius: var(--rayon);
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
}

nav[data-enc-nav] ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
nav[data-enc-nav] a {
  display: inline-block;
  padding: 0.4rem 0.7rem;
  border-radius: var(--rayon);
  color: var(--text);
  text-decoration: none;
  font-size: var(--corps-2);
}
nav[data-enc-nav] a:hover,
nav[data-enc-nav] a[aria-current="page"] {
  background: var(--surface-2);
  color: var(--accent);
}

@media (max-width: 720px) {
  nav[data-enc-nav] {
    display: none;
    width: 100%;
  }
  nav[data-enc-nav].est-ouverte { display: block; }
  nav[data-enc-nav] ul { flex-direction: column; }
}
@media (min-width: 721px) {
  .enc-burger { display: none; }
}

/* ------------------------------------------------------------------ */
/* 7. Sélecteur de niveau de lecture                                   */
/* ------------------------------------------------------------------ */
/* Le libellé visible du sélecteur. Sans lui, trois boutons nus « Novice ·
   Curieux · Pro » flottent dans l'en-tête sans dire de quoi ils règlent le
   niveau — et c'est la fonction signature de l'ouvrage. */
.enc-niveaux-titre {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--corps-4);
  text-transform: uppercase;
  letter-spacing: var(--surtitre-espacement);
  color: var(--text-muted);
  margin: 0 0 .2rem;
}
.enc-niveaux {
  display: inline-flex;
  border: 1px solid var(--border-fort);
  border-radius: var(--rayon);
  overflow: hidden;
}
.enc-niveau-btn {
  background: var(--surface);
  color: var(--text-muted);
  border: 0;
  border-right: 1px solid var(--border-fort);
  padding: 0.42rem 0.85rem;
  font: inherit;
  font-size: var(--corps-2);
  cursor: pointer;
  min-height: 40px;
}
.enc-niveau-btn:last-child { border-right: 0; }
.enc-niveau-btn:hover { background: var(--surface-2); }
.enc-niveau-btn.est-actif {
  background: var(--accent);
  color: var(--surface);
  font-weight: 600;
}
/* L'état actif ne repose pas sur la seule couleur : le poids change aussi,
   et aria-pressed porte l'information pour les technologies d'assistance. */

.enc-theme-btn {
  min-width: 40px; min-height: 40px;
  background: var(--surface);
  border: 1px solid var(--border-fort);
  border-radius: var(--rayon);
  color: var(--text);
  font-size: var(--corps-1);
  cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* 8. Composants                                                       */
/* ------------------------------------------------------------------ */
.enc-carte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rayon);
  padding: 1.1rem 1.25rem;
}
.enc-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 1rem;
}

.enc-etiquette {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--corps-4);
}
/* Badge d'alerte éditoriale : apocryphe, contesté, à confirmer.
   Doublé d'un libellé textuel — jamais la couleur seule. */
.enc-etiquette--alerte {
  border-color: var(--accent-2);
  color: var(--accent-2);
  font-weight: 600;
}

.enc-sources { font-size: var(--corps-2); }
.enc-sources ol { padding-left: 1.25rem; }

/* Champ de recherche */
.enc-recherche {
  width: 100%;
  max-width: 34rem;
  padding: 0.6rem 0.85rem;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-fort);
  border-radius: var(--rayon);
}

/* ------------------------------------------------------------------ */
/* 9. Mouvement réduit                                                 */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------ */
/* 10. Impression                                                      */
/* ------------------------------------------------------------------ */
@media print {
  header[role="banner"], nav, .enc-niveaux, .enc-theme-btn, .enc-burger { display: none !important; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: var(--corps-3); }
  /* Tous les niveaux de lecture sont imprimés : le papier n'a pas de sélecteur. */
  [data-niveau-contenu][hidden] { display: block !important; }
}

/* ------------------------------------------------------------------ */
/* Badge « à paraître » — état déclaré d'une porte encore inerte.      */
/* La couleur ne porte pas seule l'information : le libellé est écrit. */
/* ------------------------------------------------------------------ */
.enc-badge {
  display: inline-block;
  font-family: var(--font-texte);
  font-size: var(--corps-4);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--surtitre-espacement);
  vertical-align: middle;
  margin-left: .5rem;
  padding: .15rem .5rem;
  border: 1px solid var(--border-fort);
  border-radius: 999px;
  color: var(--text-muted);
  background: var(--surface-2);
}
[aria-disabled="true"].porte { opacity: 1; cursor: default; }
[aria-disabled="true"].porte h3 { color: var(--text-muted); }

/* État vide d'un index encore sans article. */
.enc-etat-vide {
  padding: 1.25rem;
  border: 1px dashed var(--border-fort);
  border-radius: var(--rayon);
  color: var(--text-muted);
  background: var(--surface-2);
}

/* ------------------------------------------------------------------
   Raccourcis vers les douze angles, sous les portes de l'accueil.
   Liste inline : elle donne un acces direct sans reprendre la place
   d'une grille de cartes.
   ------------------------------------------------------------------ */
.raccourcis-angles {
  max-width: var(--mesure);
  margin: 1.2rem 0 0;
  font-size: var(--corps-2);
  line-height: 1.9;
  color: var(--text-muted);
}
/* L'etiquette de cette liste etait un <span> A L'INTERIEUR du paragraphe : elle
   n'existait pas dans le plan du document, et la liste des treize angles arrivait
   sans titre juste sous les portes d'entree, qu'elle concurrencait. Elle devient un
   vrai intertitre, pose AVANT le paragraphe — d'ou un selecteur autonome, et la
   couleur qu'elle heritait jusqu'ici de son parent. */
.raccourcis-titre {
  font-family: var(--font-mono);
  font-size: var(--corps-4);
  text-transform: uppercase;
  letter-spacing: var(--surtitre-espacement);
  color: var(--text-muted);
  display: block;
  margin: 2.2rem 0 .2rem;
}

/* ------------------------------------------------------------------
   Historicisation des angles (shared/historique.js).
   Un angle qui n'expose qu'un etat present ne se compare a rien : ce bloc
   porte la trajectoire jusqu'au lecteur. Aucune couleur ne porte seule une
   information — la nature d'un jalon est ecrite en toutes lettres.
   ------------------------------------------------------------------ */
.hi-intro          { color: var(--text-muted); max-width: var(--mesure); }
.hi-angle          { background: var(--surface); border: 1px solid var(--border);
                     border-radius: var(--rayon); padding: 1.1rem 1.25rem; margin: 1rem 0 1.6rem; }
.hi-depuis         { margin: 0 0 .6rem; }
.hi-etiquette      { font-family: var(--font-mono); font-size: var(--corps-3); font-weight: 600;
                     color: var(--accent); }
.hi-avant          { margin: 0 0 .9rem; max-width: var(--mesure); }
.hi-jalons         { list-style: none; margin: 0 0 .9rem; padding: 0;
                     border-left: var(--filet-citation) solid var(--border-fort); }
.hi-jalon          { position: relative; margin: 0 0 .7rem; padding: 0 0 0 1rem;
                     max-width: var(--mesure); }
.hi-jalon:last-child { margin-bottom: 0; }
.hi-annee          { font-family: var(--font-mono); font-weight: 700; margin-right: .5rem; }
.hi-nature         { font-size: var(--corps-4); text-transform: uppercase; letter-spacing: var(--surtitre-espacement);
                     border: 1px solid var(--border-fort); border-radius: 999px;
                     padding: .05rem .5rem; margin-right: .5rem; color: var(--text-muted);
                     white-space: nowrap; }
.hi-tendance,
.hi-comparaison    { margin: .8rem 0 0; max-width: var(--mesure); }
.hi-titre-parties  { margin-top: 1.4rem; }
.hi-parties        { display: grid; gap: .5rem; }
.hi-partie         { border: 1px solid var(--border); border-radius: var(--rayon);
                     background: var(--surface); }
.hi-partie > summary { cursor: pointer; padding: .7rem 1rem; font-weight: 600; }
.hi-partie > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.hi-corps          { padding: 0 1rem 1rem; }

/* Impact sur les metiers (shared/historique.js). Le libelle d'actualite et l'etat
   du contenu de formation sont ECRITS : la couleur ne porte jamais seule une
   information, et le cas ou rien n'a suivi s'affiche comme les autres. */
.im-titre          { margin-top: 1.6rem; }
.im-bloc           { background: var(--surface); border: 1px solid var(--border);
                     border-left: var(--filet-encart) solid var(--accent-2); border-radius: var(--rayon);
                     padding: 1rem 1.15rem; margin: .6rem 0 1.2rem; }
.im-metiers        { margin: 0 0 .6rem; max-width: var(--mesure); }
.im-etiquette      { font-family: var(--font-mono); font-size: var(--corps-4); font-weight: 600;
                     text-transform: uppercase; letter-spacing: var(--surtitre-espacement); color: var(--accent); }
.im-effet          { margin: 0 0 .8rem; max-width: var(--mesure); }
/* LES TROIS ETATS D'ACTUALITE. Le rendu emettait .im-a-actuel, .im-a-amoindri et
   .im-a-perime, et AUCUNE des trois n'etait stylee : « toujours d'actualite »,
   « amoindri depuis » et « n'a plus cours » rendaient a l'identique, sur les cent
   soixante et onze articles. C'est pourtant l'information la plus discriminante du
   bloc — celle qui dit si ce qu'on vient de lire vaut encore.
   Le motif est celui deja employe pour les statuts ailleurs dans ce produit —
   filet plein, tirete, pointille — et le MOT reste ecrit en toutes lettres : le
   trait et la couleur DOUBLENT le texte, ils ne le remplacent pas. Un lecteur en
   niveaux de gris lit la meme information. */
.im-actualite      { margin: 0 0 .2rem; max-width: var(--mesure); font-size: var(--corps-2);
                     padding-left: .8rem; border-left: var(--filet-citation) solid var(--border-fort); }
.im-a-actuel       { border-left-style: solid;  border-left-color: var(--accent); }
.im-a-amoindri     { border-left-style: dashed; border-left-color: var(--viz-ocre); }
.im-a-perime       { border-left-style: dotted; border-left-color: var(--text-muted); }
.im-a-perime .im-marque { color: var(--text-muted); }
.im-marque         { font-weight: 700; }
.im-sous-titre     { margin: 1rem 0 .4rem; font-family: var(--font-mono); font-size: var(--corps-4);
                     text-transform: uppercase; letter-spacing: var(--surtitre-espacement); color: var(--text-muted); }
.im-mesures        { list-style: none; margin: 0 0 .7rem; padding: 0; }
.im-mesure         { margin: 0 0 .45rem; padding: 0 0 0 .8rem; max-width: var(--mesure);
                     border-left: var(--filet-citation) solid var(--border-fort); font-size: var(--corps-2); }
.im-m-aucune       { border-left-style: dashed; }
.im-annee          { font-family: var(--font-mono); font-weight: 700; margin-right: .45rem; }
.im-nature         { font-size: var(--corps-4); text-transform: uppercase; letter-spacing: var(--surtitre-espacement);
                     border: 1px solid var(--border-fort); border-radius: 999px;
                     padding: .05rem .45rem; margin-right: .45rem; color: var(--text-muted); }
.im-rien           { font-weight: 700; margin-right: .45rem; }
/* Le libelle EST la mesure ; l'annee et la nature n'en sont que les etiquettes.
   Sans distinction, les trois se lisaient d'un seul bloc et le lecteur commencait
   par l'accessoire. Le libelle passe donc a la ligne, sous ses jetons. */
.im-libelle        { display: block; margin-top: .15rem; }
.im-formation      { margin: 0; max-width: var(--mesure); font-size: var(--corps-2); }

/* ------------------------------------------------------------------ */
/* 7 bis. Composants injectés par les scripts partagés                 */
/*                                                                     */
/* Ces classes sont émises par shared/scores.js et shared/pwa.js et     */
/* n'étaient stylées NULLE PART. Deux conséquences distinctes.         */
/*                                                                     */
/* Le sélecteur de mode de jeu : l'état actif n'existait que dans       */
/* aria-pressed. C'est l'inverse du défaut habituel — l'information     */
/* était portée par l'accessibilité seule, et restait invisible à       */
/* l'écran, alors que le mode change tout le comportement du jeu        */
/* (correction immédiate ou différée, score enregistré ou non).         */
/*                                                                     */
/* Le bandeau de mise à jour : sans style, il s'ajoutait en fin de      */
/* document comme du texte nu. Le mécanisme qui prévient le lecteur     */
/* qu'une nouvelle version existe était donc là sans se voir — et       */
/* c'est précisément le défaut contre lequel CACHE_NAME est bumpé à     */
/* chaque livraison.                                                   */
/* ------------------------------------------------------------------ */
.enc-modes {
  display: inline-flex;
  border: 1px solid var(--border-fort);
  border-radius: var(--rayon);
  overflow: hidden;
}
.enc-mode-btn {
  background: var(--surface);
  color: var(--text);
  border: 0;
  border-right: 1px solid var(--border-fort);
  padding: .45rem .85rem;
  min-height: 40px;
  font: inherit;
  font-size: var(--corps-3);
  cursor: pointer;
}
.enc-mode-btn:last-child { border-right: 0; }
.enc-mode-btn:hover { background: var(--surface-2); }
.enc-mode-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
/* L'état actif est doublé par la graisse : la couleur ne porte jamais seule. */
.enc-mode-btn.est-actif {
  background: var(--accent);
  color: var(--surface);
  font-weight: 700;
}

.enc-bandeau-maj {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: min(38rem, calc(100vw - 2rem));
  padding: .75rem 1rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-fort);
  border-left: var(--filet-encart) solid var(--accent);
  border-radius: var(--rayon);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
  font-size: var(--corps-2);
}
.enc-bandeau-action {
  background: var(--accent);
  color: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--rayon);
  padding: .4rem .9rem;
  min-height: 40px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.enc-bandeau-action:focus-visible,
.enc-bandeau-fermer:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.enc-bandeau-fermer {
  background: transparent;
  color: var(--text-muted);
  border: 0;
  font-size: 1.4rem;
  line-height: 1;
  /* 40px : la croix de fermeture est la cible la plus petite du produit,
     et celle qu'on vise dans l'urgence. */
  min-width: 40px;
  min-height: 40px;
  cursor: pointer;
}
.enc-bandeau-fermer:hover { color: var(--text); }

@media print {
  .enc-modes, .enc-bandeau-maj { display: none !important; }
}