@charset "UTF-8";
/* ========================================================================
   DESIGN SYSTEM - Grav / Theme Vela

   Palette : day (par défaut)
   Spécifications : Voir ../../../../specifications3.md

   Architecture :
   - Primitives : échelles 100-900 pour chaque teinte
   - Aliases : compatibilité avec les variables natives de Vela
   - Sémantiques : variables d'usage (action, texte, fond, etc.)
   - Overrides : règles pour les sélecteurs natifs de Vela

   Accessibilité : WCAG 2.2 AA (ratio >= 4.5:1)

   Fichier SCSS source - sera compilé automatiquement vers css-compiled/design-system.css
   via la tâche gulp 'sass'

   Ne pas modifier manuellement - sera régénéré selon specifications3.md
   ======================================================================== */
/* ========================================================================
   SECTION 1 : PRIMITIVES - Échelles de couleur (100-900)

   Source : specifications3.md §2
   Palette day : primary(#77BEF0), secondary(#FFCB61), tertiary(#FF894F)
   ======================================================================== */
:root {
  /* Color scheme pour les éléments natifs (formulaires, scrollbars) */
  color-scheme: light;
  /* PRIMARY - Bleu (#77BEF0) */
  --primary-100: #EBF6FD;
  --primary-200: #D3EDFB;
  --primary-300: #A9DCF8;
  --primary-400: #90D1F4;
  --primary-500: #77BEF0;
  --primary-600: #5BA3D6;
  --primary-700: #4486B5;
  --primary-800: #2F6689;
  --primary-900: #1E4863;
  /* SECONDARY - Jaune (#FFCB61) */
  --secondary-100: #FFF6E3;
  --secondary-200: #FFEAC2;
  --secondary-300: #FFDA94;
  --secondary-400: #FFD77B;
  --secondary-500: #FFCB61;
  --secondary-600: #EDB14A;
  --secondary-700: #CC9136;
  --secondary-800: #A67229;
  --secondary-900: #7A521E;
  /* TERTIARY - Orange (#FF894F) */
  --tertiary-100: #FFF0E7;
  --tertiary-200: #FFDDC7;
  --tertiary-300: #FFC29C;
  --tertiary-400: #FFA882;
  --tertiary-500: #FF894F;
  --tertiary-600: #ED7038;
  --tertiary-700: #CC5425;
  --tertiary-800: #A6401B;
  --tertiary-900: #7A2E14;
  /* NEUTRES */
  --neutral-0: #FFFFFF;
  --neutral-50: #FAFAFA;
  --neutral-100: #F2F4F6;
  --neutral-200: #E4E8EC;
  --neutral-300: #CDD3DA;
  --neutral-400: #9AA4AF;
  --neutral-500: #6B7681;
  --neutral-600: #4A545E;
  --neutral-700: #37404A;
  --neutral-800: #232B33;
  --neutral-900: #141A20;
  --neutral-950: #0A0A0A; /* Plus sombre que 900 */
  /* COULEURS FONCTIONNELLES */
  --success-500: #3FA46A;
  --success-600: #358F5C;
  --success-700: #2B7A4D;
  --success-100: #E5F5EC;
  --warning-500: #E0A11B;
  --warning-100: #FCF3DC;
  --danger-500: #D64550;
  --danger-700: #B93A44;
  --danger-100: #FBE7E9;
  --info-500: #5BA3D6;
  --info-100: #EAF3FB;
  /* UI VARIANTS - Fluidity & Components Compatibility */
  --ui-success: oklch(65.000000% 0.180000 145.000000);
  --ui-success-hover: oklch(71.500000% 0.180000 145.000000);
  --ui-success-light: oklch(85.000000% 0.054000 145.000000);
  --ui-success-dark: oklch(58.500000% 0.180000 145.000000);
  --ui-warning: oklch(70.000000% 0.150000 50.000000);
  --ui-warning-hover: oklch(77.000000% 0.150000 50.000000);
  --ui-warning-light: oklch(85.000000% 0.045000 50.000000);
  --ui-warning-dark: oklch(63.000000% 0.150000 50.000000);
  --ui-error: oklch(50.000000% 0.220000 25.000000);
  --ui-error-hover: oklch(55.000000% 0.220000 25.000000);
  --ui-error-light: oklch(85.000000% 0.066000 25.000000);
  --ui-error-dark: oklch(45.000000% 0.220000 25.000000);
  --ui-info: oklch(55.000000% 0.180000 240.000000);
  --ui-info-hover: oklch(60.500000% 0.180000 240.000000);
  --ui-info-light: oklch(85.000000% 0.054000 240.000000);
  --ui-info-dark: oklch(49.500000% 0.180000 240.000000);
  /* Primitives NIGHT (thème circadien 22h-6h) */
  --night-blue-300: #8FA6B8;
  --night-blue-400: #7392A6;
  --night-warm-300: #D9C39A;
  --night-bg-page: #0B0E12;
  --night-bg-surface: #12161C;
  --night-bg-raised: #1A2029;
}

/* ========================================================================
   SECTION 2 : ALIASES VELA - Compatibilité avec le thème

   Source : specifications.md §3
   ======================================================================== */
:root {
  /* Aliases des variables principales */
  --primary: var(--primary-500);
  --secondary: var(--secondary-500);
  --tertiary: var(--tertiary-500);
  /* Aliases des variables SCSS natives (mapping) */
  --font-color: var(--neutral-900);
  --link-color: var(--primary-700);
  --link-hover-color: var(--primary-800);
  --menu-bg-color: var(--neutral-900);
  --menu-sec-color: rgba(69, 90, 100, 0.34); /* #455a64 at 34% opacity */
  --menu-font-color: #cad4df; /* Corrigé : --neutral-10 n'existe pas */
  --hover-active-font-color: var(--neutral-50);
  --default-bg-color: var(--neutral-50);
}

/* ========================================================================
   SECTION 3 : VARIABLES SÉMANTIQUES

   Source : specifications.md §4
   Les composants consomment UNIQUEMENT ces tokens.
   ======================================================================== */
:root {
  /* ACTIONS - Boutons primaires */
  --action-bg: var(--primary-600);
  --action-bg-hover: var(--primary-700);
  --action-bg-active: var(--primary-800);
  --action-border: var(--primary-700);
  /* BOUTONS SECONDAIRES */
  --action-secondary-bg: var(--secondary-500);
  --action-secondary-hover: var(--secondary-600);
  --action-secondary-text: var(--neutral-900);
  /* BOUTONS TERTIAIRES (ghost / lien) */
  --action-tertiary-text: var(--neutral-900);
  --action-tertiary-hover-bg: var(--primary-100);
  /* LIENS */
  --link-text: var(--primary-800);
  --link-hover-text: var(--primary-900);
  /* FONDS */
  --bg-page: var(--neutral-50);
  --bg-surface: var(--neutral-0);
  --bg-surface-alt: var(--primary-100);
  /* TEXTE */
  --text-heading: var(--neutral-900);
  --text-body: var(--neutral-800);
  --text-muted: var(--neutral-600);
  --text-on-primary: var(--neutral-900);
  /* BORDURES */
  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-300);
  /* ÉTATS / FEEDBACK */
  --alert-success-bg: var(--success-100);
  --alert-success-text: var(--neutral-900);
  --alert-warning-bg: var(--warning-100);
  --alert-warning-text: var(--neutral-900);
  --alert-danger-bg: var(--danger-100);
  --alert-danger-text: var(--neutral-900);
  --alert-info-bg: var(--info-100);
  --alert-info-text: var(--neutral-900);
  /* FOCUS - Accessibilité WCAG 2.2 AA */
  --focus-ring: 2px solid var(--primary-700);
  --focus-ring-offset: 2px;
  /* OMBRES - Définitions standard */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  /* RAYONS DE BORDURE */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-full: 9999px;
  /* TRANSITIONS */
  --transition-speed-fast: 0.15s;
  --transition-speed-normal: 0.25s;
  --transition-speed-slow: 0.35s;
  --transition-function: ease;
  /* TEXTE - Variables étendues */
  --text-inverse: var(--neutral-0);
  --text-disabled: var(--neutral-400);
  /* COULEURS PAR TYPE DE FICHIER - Pour les icônes d'attachments
     Conventions : PDF=rouge (Adobe), Word=bleu, Excel=vert, PowerPoint=orange (Microsoft)
     v3.0 — Corrigé 21 oct 2026 : contraste WCAG AA (fg foncé sur bg clair, ratio ≥ 7:1) */
  --file-pdf-bg: #FBE7E9;
  --file-pdf-fg: #8B1A22; /* rouge (Adobe) */
  --file-doc-bg: #EAF3FB;
  --file-doc-fg: #1E4863; /* bleu (Microsoft) */
  --file-docx-bg: #EAF3FB;
  --file-docx-fg: #1E4863; /* bleu (Microsoft) */
  --file-xls-bg: #E5F5EC;
  --file-xls-fg: #1A6B3C; /* vert (Microsoft) */
  --file-xlsx-bg: #E5F5EC;
  --file-xlsx-fg: #1A6B3C; /* vert (Microsoft) */
  --file-ppt-bg: #FFF0E7;
  --file-ppt-fg: #7A2E14; /* orange (Microsoft) */
  --file-pptx-bg: #FFF0E7;
  --file-pptx-fg: #7A2E14; /* orange (Microsoft) */
  --file-txt-bg: #F2F4F6;
  --file-txt-fg: #37404A; /* gris */
  --file-csv-bg: #E5F5EC;
  --file-csv-fg: #1A6B3C; /* vert (tableur) */
  --file-image-bg: #EAF3FB;
  --file-image-fg: #1E4863; /* bleu */
  --file-video-bg: #FBE7E9;
  --file-video-fg: #8B1A22; /* rouge */
  --file-audio-bg: #FCF3DC;
  --file-audio-fg: #7A521E; /* ambre */
  --file-zip-bg: #F2F4F6;
  --file-zip-fg: #37404A; /* gris */
  --file-rar-bg: #F2F4F6;
  --file-rar-fg: #37404A; /* gris */
  --file-default-bg: var(--neutral-300);
  --file-default-fg: var(--neutral-700);
}

/* ========================================================================
   TOKENS AVANCÉS — Améliorations esthétiques (21 octobre 2026)
   Plan : PLAN-AMELIORATION-ESTHETIQUE.md — Phase 1 (P1.1, P1.2, P1.3)
   ======================================================================== */
:root {
  /* ================================================================
     P1.1 — ESPACEMENT — Échelle base 4px
     ================================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  /* ================================================================
     P1.2 — OMBRES COLORÉES — Teintées avec les couleurs du Design System
     ================================================================ */
  --shadow-primary-sm: 0 1px 3px color-mix(in oklch, var(--primary-500), transparent 90%);
  --shadow-primary-md: 0 4px 14px color-mix(in oklch, var(--primary-500), transparent 85%);
  --shadow-primary-lg: 0 12px 28px color-mix(in oklch, var(--primary-600), transparent 80%);
  --shadow-tertiary-sm: 0 1px 3px color-mix(in oklch, var(--tertiary-500), transparent 90%);
  --shadow-tertiary-md: 0 4px 14px color-mix(in oklch, var(--tertiary-500), transparent 85%);
  --shadow-neutral-md: 0 4px 14px color-mix(in oklch, var(--neutral-900), transparent 85%);
  /* ================================================================
     P1.3 — DÉGRADÉS PRÉDÉFINIS — Subtils (5-10% de teinte, décision D2)
     ================================================================ */
  --gradient-primary: linear-gradient(in oklch, var(--primary-500), var(--primary-600));
  --gradient-accent: linear-gradient(in oklch 90deg, var(--primary-600), var(--tertiary-500));
  --gradient-surface: linear-gradient(
      in oklch 180deg,
      var(--bg-page) 0%,
      color-mix(in oklch, var(--bg-page), var(--primary-100) 8%) 100%
  );
  /* ================================================================
     COURBES DE BÉZIER — Pour animations sophistiquées
     ================================================================ */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* ================================================================
     GLASSMORPHISM — Effet verre (décision D3)
     Note D7 : PAS appliqué au fond du menu (lisibilité)
     ================================================================ */
  --glass-bg: color-mix(in oklch, var(--bg-surface), transparent 10%);
  --glass-border: color-mix(in oklch, var(--border-subtle), transparent 50%);
  --glass-blur: 12px;
  /* ================================================================
     TYPOGRAPHIE — Tokens pour hiérarchie renforcée (P2.3)
     ================================================================ */
  --font-weight-display: 700; /* Luciole Bold pour titres */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-wide: 0.05em;
}

/* ========================================================================
   TRANSITIONS DOUCES POUR THÈMES DYNAMIQUES
   Source : specifications3.md §526-531
   ======================================================================== */
body,
.card,
.btn,
a {
  transition: background-color var(--transition-speed-normal) var(--transition-function), color var(--transition-speed-normal) var(--transition-function), border-color var(--transition-speed-normal) var(--transition-function);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}
/* ========================================================================
   SECTION 4 : OVERRIDES POUR COMPOSANTS NATIFS VELA

   Ces règles surchargent les styles du thème Vela pour utiliser
   les variables du design system.

   Chargées APRÈS le CSS de Vela pour une priorité maximale.
   ======================================================================== */
/* Body et HTML */
html,
body {
  background-color: var(--bg-page) !important;
  color: var(--text-body) !important;
  font-family: "Luciole", sans-serif;
}

/* Liens */
a {
  color: var(--link-text) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--link-hover-text) !important;
  text-decoration: underline;
}

/* Header HR (séparateur) */
.header-hr {
  border: 0;
  height: 1px;
  background: var(--border-strong);
  background-image: linear-gradient(to right, var(--border-subtle), var(--border-strong), var(--border-subtle));
}

/* Sidebar Navigation */
.sidebar-nav ul {
  background-color: var(--menu-bg-color) !important;
}

.sidebar-nav .metismenu a {
  color: var(--menu-font-color) !important;
}

.sidebar-nav .metismenu a:hover,
.sidebar-nav .metismenu a:focus,
.sidebar-nav .metismenu a:active {
  color: var(--hover-active-font-color) !important;
  background: var(--menu-sec-color) !important;
}

.sidebar-nav .metismenu ul > li {
  border-left: 4px solid var(--menu-sec-color) !important;
  background: rgba(185, 185, 185, 0.05) !important;
}

.sidebar-nav .metismenu ul ul {
  background: rgba(219, 219, 219, 0.05) !important;
}

.sidebar-nav .metismenu .active-page {
  font-weight: 400;
  color: var(--hover-active-font-color) !important;
}

.sidebar-brand {
  color: var(--hover-active-font-color) !important;
}

.sidebar-brand:hover {
  color: var(--neutral-50) !important;
}

/* Slideout Panel */
.slideout-panel {
  background-color: var(--default-bg-color) !important;
  color: var(--font-color) !important;
}

/* Hamburgers Menu Icon */
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  background-color: var(--text-body) !important;
}

/* Scrollbar - utilise les variables par défaut */
::-webkit-scrollbar-track {
  background: var(--neutral-100) !important;
}

::-webkit-scrollbar-thumb {
  background: var(--neutral-400) !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--neutral-500) !important;
}

/* Markdown Notices */
.notices {
  margin: 15px 0;
  position: relative;
}

.notices p {
  padding: 15px;
  margin: 0;
  box-sizing: border-box;
}

.notices p::before {
  position: absolute;
  box-sizing: border-box;
  top: 5.5px;
  content: url(../images/info-circle-solid.svg);
  width: 18px !important;
  height: 18px !important;
  left: 10px;
  font-size: 19px;
}

.notices p::after {
  position: absolute;
  box-sizing: border-box;
  top: 4px;
  color: #fff;
  left: 2rem;
  content: "";
  font-size: 18px;
  font-weight: 500;
}

/* Notice Jaune -> Warning */
.notices.yellow {
  background: var(--warning-100) !important;
}

.notices.yellow p {
  border-top: 30px solid var(--warning-500) !important;
  background: var(--warning-100) !important;
}

.notices.yellow p::after {
  content: "Info" !important;
}

/* Notice Rouge -> Danger */
.notices.red {
  background: var(--danger-100) !important;
}

.notices.red p {
  border-top: 30px solid var(--danger-500) !important;
  background: var(--danger-100) !important;
}

.notices.red p::after {
  content: "Warning" !important;
}

/* Notice Bleue -> Info */
.notices.blue {
  background: var(--info-100) !important;
}

.notices.blue p {
  border-top: 30px solid var(--info-500) !important;
  background: var(--info-100) !important;
}

.notices.blue p::after {
  content: "Note" !important;
}

/* Notice Verte -> Success */
.notices.green {
  background: var(--success-100) !important;
}

.notices.green p {
  border-top: 30px solid var(--success-500) !important;
  background: var(--success-100) !important;
}

.notices.green p::after {
  content: "Tip" !important;
}

/* ========================================================================
   SECTION 4bis : THÈMES CIRCADIENS (WCAG 2.2 AA compliant)

   Source : specifications3.md §5bis
   Les primitives ne changent pas. Seules les variables sémantiques sont redéfinies.
   ======================================================================== */
/* ========================================================================
   THÈME DAY (clair par défaut)
   Source : specifications3.md §4
   ======================================================================== */
[data-theme=day] {
  /* Aliases Vela */
  --primary: var(--primary-500);
  --secondary: var(--secondary-500);
  --tertiary: var(--tertiary-500);
  /* Sémantiques - identiques à :root */
  --action-bg: var(--primary-500);
  --action-bg-hover: var(--primary-600);
  --action-bg-active: var(--primary-700);
  --action-border: var(--primary-600);
  /* BOUTONS SECONDAIRES */
  --action-secondary-bg: var(--secondary-500);
  --action-secondary-hover: var(--secondary-600);
  --action-secondary-text: var(--neutral-900);
  /* BOUTONS TERTIAIRES (ghost / lien) */
  --action-tertiary-text: var(--neutral-900); /* WCAG 15.53:1 sur primary-100 (vs 3.59 avec primary-700) */
  --action-tertiary-hover-bg: var(--primary-100);
  /* LIENS */
  --link-text: var(--primary-800);
  --link-hover-text: var(--primary-900);
  /* FONDS */
  --bg-page: var(--neutral-50);
  --bg-surface: var(--neutral-0);
  --bg-surface-alt: var(--primary-100);
  /* TEXTE */
  --text-heading: var(--neutral-900);
  --text-body: var(--neutral-800);
  --text-muted: var(--neutral-600);
  --text-on-primary: var(--neutral-900);
  /* BORDURES */
  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-300);
  /* ÉTATS / FEEDBACK */
  --alert-success-bg: var(--success-100);
  --alert-success-text: var(--neutral-900);
  --alert-warning-bg: var(--warning-100);
  --alert-warning-text: var(--neutral-900);
  --alert-danger-bg: var(--danger-100);
  --alert-danger-text: var(--neutral-900);
  --alert-info-bg: var(--info-100);
  --alert-info-text: var(--neutral-900);
  /* FOCUS */
  --focus-ring: 2px solid var(--primary-700);
  --focus-ring-offset: 2px;
  /* TEXTE - Variables étendues */
  --text-inverse: var(--neutral-0);
  --text-disabled: var(--neutral-400);
  /* UI VARIANTS - Fluidity & Components Compatibility */
  --ui-success: oklch(65.000000% 0.180000 145.000000);
  --ui-success-hover: oklch(71.500000% 0.180000 145.000000);
  --ui-success-light: oklch(85.000000% 0.054000 145.000000);
  --ui-success-dark: oklch(58.500000% 0.180000 145.000000);
  --ui-warning: oklch(70.000000% 0.150000 50.000000);
  --ui-warning-hover: oklch(77.000000% 0.150000 50.000000);
  --ui-warning-light: oklch(85.000000% 0.045000 50.000000);
  --ui-warning-dark: oklch(63.000000% 0.150000 50.000000);
  --ui-error: oklch(50.000000% 0.220000 25.000000);
  --ui-error-hover: oklch(55.000000% 0.220000 25.000000);
  --ui-error-light: oklch(85.000000% 0.066000 25.000000);
  --ui-error-dark: oklch(45.000000% 0.220000 25.000000);
  --ui-info: oklch(55.000000% 0.180000 240.000000);
  --ui-info-hover: oklch(60.500000% 0.180000 240.000000);
  --ui-info-light: oklch(85.000000% 0.054000 240.000000);
  --ui-info-dark: oklch(49.500000% 0.180000 240.000000);
  color-scheme: light;
}

[data-theme=night] {
  /* ================================================================
     NIGHT — Sombre CHAUD, anti-lumière bleue (Night Shift / Flux)
     WCAG 2.2 AA validé — teinte ambre chaude
     Source : PLAN-AMELIORATION-ESTHETIQUE.md (D8, 21 octobre 2026)
     ================================================================ */
  /* Primaire — ambre chaud (au lieu de bleu, réduit la lumière bleue) */
  --primary: #B8956A; /* 6.6:1 AA */
  --secondary: #D4A574;
  --tertiary: #C79468;
  /* Actions */
  --action-bg: #B8956A;
  --action-bg-hover: #D4A574;
  --action-bg-active: #E8C896;
  --action-border: #D4A574;
  --text-on-primary: #1A1410;
  --action-secondary-bg: #D4A574;
  --action-secondary-hover: #E8C896;
  --action-secondary-text: #1A1410;
  --action-tertiary-text: #D4A574;
  --action-tertiary-hover-bg: #2E2620;
  /* Liens — ambre clair sur fond sombre chaud */
  --link-text: #D4A574; /* 8.2:1 AAA */
  --link-hover-text: #E8C896; /* 11.4:1 AAA */
  /* Fonds — très sombre CHAUD (teinte ambre, réduit la lumière bleue) */
  --bg-page: #1A1410;
  --bg-surface: #241E18;
  --bg-surface-alt: #2E2620;
  --default-bg-color: #241E18;
  /* Texte — clair chaud */
  --text-heading: #F5EDE0; /* 15.7:1 AAA */
  --text-body: #EDE5D8; /* 14.6:1 AAA */
  --text-muted: #C4B8A5; /* 9.3:1 AAA */
  /* Bordures — chaudes sombres */
  --border-subtle: #3A322A;
  --border-strong: #4A4038;
  /* Alertes — fonds chauds sombres */
  --alert-success-bg: #1A2E22;
  --alert-success-text: #6BCB8A;
  --alert-warning-bg: #2E2418;
  --alert-warning-text: #E8C896;
  --alert-danger-bg: #2E1A1A;
  --alert-danger-text: #FF9A8A;
  --alert-info-bg: #241E18;
  --alert-info-text: #D4A574;
  /* Focus — ambre visible sur fond nuit */
  --focus-ring: 2px solid #D4A574;
  /* Texte inversé et désactivé */
  --text-inverse: #1A1410;
  --text-disabled: #6B5F52;
  /* Overrides pour Vela en mode nuit */
  --font-color: #EDE5D8;
  --link-color: #D4A574;
  --link-hover-color: #E8C896;
  --menu-bg-color: #241E18;
  --menu-sec-color: rgba(180, 150, 106, 0.2);
  --menu-font-color: #EDE5D8;
  --hover-active-font-color: #F5EDE0;
  /* Scrollbar nuit */
  --scrollbar-track: var(--night-bg-surface);
  --scrollbar-thumb: var(--neutral-500);
  --scrollbar-thumb-hover: var(--neutral-400);
  /* UI VARIANTS - Fluidity & Components Compatibility */
  --ui-success: oklch(26.000000% 0.138722 149.750000);
  --ui-success-hover: oklch(28.600000% 0.138722 149.750000);
  --ui-success-light: oklch(85.000000% 0.041617 149.750000);
  --ui-success-dark: oklch(23.400000% 0.138722 149.750000);
  --ui-warning: oklch(28.000000% 0.129444 41.500000);
  --ui-warning-hover: oklch(30.800000% 0.129444 41.500000);
  --ui-warning-light: oklch(85.000000% 0.038833 41.500000);
  --ui-warning-dark: oklch(25.200000% 0.129444 41.500000);
  --ui-error: oklch(20.000000% 0.184056 17.750000);
  --ui-error-hover: oklch(22.000000% 0.184056 17.750000);
  --ui-error-light: oklch(85.000000% 0.055217 17.750000);
  --ui-error-dark: oklch(18.000000% 0.184056 17.750000);
  --ui-info: oklch(22.000000% 0.144000 240.000000);
  --ui-info-hover: oklch(24.200000% 0.144000 240.000000);
  --ui-info-light: oklch(85.000000% 0.043200 240.000000);
  --ui-info-dark: oklch(19.800000% 0.144000 240.000000);
  /* File type colors — versions sombres Night (fond teinté sombre chaud, texte clair)
     Conventions : PDF=rouge, Word=bleu, Excel=vert, PPT=orange */
  --file-pdf-bg: #2E1A1A;
  --file-pdf-fg: #FF9A8A;
  --file-doc-bg: #1A2332;
  --file-doc-fg: #90D1F4;
  --file-docx-bg: #1A2332;
  --file-docx-fg: #90D1F4;
  --file-xls-bg: #1A2E22;
  --file-xls-fg: #6BCB8A;
  --file-xlsx-bg: #1A2E22;
  --file-xlsx-fg: #6BCB8A;
  --file-ppt-bg: #3A2418;
  --file-ppt-fg: #F4A261;
  --file-pptx-bg: #3A2418;
  --file-pptx-fg: #F4A261;
  --file-txt-bg: #2A2520;
  --file-txt-fg: #CDD3DA;
  --file-csv-bg: #1A2E22;
  --file-csv-fg: #6BCB8A;
  --file-image-bg: #1A2332;
  --file-image-fg: #90D1F4;
  --file-video-bg: #2E1A1A;
  --file-video-fg: #FF9A8A;
  --file-audio-bg: #2E2418;
  --file-audio-fg: #E8C896;
  --file-zip-bg: #2A2520;
  --file-zip-fg: #CDD3DA;
  --file-rar-bg: #2A2520;
  --file-rar-fg: #CDD3DA;
  --file-default-bg: #3A322A;
  --file-default-fg: #C4B8A5;
  /* Color scheme pour les éléments natifs */
  color-scheme: dark;
}

/* ========================================================================
   THÈME MORNING (6h-12h) — C+ Hybride: identité + fond pêche
   WCAG 2.2 AA validé — 12/12 ratios ≥ 4.5:1
   Source : PLAN-AMELIORATION-ESTHETIQUE.md (D8 révisée, 21 octobre 2026)
   ======================================================================== */
[data-theme=morning] {
  /* Fonds — pêche très clair */
  --bg-page: #FFF3E8;
  --bg-surface: var(--neutral-0);
  --bg-surface-alt: #FDE8D8;
  --default-bg-color: #FFF3E8;
  /* Texte — neutres (identité conservée) */
  --text-heading: var(--primary-900); /* 8.9:1 AAA */
  --text-body: var(--neutral-800); /* 13.1:1 AAA */
  --text-muted: var(--neutral-600); /* 7.1:1 AAA */
  --font-color: var(--neutral-800);
  /* Accents — identité bleu/jaune/orange (liens en bleu-800 pour contraste) */
  --primary: var(--primary-800);
  --secondary: var(--secondary-500);
  --tertiary: var(--tertiary-500);
  --link-text: var(--primary-800); /* 5.7:1 AA */
  --link-hover-text: var(--primary-900); /* 8.9:1 AAA */
  --link-color: var(--primary-800);
  --link-hover-color: var(--primary-900);
  /* Actions — boutons en bleu (identité), texte sombre */
  --action-bg: var(--primary-500);
  --action-bg-hover: var(--primary-600);
  --action-bg-active: var(--primary-700);
  --action-border: var(--primary-600);
  --text-on-primary: #1A1A1A; /* 8.6:1 AAA sur primary-500 */
  --action-secondary-bg: var(--secondary-500);
  --action-secondary-hover: var(--secondary-600);
  --action-secondary-text: #1A1A1A; /* 11.6:1 AAA */
  --action-tertiary-text: var(--primary-800);
  --action-tertiary-hover-bg: #FDE8D8;
  /* Bordures — tons pêche */
  --border-subtle: #E8D4C4;
  --border-strong: #D4B89A;
  /* Alertes */
  --alert-success-bg: #E5F0E8;
  --alert-success-text: #2D5A3A;
  --alert-warning-bg: #FDE8D8;
  --alert-warning-text: #6B4A2A;
  --alert-danger-bg: #F5E0DC;
  --alert-danger-text: #6B2A26;
  --alert-info-bg: var(--primary-100);
  --alert-info-text: var(--primary-800);
  /* Focus */
  --focus-ring: 2px solid var(--primary-700);
  /* Menu */
  --menu-bg-color: #2D1F14;
  --menu-sec-color: rgba(212, 165, 116, 0.2);
  --menu-font-color: #E8D5C0;
  --hover-active-font-color: #FFF3E8;
  /* Gradients — identité bleu→orange */
  --gradient-accent: linear-gradient(in oklch 90deg, var(--primary-800), var(--tertiary-800));
  --gradient-surface: linear-gradient(in oklch 180deg, #FFF3E8 0%, #FDE8D8 100%);
  color-scheme: light;
}

/* ========================================================================
   THÈME EVENING (18h-22h) — C+ Hybride: identité + fond ambre + BOUTONS ORANGE (marqué)
   WCAG 2.2 AA validé — 11/11 ratios ≥ 4.5:1
   Source : PLAN-AMELIORATION-ESTHETIQUE.md (D8 révisée, 21 octobre 2026)
   ======================================================================== */
[data-theme=evening] {
  /* Fonds — ambre très clair */
  --bg-page: #F5EBDD;
  --bg-surface: #FFF8F0;
  --bg-surface-alt: #F5DFC8;
  --default-bg-color: #F5EBDD;
  /* Texte — neutres (identité conservée) */
  --text-heading: var(--primary-900); /* 8.2:1 AAA */
  --text-body: var(--neutral-800); /* 12.2:1 AAA */
  --text-muted: var(--neutral-600); /* 6.6:1 AA */
  --font-color: var(--neutral-800);
  /* Accents — identité bleu/jaune/orange */
  --primary: var(--primary-800);
  --secondary: var(--secondary-500);
  --tertiary: var(--tertiary-500);
  --link-text: var(--primary-800); /* 5.3:1 AA */
  --link-hover-text: var(--primary-900); /* 8.2:1 AAA */
  --link-color: var(--primary-800);
  --link-hover-color: var(--primary-900);
  /* Actions — BOUTONS PRIMAIRES EN ORANGE (ajustement MARQUÉ) */
  --action-bg: var(--tertiary-500); /* orange-500 (crépuscule) */
  --action-bg-hover: var(--tertiary-600); /* orange-600 */
  --action-bg-active: var(--tertiary-700); /* orange-700 */
  --action-border: var(--tertiary-600);
  --text-on-primary: #1A1A1A; /* 7.4:1 AAA sur tertiary-500 */
  --action-secondary-bg: var(--secondary-500); /* jaune-500 (identité) */
  --action-secondary-hover: var(--secondary-600);
  --action-secondary-text: #1A1A1A; /* 11.6:1 AAA */
  --action-tertiary-text: var(--primary-800);
  --action-tertiary-hover-bg: #F5DFC8;
  /* Bordures — tons ambre */
  --border-subtle: #E0D0B8;
  --border-strong: #C4A878;
  /* Alertes */
  --alert-success-bg: #E8F0E0;
  --alert-success-text: #3A5A2D;
  --alert-warning-bg: #F5E8D0;
  --alert-warning-text: #6B4A1A;
  --alert-danger-bg: #F5DED8;
  --alert-danger-text: #6B2A1E;
  --alert-info-bg: var(--primary-100);
  --alert-info-text: var(--primary-800);
  /* Focus — orange (marqué) */
  --focus-ring: 2px solid var(--tertiary-700);
  /* Menu */
  --menu-bg-color: #2D1F14;
  --menu-sec-color: rgba(196, 149, 106, 0.2);
  --menu-font-color: #E8D5C0;
  --hover-active-font-color: #F5EBDD;
  /* Gradients — identité bleu→orange (marqué) */
  --gradient-accent: linear-gradient(in oklch 90deg, var(--primary-800), var(--tertiary-600));
  --gradient-surface: linear-gradient(in oklch 180deg, #F5EBDD 0%, #F5DFC8 100%);
  color-scheme: light;
}

/* ========================================================================
   THÈME DARK (mode sombre forcé) — Material Design
   WCAG 2.2 AA validé — neutre, pas d'identité de couleur
   Source : PLAN-AMELIORATION-ESTHETIQUE.md (D5, 21 octobre 2026)
   Référence : https://m2.material.io/design/color/dark-theme.html
   ======================================================================== */
[data-theme=dark] {
  /* Primitives — bleu clair adapté au sombre */
  --primary: var(--primary-400);
  --secondary: var(--secondary-400);
  --tertiary: var(--tertiary-400);
  /* Actions */
  --action-bg: var(--primary-400);
  --action-bg-hover: var(--primary-300);
  --action-bg-active: var(--primary-200);
  --action-border: var(--primary-300);
  --text-on-primary: #1A1A1A; /* texte sombre sur bleu clair */
  --action-secondary-bg: var(--secondary-400);
  --action-secondary-hover: var(--secondary-300);
  --action-secondary-text: #1A1A1A;
  --action-tertiary-text: var(--primary-300);
  --action-tertiary-hover-bg: var(--primary-900);
  /* Liens — teintes claires sur fond sombre */
  --link-text: var(--primary-300); /* 12.7:1 AAA */
  --link-hover-text: var(--primary-200); /* 15.4:1 AAA */
  /* Fonds — Material Design Dark Theme (neutre) */
  --bg-page: #121212;
  --bg-surface: #1E1E1E;
  --bg-surface-alt: #242424;
  /* Texte — Material on-surface */
  --text-heading: rgba(255, 255, 255, 0.87); /* 18.7:1 AAA */
  --text-body: rgba(255, 255, 255, 0.87); /* 14.2:1 AAA */
  --text-muted: rgba(255, 255, 255, 0.60); /* 6.6:1 AA */
  /* Bordures — Material elevation */
  --border-subtle: #333333;
  --border-strong: #444444;
  /* Alertes — Material dark */
  --alert-success-bg: #1B3A2A;
  --alert-success-text: #81C784;
  --alert-warning-bg: #3E2E14;
  --alert-warning-text: var(--secondary-300);
  --alert-danger-bg: #3E1A1E;
  --alert-danger-text: #EF9A9A;
  --alert-info-bg: var(--primary-900);
  --alert-info-text: var(--primary-300);
  /* Focus */
  --focus-ring: 2px solid var(--primary-300);
  /* Texte inversé et désactivé */
  --text-inverse: #121212;
  --text-disabled: rgba(255, 255, 255, 0.38);
  /* Overrides pour Vela en mode sombre (Material) */
  --font-color: rgba(255, 255, 255, 0.87);
  --link-color: var(--primary-300);
  --link-hover-color: var(--primary-200);
  --menu-bg-color: #1E1E1E;
  --menu-sec-color: rgba(255, 255, 255, 0.08);
  --menu-font-color: rgba(255, 255, 255, 0.87);
  --hover-active-font-color: #FFFFFF;
  --default-bg-color: #1E1E1E;
  /* Ombres — Material elevation */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.6);
  /* File type colors — versions Material dark
     Conventions : PDF=rouge, Word=bleu, Excel=vert, PPT=orange */
  --file-pdf-bg: #3E1A1E;
  --file-pdf-fg: #EF9A9A;
  --file-doc-bg: #1A2332;
  --file-doc-fg: #90CAF9;
  --file-docx-bg: #1A2332;
  --file-docx-fg: #90CAF9;
  --file-xls-bg: #1B3A2A;
  --file-xls-fg: #81C784;
  --file-xlsx-bg: #1B3A2A;
  --file-xlsx-fg: #81C784;
  --file-ppt-bg: #3E2A14;
  --file-ppt-fg: #FFB74D;
  --file-pptx-bg: #3E2A14;
  --file-pptx-fg: #FFB74D;
  --file-txt-bg: #2A2A2A;
  --file-txt-fg: #B0BEC5;
  --file-csv-bg: #1B3A2A;
  --file-csv-fg: #81C784;
  --file-image-bg: #1A2332;
  --file-image-fg: #90CAF9;
  --file-video-bg: #3E1A1E;
  --file-video-fg: #EF9A9A;
  --file-audio-bg: #3E2E14;
  --file-audio-fg: #FFD77B;
  --file-zip-bg: #2A2A2A;
  --file-zip-fg: #B0BEC5;
  --file-rar-bg: #2A2A2A;
  --file-rar-fg: #B0BEC5;
  --file-default-bg: #333333;
  --file-default-fg: #B0BEC5;
  color-scheme: dark;
}

/* Scrollbar en mode sombre */
[data-theme=night] ::-webkit-scrollbar-track {
  background: var(--scrollbar-track) !important;
}
[data-theme=night] ::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb) !important;
}
[data-theme=night] ::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover) !important;
}

/* Scrollbar pour dark */
[data-theme=dark] ::-webkit-scrollbar-track {
  background: var(--scrollbar-track) !important;
}
[data-theme=dark] ::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb) !important;
}
[data-theme=dark] ::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover) !important;
}

/* ========================================================================
   SECTION 5 : COMPATIBILITÉ DESCENDANTE

   Si ce fichier n'est pas chargé, le site reste lisible avec les valeurs
   par défaut du thème Vela.
   ======================================================================== */