/* ==========================================================================
   ENSP/TA — Design system v4 (« FREECOM »)
   Fichier 1/4 : polices, jetons (couleurs, rayons, ombres), thèmes, base typographique.

   Direction : tableau de bord de gestion à la FREECOM WIFI — barre du haut fixe, menu latéral
   groupé, tuiles colorées pleines, cartes à en-tête barré, mode sombre « Mikhmon ».
   Typographie : Bricolage Grotesque (titres, chiffres) · Instrument Sans (interface) · JetBrains Mono (codes).
   Thèmes (data-theme sur <html>) : ensp (défaut : barres marine, contenu clair) · light · dark · blue · green.
   Polices hébergées localement (aucune requête externe : connexions lentes, hors ligne).
   Règle : aucune couleur en dur dans les vues ; toujours une variable de ce fichier.
   ========================================================================== */

@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 500 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;

  /* --- Surfaces --- */
  --bg: #EEF1F4;          /* fond de page (motif de points discret) */
  --bg-pattern: rgba(20, 30, 50, .05);
  --bg-sunk: #E4E9EE;     /* zones en retrait, survols */
  --surface: #FFFFFF;     /* cartes */
  --surface-2: #F6F8FA;   /* en-têtes de cartes et de tableaux */
  --surface-3: #EDF1F5;
  --line: #DDE2E8;
  --line-soft: #EAEEF2;
  --line-strong: #C8D0D9;

  /* --- Encres --- */
  --ink: #0F1B2D;         /* titres */
  --text: #1F2A37;        /* texte courant */
  --muted: #566272;       /* texte secondaire */
  --subtle: #626E7D;      /* indices, placeholders */

  /* --- Marque : outremer du blason --- */
  --primary: #2342A6;
  --primary-hover: #1B3489;
  --primary-press: #152A70;
  --primary-soft: #E9EEFB;
  --primary-soft-2: #D5DFF7;
  --on-primary: #FFFFFF;

  /* --- Vert vif (signature FREECOM : bouton d'action, entrée de menu active) --- */
  --lime: #8CC63F;
  --lime-hover: #7DB534;
  --lime-ink: #3F6A0C;    /* texte vert lisible sur fond clair */
  --lime-soft: #EEF7DD;
  --on-lime: #0B1730;

  /* --- Sémantique --- */
  --accent: #E0A100;      /* ambre : avertissement, attention */
  --accent-ink: #855600;
  --accent-soft: #FFF6DA;
  --accent-soft-2: #FCE8A5;

  --danger: #BF352E;
  --danger-hover: #A02B25;
  --danger-soft: #FCEDEC;
  --danger-soft-2: #F8D4D1;

  --success: #177A3C;
  --success-hover: #12632F;
  --success-soft: #E4F4EA;
  --success-soft-2: #C5E7D1;

  --info: #1A6BBF;
  --info-soft: #E6F1FC;

  /* --- Tuiles pleines (boîtes colorées du tableau de bord) --- */
  --t-blue: #1F77D0; --t-green: #1D8541; --t-yellow: #E0A100; --t-red: #CF3A31; --t-purple: #7B4FC9; --t-teal: #0A7F89; --t-navy: #14306B;
  --on-tile: #FFFFFF; --on-yellow: #241800;

  /* --- Barre du haut et menu latéral (thème « ensp » : marine) --- */
  --nav-bg: #0B1730;
  --nav-bg-2: #0F1F42;
  --side-bg: #0E1D3B;
  --nav-line: rgba(255, 255, 255, .09);
  --nav-edge: transparent;
  --nav-text: #C9D3E6;
  --nav-muted: #8296BC;
  --nav-strong: #FFFFFF;
  --nav-hover: rgba(255, 255, 255, .08);
  --nav-active: rgba(255, 255, 255, .12);
  --nav-sel-bg: var(--lime);
  --nav-sel-fg: #0B1730;
  --nav-accent: var(--lime);
  --nav-ctx-bg: rgba(255, 255, 255, .06);
  --nav-badge-bg: #CF3A31;
  --nav-badge-fg: #FFFFFF;
  --nav-logo-ring: transparent;
  --nav-pattern-opacity: 0;
  --nav-cta-bg: var(--lime);
  --nav-cta-fg: #0B1730;

  /* --- Bannières (profil, accueil) --- */
  --hero-1: #1A3A82; --hero-2: #0F2252; --hero-3: #0A1430; --hero-glow: rgba(140, 198, 63, .26); --hero-glow-2: rgba(35, 66, 166, .6);
  --em-style: normal;

  /* --- Graphiques (une teinte par défaut ; palette catégorielle dans pages.css) --- */
  --viz-1: #2342A6;
  --viz-1-soft: rgba(35, 66, 166, .10);
  --viz-track: #D5DFF7;
  --viz-grid: #E3E8ED;
  --viz-axis: #C8D0D9;
  --viz-label: #7F8B9A;
  --viz-good: #177A3C;
  --viz-warn: #E0A100;
  --viz-crit: #BF352E;

  /* --- Ombres (une seule source de lumière) --- */
  --sh-1: 0 1px 2px rgba(20, 30, 50, .06), 0 10px 26px -18px rgba(20, 30, 50, .35);
  --sh-2: 0 12px 28px -12px rgba(20, 30, 50, .28), 0 2px 6px rgba(20, 30, 50, .06);
  --sh-3: 0 28px 64px -18px rgba(11, 23, 48, .45), 0 10px 24px -10px rgba(11, 23, 48, .25);
  --ring: 0 0 0 3px rgba(35, 66, 166, .26);

  /* --- Rayons --- */
  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-tile: 14px; --r-pill: 999px;

  /* --- Typographie --- */
  --font-ui: "Instrument Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --fs-2xs: .6875rem; --fs-xs: .75rem; --fs-sm: .8125rem; --fs-base: .9375rem; --fs-md: 1rem; --fs-lg: 1.125rem;
  --fs-xl: 1.3125rem; --fs-2xl: 1.625rem; --fs-3xl: 2.125rem; --fs-4xl: 2.75rem;

  /* --- Mise en page --- */
  --sidebar-w: 250px;
  --sidebar-w-collapsed: 66px;
  --topbar-h: 56px;
  --content-max: 1560px;
  --gap: 1.125rem;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* --- Mouvement --- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: .14s; --t: .22s; --t-slow: .4s;

  /* --- Pictogramme CSS (chevron des listes déroulantes) --- */
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566272' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  /* --- Anciens noms (compatibilité des vues existantes) --- */
  --bleu: var(--primary); --bleu-fonce: var(--ink); --bleu-clair: var(--primary-soft);
  --rouge: var(--danger); --rouge-clair: var(--danger-soft); --vert: var(--success); --vert-clair: var(--success-soft);
  --ambre: var(--accent-ink); --ambre-clair: var(--accent-soft); --encre: var(--text); --gris: var(--muted); --gris-clair: var(--subtle);
  --ligne: var(--line); --papier: var(--bg); --blanc: var(--surface); --serif: var(--font-display); --sans: var(--font-ui);
  --rayon: var(--r-md); --ombre: var(--sh-1);
}

/* --------------------------------------------------------------------------
   Thèmes. « ensp » = défaut (valeurs de :root). Chaque thème ne redéfinit que ce qui change.
   -------------------------------------------------------------------------- */

/* Clair : barres blanches */
:root[data-theme="light"] {
  --nav-bg: #FFFFFF; --nav-bg-2: #FFFFFF; --side-bg: #FFFFFF;
  --nav-line: #E1E6EC; --nav-edge: #E1E6EC; --nav-text: #38444F; --nav-muted: #68737F; --nav-strong: #0F1B2D;
  --nav-hover: #F0F3F6; --nav-active: #E9EEFB; --nav-sel-bg: var(--primary); --nav-sel-fg: #FFFFFF; --nav-accent: var(--primary);
  --nav-ctx-bg: #F3F6F9; --nav-logo-ring: #E1E6EC; --nav-cta-bg: var(--lime); --nav-cta-fg: #0B1730;
}

/* Bleu */
:root[data-theme="blue"] {
  --primary: #1F5FC4; --primary-hover: #184CA0; --primary-press: #123B7D; --primary-soft: #E8F0FD; --primary-soft-2: #D2E2FA;
  --nav-bg: #1D4F91; --nav-bg-2: #225A9F; --side-bg: #173F74;
  --nav-line: rgba(255, 255, 255, .13); --nav-text: #D6E4F7; --nav-muted: #A5BEE0; --nav-strong: #FFFFFF;
  --nav-hover: rgba(255, 255, 255, .1); --nav-active: rgba(255, 255, 255, .16); --nav-sel-bg: #D6E8FF; --nav-sel-fg: #0F2F5C; --nav-accent: #D6E8FF;
  --nav-ctx-bg: rgba(255, 255, 255, .09);
  --viz-1: #1F5FC4; --viz-1-soft: rgba(31, 95, 196, .10); --viz-track: #D2E2FA; --ring: 0 0 0 3px rgba(31, 95, 196, .28);
  --hero-1: #1D5AAE; --hero-2: #173F74; --hero-3: #0F2A52; --hero-glow-2: rgba(59, 139, 235, .55);
}

/* Vert */
:root[data-theme="green"] {
  --primary: #1D7A4B; --primary-hover: #17633C; --primary-press: #124D30; --primary-soft: #E3F4EA; --primary-soft-2: #C6E8D4;
  --nav-bg: #2A7449; --nav-bg-2: #2F7F51; --side-bg: #215E3B;
  --nav-line: rgba(255, 255, 255, .14); --nav-text: #D8F0E2; --nav-muted: #A3D1B6; --nav-strong: #FFFFFF;
  --nav-hover: rgba(255, 255, 255, .1); --nav-active: rgba(255, 255, 255, .16); --nav-sel-bg: #DDF5E7; --nav-sel-fg: #0F3F26; --nav-accent: #DDF5E7;
  --nav-ctx-bg: rgba(255, 255, 255, .09);
  --viz-1: #1D7A4B; --viz-1-soft: rgba(29, 122, 75, .10); --viz-track: #C6E8D4; --ring: 0 0 0 3px rgba(29, 122, 75, .28);
  --hero-1: #1F7A4D; --hero-2: #17593A; --hero-3: #0E3B26; --hero-glow-2: rgba(77, 189, 116, .5);
}

/* Sombre (esprit Mikhmon) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #20262C; --bg-pattern: rgba(255, 255, 255, .03); --bg-sunk: #1A1F24; --surface: #2B3238; --surface-2: #262C32; --surface-3: #323A41;
  --line: #3C454E; --line-soft: #333B43; --line-strong: #4C5762;
  --ink: #F2F5F8; --text: #D9DFE5; --muted: #A2ADB8; --subtle: #98A4B0;
  --primary: #58B4EA; --primary-hover: #7CC6F0; --primary-press: #9AD3F5; --primary-soft: #1E3A4D; --primary-soft-2: #26485F; --on-primary: #08202E;
  --lime: #9AD44B; --lime-hover: #AEE060; --lime-ink: #B6E26C; --lime-soft: #28381A; --on-lime: #0B1730;
  --accent: #F0B72E; --accent-ink: #F6CA64; --accent-soft: #3A3014; --accent-soft-2: #4D3F18;
  --danger: #FF8A84; --danger-hover: #FFA6A1; --danger-soft: #3F2223; --danger-soft-2: #572C2D;
  --success: #62D58F; --success-hover: #86E3A9; --success-soft: #1B3A29; --success-soft-2: #25503A;
  --info: #6DB6F2; --info-soft: #1C3347;
  --nav-bg: #2F363D; --nav-bg-2: #343C44; --side-bg: #2F363D;
  --nav-line: #3C454E; --nav-edge: #3C454E; --nav-text: #C9D1D9; --nav-muted: #9AA6B2; --nav-strong: #FFFFFF;
  --nav-hover: rgba(255, 255, 255, .07); --nav-active: rgba(255, 255, 255, .1); --nav-sel-bg: #58B4EA; --nav-sel-fg: #08202E; --nav-accent: #58B4EA;
  --nav-ctx-bg: rgba(255, 255, 255, .05); --nav-badge-bg: #FF6F66; --nav-badge-fg: #2A0A08; --nav-cta-bg: var(--lime); --nav-cta-fg: #0B1730;
  --hero-1: #1E3A52; --hero-2: #17293A; --hero-3: #101C28; --hero-glow: rgba(154, 212, 75, .2); --hero-glow-2: rgba(88, 180, 234, .35);
  --viz-1: #58B4EA; --viz-1-soft: rgba(88, 180, 234, .16); --viz-track: #26485F; --viz-grid: #38414A; --viz-axis: #4C5762; --viz-label: #8D99A5;
  --viz-good: #62D58F; --viz-warn: #F0B72E; --viz-crit: #FF8A84;
  --sh-1: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 26px -18px rgba(0, 0, 0, .7); --sh-2: 0 12px 28px -12px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .3); --sh-3: 0 30px 70px -16px rgba(0, 0, 0, .75);
  --ring: 0 0 0 3px rgba(88, 180, 234, .4);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A2ADB8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 16px); }
body {
  margin: 0; min-height: 100dvh;
  font-family: var(--font-ui); font-size: var(--fs-base); line-height: 1.55; font-weight: 400;
  color: var(--text); background: radial-gradient(circle at 1px 1px, var(--bg-pattern) 1px, transparent 0) 0 0 / 22px 22px, var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  font-variant-numeric: lining-nums;
}
img, svg, video { max-width: 100%; }
img { height: auto; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
p { margin: 0 0 .75rem; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.25rem 0; }
::selection { background: var(--primary-soft-2); color: var(--ink); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

/* Titres : Bricolage Grotesque ; texte et interface : Instrument Sans */
h1, h2, h3, h4, h5 { margin: 0 0 .5rem; color: var(--ink); line-height: 1.2; font-family: var(--font-display); font-weight: 700; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(1.45rem, 1.15rem + 1.1vw, 1.9rem); line-height: 1.1; letter-spacing: -.02em; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-family: var(--font-ui); font-size: var(--fs-md); }
h5 { font-family: var(--font-ui); font-size: var(--fs-base); }
.display { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; }
.display em, h1 em { font-style: normal; font-weight: inherit; color: var(--primary); }
.eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lead { font-size: var(--fs-md); color: var(--muted); max-width: 62ch; }
small, .muted { color: var(--muted); }
.muted-sm { color: var(--muted); font-size: var(--fs-sm); }
.mono { font-family: var(--font-mono); font-size: .92em; letter-spacing: -.01em; }
.num { font-variant-numeric: tabular-nums lining-nums; }
code, kbd, pre, samp { font-family: var(--font-mono); font-size: .9em; }
code { background: var(--bg-sunk); padding: .1em .4em; border-radius: var(--r-xs); }
strong, b { font-weight: 600; color: var(--ink); }
ul, ol { padding-left: 1.2rem; }

/* Pictogrammes (sprite /img/icons.svg) */
.i { width: 1.125rem; height: 1.125rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.22em; }
.i-sm { width: .95rem; height: .95rem; }
.i-lg { width: 1.375rem; height: 1.375rem; }
.i-xl { width: 1.75rem; height: 1.75rem; stroke-width: 1.5; }
.i.spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Utilitaires */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--primary); color: var(--on-primary); padding: .6rem 1rem; border-radius: var(--r-md); font-weight: 600; transition: top var(--t-fast); }
.skip-link:focus { top: 12px; text-decoration: none; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.mt { margin-top: 1rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: 1.5rem; } .mb0 { margin-bottom: 0; } .mb-1 { margin-bottom: .5rem; }
.flex { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.flex-nowrap { flex-wrap: nowrap; }
.between { justify-content: space-between; }
.grow { flex: 1 1 0; min-width: 0; }
.right { text-align: right; }
.center { text-align: center; }
.stack > * + * { margin-top: .75rem; }
.stack-lg > * + * { margin-top: 1.25rem; }
.w-auto { width: auto !important; }
form.inline { display: inline; }
.only-mobile { display: none !important; }
@media (max-width: 1023px) { .only-mobile { display: inline-flex !important; } .only-desktop { display: none !important; } }

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