/* ODERSA : LE systeme institutionnel de la flotte.
   Ce fichier n'est pas inspire d'odersa.org : c'est le template d'odersa.org,
   releve dans le CSS servi (/assets/css/main.css), generalise pour tout projet.
   Les jetons, les polices, l'echelle, les espacements, le container et les
   composants sont recopies tels quels. Les seuls ajouts sont nommes comme tels :
   la banniere de confiance et les quatre etats fonctionnels, tous mesures.

   Fond blanc pur, encre quasi-noire, accent UNIQUE rouge academique #8C1515,
   titres serif d'autorite (Source Serif 4), corps sans-serif humaniste
   (Public Sans), container 1320 px, densite elevee, filets fins, angles nets.
   Interdits tenus : arrondis > 3 px, ombres molles, pastels, second accent.
   Zero dependance : polices embarquees, aucun CDN, aucun script requis.

   UNE SEULE COULEUR POUR TOUTE LA FLOTTE. Le rouge n'est pas la couleur du
   site mere : c'est la couleur du systeme, sur tous les sites, comme le bleu
   du DSFR ou le vert des boutons de GOV.UK. Un projet ne le remplace pas.
   CE QUI CHANGE D'UN SITE A L'AUTRE : le nom dans l'en-tete, le logo, et
   l'imagerie libre de son sujet aux emplacements prevus. Rien d'autre.       */

/* ---------- Polices embarquees (woff2, subsets latin + latin-ext) ---------- */
@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; }

/* ═══════════ 1. JETONS, RELEVES SUR ODERSA.ORG (identiques sur toute la flotte) ═══════════ */
:root {
  /* Annonce le schema au NAVIGATEUR : c'est lui qui peint les controles natifs
     (liste deroulante d'un select, ascenseurs). Sans cette ligne la liste reste
     blanche en theme sombre alors que le texte des options herite du clair. */
  color-scheme: light;
  --bg: #FFFFFF;
  --bg-alt: #F7F7F5;
  --bg-deep: #0D0D0D;
  --ink: #0D0D0D;
  --ink-soft: #2C2C2C;
  --ink-mid: #5A5A5A;
  --rule: #D8D8D2;
  --rule-soft: #E8E8E3;
  --accent: #8C1515;          /* le rouge du systeme        9,40:1 sur blanc */
  --accent-deep: #6E1010;     /* survol                    12,04:1 sur blanc */
  --accent-bg: #FDF3F3;       /* lavis, encre dessus       17,85:1           */
  --on-dark: #F5F5F2;
  --on-dark-muted: #C9C9C4;
  --on-dark-faint: #9A9A94;
  --dark-line: #2E2E2C;
  --focus: #8C1515;
  --link: #8C1515;
  --link-hover: #6E1010;
  /* Le rouge tel qu'il se lit SUR UNE SURFACE NOIRE (banniere, pied de page).
     #8C1515 ne tient que 2,07:1 sur #0D0D0D : sur du noir, le rouge du systeme
     est sa variante claire, celle du theme sombre du site mere, a 7,74:1. */
  --accent-on-dark: #E08D8D;
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Public Sans", "Segoe UI", Arial, sans-serif;
  /* AUCUNE face a chasse fixe n'est embarquee par le systeme : cette pile est
     donc celle du systeme d'exploitation, et c'est assume. Elle existe pour que
     trois pages ne l'inventent pas chacune de leur cote, ce qui rendait le meme
     <code> dans trois polices differentes selon la machine. */
  --mono: ui-monospace, "Cascadia Code", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, "Liberation 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;          /* container 1320 px */
  --wrap-narrow: 55rem;
  --radius: 0px;
  --easing: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ═══════════ 2. LES QUATRE ETATS FONCTIONNELS (ajout du systeme, mesures) ═══════════
   Fixes et communs a toute la flotte. Ils ne varient pas par projet.
   L'ERREUR N'EST PAS LE ROUGE D'IDENTITE : deux nuances distinctes, mesurees.
   Ecart Lab CIE76 entre les cinq couleurs porteuses de sens : 32,0 au minimum
   (identite / erreur), au-dessus du seuil de 25,2 deja tenu par le site mere.
   Chacune tient 4,5:1 sur blanc ET sur --bg-alt, et 4,5:1 pour du blanc pose
   dessus : la meme valeur sert au texte et au fond d'un bandeau plein.
   Un etat ne se dit JAMAIS par la seule couleur : un mot, une forme, un role. */
:root {
  --etat-erreur: #CC2200;       /* 5,53:1 blanc · 5,16:1 bande · ecart 32,0 du rouge */
  --etat-erreur-bg: #FBEDEB;    /* encre dessus 17,04:1 */
  --etat-succes: #17694A;       /* 6,65:1 · 6,20:1 */
  --etat-succes-bg: #ECF3F1;    /* 17,27:1 */
  --etat-alerte: #8A5A00;       /* 5,93:1 · 5,53:1 */
  --etat-alerte-bg: #F6F2EB;    /* 17,42:1 */
  --etat-info: #1256A8;         /* 7,19:1 · 6,70:1 */
  --etat-info-bg: #ECF1F8;      /* 17,13:1 */
}

/* ═══════════ 3. THEME SOMBRE ═══════════
   Le CLAIR est le defaut de l'archetype (blanc pur, premiere impression
   contractuelle). Le sombre s'obtient par choix : data-theme="dark", ou
   data-theme="auto" qui suit alors la preference du systeme.                 */
: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;
  --accent: #E08D8D;            /* 7,47:1 sur #121210 */
  --accent-deep: #EBA7A7;       /* 9,48:1 */
  --accent-bg: #241616;         /* encre dessus 14,64:1 */
  --on-dark: #ECEBE6;
  --on-dark-muted: #B9B8B1;
  --on-dark-faint: #8F8E88;
  --dark-line: #33332F;
  --focus: #E08D8D;
  --link: #E08D8D;
  --link-hover: #EBA7A7;
  --etat-erreur: #FA6A45;       /* 6,44:1 · 5,93:1 · ecart 40,7 du rouge sombre */
  --etat-erreur-bg: #2E1D16;    /* encre dessus 13,50:1 */
  --etat-succes: #3EBE8B;       /* 7,99:1 · 7,35:1 */
  --etat-succes-bg: #17271F;    /* 13,07:1 */
  --etat-alerte: #EBCE4B;       /* 12,02:1 · 11,07:1 */
  --etat-alerte-bg: #2C2917;    /* 12,25:1 */
  --etat-info: #82A9F0;         /* 7,93:1 · 7,30:1 */
  --etat-info-bg: #1F242B;      /* 13,08:1 */
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --bg: #121210; --bg-alt: #1B1B18; --bg-deep: #0A0A09;
    --ink: #ECEBE6; --ink-soft: #CFCEC7; --ink-mid: #A6A59D;
    --rule: #3B3B36; --rule-soft: #2C2C29;
    --accent: #E08D8D; --accent-deep: #EBA7A7; --accent-bg: #241616;
    --on-dark: #ECEBE6; --on-dark-muted: #B9B8B1; --on-dark-faint: #8F8E88;
    --dark-line: #33332F;
    --focus: #E08D8D; --link: #E08D8D; --link-hover: #EBA7A7;
    --etat-erreur: #FA6A45; --etat-erreur-bg: #2E1D16;
    --etat-succes: #3EBE8B; --etat-succes-bg: #17271F;
    --etat-alerte: #EBCE4B; --etat-alerte-bg: #2C2917;
    --etat-info: #82A9F0; --etat-info-bg: #1F242B;
  }
}

/* Boutons pleins et controles inverses : la teinte d'assise change en sombre.
   Blanc sur #8C1515 = 9,40:1 ; blanc sur #A63030 = 6,80:1 ; sur #B93E3E = 5,50:1. */
:root { --btn-solid: #0D0D0D; --btn-solid-ink: #FFFFFF; --btn-solid-hover: #6E1010; --btn-solid-hover-ink: #FFFFFF; --btn-accent: #8C1515; --btn-accent-hover: #6E1010; --seg-on-bg: #0D0D0D; --seg-on-ink: #FFFFFF; }
:root[data-theme="dark"] { --btn-solid: #ECEBE6; --btn-solid-ink: #121210; --btn-solid-hover: #FFFFFF; --btn-solid-hover-ink: #121210; --btn-accent: #A63030; --btn-accent-hover: #B93E3E; --seg-on-bg: #ECEBE6; --seg-on-ink: #121210; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --btn-solid: #ECEBE6; --btn-solid-ink: #121210; --btn-solid-hover: #FFFFFF; --btn-solid-hover-ink: #121210;
    --btn-accent: #A63030; --btn-accent-hover: #B93E3E;
    --seg-on-bg: #ECEBE6; --seg-on-ink: #121210;
  }
}

/* ---------- Preferences de lecture (attributs data- poses sur <html>) ----------
   Pur CSS : un projet qui n'offre aucun panneau de reglages les garde sans
   frais, et celui qui en ajoute un n'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 renforce ne couvrait que le sombre EXPLICITE : la voie data-theme="auto"
   sur un systeme en sombre retombait sur la palette CLAIRE renforcee, encre
   #000000 sur fond #121210, soit 1,12:1 sur toutes les pages, et le panneau de
   reglages qui aurait permis d'en sortir devenait illisible avec elles. La
   variante auto reste enfermee dans sa media query et porte les DEUX attributs :
   specificite 0,3,0, elle bat le renforce clair sans jamais l'atteindre quand le
   systeme est en clair. #FFFFFF sur #121210 = 18,75:1. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"][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:not(.btn) { 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; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ═══════════ 4. BASE ═══════════ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  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;
}
img { max-width: 100%; height: auto; }
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; }
main p, main li { max-width: 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; }
em { font-family: var(--serif); font-style: italic; }
::selection { background: var(--ink); color: var(--bg); }
/* L'anneau garde 2 px de retrait : la couleur adjacente est donc le fond de la
   page (9,40:1 sur blanc), jamais le remplissage du bouton qu'il entoure. */
:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; border-radius: var(--radius); }
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); }
hr { border: 0; border-block-start: 1px solid var(--rule); margin: var(--s-8) 0; }

.visually-hidden { position: absolute !important; width: 1px; height: 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; top: 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; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.25rem, 3vw, 3rem); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.muted { color: var(--ink-mid); }
.small { font-size: var(--t-s); }
.lead { font-size: var(--t-m); line-height: 1.5; max-width: 62ch; color: var(--ink-soft); }
.center { text-align: center; }
.band { padding-block: clamp(var(--s-10), 5vw, var(--s-16)); }
.band--soft { background: var(--bg-alt); }
.band--dark { background: var(--bg-deep); color: var(--on-dark); }
.band--dark h2, .band--dark h3 { color: #FFFFFF; }
.band--dark a { color: #FFFFFF; }
.band--rule { border-block-start: 1px solid var(--rule); }

/* Etiquette de section (eyebrow academique) : filet + capitales espacees */
.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; }
.kicker--ondark { color: var(--on-dark-muted); }

/* ═══════════ 5. LA BANNIERE DE CONFIANCE ═══════════
   Piece maitresse. En tete de CHAQUE site de la flotte, avant l'en-tete.
   Bande NOIRE, texte clair, a la maniere du bandeau de GOV.UK et de la logique
   de banniere officielle d'USWDS (domaine public). Elle reste noire dans les
   deux themes, comme la barre utilitaire du site mere : ses couleurs sont donc
   ecrites en dur, pas prises aux jetons de theme.
   Contrastes mesures sur #0D0D0D : #F5F5F2 17,79:1 · #C9C9C4 11,69:1 ·
   #E08D8D 7,74:1 · blanc 19,44:1.
   Fonctionne sans une ligne de JavaScript : details/summary. L'etat deplie est
   expose nativement par le navigateur sur le summary, donc aucun aria-expanded
   n'est ecrit a la main : l'ajouter fait annoncer l'etat deux fois par
   plusieurs lecteurs d'ecran.                                                */
.banniere { background: #0D0D0D; color: #C9C9C4; font-size: var(--t-xs); }
/* Le summary EST la cible tactile de la banniere : plancher de 44 px comme
   toute cible du systeme, releve de 40 le 20/08/2026. */
.banniere__tete { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding-block: var(--s-2); min-height: 44px; 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; }
.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-width: 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); padding: 0 0.3em; }

/* ═══════════ 6. EN-TETE DE SITE ═══════════ */
.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-height: 74px; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex: none; }
.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; 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); }

/* Selecteur de 7 langues : des liens nus, une page par langue, aucun script */
.lang { display: flex; align-items: center; gap: var(--s-2); flex: none; flex-wrap: wrap; }
.lang svg { color: var(--ink-mid); flex: none; }
/* Sept liens serres : ce sont les cibles les plus etroites du systeme, donc
   celles qui exigent le plancher, pas celles qui s'en dispensent. 44 px. */
.lang a, .lang span[aria-current="true"] { color: var(--ink-soft); text-decoration: none; font: 600 var(--t-xs)/1 var(--sans); letter-spacing: 0.06em; padding: 0.7em 0.45em; min-height: 44px; display: inline-flex; align-items: center; }
.lang a:hover { color: var(--accent); }
.lang a[aria-current="true"], .lang span[aria-current="true"] { color: var(--ink); border-block-end: 2px solid var(--accent); }

/* LE BOUTON MENU A BESOIN DE SON SCRIPT, ET CE SCRIPT A UN DOMICILE :
   `assets/menu.js`, a copier a cote de la feuille. Il bascule la classe
   `is-open` et l'attribut `aria-expanded` ensemble. Un gabarit qui sert le
   bouton sans le script sert un menu mort au clic sous 64rem. */
.nav-toggle { display: none; }
@media (max-width: 64rem) {
  .nav-toggle { display: inline-flex; align-items: center; gap: 0.5em; background: none; border: 1px solid var(--rule); padding: 0.5em 0.9em; font: 600 var(--t-s) var(--sans); color: var(--ink); cursor: pointer; min-height: 44px; }
  .nav { display: none; width: 100%; }
  .nav.is-open { display: block; }
  .nav__list { display: block; }
  .nav__list > li > a { display: flex; padding: var(--s-4) 0; border-block-start: 1px solid var(--rule); border-block-end: 0; }
  /* Sans JavaScript la navigation reste depliee et accessible */
  .no-js .nav-toggle { display: none; }
  .no-js .nav { display: block; }
}

/* Fil d'ariane */
.fil { padding-block: var(--s-4); font-size: var(--t-xs); }
.fil ol { display: flex; flex-wrap: wrap; gap: 0.35em var(--s-2); margin: 0; padding: 0; list-style: none; }
.fil li { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink-mid); }
.fil li + li::before { content: ""; inline-size: 5px; block-size: 5px; border-inline-end: 1.4px solid var(--rule); border-block-start: 1.4px solid var(--rule); transform: rotate(45deg); flex: none; }
[dir="rtl"] .fil li + li::before { transform: rotate(225deg); }
.fil a { color: var(--ink-mid); }
.fil a:hover { color: var(--accent); }
.fil [aria-current="page"] { color: var(--ink); font-weight: 600; }

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

/* ═══════════ 7. BOUTONS ═══════════
   .btn         action par defaut, assise d'encre. C'est le bouton courant.
   .btn--accent l'action principale d'une page, en rouge du systeme. Une seule
                par ecran : deux rouges pleins cote a cote n'en designent aucun.
   .btn--ghost  action secondaire, filet d'encre, fond transparent.           */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.78em 1.4em; border: 1px solid var(--btn-solid); background: var(--btn-solid); color: var(--btn-solid-ink); font: 600 var(--t-s)/1.2 var(--sans); letter-spacing: 0.01em; text-decoration: none; cursor: pointer; min-height: 44px; transition: background-color 180ms var(--easing), border-color 180ms var(--easing), color 180ms var(--easing); }
.btn:hover { background: var(--btn-solid-hover); border-color: var(--btn-solid-hover); color: var(--btn-solid-hover-ink); }
.btn--accent { background: var(--btn-accent); border-color: var(--btn-accent); color: #FFFFFF; }
.btn--accent:hover { background: var(--btn-accent-hover); border-color: var(--btn-accent-hover); color: #FFFFFF; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); }
.btn--big { font-size: var(--t-base); padding: 0.85em 1.6em; }
.btn[aria-disabled="true"], .btn:disabled { background: var(--bg-alt); border-color: var(--rule); color: var(--ink-mid); cursor: not-allowed; }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* ═══════════ 8. CARTES, BADGES, ENCADRES ═══════════ */
.grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card { display: block; border: 1px solid var(--rule); border-block-start: 3px solid var(--ink); background: var(--bg); padding: var(--s-6); text-decoration: none; color: var(--ink); transition: border-color 180ms var(--easing), transform 180ms var(--easing); }
a.card:hover { border-color: var(--accent); border-block-start-color: var(--accent); transform: translateY(-2px); color: var(--ink); }
.card h3 { margin: var(--s-2) 0; font-size: 1.1rem; }
.card p { color: var(--ink-mid); font-size: var(--t-s); margin: 0; max-width: none; }
.card__go { display: inline-block; margin-block-start: var(--s-4); font: 600 var(--t-xs)/1.3 var(--sans); letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); }
.card__num { font: 600 var(--t-s)/1 var(--serif); color: var(--accent); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }

.badges { display: flex; flex-wrap: wrap; gap: var(--s-3); padding: 0; margin: 0; list-style: none; }
.badge { display: inline-flex; align-items: center; gap: 0.55em; border: 1px solid var(--rule); border-inline-start: 3px solid var(--accent); padding: 0.5em 0.9em; font: 600 var(--t-xs)/1.3 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); background: var(--bg); }
.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; }
.pullquote { border-inline-start: 3px solid var(--accent); margin-block: var(--s-8); margin-inline: 0; padding-block: var(--s-2); padding-inline: var(--s-6) 0; font: italic 400 var(--t-m)/1.5 var(--serif); }
.checklist { list-style: none; padding: 0; }
.checklist li { padding-inline-start: 1.7em; position: relative; margin-block-end: 0.45em; }
.checklist li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.42em; inline-size: 0.95em; block-size: 0.5em; border-inline-start: 2.5px solid var(--accent); border-block-end: 2.5px solid var(--accent); transform: rotate(-45deg); }
[dir="rtl"] .checklist li::before { transform: rotate(-45deg) scaleX(-1); }

/* Messages d'etat : la couleur double le mot, elle ne le remplace jamais.
   Chaque etat porte son intitule en clair et un filet epais de 4 px.         */
.etat { border: 1px solid var(--rule); border-inline-start: 4px solid var(--ink); padding: var(--s-4) var(--s-5); margin-block: var(--s-5); }
.etat > strong { display: block; font: 700 var(--t-s)/1.4 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; margin-block-end: var(--s-2); }
.etat p:last-child { margin-block-end: 0; }
.etat--erreur { border-inline-start-color: var(--etat-erreur); background: var(--etat-erreur-bg); }
.etat--erreur > strong { color: var(--etat-erreur); }
.etat--succes { border-inline-start-color: var(--etat-succes); background: var(--etat-succes-bg); }
.etat--succes > strong { color: var(--etat-succes); }
.etat--alerte { border-inline-start-color: var(--etat-alerte); background: var(--etat-alerte-bg); }
.etat--alerte > strong { color: var(--etat-alerte); }
.etat--info { border-inline-start-color: var(--etat-info); background: var(--etat-info-bg); }
.etat--info > strong { color: var(--etat-info); }

/* Etat vide : une invitation a agir, jamais une excuse */
.vide { border: 1px dashed var(--rule); background: var(--bg-alt); padding: clamp(var(--s-6), 5vw, var(--s-12)); text-align: center; }
.vide h2 { margin-block-start: 0; font-size: var(--t-l); }
.vide p { margin-inline: auto; color: var(--ink-mid); max-width: 48ch; }
.vide .toolbar { justify-content: center; margin-block-start: var(--s-5); }

/* ═══════════ 9. TABLEAUX ═══════════
   UNE REGION QUI DEFILE EST UNE REGION QU'ON DOIT POUVOIR ATTEINDRE AU CLAVIER.
   `overflow-x: auto` seul ne donne le defilement qu'a la souris et au doigt :
   qui navigue au clavier n'atteint jamais la colonne de droite d'un tableau
   large. Le markup porte donc `tabindex="0" role="region" aria-label="..."`
   sur le `.table-wrap` (voir references/composants.md), et la feuille rend ce
   foyer visible. Le retrait est NEGATIF ici : l'anneau se dessine a l'interieur
   de la region, sinon il deborde de la colonne de lecture.                    */
.table-wrap { overflow-x: auto; }
.table-wrap:focus-visible { outline: 2.5px solid var(--focus); outline-offset: -2px; }
table { border-collapse: collapse; width: 100%; font-size: var(--t-s); }
/* La legende et les en-tetes de colonne PORTENT LA STRUCTURE du tableau : ils
   prennent --ink-soft, pas --ink-mid. Mesure du 20/08/2026 : --ink-mid tombe a
   2,82:1 des que le tableau se pose sur une surface sombre, et c'est le seul
   endroit du systeme ou un composant entier changeait de fond sans que son
   encre suive. --ink-soft tient 13,97:1 sur le fond et 13,02:1 sur la bande. */
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; }
/* Un en-tete de LIGNE nomme une chose, il ne titre pas une colonne : il garde
   sa casse et son encre. Sans cette regle il herite des capitales espacees et
   du gris des `th` de tete, et un nom propre se met a crier en gris. */
tbody th { text-transform: none; letter-spacing: 0; font-size: var(--t-s); color: var(--ink); font-weight: 600; }
tbody tr:hover { background: var(--bg-alt); }

/* UN TABLEAU DANS UNE BANDE SOMBRE prend la famille sur-noir. Sans ces quatre
   lignes, la legende et les en-tetes gardent l'encre du theme clair sur du noir
   (--ink 1,00:1, --ink-soft 1,39:1, --ink-mid 2,82:1 : illisible a invisible),
   et le survol de ligne repeignait la ligne en blanc casse sous du texte clair.
   Mesures sur #0D0D0D : #FFFFFF 19,44:1 · --on-dark-muted 11,69:1. Sur la
   ligne survolee, qui vaut --dark-line : --on-dark 12,46:1, --on-dark-muted
   8,19:1, #FFFFFF 13,61:1.                                                   */
.band--dark caption, .site-foot caption,
.band--dark th, .site-foot th { color: var(--on-dark-muted); }
.band--dark thead th, .site-foot thead th { color: #FFFFFF; border-block-end-color: var(--on-dark); }
.band--dark tbody th, .site-foot tbody th { color: #FFFFFF; }
.band--dark th, .band--dark td, .site-foot th, .site-foot td { border-block-end-color: var(--dark-line); }
.band--dark tbody tr:hover, .site-foot tbody tr:hover { background: var(--dark-line); }

/* ═══════════ 9 bis. LA JAUGE ═══════════
   HABILLEE AUX JETONS, PARCE QUE SINON PERSONNE NE REPOND DE SON RENDU : sans
   ces regles, `<meter>` est peint par le navigateur (vert chez les uns, gris
   chez les autres), hors du systeme et sans contraste garanti dans aucun des
   deux themes. `appearance: none` est la condition pour que les pseudo-elements
   de remplissage obeissent.
   Le remplissage est --accent dans les TROIS zones de valeur : une jauge du
   systeme MESURE, elle ne juge pas. Un vert de « bonne valeur » et un rouge de
   « mauvaise valeur » diraient un etat par la seule couleur, ce que le systeme
   interdit : la valeur se dit en mots a cote de la jauge.
   Contraste du remplissage sur son rail, plancher WCAG 1.4.11 de 3:1 pour un
   element graphique porteur d'information : clair --accent sur --bg-alt 8,77:1,
   sombre --accent sur --bg-alt 6,88:1.                                       */
meter { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; inline-size: 100%; max-inline-size: 22rem; block-size: 0.75rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg-alt); }
meter::-webkit-meter-inner-element { block-size: 100%; }
meter::-webkit-meter-bar { background: var(--bg-alt); border: 0; border-radius: var(--radius); block-size: 100%; }
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value { background: var(--accent); border-radius: var(--radius); }
meter::-moz-meter-bar { background: var(--accent); border-radius: var(--radius); }
/* Sur une bande sombre, le rail devient --dark-line et le remplissage passe a
   --accent-on-dark : le meme rouge a la luminance que le noir exige. Mesure du
   remplissage sur son rail : 5,42:1 en clair, 5,05:1 en sombre. --accent, lui,
   ne tiendrait que 1,45:1 sur --dark-line en theme clair. */
.band--dark meter, .site-foot meter { border-color: var(--dark-line); background: var(--dark-line); }
.band--dark meter::-webkit-meter-bar, .site-foot meter::-webkit-meter-bar { background: var(--dark-line); }
.band--dark meter::-webkit-meter-optimum-value, .band--dark meter::-webkit-meter-suboptimum-value, .band--dark meter::-webkit-meter-even-less-good-value,
.site-foot meter::-webkit-meter-optimum-value, .site-foot meter::-webkit-meter-suboptimum-value, .site-foot meter::-webkit-meter-even-less-good-value { background: var(--accent-on-dark); }
.band--dark meter::-moz-meter-bar, .site-foot meter::-moz-meter-bar { background: var(--accent-on-dark); }
/* <progress> suit <meter> a la regle pres. Les deux elements ne disent pas la
   meme chose — <meter> MESURE un etat, <progress> dit l'avancement d'une tache —
   et le systeme employait le second sans l'habiller : son rendu etait celui du
   navigateur, vert chez l'un, gris chez l'autre, hors du systeme et sans
   contraste garanti. Memes jetons, memes ratios mesures que la jauge ci-dessus :
   remplissage --accent sur rail --bg-alt, 8,77:1 en clair, 6,88:1 en sombre. */
progress { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; inline-size: 100%; max-inline-size: 22rem; block-size: 0.75rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg-alt); }
progress::-webkit-progress-bar { background: var(--bg-alt); border: 0; border-radius: var(--radius); }
progress::-webkit-progress-value { background: var(--accent); border-radius: var(--radius); }
progress::-moz-progress-bar { background: var(--accent); border-radius: var(--radius); }
/* Sur une bande sombre, meme bascule que la jauge : rail --dark-line,
   remplissage --accent-on-dark. Mesure du remplissage sur son rail : 5,42:1 en
   clair, 5,05:1 en sombre. --accent ne tiendrait que 1,45:1 sur --dark-line. */
.band--dark progress, .site-foot progress { border-color: var(--dark-line); background: var(--dark-line); }
.band--dark progress::-webkit-progress-bar, .site-foot progress::-webkit-progress-bar { background: var(--dark-line); }
.band--dark progress::-webkit-progress-value, .site-foot progress::-webkit-progress-value { background: var(--accent-on-dark); }
.band--dark progress::-moz-progress-bar, .site-foot progress::-moz-progress-bar { background: var(--accent-on-dark); }

/* La valeur en clair, a cote de la jauge : la couleur ne dit jamais seule. */
.jauge { display: grid; gap: var(--s-2); margin-block: var(--s-4); max-inline-size: 22rem; }
.jauge__dit { font: 600 var(--t-s)/1.4 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.band--dark .jauge__dit, .site-foot .jauge__dit { color: var(--on-dark); }

/* ═══════════ 10. FORMULAIRES ═══════════ */
.champ { margin-block-end: var(--s-5); max-width: 34rem; }
.champ > label { display: block; font: 600 var(--t-s)/1.4 var(--sans); color: var(--ink); margin-block-end: var(--s-2); }
.champ__aide { display: block; font-size: var(--t-xs); color: var(--ink-mid); margin-block-end: var(--s-2); }
.champ input, .champ select, .champ textarea {
  display: block; width: 100%; font: 400 var(--t-base)/1.5 var(--sans);
  color: var(--ink); background: var(--bg); border: 1px solid var(--ink-mid);
  border-radius: var(--radius); padding: 0.6em 0.7em; min-height: 44px;
}
.champ textarea { min-height: 8rem; resize: vertical; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 1px; border-color: var(--ink); }
/* Un champ en erreur se voit de trois facons : filet epais, intitule d'erreur
   servi en mots, et aria-describedby qui relie les deux. Jamais la couleur seule. */
.champ--erreur input, .champ--erreur select, .champ--erreur textarea { border-width: 2px; border-color: var(--etat-erreur); }
.champ__erreur { display: block; font: 600 var(--t-s)/1.5 var(--sans); color: var(--etat-erreur); border-inline-start: 4px solid var(--etat-erreur); padding-inline-start: var(--s-3); margin-block-start: var(--s-2); }
fieldset { border: 1px solid var(--rule); padding: var(--s-5); margin: 0 0 var(--s-6); }
legend { font: 600 var(--t-s)/1.4 var(--sans); padding-inline: var(--s-2); }

/* ═══════════ 11. PIED DE PAGE ═══════════ */
.prefoot { background: var(--bg-alt); border-block-start: 1px solid var(--rule); }
.prefoot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5); padding-block: var(--s-8); }
.prefoot h2 { margin: 0; font-size: var(--t-l); max-width: 26ch; }
.prefoot p { margin: var(--s-2) 0 0; color: var(--ink-mid); font-size: var(--t-s); max-width: 56ch; }

.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); }
.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; }
/* Meme raison sur une bande sombre : --focus (#8C1515) ne tient que 2,07:1 sur
   --bg-deep, sous le plancher WCAG 1.4.11 de 3:1 pour un indicateur de focus.
   --accent-on-dark tient 7,74:1. Sans cette ligne, un lien focalise dans une
   bande sombre en theme CLAIR — l'etat par defaut — n'a pas d'anneau lisible. */
.band--dark :focus-visible { outline-color: var(--accent-on-dark); }
.site-foot__brand { max-width: 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; }
.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 a { font-size: inherit; color: #FFFFFF; text-decoration: underline; }

/* ═══════════ 12. IMPRESSION ═══════════ */
@media print {
  .banniere, .nav, .nav-toggle, .lang, .prefoot, .site-foot__grid, .skip, .toolbar, .btn { 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__legal { color: #000; border-block-start: 1px solid #000; }
  .band--dark { background: none; color: #000; }
  .band--dark h2, .band--dark h3 { color: #000; }
  .card, .note, .etat, .vide, table, figure, .jauge { break-inside: avoid; border-color: #000; }
  /* Une jauge ne s'imprime pas : les navigateurs ne peignent pas son
     remplissage sur papier. C'est `.jauge__dit` qui porte la valeur en mots,
     et c'est lui qui reste. */
  meter { display: none !important; }
  .jauge__dit { color: #000; }
  .note, .etat, .vide { background: none; }
  .etat > strong, .champ__erreur { color: #000; }
  a { color: #000; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}