/* ==========================================================================
   CHARTE GRAPHIQUE — Suite outils RH (MGN / VDN / CCAS)
   Version 2.0 — définitive
   --------------------------------------------------------------------------
   Palette   : Braise  — #FAFBFD Neige · #AA0003 Inferno · #BFB4DC Pervenche
   Direction : Aurore  — fond ambiant en dégradés diffus, chrome dépoli
   Menu      : rail vertical dépoli

   Règle de répartition, sans exception :
     · Inferno   = identité ET danger. Aucune action « pour avancer » n'est rouge.
     · Pervenche = action et information.
     · Jade      = validation.  Miel = alerte.
     · Neige     = structure, texte, surfaces.

   Règle Aurore, sans exception :
     · Le dégradé est sur une couche FIXE, jamais sur un conteneur qui défile.
     · On ne floute QUE ce qui ne bouge pas : rail et barre du haut.
     · Les surfaces de données (cartes, tableaux) restent OPAQUES.

   Sommaire :
     1. Gammes         5. Reset & base
     2. Clair          6. Aurore
     3. Sombre         7. Composants
     4. Mesures        8. Accessibilité
   Aucune dépendance externe. Utilisable en offline.
   ========================================================================== */

/* ==========================================================================
   1. GAMMES
   ========================================================================== */
:root {
  /* --- Neige : neutre froid ---------------------------------------------- */
  --neige-0:   #FFFFFF;
  --neige-25:  #FAFBFD;   /* SOCLE — Bright Snow */
  --neige-50:  #F4F6FA;
  --neige-100: #EAEDF3;
  --neige-200: #DADFE8;
  --neige-300: #C2C9D6;
  --neige-400: #A3ACBD;
  --neige-500: #838DA1;
  --neige-600: #677184;   /* 4,9:1 sur blanc — plus petit gris lisible */
  --neige-700: #4E5766;
  --neige-800: #363D49;
  --neige-900: #22262E;
  --neige-950: #14171C;

  /* --- Inferno : identité et danger --------------------------------------- */
  --inferno-50:  #FDECEC;
  --inferno-100: #FAD1D1;
  --inferno-200: #F2A3A3;
  --inferno-300: #E56A6A;
  --inferno-400: #CE3436;
  --inferno-500: #AA0003;  /* SOCLE — 7,8:1 sur blanc */
  --inferno-600: #8C0003;
  --inferno-700: #6E0002;
  --inferno-800: #500002;
  --inferno-900: #360001;

  /* --- Pervenche : action et information ---------------------------------- */
  --perv-50:  #F5F3FA;
  --perv-100: #EAE6F4;
  --perv-200: #D7CFE9;
  --perv-300: #BFB4DC;     /* SOCLE — Periwinkle */
  --perv-400: #A294C6;
  --perv-500: #8674AE;
  --perv-600: #6D5B95;
  --perv-700: #5B4E7D;     /* 7,4:1 sur blanc — action */
  --perv-800: #443A5E;
  --perv-900: #2E2740;

  /* --- Extension minimale : validation et alerte -------------------------- */
  --jade-50:  #E8F5F1;
  --jade-200: #B2DDD0;
  --jade-400: #2FA483;
  --jade-600: #0E7C61;     /* 5,2:1 sur blanc */
  --jade-800: #0A5442;

  --miel-50:  #FAF3E3;
  --miel-200: #EBD8A6;
  --miel-400: #C79A2E;
  --miel-600: #92680A;     /* 5,0:1 sur blanc */
  --miel-800: #614506;
}

/* ==========================================================================
   2. TOKENS SÉMANTIQUES — THÈME CLAIR (défaut)
   ========================================================================== */
:root, [data-theme="clair"] {
  color-scheme: light;

  --fond-page:      var(--neige-25);
  --fond-surface:   var(--neige-0);
  --fond-surface-2: var(--neige-25);
  --fond-surface-3: var(--neige-100);
  --fond-inverse:   var(--neige-900);
  --fond-survol:    var(--neige-50);
  --fond-selection: var(--perv-100);

  --texte-primaire:   var(--neige-900);
  --texte-secondaire: var(--neige-700);
  --texte-tertiaire:  var(--neige-600);
  --texte-desactive:  var(--neige-400);
  --texte-inverse:    var(--neige-0);
  --texte-lien:       var(--perv-700);

  --bordure:          var(--neige-200);
  --bordure-forte:    var(--neige-300);
  --bordure-discrete: var(--neige-100);
  --bordure-focus:    var(--perv-500);

  --marque:         var(--inferno-500);
  --marque-texte:   var(--inferno-600);
  --marque-fond:    var(--inferno-50);
  --marque-bordure: var(--inferno-200);
  --marque-contre:  var(--perv-300);
  --filet:          var(--inferno-500);

  --action:        var(--perv-700);
  --action-survol: var(--perv-600);
  --action-actif:  var(--perv-800);
  --action-texte:  var(--neige-0);

  --succes: var(--jade-600);    --succes-fond: var(--jade-50);    --succes-bordure: var(--jade-200);
  --danger: var(--inferno-500); --danger-fond: var(--inferno-50); --danger-bordure: var(--inferno-200);
  --alerte: var(--miel-600);    --alerte-fond: var(--miel-50);    --alerte-bordure: var(--miel-200);
  --info:   var(--perv-700);    --info-fond:   var(--perv-50);    --info-bordure:   var(--perv-200);

  --ombre-xs: 0 1px 2px rgba(34, 38, 46, .06);
  --ombre-sm: 0 1px 3px rgba(34, 38, 46, .09), 0 1px 2px rgba(34, 38, 46, .04);
  --ombre-md: 0 4px 14px rgba(34, 38, 46, .10);
  --ombre-lg: 0 14px 36px rgba(34, 38, 46, .14);
  --ombre-focus: 0 0 0 3px rgba(134, 116, 174, .35);

  /* Aurore : les deux nappes de fond et le verre */
  --aurore-1: rgba(170, 0, 3, .13);
  --aurore-2: rgba(191, 180, 220, .55);
  --aurore-3: rgba(191, 180, 220, .30);
  --voile:         rgba(255, 255, 255, .62);
  --voile-bordure: rgba(255, 255, 255, .70);
  --voile-survol:  rgba(255, 255, 255, .85);
}

/* ==========================================================================
   3. TOKENS SÉMANTIQUES — THÈME SOMBRE
   ========================================================================== */
[data-theme="sombre"] {
  color-scheme: dark;

  --fond-page:      #101319;
  --fond-surface:   #181C24;
  --fond-surface-2: #1F242D;
  --fond-surface-3: #2A303B;
  --fond-inverse:   var(--neige-50);
  --fond-survol:    #222833;
  --fond-selection: rgba(191, 180, 220, .16);

  --texte-primaire:   var(--neige-50);
  --texte-secondaire: var(--neige-300);
  --texte-tertiaire:  var(--neige-400);
  --texte-desactive:  var(--neige-600);
  --texte-inverse:    var(--neige-950);
  --texte-lien:       var(--perv-300);

  --bordure:          #2E3542;
  --bordure-forte:    #3E4757;
  --bordure-discrete: #242A34;
  --bordure-focus:    var(--perv-300);

  --marque:         var(--inferno-300);
  --marque-texte:   var(--inferno-300);
  --marque-fond:    rgba(229, 106, 106, .12);
  --marque-bordure: rgba(229, 106, 106, .30);
  --marque-contre:  var(--perv-300);
  --filet:          var(--inferno-400);

  /* En nuit, la pervenche profonde disparaît : l'action s'éclaircit. */
  --action:        var(--perv-300);
  --action-survol: var(--perv-200);
  --action-actif:  var(--perv-400);
  --action-texte:  var(--perv-900);

  --succes: #58C4A5;            --succes-fond: rgba(88,196,165,.10);  --succes-bordure: rgba(88,196,165,.28);
  --danger: var(--inferno-300); --danger-fond: rgba(229,106,106,.10); --danger-bordure: rgba(229,106,106,.28);
  --alerte: #DCB65E;            --alerte-fond: rgba(220,182,94,.10);  --alerte-bordure: rgba(220,182,94,.28);
  --info:   var(--perv-300);    --info-fond:   rgba(191,180,220,.10); --info-bordure:   rgba(191,180,220,.28);

  --ombre-xs: 0 1px 2px rgba(0,0,0,.45);
  --ombre-sm: 0 1px 3px rgba(0,0,0,.50), 0 1px 2px rgba(0,0,0,.32);
  --ombre-md: 0 4px 14px rgba(0,0,0,.55);
  --ombre-lg: 0 14px 36px rgba(0,0,0,.65);
  --ombre-focus: 0 0 0 3px rgba(191,180,220,.35);

  --aurore-1: rgba(170, 0, 3, .30);
  --aurore-2: rgba(109, 91, 149, .38);
  --aurore-3: rgba(109, 91, 149, .22);
  --voile:         rgba(28, 32, 41, .58);
  --voile-bordure: rgba(255, 255, 255, .09);
  --voile-survol:  rgba(40, 46, 58, .78);
}

/* ==========================================================================
   4. TYPOGRAPHIE · ESPACEMENT · RAYONS · DENSITÉ
   ========================================================================== */
:root {
  --police: 'Inter', 'Inter Variable', -apple-system, BlinkMacSystemFont,
            'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --police-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas,
                 'Liberation Mono', Menlo, monospace;

  --t-2xs: 11px; --t-xs: 12px; --t-sm: 13px; --t-md: 14px; --t-lg: 16px;
  --t-xl: 18px;  --t-2xl: 21px; --t-3xl: 26px; --t-4xl: 32px;

  --lh-serre: 1.25; --lh-normal: 1.45; --lh-large: 1.65;
  --gras-normal: 400; --gras-moyen: 500; --gras-fort: 600; --gras-titre: 700;
  --ls-titre: -0.02em; --ls-normal: 0; --ls-surtitre: 0.08em;

  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;  --e-5: 20px;
  --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px; --e-16: 64px;

  --r-xs: 4px; --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 26px;
  --r-plein: 999px;

  --filet-epaisseur: 3px;
  --largeur-rail: 218px;
  --flou: 18px;

  --h-ligne: 40px; --h-controle: 38px;
  --pad-cellule: 10px 12px; --pad-carte: var(--e-5);

  --transition: 140ms cubic-bezier(.4, 0, .2, 1);
  --z-rail: 20; --z-barre: 20; --z-menu: 60; --z-modale: 100;
}

[data-densite="compacte"] {
  --h-ligne: 32px; --h-controle: 32px;
  --pad-cellule: 6px 10px; --pad-carte: var(--e-4);
  --t-md: 13px;
}

/* ==========================================================================
   5. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: var(--t-md);
  line-height: var(--lh-normal);
  color: var(--texte-primaire);
  background: var(--fond-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--gras-fort); line-height: var(--lh-serre); letter-spacing: var(--ls-titre); }
h1 { font-size: var(--t-4xl); font-weight: var(--gras-titre); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-2xl); }
h4 { font-size: var(--t-xl); }
h5 { font-size: var(--t-lg); }
h6 { font-size: var(--t-md); }
p { margin: 0 0 var(--e-3); }

a { color: var(--texte-lien); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--fond-selection); }

/* Toute donnée chiffrée est alignée : indices, montants, ETP, effectifs */
.chiffre, .tableau td, .tableau th, input[type="number"], .kpi-valeur, .mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ==========================================================================
   6. AURORE
   La couche de fond est FIXE et vit hors du flux : elle ne défile jamais.
   Le verre ne s'applique qu'au chrome. Les données restent opaques.
   ========================================================================== */
.aurore-fond {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(62% 58% at 12% -6%,  var(--aurore-1), transparent 68%),
    radial-gradient(58% 52% at 88%  4%,  var(--aurore-2), transparent 70%),
    radial-gradient(70% 60% at 50% 108%, var(--aurore-3), transparent 72%),
    var(--fond-page);
}

/* Surface dépolie — à réserver au chrome immobile (rail, barre, modale) */
.voile {
  background: var(--voile);
  -webkit-backdrop-filter: blur(var(--flou)) saturate(1.2);
  backdrop-filter: blur(var(--flou)) saturate(1.2);
  border: 1px solid var(--voile-bordure);
}

/* Repli sans flou : navigateur ancien, parc hétérogène, impression */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .voile { background: var(--fond-surface); }
}
@media print {
  .aurore-fond { display: none; }
  .voile { background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Un long tableau ne doit jamais être flouté : trop coûteux au défilement. */
.opaque { background: var(--fond-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ==========================================================================
   7. COMPOSANTS
   ========================================================================== */

/* --- 7.1 Surtitre et filet : le motif d'identité -------------------------- */
.surtitre {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-size: var(--t-2xs); font-weight: var(--gras-fort);
  letter-spacing: var(--ls-surtitre); text-transform: uppercase;
  color: var(--texte-tertiaire);
}
.surtitre::before {
  content: ''; width: 18px; height: var(--filet-epaisseur);
  background: var(--filet); border-radius: var(--r-plein);
}
.filet-gauche { border-left: var(--filet-epaisseur) solid var(--filet); padding-left: var(--e-4); }

/* --- 7.2 Boutons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  height: var(--h-controle); padding: 0 var(--e-4);
  border: 1px solid transparent; border-radius: var(--r-md);
  font-family: inherit; font-size: var(--t-md); font-weight: var(--gras-moyen);
  line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), box-shadow var(--transition);
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primaire { background: var(--action); color: var(--action-texte); font-weight: var(--gras-fort); box-shadow: var(--ombre-xs); }
.btn-primaire:hover:not(:disabled) { background: var(--action-survol); box-shadow: var(--ombre-sm); }
.btn-primaire:active:not(:disabled) { background: var(--action-actif); box-shadow: none; }

.btn-secondaire { background: var(--voile); border-color: var(--bordure-forte); color: var(--texte-primaire); }
.btn-secondaire:hover:not(:disabled) { background: var(--voile-survol); border-color: var(--neige-400); }

.btn-discret { background: transparent; color: var(--texte-secondaire); }
.btn-discret:hover:not(:disabled) { background: var(--fond-survol); color: var(--texte-primaire); }

/* Danger : contour. Jamais un aplat, sauf confirmation explicite. */
.btn-danger { background: var(--voile); border-color: var(--danger-bordure); color: var(--danger); font-weight: var(--gras-fort); }
.btn-danger:hover:not(:disabled) { background: var(--danger-fond); border-color: var(--danger); }
.btn-danger-confirme { background: var(--inferno-500); color: var(--neige-0); border-color: transparent; }
.btn-danger-confirme:hover:not(:disabled) { background: var(--inferno-600); }

.btn-sm { height: 30px; padding: 0 var(--e-3); font-size: var(--t-sm); }
.btn-lg { height: 46px; padding: 0 var(--e-6); font-size: var(--t-lg); }
.btn-icone { width: var(--h-controle); padding: 0; }

/* --- 7.3 Champs ---------------------------------------------------------- */
.champ {
  width: 100%; height: var(--h-controle); padding: 0 var(--e-3);
  font-family: inherit; font-size: var(--t-md); color: var(--texte-primaire);
  background: var(--voile); border: 1px solid var(--bordure-forte);
  border-radius: var(--r-md);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ::placeholder { color: var(--texte-desactive); }
.champ:hover:not(:disabled) { border-color: var(--neige-400); }
.champ:focus { outline: none; border-color: var(--bordure-focus); box-shadow: var(--ombre-focus); }
.champ:disabled { background: var(--fond-surface-3); color: var(--texte-desactive); cursor: not-allowed; }
.champ[aria-invalid="true"] { border-color: var(--danger); }
textarea.champ { height: auto; min-height: 88px; padding: var(--e-3); line-height: var(--lh-normal); resize: vertical; }
select.champ {
  appearance: none; padding-right: var(--e-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23677184' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--e-3) center;
}
.etiquette { display: block; margin-bottom: var(--e-1); font-size: var(--t-sm); font-weight: var(--gras-moyen); color: var(--texte-secondaire); }
.aide { margin-top: var(--e-1); font-size: var(--t-xs); color: var(--texte-tertiaire); }
.aide-erreur { color: var(--danger); font-weight: var(--gras-moyen); }

/* --- 7.4 RefSelect : liste groupée avec repli en saisie libre ------------- */
.ref-select { position: relative; display: flex; flex-direction: column; gap: var(--e-1); }
.ref-select select optgroup { font-weight: var(--gras-fort); color: var(--texte-tertiaire); font-style: normal; }
.ref-select select option { font-weight: var(--gras-normal); color: var(--texte-primaire); }
.ref-select-bascule {
  align-self: flex-start; border: 0; background: none; padding: 0;
  font-family: inherit; font-size: var(--t-xs); font-weight: var(--gras-moyen);
  color: var(--texte-lien); cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.ref-select-libre { border-style: dashed; }
.ref-select-hors-ref {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-xs); color: var(--alerte); font-weight: var(--gras-moyen);
}

/* --- 7.5 Cartes ---------------------------------------------------------- */
.carte { background: var(--fond-surface); border: 1px solid var(--bordure); border-radius: var(--r-lg); box-shadow: var(--ombre-sm); }
.carte-entete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); padding: var(--e-4) var(--pad-carte); border-bottom: 1px solid var(--bordure-discrete); }
.carte-titre { font-size: var(--t-lg); font-weight: var(--gras-fort); }
.carte-corps { padding: var(--pad-carte); }
.carte-pied { display: flex; align-items: center; justify-content: flex-end; gap: var(--e-2); padding: var(--e-3) var(--pad-carte); border-top: 1px solid var(--bordure-discrete); background: var(--fond-surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.carte-marquee { border-top: var(--filet-epaisseur) solid var(--filet); }

/* --- 7.6 Pastilles ------------------------------------------------------- */
.pastille {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 var(--e-2);
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: var(--t-xs); font-weight: var(--gras-fort); white-space: nowrap;
}
.pastille-neutre { background: var(--fond-surface-3); border-color: var(--bordure); color: var(--texte-secondaire); }
.pastille-succes { background: var(--succes-fond); border-color: var(--succes-bordure); color: var(--succes); }
.pastille-danger { background: var(--danger-fond); border-color: var(--danger-bordure); color: var(--danger); }
.pastille-alerte { background: var(--alerte-fond); border-color: var(--alerte-bordure); color: var(--alerte); }
.pastille-info   { background: var(--info-fond);   border-color: var(--info-bordure);   color: var(--info); }
.pastille-marque { background: var(--marque-fond); border-color: var(--marque-bordure); color: var(--marque-texte); }
.point { width: 7px; height: 7px; border-radius: var(--r-plein); background: currentColor; flex: none; }

/* Identité collectivité — pastille douce uniquement, jamais un aplat plein */
.coll-mgn  { background: var(--marque-fond); border-color: var(--marque-bordure); color: var(--marque-texte); }
.coll-vdn  { background: var(--info-fond);   border-color: var(--info-bordure);   color: var(--info); }
.coll-ccas { background: var(--succes-fond); border-color: var(--succes-bordure); color: var(--succes); }

/* --- 7.7 Bandeaux d'état ------------------------------------------------- */
.bandeau {
  display: flex; gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid; border-left-width: var(--filet-epaisseur);
  border-radius: var(--r-md); font-size: var(--t-md);
}
.bandeau-titre { font-weight: var(--gras-fort); margin-bottom: 2px; }
.bandeau-succes { background: var(--succes-fond); border-color: var(--succes-bordure); border-left-color: var(--jade-400); color: var(--succes); }
.bandeau-danger { background: var(--danger-fond); border-color: var(--danger-bordure); border-left-color: var(--inferno-400); color: var(--danger); }
.bandeau-alerte { background: var(--alerte-fond); border-color: var(--alerte-bordure); border-left-color: var(--miel-400); color: var(--alerte); }
.bandeau-info   { background: var(--info-fond);   border-color: var(--info-bordure);   border-left-color: var(--perv-400); color: var(--info); }

/* --- 7.8 Tableaux de données (toujours opaques) -------------------------- */
.tableau-enveloppe { background: var(--fond-surface); border: 1px solid var(--bordure); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--ombre-sm); }
.tableau { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-md); }
.tableau thead th {
  position: sticky; top: 0; z-index: 1;
  padding: var(--pad-cellule); text-align: left;
  font-size: var(--t-xs); font-weight: var(--gras-fort);
  letter-spacing: var(--ls-surtitre); text-transform: uppercase;
  color: var(--texte-tertiaire);
  background: var(--fond-surface-2);   /* opaque : un thead collant flouté bave */
  border-bottom: 1px solid var(--bordure);
}
.tableau tbody td { height: var(--h-ligne); padding: var(--pad-cellule); border-bottom: 1px solid var(--bordure-discrete); color: var(--texte-secondaire); }
.tableau tbody td:first-child { color: var(--texte-primaire); font-weight: var(--gras-moyen); }
.tableau tbody tr:hover td { background: var(--fond-survol); }
.tableau tbody tr[aria-selected="true"] td { background: var(--fond-selection); }
.tableau tbody tr[aria-selected="true"] td:first-child { box-shadow: inset var(--filet-epaisseur) 0 0 var(--filet); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- 7.9 Navigation horizontale ------------------------------------------ */
.nav { display: flex; gap: var(--e-1); border-bottom: 1px solid var(--voile-bordure); }
.nav-item {
  position: relative; padding: var(--e-3) var(--e-4);
  border: 0; background: none; font-family: inherit;
  font-size: var(--t-md); font-weight: var(--gras-moyen);
  color: var(--texte-tertiaire); cursor: pointer; transition: color var(--transition);
}
.nav-item:hover { color: var(--texte-primaire); }
.nav-item[aria-current="page"], .nav-item.actif { color: var(--texte-primaire); font-weight: var(--gras-fort); }
.nav-item[aria-current="page"]::after, .nav-item.actif::after {
  content: ''; position: absolute; left: var(--e-3); right: var(--e-3); bottom: -1px;
  height: var(--filet-epaisseur); background: var(--filet);
  border-radius: var(--r-plein) var(--r-plein) 0 0;
}

/* --- 7.10 Rail vertical dépoli ------------------------------------------- */
.rail {
  display: flex; flex-direction: column; gap: 2px;
  width: var(--largeur-rail); flex: none;
  padding: var(--e-4) var(--e-3);
  background: var(--voile);
  -webkit-backdrop-filter: blur(var(--flou)) saturate(1.2);
  backdrop-filter: blur(var(--flou)) saturate(1.2);
  border-right: 1px solid var(--voile-bordure);
  overflow-y: auto;
}
.rail-titre { display: flex; align-items: center; gap: var(--e-2); padding: 0 var(--e-2) var(--e-5); color: var(--texte-primaire); font-weight: var(--gras-titre); letter-spacing: var(--ls-titre); }
.rail-groupe { padding: var(--e-4) var(--e-2) var(--e-1); font-size: var(--t-2xs); letter-spacing: var(--ls-surtitre); text-transform: uppercase; color: var(--texte-tertiaire); }
.rail-item {
  display: flex; align-items: center; gap: var(--e-2);
  padding: 9px var(--e-3); border: 0; border-radius: 8px;
  background: none; font-family: inherit; font-size: var(--t-md); font-weight: var(--gras-moyen);
  color: var(--texte-secondaire); text-align: left; cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.rail-item:hover { background: var(--fond-survol); color: var(--texte-primaire); }
.rail-item[aria-current="page"], .rail-item.actif {
  background: var(--marque-fond); color: var(--marque-texte); font-weight: var(--gras-fort);
  box-shadow: inset var(--filet-epaisseur) 0 0 var(--filet);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rail { background: var(--fond-surface); }
}

/* --- 7.11 Barre supérieure dépolie --------------------------------------- */
.barre {
  display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap;
  padding: var(--e-3) var(--e-4);
  background: var(--voile);
  -webkit-backdrop-filter: blur(var(--flou)) saturate(1.2);
  backdrop-filter: blur(var(--flou)) saturate(1.2);
  border-bottom: 1px solid var(--voile-bordure);
}
.barre-actions { margin-left: auto; display: flex; gap: var(--e-2); align-items: center; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .barre { background: var(--fond-surface); }
}

/* --- 7.12 Indicateur chiffré --------------------------------------------- */
.kpi { padding: var(--pad-carte); background: var(--fond-surface); border: 1px solid var(--bordure); border-radius: var(--r-lg); box-shadow: var(--ombre-sm); }
.kpi-libelle { font-size: var(--t-xs); font-weight: var(--gras-fort); letter-spacing: var(--ls-surtitre); text-transform: uppercase; color: var(--texte-tertiaire); }
.kpi-valeur { margin-top: var(--e-2); font-size: var(--t-3xl); font-weight: var(--gras-titre); letter-spacing: var(--ls-titre); line-height: 1; }
.kpi-detail { margin-top: var(--e-2); font-size: var(--t-sm); color: var(--texte-tertiaire); }

/* --- 7.13 Jauge ---------------------------------------------------------- */
.jauge { height: 8px; background: var(--fond-surface-3); border-radius: var(--r-plein); overflow: hidden; }
.jauge-part { height: 100%; background: var(--perv-500); border-radius: var(--r-plein); transition: width var(--transition); }
.jauge-part.depassement { background: var(--inferno-500); }

/* --- 7.14 Modale ---------------------------------------------------------
   IMPORTANT : à monter dans un portail à la racine du <body>, JAMAIS à
   l'intérieur d'un élément flouté — backdrop-filter crée un bloc conteneur
   qui piège les descendants en position: fixed.                            */
.modale-fond {
  position: fixed; inset: 0; z-index: var(--z-modale);
  display: grid; place-items: center; padding: var(--e-5);
  background: rgba(20, 23, 28, .45);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.modale {
  width: 100%; max-width: 560px; max-height: 85vh; overflow: auto;
  background: var(--fond-surface); border: 1px solid var(--bordure);
  border-radius: var(--r-xl); box-shadow: var(--ombre-lg);
}
.modale-entete { display: flex; align-items: flex-start; gap: var(--e-4); padding: var(--e-5) var(--e-5) var(--e-3); }
.modale-titre { font-size: var(--t-xl); font-weight: var(--gras-fort); letter-spacing: var(--ls-titre); }
.modale-corps { padding: 0 var(--e-5) var(--e-5); color: var(--texte-secondaire); }
.modale-pied { display: flex; justify-content: flex-end; gap: var(--e-2); padding: var(--e-4) var(--e-5); border-top: 1px solid var(--bordure-discrete); background: var(--fond-surface-2); border-radius: 0 0 var(--r-xl) var(--r-xl); }
.modale-danger { border-top: var(--filet-epaisseur) solid var(--danger); }

/* --- 7.15 Menu déroulant -------------------------------------------------
   Même contrainte de portail que la modale.                                */
.menu {
  min-width: 200px; padding: var(--e-1);
  background: var(--fond-surface); border: 1px solid var(--bordure);
  border-radius: var(--r-md); box-shadow: var(--ombre-md);
  z-index: var(--z-menu);
}
.menu-groupe { padding: var(--e-2) var(--e-3) var(--e-1); font-size: var(--t-2xs); letter-spacing: var(--ls-surtitre); text-transform: uppercase; color: var(--texte-tertiaire); }
.menu-item {
  display: flex; align-items: center; gap: var(--e-2); width: 100%;
  padding: 8px var(--e-3); border: 0; border-radius: var(--r-sm);
  background: none; font-family: inherit; font-size: var(--t-md);
  color: var(--texte-primaire); text-align: left; cursor: pointer;
}
.menu-item:hover { background: var(--fond-survol); }
.menu-item[aria-selected="true"] { background: var(--fond-selection); font-weight: var(--gras-fort); }
.menu-item-danger { color: var(--danger); }
.menu-item-danger:hover { background: var(--danger-fond); }
.menu-separateur { height: 1px; margin: var(--e-1) 0; background: var(--bordure-discrete); }

/* --- 7.16 Pagination ----------------------------------------------------- */
.pagination { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-3) var(--e-4); border-top: 1px solid var(--bordure-discrete); }
.pagination-compte { font-size: var(--t-sm); color: var(--texte-tertiaire); font-variant-numeric: tabular-nums; }
.pagination-pages { margin-left: auto; display: flex; gap: 2px; }
.pagination-page {
  min-width: 32px; height: 32px; padding: 0 var(--e-2);
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: none; font-family: inherit; font-size: var(--t-sm);
  font-variant-numeric: tabular-nums; color: var(--texte-secondaire); cursor: pointer;
}
.pagination-page:hover:not(:disabled) { background: var(--fond-survol); color: var(--texte-primaire); }
.pagination-page[aria-current="page"] { background: var(--action); color: var(--action-texte); font-weight: var(--gras-fort); }
.pagination-page:disabled { color: var(--texte-desactive); cursor: not-allowed; }

/* --- 7.17 Accordéon ------------------------------------------------------
   Rappel React 19 : dans onToggle, lire event.target.open dans une variable
   locale AVANT d'appeler setState. currentTarget est remis à null ensuite.  */
.accordeon { border: 1px solid var(--bordure); border-radius: var(--r-md); background: var(--fond-surface); overflow: hidden; }
.accordeon + .accordeon { margin-top: var(--e-2); }
.accordeon > summary {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  font-size: var(--t-md); font-weight: var(--gras-fort);
  cursor: pointer; list-style: none; user-select: none;
}
.accordeon > summary::-webkit-details-marker { display: none; }
.accordeon > summary::before {
  content: ''; width: 8px; height: 8px; flex: none;
  border-right: 2px solid var(--texte-tertiaire); border-bottom: 2px solid var(--texte-tertiaire);
  transform: rotate(-45deg); transition: transform var(--transition);
}
.accordeon[open] > summary::before { transform: rotate(45deg); }
.accordeon > summary:hover { background: var(--fond-survol); }
.accordeon-compte { margin-left: auto; font-size: var(--t-xs); color: var(--texte-tertiaire); font-variant-numeric: tabular-nums; }
.accordeon-corps { padding: 0 var(--e-4) var(--e-4); border-top: 1px solid var(--bordure-discrete); padding-top: var(--e-4); }

/* --- 7.18 Séparateur ----------------------------------------------------- */
.separateur { height: 1px; background: var(--bordure); border: 0; margin: var(--e-6) 0; }

/* ==========================================================================
   8. ACCESSIBILITÉ
   ========================================================================== */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--bordure-focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Contrastes vérifiés sur fond clair :
   Neige 900  15,0:1 AAA    Inferno 500  7,8:1 AA
   Neige 700   8,0:1 AAA    Pervenche 700 7,4:1 AA
   Neige 600   4,9:1 AA     Jade 600      5,2:1 AA
   Neige 500   3,3:1 grand texte seul     Miel 600  5,0:1 AA
   Pervenche 300 1,9:1 — aplat uniquement, jamais de texte dessus. */