@charset "UTF-8";

/* ── POLICES DU SYSTEME, servies par le site (../fonts/), zero requete externe.
      Declarations verbatim de 13_Branding/odersa-design/assets/odersa-systeme.css,
      seuls les chemins changent (la feuille vit dans assets/css/). ─────────── */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/source-serif-4-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/source-serif-4-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/source-serif-4-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/source-serif-4-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/public-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, 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; font-display: swap; src: url("../fonts/public-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Public Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/public-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/public-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, 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: 600; font-display: swap; src: url("../fonts/public-sans-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/public-sans-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, 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: 700; font-display: swap; src: url("../fonts/public-sans-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ==========================================================================
   ODERSA RESEARCH  |  research.odersa.org
   Feuille de style unique du site de la division de recherche.

   CE QUE CE FICHIER EST
   La couche projet du systeme institutionnel ODERSA (13_Branding/odersa-design),
   pas un design de plus. Les jetons, l'echelle, les espacements, le sceau, la
   banniere de confiance, l'en-tete, le pied et les composants existants sont
   recopies du systeme a l'identique, valeur par valeur. Aucune couleur n'est
   inventee : le rouge academique #8C1515 est celui de toute la flotte, et le
   controle du systeme (scripts/verifier-contrastes.py) sort « tous les
   planchers tiennent » sur cette palette.

   POURQUOI CE N'EST PAS assets/odersa-systeme.css
   Le brief du site n'autorise qu'un seul fichier CSS livre : la feuille du
   systeme ne peut pas etre copiee a cote. Ses regles utiles a un site
   d'articles sont donc reprises ici sous LEURS noms de classes et avec LEURS
   valeurs, pour qu'une page de ce site se colle sans retouche dans n'importe
   quel autre site de la flotte. Les composants dont ce site n'a pas l'usage
   (cartes, boutons, jauge, formulaires, etats, fil d'ariane, badges) ne sont
   pas repris : ils restent dans la feuille du systeme.

   LES ECARTS AU SYSTEME, ET LEUR RAISON
   1. Polices EMBARQUEES (arbitrage du 28/08/2026, apres livraison) : les douze
      woff2 du systeme sont copies dans ../fonts/ et declares ci-dessous, copies
      verbatim de odersa-systeme.css (chemins adaptes). L'esprit du verrou etait
      « zero requete vers un tiers », pas « zero police locale » : tout est servi
      par le site lui-meme, et le rendu redevient celui du branding officiel.
   2. Bouton Menu NON repris. La feuille du systeme masque la navigation sous
      64rem et attend la classe .is-open que seul menu.js pose. Le brief
      d'origine verrouillait le zero JavaScript (le bouton serait mort au
      clic sur telephone, defaut deja consigne au JOURNAL du systeme le
      20/08/2026) ; depuis le pupitre (28/08/2026, section 17bis), le site a
      UN script, mais la navigation reste sans script : elle ne se masque
      jamais, elle passe a la ligne.
   3. Theme sombre atteignable SANS attribut. Le systeme exige
      data-theme="auto" pour suivre la preference du systeme d'exploitation ;
      le brief verrouille le sombre par @media (prefers-color-scheme). Les
      jetons sombres sont donc servis par la requete media ET par
      data-theme="dark", data-theme="light" gardant le dernier mot. Cette
      forme comble au passage le trou de matrice du systeme (auto + contraste
      eleve) sans changer une seule valeur de jeton.

   CE QUE LE SYSTEME NE PREVOIT PAS, ET QUI EST COMPOSE ICI
   Le systeme est ferme : ce qu'il ne prevoit pas se compose avec ce qu'il
   prevoit, ou se remonte. Sept pieces manquaient pour un site d'articles
   scientifiques. Elles sont batties uniquement avec ses jetons, et elles sont
   listees dans gabarits/NOTICE-GABARIT.md pour remontee au systeme :
   .figure + .figure__num, .statut, .propriete, .pages, .notes + .renvoi,
   .nombre, et les regles de base absentes (code, dfn, sup, ol numerotee).

   VERROUS TENUS
   - UN SEUL script, celui du pupitre (arbitrage Mael du 28/08/2026) : les
     seules regles qui attendent une classe posee par script sont celles de
     la section 17bis (.no-js, .is-open du panneau), et la page entiere
     reste servie et lisible sans lui ;
   - zero ressource externe : ni @import ni CDN ; les seuls url() et @font-face
     pointent ../fonts/ du site lui-meme (arbitrage du 28/08/2026) ;
   - clair ET sombre par prefers-color-scheme, tous jetons redefinis ;
   - contrastes du systeme, mesures et non annonces ;
   - proprietes LOGIQUES seulement : le systeme reste pret pour le RTL ;
   - cible tactile de 44 px DECLAREE, jamais deduite d'un rembourrage.

   PLAN
     1. Jetons, theme clair            9. Corps de lecture
     2. Jetons, theme sombre          10. Encadre .note
     3. Echelles et cadre             11. Figure et SVG
     4. Socle                         12. Tableau de donnees
     5. Ossature : .wrap, .band       13. Bloc « Propriete »
     6. Banniere de confiance         14. References et appels de note
     7. En-tete de site               15. Pagination de bas de page
     8. Tete de page et statut        16. Pied de page
                                      17. Preferences de lecture
                                      17bis. Panneau de reglages (pupitre)
                                      18. Impression
                                      19. Mouvement reduit
   ========================================================================== */


/* ==========================================================================
   1. JETONS – THEME CLAIR
   Releves du systeme (references/jetons.md). Valeurs inchangees.
   Chacun est redefini en sombre a la section 2, sans exception.
   ========================================================================== */

:root {
  /* Annonce le schema au NAVIGATEUR : c'est lui qui peint les controles
     natifs et les ascenseurs. */
  color-scheme: light;

  /* Les neutres */
  --bg:             #FFFFFF;
  --bg-alt:         #F7F7F5;
  --bg-deep:        #0D0D0D;
  --ink:            #0D0D0D;
  --ink-soft:       #2C2C2C;   /* 13,97:1 – chapeau, legendes, en-tetes */
  --ink-mid:        #5A5A5A;   /*  6,90:1 – texte secondaire, surfaces claires */
  --rule:           #D8D8D2;
  --rule-soft:      #E8E8E3;

  /* La famille sur-noir : les deux surfaces noires du systeme */
  --on-dark:        #F5F5F2;   /* 17,79:1 */
  --on-dark-muted:  #C9C9C4;   /* 11,69:1 */
  --on-dark-faint:  #9A9A94;   /*  6,87:1 */
  --dark-line:      #2E2E2C;

  /* Le rouge du systeme : un seul accent pour toute la flotte */
  --accent:         #8C1515;   /*  9,40:1 sur blanc */
  --accent-deep:    #6E1010;   /* 12,04:1 – survol */
  --accent-bg:      #FDF3F3;   /* le lavis, encre dessus 17,85:1 */
  --accent-on-dark: #E08D8D;   /* le rouge que le noir exige, 7,74:1 */

  --link:           #8C1515;
  --link-hover:     #6E1010;
  --focus:          #8C1515;

  /* Etat actif du controle segmente du pupitre (valeurs de la flotte) */
  --seg-on-bg:      #0D0D0D;
  --seg-on-ink:     #FFFFFF;
}


/* ==========================================================================
   2. JETONS – THEME SOMBRE
   Deux portes : la preference du systeme d'exploitation (verrou du brief) et
   l'attribut data-theme du systeme. data-theme="light" gagne toujours sur la
   preference, sans quoi un choix explicite de clair serait impossible.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:             #121210;
    --bg-alt:         #1B1B18;
    --bg-deep:        #0A0A09;
    --ink:            #ECEBE6;
    --ink-soft:       #CFCEC7;   /* 11,88:1 */
    --ink-mid:        #A6A59D;   /*  7,58:1 */
    --rule:           #3B3B36;
    --rule-soft:      #2C2C29;

    --on-dark:        #ECEBE6;   /* 16,59:1 */
    --on-dark-muted:  #B9B8B1;   /*  9,95:1 */
    --on-dark-faint:  #8F8E88;   /*  6,03:1 */
    --dark-line:      #33332F;

    --accent:         #E08D8D;   /* 7,47:1 */
    --accent-deep:    #EBA7A7;   /* 9,48:1 */
    --accent-bg:      #241616;   /* encre dessus 14,64:1 */
    --accent-on-dark: #E08D8D;

    --link:           #E08D8D;
    --link-hover:     #EBA7A7;
    --focus:          #E08D8D;

    --seg-on-bg:      #ECEBE6;
    --seg-on-ink:     #121210;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:             #121210;
  --bg-alt:         #1B1B18;
  --bg-deep:        #0A0A09;
  --ink:            #ECEBE6;
  --ink-soft:       #CFCEC7;
  --ink-mid:        #A6A59D;
  --rule:           #3B3B36;
  --rule-soft:      #2C2C29;

  --on-dark:        #ECEBE6;
  --on-dark-muted:  #B9B8B1;
  --on-dark-faint:  #8F8E88;
  --dark-line:      #33332F;

  --accent:         #E08D8D;
  --accent-deep:    #EBA7A7;
  --accent-bg:      #241616;
  --accent-on-dark: #E08D8D;

  --link:           #E08D8D;
  --link-hover:     #EBA7A7;
  --focus:          #E08D8D;

  --seg-on-bg:      #ECEBE6;
  --seg-on-ink:     #121210;
}


/* ==========================================================================
   3. ECHELLES ET CADRE
   Jetons du systeme, valeurs inchangees. Ils ne dependent pas du theme.
   L'echelle typographique est fluide : de 360 px a 1440 px sans requete
   media, et data-fontsize la met a l'echelle d'un bloc (section 17).
   ========================================================================== */

:root {
  /* Les deux piles du systeme, recopiees mot pour mot. Faute des woff2, elles
     se resolvent sur les polices de l'appareil : c'est le verrou du brief. */
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Public Sans", "Segoe UI", Arial, sans-serif;
  /* Le systeme ne nomme aucune chasse fixe ; le brief en exige une pour le
     code et les donnees. Composee de piles systeme, aucune requete. */
  --mono:  ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "DejaVu Sans Mono", monospace;

  --t-xs:   0.75rem;
  --t-s:    0.875rem;
  --t-base: 1rem;
  --t-m:    clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
  --t-l:    clamp(1.3rem, 1.16rem + 0.7vw, 1.65rem);
  --t-xl:   clamp(1.55rem, 1.3rem + 1.25vw, 2.15rem);
  --t-2xl:  clamp(1.95rem, 1.5rem + 2.25vw, 3rem);
  --t-3xl:  clamp(2.35rem, 1.7rem + 3.25vw, 3.9rem);

  --s-1:  0.25rem;  --s-2:  0.5rem;   --s-3:  0.75rem;  --s-4:  1rem;
  --s-5:  1.25rem;  --s-6:  1.5rem;   --s-8:  2rem;     --s-10: 2.5rem;
  --s-12: 3rem;     --s-16: 4rem;     --s-20: 5rem;

  --wrap:        82.5rem;   /* le container, 1320 px */
  --wrap-narrow: 55rem;     /* la colonne de lecture */
  --radius:      0px;       /* angles nets, jamais au-dela de 3 px */
  --easing:      cubic-bezier(0.2, 0.8, 0.2, 1);
}


/* ==========================================================================
   4. SOCLE
   Regles de base du systeme. Le corps est en Public Sans, les titres en
   Source Serif 4 : c'est la composition du site mere, et elle ne varie pas
   d'un site de la flotte a l'autre.
   ========================================================================== */

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

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
  font: 400 var(--t-base)/1.62 var(--sans);
  color: var(--ink);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

main { flex: 1 0 auto; }

img { max-inline-size: 100%; block-size: auto; }
svg { display: block; max-inline-size: 100%; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 1.6em 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--t-2xl); margin-block-start: 0; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-m); }

p, ul, ol { margin: 0 0 1em; }

/* La seule contrainte de mesure globale du systeme : la colonne de lecture. */
main p, main li { max-inline-size: 70ch; }

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2.5px;
  transition: color 160ms var(--easing);
}
a:hover { color: var(--link-hover); }

strong { font-weight: 700; }

/* L'italique passe au serif, y compris au milieu d'un texte sans serif. */
em, cite, var { font-family: var(--serif); font-style: italic; }

::selection { background: var(--ink); color: var(--bg); }

/* L'anneau du systeme : 2,5 px, retrait de 2 px, pour que la couleur
   adjacente soit le fond de la page et non le remplissage de la cible. */
:focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius);
}

hr { border: 0; border-block-start: 1px solid var(--rule); margin: var(--s-8) 0; }

/* Le systeme ne pose aucune regle globale sur code : composee de ses jetons. */
code, kbd, samp, pre { font-family: var(--mono); font-size: 0.92em; }
code {
  padding-inline: 0.3em;
  border: 1px solid var(--rule);
  background: var(--bg-alt);
  color: var(--ink-soft);
}
pre {
  overflow-x: auto;
  padding: var(--s-4);
  border: 1px solid var(--rule);
  background: var(--bg-alt);
}
pre code { border: 0; padding: 0; background: none; }

.visually-hidden {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip {
  position: absolute;
  inset-inline-start: -200vw;
  inset-block-start: 0;
  z-index: 100;
  background: var(--bg-deep);
  color: #FFFFFF;
  padding: var(--s-3) var(--s-5);
  font-weight: 600;
}
.skip:focus { inset-inline-start: 0; }

.small { font-size: var(--t-s); }
.muted { color: var(--ink-mid); }
.center { text-align: center; }


/* ==========================================================================
   5. OSSATURE
   .wrap : le container du systeme, 1320 px, son air par clamp.
   .wrap--narrow : la colonne de lecture, 55rem. Le texte s'y plafonne tout
   seul a 70ch par la regle de base ; une figure ou un tableau prend donc
   naturellement plus de large que le texte, sans une regle de plus.
   ========================================================================== */

.wrap {
  max-inline-size: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3vw, 3rem);
}

.wrap--narrow { max-inline-size: var(--wrap-narrow); }

/* L'air du bas d'une page d'article. Le .page-head donne celui du haut ;
   sans cette regle, la pagination viendrait toucher le pied de page. */
main > .wrap { padding-block-end: clamp(var(--s-12), 6vw, var(--s-20)); }

.band { padding-block: clamp(var(--s-10), 5vw, var(--s-16)); }
.band--soft { background: var(--bg-alt); }
.band--rule { border-block-start: 1px solid var(--rule); }


/* ==========================================================================
   6. BANNIERE DE CONFIANCE
   Composant obligatoire de la flotte, premiere chose dans le <body>, sur
   toutes les pages. Elle reste noire dans les deux themes : ses couleurs
   sont ecrites en dur et ne suivent pas les jetons, comme dans le systeme.
   Elle fonctionne sans une ligne de JavaScript : details + summary natifs.
   ========================================================================== */

.banniere { background: #0D0D0D; color: #C9C9C4; font-size: var(--t-xs); }

.banniere__tete {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding-block: var(--s-2);
  min-block-size: 44px;        /* la cible tactile, declaree */
  list-style: none;
  cursor: pointer;
}
.banniere__tete::-webkit-details-marker { display: none; }
.banniere__tete:focus-visible { outline: 2.5px solid #FFFFFF; outline-offset: -2px; }

.banniere__sceau { flex: none; color: #F5F5F2; }

.banniere__dit { letter-spacing: 0.03em; color: #C9C9C4; }

.banniere__savoir {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  color: var(--accent-on-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.banniere__tete:hover .banniere__savoir { color: #FFFFFF; }

/* Le chevron : deux bordures tournees. Aucune image, aucun caractere. */
.banniere__savoir::after {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  border-inline-end: 1.6px solid currentColor;
  border-block-end: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 180ms var(--easing);
}
.banniere[open] .banniere__savoir::after { transform: rotate(225deg) translateY(-2px); }

.banniere__corps { border-block-start: 1px solid var(--dark-line); }

.banniere__grille {
  display: grid;
  gap: var(--s-6);
  padding-block: var(--s-6) var(--s-8);
}
@media (min-width: 40rem) { .banniere__grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .banniere__grille { grid-template-columns: repeat(4, 1fr); } }

.banniere__point {
  border-block-start: 3px solid var(--accent-on-dark);
  padding-block-start: var(--s-3);
}
.banniere__point h2 {
  margin: 0 0 var(--s-2);
  font: 600 var(--t-s)/1.35 var(--sans);
  letter-spacing: 0.01em;
  color: #F5F5F2;
}
.banniere__point p {
  margin: 0;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: #C9C9C4;
  max-inline-size: 42ch;
}
.banniere__point p + p { margin-block-start: 0.6em; }
.banniere__point a { color: #FFFFFF; }
.banniere__point code {
  font: 600 0.95em var(--sans);
  color: #F5F5F2;
  border: 1px solid var(--dark-line);
  background: none;
  padding: 0 0.3em;
}


/* ==========================================================================
   7. EN-TETE DE SITE
   Sceau institutionnel en rouge du systeme + wordmark texte, navigation de
   cinq entrees, bascule de langue. La navigation ne se masque JAMAIS :
   sans JavaScript, un panneau masque serait un menu mort au clic.
   ========================================================================== */

.site-head { background: var(--bg); border-block-end: 1px solid var(--rule); }

.site-head__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-block-size: 74px;
  flex-wrap: wrap;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}

/* Le sceau prend --accent : il est rouge sur TOUS les sites de la flotte. */
.logo svg { flex: none; color: var(--accent); }

.logo__word {
  display: block;
  font: 600 1.35rem/1 var(--serif);
  letter-spacing: 0.02em;
  color: var(--ink);
}

.logo__sub {
  display: block;
  font: 600 0.6rem/1.3 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-block-start: 3px;
}

.nav { display: flex; align-items: center; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.nav__list > li > a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;        /* la cible tactile, declaree */
  padding: 1.55em 0.9em;
  font: 600 var(--t-s)/1.2 var(--sans);
  color: var(--ink-soft);
  text-decoration: none;
  border-block-end: 3px solid transparent;
  transition: color 160ms var(--easing);
}
.nav__list > li > a:hover { color: var(--accent); }
.nav__list > li > a[aria-current="page"] {
  color: var(--accent);
  border-block-end-color: var(--accent);
}

/* Sous 64rem la navigation passe a la ligne : elle ne disparait pas.
   Le systeme la masquerait et attendrait .is-open ; sans JavaScript, ce
   serait un menu mort. Les entrees deviennent une pile de liens. */
@media (max-width: 64rem) {
  .nav { inline-size: 100%; }
  .nav__list { inline-size: 100%; gap: 0; }
  .nav__list > li { inline-size: 100%; }
  .nav__list > li > a {
    display: flex;
    inline-size: 100%;
    padding: var(--s-4) 0;
    border-block-start: 1px solid var(--rule);
    border-block-end: 0;
  }
  .nav__list > li > a[aria-current="page"] { color: var(--accent); }
}

.lang { display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

.lang svg { flex: none; color: var(--ink-mid); }

.lang a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;        /* la cible tactile, declaree */
  padding-inline: var(--s-2);
  font: 600 var(--t-s)/1.2 var(--sans);
  color: var(--ink-soft);
  text-decoration: none;
}
.lang a:hover { color: var(--accent); text-decoration: underline; }
.lang a[aria-current="true"] { color: var(--accent); }


/* ==========================================================================
   8. TETE DE PAGE ET BANDEAU DE STATUT
   .kicker et .lead sont du systeme. Le filet de 24 px du kicker est sa
   signature : il se pose tout seul, ne rien ajouter devant.
   .statut est COMPOSE : le systeme n'a pas de mention d'une ligne, et ses
   .etat sont des blocs qui disent une alerte. Fond et filet neutres : un
   statut n'est pas un etat.
   ========================================================================== */

.kicker {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font: 600 var(--t-xs)/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-4);
}
.kicker::before {
  content: "";
  inline-size: 24px;
  block-size: 1px;
  background: currentColor;
  flex: none;
}

.lead {
  font-size: var(--t-m);
  line-height: 1.5;
  max-inline-size: 62ch;
  color: var(--ink-soft);
}

.page-head { padding-block: clamp(var(--s-10), 5vw, var(--s-16)) var(--s-6); }
.page-head h1 { max-inline-size: 26ch; letter-spacing: -0.022em; }
.page-head .lead { color: var(--ink-mid); }

.meta {
  margin: var(--s-4) 0 0;
  font-size: var(--t-s);
  color: var(--ink-mid);
  max-inline-size: none;
}
.meta > * + *::before {
  content: "\00B7";
  margin-inline: 0.5em;
  color: var(--rule);
}

.statut {
  border: 1px solid var(--rule);
  background: var(--bg-alt);
  padding: var(--s-3) var(--s-5);
  margin-block: var(--s-6);
  font-size: var(--t-s);
  line-height: 1.5;
  color: var(--ink-mid);
}
.statut p { margin: 0; max-inline-size: none; }


/* ==========================================================================
   9. CORPS DE LECTURE
   Les titres, les listes et les citations viennent du socle. Seules les
   pieces absentes du systeme sont ajoutees ici.
   ========================================================================== */

li + li { margin-block-start: 0.35em; }

li::marker { color: var(--ink-mid); }

/* Le systeme ne style aucune liste numerotee : chiffres tabulaires pour que
   les numeros s'alignent, et le rouge du systeme comme pour ses puces. */
main ol { padding-inline-start: var(--s-6); }
main ol > li::marker {
  font-variant-numeric: tabular-nums;
  color: var(--ink-mid);
}

/* La citation longue du systeme. Serif italique, filet de depart rouge. */
.pullquote {
  border-inline-start: 3px solid var(--accent);
  margin: var(--s-8) 0;
  padding: var(--s-2) 0 var(--s-2) var(--s-6);
  font: italic 400 var(--t-m)/1.5 var(--serif);
}
.pullquote p { margin: 0; max-inline-size: none; }
.pullquote p + p { margin-block-start: var(--s-3); }

/* Le systeme ne prevoit pas l'attribution d'une citation : composee. */
.pullquote cite {
  display: block;
  margin-block-start: var(--s-3);
  font: 400 var(--t-s)/1.5 var(--sans);
  font-style: normal;
  color: var(--ink-mid);
}

/* Le systeme ne style pas dfn : compose de ses jetons. */
dfn {
  font-family: var(--serif);
  font-style: italic;
  border-block-end: 1px dotted var(--accent);
}


/* ==========================================================================
   10. ENCADRE .note
   L'encadre generique du systeme, repris tel quel. Il porte la
   vulgarisation ponctuelle : son titre est un .kicker, donc rien de neuf.
   Ce n'est pas un .etat : il n'en a ni le mot, ni le role, ni le filet de
   4 px, et il ne doit pas se lire comme une alerte.
   ========================================================================== */

.note {
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--accent);
  background: var(--bg-alt);
  padding: var(--s-5);
  margin-block: var(--s-6);
}
.note p:last-child { margin-block-end: 0; }
.note .kicker { margin-block-end: var(--s-3); }


/* ==========================================================================
   11. FIGURE ET SVG
   COMPOSE : le systeme sert un <figure> sans classe ni numerotation. La
   numerotation s'ecrit a la main dans le HTML pour survivre a une copie
   dans un traitement de texte. Le SVG suit le theme par currentColor et par
   les jetons : aucune couleur n'y est ecrite en dur.
   ========================================================================== */

.figure { margin: var(--s-8) 0; }

.figure__cadre {
  overflow-x: auto;
  border: 1px solid var(--rule);
  padding: var(--s-4);
}

.figure__legende {
  margin-block-start: var(--s-3);
  font-size: var(--t-s);
  line-height: 1.5;
  color: var(--ink-soft);      /* une legende NOMME la figure */
  max-inline-size: 70ch;
}

.figure__num {
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.graphe { inline-size: 100%; block-size: auto; color: var(--ink-soft); }

.graphe text {
  font-family: var(--sans);
  font-size: 13px;
  fill: currentColor;
}

.graphe .graphe__axe { stroke: var(--rule); stroke-width: 1; }

/* Trois tons derives de l'accent, tous au-dessus du plancher graphique 3:1. */
.graphe .barre--1 { fill: var(--accent); }
.graphe .barre--2 { fill: var(--accent-deep); }
.graphe .barre--3 { fill: var(--ink-mid); }


/* ==========================================================================
   12. TABLEAU DE DONNEES
   Le markup porte tabindex="0", role="region" et un aria-label qui reprend
   la <caption> mot pour mot : une region qui defile a la souris sans etre
   dans l'ordre de tabulation est une colonne qui n'existe pas au clavier.
   ========================================================================== */

.table-wrap { overflow-x: auto; margin-block: var(--s-8); }

/* Retrait NEGATIF : l'anneau ne deborde pas de la colonne de lecture. */
.table-wrap:focus-visible { outline: 2.5px solid var(--focus); outline-offset: -2px; }

table { border-collapse: collapse; inline-size: 100%; font-size: var(--t-s); }

/* Une legende et un en-tete de colonne NOMMENT le tableau : --ink-soft,
   jamais --ink-mid, qui est le texte secondaire et ne porte pas la
   structure d'un composant. */
caption {
  text-align: start;
  font: 600 var(--t-xs)/1.4 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-block-end: var(--s-3);
}

th, td {
  text-align: start;
  padding: var(--s-3) var(--s-4);
  border-block-end: 1px solid var(--rule);
  vertical-align: top;
}

th {
  font-family: var(--sans);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

thead th { border-block-end: 2px solid var(--ink); color: var(--ink); white-space: nowrap; }

tbody th {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--t-s);
  color: var(--ink);
  font-weight: 600;
}

/* Zebrure tres subtile : la bande douce du systeme, rien de plus. Elle
   remplace le survol de ligne du systeme, qui emploie le meme fond et
   deviendrait invisible une rangee sur deux. */
tbody tr:nth-child(even) { background: var(--bg-alt); }

/* COMPOSE : le systeme enonce la regle des chiffres a comparer sans lui
   donner de nom de classe. A remonter au systeme. */
.nombre {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}
thead th.nombre { font-family: var(--sans); }


/* ==========================================================================
   13. BLOC « PROPRIETE »
   COMPOSE : une propriete formelle enoncee. Deux filets, aucun aplat. Le
   systeme interdit la carte decorative et l'ombre molle.
   ========================================================================== */

.propriete {
  border-block-start: 2px solid var(--accent);
  border-block-end: 1px solid var(--rule);
  padding-block: var(--s-4) var(--s-5);
  margin-block: var(--s-8);
}

.propriete .kicker { margin-block-end: 0; }

.propriete__titre {
  margin: var(--s-2) 0 0;
  font-family: var(--sans);
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--ink);
}

.propriete__enonce { margin: var(--s-2) 0 0; }

.propriete__statut {
  margin: var(--s-3) 0 0;
  font-size: var(--t-s);
  color: var(--ink-mid);
}


/* ==========================================================================
   14. REFERENCES ET APPELS DE NOTE
   COMPOSE : le systeme impose un patron « Sources » + liste nue, sans appel
   de note ni retour. Un site d'articles a besoin des deux. La numerotation
   s'ecrit a la main dans le HTML.
   ========================================================================== */

.renvoi { font-size: 0.7em; line-height: 0; vertical-align: super; }
.renvoi a { text-decoration: none; padding-inline: 0.15em; }
.renvoi a:hover { text-decoration: underline; }

.notes { margin-block-start: var(--s-12); }

.notes__liste {
  font-size: var(--t-s);
  line-height: 1.55;
  color: var(--ink-soft);
  padding-inline-start: var(--s-6);
}
.notes__liste li { max-inline-size: 70ch; }
.notes__liste li + li { margin-block-start: var(--s-2); }

/* La note visee s'eclaire : le lavis du systeme, sans animation. */
.notes__liste li:target { background: var(--accent-bg); }

.notes__retour { margin-inline-start: 0.5em; font-size: 0.9em; }


/* ==========================================================================
   15. PAGINATION DE BAS DE PAGE
   COMPOSE : le systeme ne connait que le retour simple d'un article.
   ========================================================================== */

.pages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  justify-content: space-between;
  margin-block-start: var(--s-12);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--rule);
}

.pages__lien {
  flex: 1 1 14rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-block-size: 44px;        /* la cible tactile, declaree */
  text-decoration: none;
}

.pages__lien--precedent { text-align: start; }
.pages__lien--suivant { text-align: end; }

.pages__sens {
  font: 600 var(--t-xs)/1.3 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mid);
}

.pages__titre {
  margin-block-start: var(--s-1);
  font-family: var(--serif);
  font-size: var(--t-base);
  color: var(--link);
}
.pages__lien:hover .pages__titre { color: var(--link-hover); text-decoration: underline; }


/* ==========================================================================
   16. PIED DE PAGE
   Surface noire du systeme : l'encre y est la famille sur-noir, jamais
   --ink-mid, qui tombe a 2,82:1 sur du noir.
   ========================================================================== */

.site-foot { background: var(--bg-deep); color: var(--on-dark); }

.site-foot__grid {
  display: grid;
  gap: var(--s-8) var(--s-6);
  padding-block: var(--s-12) var(--s-8);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  border-block-end: 1px solid var(--dark-line);
}

.site-foot h2 {
  font: 600 var(--t-xs)/1.3 var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--on-dark-faint);
  margin: 0 0 var(--s-4);
}

.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-block-end: var(--s-2); max-inline-size: none; }

.site-foot a {
  color: #E4E4DF;
  text-decoration: none;
  font-size: var(--t-s);
  transition: color 150ms var(--easing);
}
.site-foot a:hover,
.site-foot a:focus-visible { text-decoration: underline; color: #FFFFFF; }
.site-foot :focus-visible { outline-color: #FFFFFF; }

.site-foot__brand { max-inline-size: 40ch; }
.site-foot__brand svg { margin-block-end: var(--s-4); color: #FFFFFF; }
.site-foot__brand strong {
  display: block;
  color: #FFFFFF;
  font: 600 1.15rem/1.2 var(--serif);
  letter-spacing: 0.02em;
  margin-block-end: var(--s-2);
}
.site-foot__brand p {
  font-size: var(--t-s);
  color: var(--on-dark-muted);
  margin: 0;
  line-height: 1.6;
  max-inline-size: none;
}

.site-foot__legal {
  padding-block: var(--s-6);
  font-size: var(--t-xs);
  color: var(--on-dark-muted);
  display: grid;
  gap: var(--s-2);
}
.site-foot__legal p { margin: 0; max-inline-size: none; }
.site-foot__legal a { font-size: inherit; color: #FFFFFF; text-decoration: underline; }


/* ==========================================================================
   17. PREFERENCES DE LECTURE
   Accroches en pur CSS du systeme, posees en attribut sur <html>. Ce site
   n'offre aucun panneau de reglages : il les porte sans frais, et le jour
   ou un panneau existe, il n'y a qu'a basculer l'attribut.
   ========================================================================== */

:root[data-fontsize="l"]  { font-size: 112.5%; }
:root[data-fontsize="xl"] { font-size: 125%; }

:root[data-spacing="wide"] body { line-height: 1.95; letter-spacing: 0.012em; word-spacing: 0.06em; }
:root[data-spacing="wide"] p,
:root[data-spacing="wide"] li { margin-block-end: 1.1em; }

:root[data-contrast="high"] {
  --ink: #000000; --ink-soft: #111111; --ink-mid: #1E1E1E;
  --rule: #5A5A5A; --link: #6E1010; --link-hover: #4A0A0A; --focus: #000000;
}
:root[data-theme="dark"][data-contrast="high"] {
  --ink: #FFFFFF; --ink-soft: #F2F2F2; --ink-mid: #E4E4E4;
  --rule: #8F8F8A; --link: #F0B9B9; --link-hover: #FFD3D3; --focus: #FFFFFF;
}
/* Le trou de matrice du systeme, comble : contraste eleve + sombre suivi de
   la preference du systeme d'exploitation. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-contrast="high"] {
    --ink: #FFFFFF; --ink-soft: #F2F2F2; --ink-mid: #E4E4E4;
    --rule: #8F8F8A; --link: #F0B9B9; --link-hover: #FFD3D3; --focus: #FFFFFF;
  }
}
:root[data-contrast="high"] a { text-decoration-thickness: 2px; }

:root[data-links="marked"] main a {
  text-decoration: underline;
  text-underline-offset: 2px;
  outline: 1px solid var(--rule);
  outline-offset: 2px;
}

:root[data-motion="reduce"] *,
:root[data-motion="reduce"] *::before,
:root[data-motion="reduce"] *::after {
  transition: none !important;
  animation: none !important;
  scroll-behavior: auto !important;
}


/* ==========================================================================
   17bis. PANNEAU DE REGLAGES (pupitre)
   Le composant de la flotte (ODERSA-VITRINE), transplante le 28/08/2026 sur
   ordre de Mael : c'est lui qui bascule les attributs de la section 17.
   CSS repris de la vitrine avec SES pieges reglés d'origine :
   - panneau ferme HORS de l'arbre d'accessibilite : opacity + visibility +
     pointer-events, les TROIS, voile compris (mesure vitrine 29/07 : ferme,
     un role="dialog" aria-modal declare le document inerte et laisse 26
     focalisables hors ecran) ;
   - visibility bascule en 0s, RETARDEE de 240 ms a la seule fermeture —
     jamais une transition DE 240 ms sur visibility (elle rend la valeur
     calculee « hidden » a l'instant du clic et le .focus() echoue) ;
   - le sens de glissade vit dans --pupitre-x, inverse sous [dir="rtl"] —
     jamais un second transform (egalite de specificite avec .is-open) ;
   - .pupitre__langs porte flex-wrap DES LE PREMIER JET (7 autonymes
     insecables ~514 px pour 344 disponibles sinon) ;
   - .seg__btn.seg__btn[aria-pressed] : classe REPETEE expres, (0,3,0),
     pour battre :hover sans dependre de l'ordre source.
   Sans JavaScript : les trois morceaux disparaissent (.no-js ci-dessous),
   la page reste entiere. Le mode lecture (data-reading) est COMPOSE contre
   les classes de CE site, jamais recopie de la vitrine.
   ========================================================================== */

.no-js .pupitre-fab, .no-js .pupitre, .no-js .pupitre-backdrop { display: none; }

kbd { font: 600 0.85em var(--sans); border: 1px solid var(--rule); border-block-end-width: 2px; padding: 0 0.4em; background: var(--bg-alt); }

.ic { flex: none; }

.pupitre-fab { position: fixed; inset-inline-end: 0; top: 42vh; z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--bg-deep); color: #FFFFFF; border: 0; padding: var(--s-3) var(--s-2); cursor: pointer; min-width: 44px; min-height: 44px; }
.pupitre-fab:hover { background: var(--accent); color: #FFFFFF; }
.pupitre-fab span[aria-hidden] { writing-mode: vertical-rl; font: 600 var(--t-xs)/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }

.pupitre-backdrop { position: fixed; inset: 0; z-index: 81; background: rgba(13, 13, 13, 0.55); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 200ms var(--easing), visibility 0s linear 240ms; }
.pupitre-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 200ms var(--easing), visibility 0s linear 0s; }

.pupitre { --pupitre-x: 105%; position: fixed; top: 0; bottom: 0; inset-inline-end: 0; z-index: 82; width: min(24rem, 100vw); background: var(--bg); color: var(--ink); transform: translateX(var(--pupitre-x)); visibility: hidden; opacity: 0; pointer-events: none; transition: transform 240ms var(--easing), visibility 0s linear 240ms; display: flex; flex-direction: column; border-inline-start: 1px solid var(--rule); }
[dir="rtl"] .pupitre { --pupitre-x: -105%; }
.pupitre.is-open { transform: none; visibility: visible; opacity: 1; pointer-events: auto; transition: transform 240ms var(--easing), visibility 0s linear 0s; }

.pupitre__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); background: var(--bg-deep); color: #FFFFFF; padding: var(--s-4) var(--s-5); }
.pupitre__head h2 { margin: 0; color: #FFFFFF; font-size: var(--t-m); }
.pupitre__close { background: none; border: 1px solid rgba(255,255,255,0.45); color: #FFFFFF; font-size: 1.3rem; line-height: 1; padding: 0.25em 0.5em; cursor: pointer; min-width: 44px; min-height: 40px; }
.pupitre__close:hover { border-color: #FFFFFF; }
.pupitre__body { overflow-y: auto; padding: var(--s-4) var(--s-5) var(--s-8); flex: 1; }
.pupitre__section { border-block-start: 1px solid var(--rule); padding-block: var(--s-4); }
.pupitre__section:first-child { border-block-start: 0; }
.pupitre__section h3 { margin: 0 0 var(--s-3); font: 600 var(--t-xs)/1.3 var(--sans); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-mid); }
.pupitre__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-block-end: var(--s-3); flex-wrap: wrap; }
.pupitre__label { font-size: var(--t-s); }

.seg { display: inline-flex; flex-wrap: wrap; }
.seg__btn { background: var(--bg); border: 1px solid var(--rule); color: var(--ink); font: 600 var(--t-xs)/1.2 var(--sans); padding: 0.55em 0.9em; margin-inline-start: -1px; cursor: pointer; min-height: 36px; transition: border-color 150ms var(--easing), color 150ms var(--easing), background-color 150ms var(--easing); }
.seg__btn:first-child { margin-inline-start: 0; }
.seg__btn:hover { border-color: var(--accent); color: var(--accent); position: relative; z-index: 1; }
.seg__btn.seg__btn[aria-pressed="true"] { background: var(--seg-on-bg); border-color: var(--seg-on-bg); color: var(--seg-on-ink); position: relative; z-index: 1; }

.pupitre__list { list-style: none; margin: 0; padding: 0; }
.pupitre__list li { margin-block-end: var(--s-2); }
.pupitre__list a, .pupitre__list button { display: flex; align-items: center; gap: 0.6em; width: 100%; text-align: start; background: none; border: 0; color: var(--ink); font: 400 var(--t-s)/1.4 var(--sans); text-decoration: none; padding: 0.5em 0; cursor: pointer; min-height: 40px; }
.pupitre__list a:hover, .pupitre__list button:hover { color: var(--accent); }
.pupitre__list .ic { color: var(--accent); }
.pupitre__danger { color: var(--accent); }
.pupitre__speech-status { min-height: 1.2em; font-size: var(--t-xs); color: var(--ink-mid); margin: var(--s-2) 0 0; }

.pupitre__langs { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pupitre__langs a { flex: 1; text-align: center; border: 1px solid var(--rule); padding: 0.6em; font: 600 var(--t-s) var(--sans); text-decoration: none; color: var(--ink); }
.pupitre__langs a[aria-current="true"] { background: var(--seg-on-bg); border-color: var(--seg-on-bg); color: var(--seg-on-ink); }
.pupitre__foot { border-block-start: 1px solid var(--rule); padding: var(--s-3) var(--s-5); font-size: var(--t-xs); color: var(--ink-mid); }

.help-dialog { border: 1px solid var(--ink); padding: var(--s-6); max-width: min(26rem, 92vw); background: var(--bg); color: var(--ink); }
.help-dialog::backdrop { background: rgba(13, 13, 13, 0.55); }
.help-dialog h2 { margin-block-start: 0; font-size: var(--t-m); }
.help-dialog__close { text-align: center; margin-block-start: var(--s-6); }

/* Mode lecture — COMPOSE pour ce site (le defaut vitrine repeignait le
   conteneur en laissant les enfants : 1,00:1 mesure chez elle le 24/08).
   Ici les enfants des bandes sombres sont repeints EXPLICITEMENT, parce que
   .band--dark h2/h3/a portent une couleur DIRECTE #FFFFFF qui battrait
   l'heritage du conteneur repeint. Contrastes : --ink sur --bg (13,97:1
   clair, 15,7:1 sombre), --ink-mid legende (6,90:1 / 7,58:1). */
:root[data-reading="on"] .banniere,
:root[data-reading="on"] .site-head,
:root[data-reading="on"] .site-foot,
:root[data-reading="on"] .pages,
:root[data-reading="on"] .pupitre-fab { display: none; }
:root[data-reading="on"] main { max-inline-size: var(--wrap-narrow); margin-inline: auto; }
:root[data-reading="on"] .band,
:root[data-reading="on"] .band--soft,
:root[data-reading="on"] .band--dark { background: var(--bg); color: var(--ink); }
:root[data-reading="on"] .band--dark h2,
:root[data-reading="on"] .band--dark h3,
:root[data-reading="on"] .band--dark p,
:root[data-reading="on"] .band--dark a { color: var(--ink); }
:root[data-reading="on"] .kicker--ondark { color: var(--ink-mid); }


/* ==========================================================================
   18. IMPRESSION
   Le critere du brief : une page imprimee doit passer pour la page d'un
   cahier de laboratoire. Encre noire, chrome masque, blocs insecables.
   Le systeme veut que les adresses des liens sortent en clair : elles
   sortent pour les liens ABSOLUS du corps, qui sont des sources citees, et
   pas pour la navigation interne, qui ne s'imprime pas.
   ========================================================================== */

@media print {
  .banniere,
  .nav,
  .lang,
  .skip,
  .pages,
  .pupitre-fab,
  .pupitre,
  .pupitre-backdrop,
  .help-dialog,
  .notes__retour { display: none !important; }

  body { font-size: 11pt; color: #000; background: #fff; }

  .site-head { border-block-end: 1px solid #000; }
  .site-foot { background: none; color: #000; }
  .site-foot__grid { display: none !important; }
  .site-foot__legal { color: #000; border-block-start: 1px solid #000; }

  .wrap { max-inline-size: none; padding-inline: 0; }
  .band { padding-block: 0.6cm 0; }
  .band--dark { background: none; color: #000; }
  .band--dark h2, .band--dark h3 { color: #000; }

  .note, .statut, .propriete, .vide { background: none; }

  .note,
  .statut,
  .propriete,
  .figure,
  .figure__cadre,
  .pullquote,
  .card,
  table { break-inside: avoid; border-color: #000; }

  h1, h2, h3 { break-after: avoid; }

  .table-wrap { overflow-x: visible; }
  tbody tr:nth-child(even) { background: none; }
  .notes__liste li:target { background: none; }

  a { color: #000; }
  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }

  p, li { orphans: 3; widows: 3; }
}


/* ==========================================================================
   19. MOUVEMENT REDUIT
   Le systeme ne veut rien qui clignote et rien qui se declenche au
   defilement. Ce garde-fou coupe le peu qui reste.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   20. COMPOSANTS COMPLEMENTAIRES
   Passe « laboratoire » du 28/08/2026 : les composants de vitrine repris un
   temps du systeme (cartes .grid/.card, boutons .btn/.toolbar, .badges,
   tuiles .stats/.stat, heros .hero) ont ete RETIRES de cette feuille avec
   leurs jetons --btn-*, en meme temps que les pages cessaient de les
   employer (verifie par recherche : zero occurrence dans site\). Le registre
   des projets, les portes de lecture et les appels de contact sont des
   listes et des liens en prose du corps de lecture (section 9).

   RESTENT ICI, tous composes avec les jetons des sections 1-3 :
     - LA BANDE SOMBRE : .band--dark et .kicker--ondark (systeme, section 4),
       UN SEUL usage par langue — la doctrine de l'accueil.
     - LA SORTIE DE DEMONSTRATION : .demo et ses parties (piece composee, a
       remonter au systeme).
     - LE SCHEMA : .schema et sa legende (piece composee, a remonter).
     - LE BLOC DE CODE : .bloc-code (piece composee, a remonter) — commandes
       et BibTeX ; remplace les styles en ligne des pre, interdits.

   PIEGE bande sombre : .band--dark ne blanchit QUE h2 et h3 — jamais de h1
   ni de .lead sur fond sombre. .kicker--ondark remplace .kicker des que le
   fond est sombre (le rouge du systeme y est illisible, 2,07:1).

   VERROUS TENUS : un seul script (le pupitre, section 17bis — la page vit
   sans lui), zero ressource externe, clair ET sombre sans jeton nouveau,
   proprietes logiques.
   ========================================================================== */

.band--dark { background: var(--bg-deep); color: var(--on-dark); }
.band--dark h2, .band--dark h3 { color: #FFFFFF; }
.band--dark a { color: #FFFFFF; }

.kicker--ondark { color: var(--on-dark-muted); }

/* ── SORTIE DE DEMONSTRATION (.demo) — piece composee, jetons du systeme
      uniquement (a remonter au systeme, comme les 7 de la notice). Une sortie
      REELLE du moteur, non retouchee : filet complet, jamais un aplat qui
      crierait « citation decorative ». dir="rtl" vient du HTML, pas d'ici :
      les proprietes logiques suffisent. ─────────────────────────────────── */
.demo {
  margin-block: var(--s-8);
  border: 1px solid var(--rule);
  background: var(--bg);
}
.demo__titre {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4);
  align-items: baseline; justify-content: space-between;
  margin: 0; padding: var(--s-3) var(--s-5);
  border-block-end: 1px solid var(--rule-soft);
  background: var(--bg-alt);
  font: 600 var(--t-s)/1.3 var(--sans);
  color: var(--ink-soft);
}
.demo__langue { font-size: var(--t-base); color: var(--ink); }
.demo__meta {
  font: 400 var(--t-xs)/1.3 var(--sans);
  color: var(--ink-mid);
  letter-spacing: 0.07em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.demo__texte { padding: var(--s-4) var(--s-5); }
.demo__texte p { margin-block: 0 var(--s-3); max-inline-size: 70ch; }
.demo__texte p:last-child { margin-block-end: 0; }
.demo[dir="rtl"] .demo__texte p { max-inline-size: none; }


/* ── SCHEMA (.schema) — figure de diagramme pleine colonne : le SVG vient de
      la page (courants du theme via var()), le cadre et la legende d'ici.
      Meme contrat que .figure ; il existe pour donner au diagramme l'air
      du papier (fond a peine teinte) sans toucher aux figures de donnees. */
.schema {
  margin-block: var(--s-8);
  border: 1px solid var(--rule);
  background: var(--bg-alt);
  padding: var(--s-5);
}
.schema svg { display: block; inline-size: 100%; block-size: auto; }
.schema__legende {
  margin-block-start: var(--s-3);
  font: 400 var(--t-s)/1.55 var(--sans);
  color: var(--ink-soft);
}
.schema__legende .figure__num { font-weight: 600; color: var(--ink); }

/* ── BLOC DE CODE (.bloc-code) — piece composee, jetons du systeme uniquement
      (a remonter au systeme). Commandes et BibTeX : memes valeurs que les
      anciens styles en ligne des pre, desormais interdits de retour. ──────── */
.bloc-code {
  overflow-x: auto;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-size: 0.82rem;
  line-height: 1.55;
}