/* 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;
  --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; }
: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); }
.banniere__tete { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding-block: var(--s-2); min-height: 40px; 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; }
.lang a { 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: 40px; display: inline-flex; align-items: center; }
.lang a:hover { color: var(--accent); }
.lang a[aria-current="true"] { color: var(--ink); border-block-end: 2px solid var(--accent); }

.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: 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); }
.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 ═══════════ */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: var(--t-s); }
caption { text-align: start; font: 600 var(--t-xs)/1.4 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mid); 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-mid); 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); }

/* ═══════════ 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; }
.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 { break-inside: avoid; border-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; }
}