/* ============================================================================
   HELIOS DESIGN TOKENS v2 — "Aurora" (Premium B2B 2026)
   ============================================================================

   Palette Helios Aurora : indigo lumineux, ambre solaire et neutres encre.
   Charge APRÈS theme-global.css + sidebar-main.css → override cascade.

   Brand : Indigo Aurora #5554E8 / #8584FF (action, focus, sélection).
   Signature : Ambre solaire #D39218 / #F4C76E (marque, distinction).
   Neutrals : Encre #0D1020 et porcelaine #F6F7FB.
   Typography : Plus Jakarta Sans variable, servie localement.

   NOTE D'ARCHITECTURE (non-breaking) :
   Les RAMPES historiques --hx-indigo-* et --hx-violet-* CONSERVENT leur NOM
   mais portent désormais les VALEURS Stabilis (rouge / or). Ainsi tout le code
   downstream consommant var(--hx-indigo-500) ou var(--accent-primary) bascule
   automatiquement sur la nouvelle identité, sans renommage massif.
   Alias explicites --hx-red-* / --hx-gold-* fournis pour le nouveau code.

   PHILOSOPHIE :
   - Light et dark conçus ensemble, sans inversion automatique.
   - Indigo pour l'action ; ambre réservé à la signature Helios.
   - φ spacing system preserved (already excellent).
   ============================================================================ */

/* Premium typography — Inter + JetBrains Mono.
   Loaded via <link rel="preconnect"> + <link rel="stylesheet"> in layout-wrapper.phtml
   and phi-css.phtml for optimal performance (no render-blocking @import). */

:root {
    /* ========================================================================
       1. BRAND PALETTE — Rouge Stabilis / Or / Sky / Emerald
       ======================================================================== */

    /* Rouge Stabilis (PRIMARY brand) — CTA, focus, liens, accents.
       Les variables gardent le nom --hx-indigo-* (non-breaking) mais portent
       la rampe ROUGE. Alias sémantiques --hx-red-* fournis ci-dessous. */
    --hx-indigo-50:  #F1F1FF;
    --hx-indigo-100: #E5E5FF;
    --hx-indigo-200: #CBCBFF;
    --hx-indigo-300: #AAA9FF;
    --hx-indigo-400: #8584FF;
    /* Accent PRIMARY : surcouche tenant (white-label 2026-07-30). --tenant-accent
       est injecté en runtime depuis tenant_settings par helios_tenant_branding_meta_tags() ;
       repli sur l'accent historique (= accent_color du tenant fondateur en base,
       rendu identique pour lui). */
    --hx-indigo-500: var(--tenant-accent, #5554E8);
    --hx-indigo-600: #4140CA;
    --hx-indigo-700: #3433AD;
    --hx-indigo-800: #292987;
    --hx-indigo-900: #202066;
    --hx-indigo-950: #151542;

    /* Alias sémantiques rouge (nouveau code) */
    --hx-red-50:  #FFF1F2;  --hx-red-100: #FFE0E3; --hx-red-200: #FFC5CB;
    --hx-red-300: #FF9AA4;  --hx-red-400: #FF5A67; --hx-red-500: #E63946;
    --hx-red-600: #C41E3A;  --hx-red-700: #A01828; --hx-red-800: #7D131F;
    --hx-red-900: #5A0E17;  --hx-red-950: #3D0910;

    /* Or Stabilis (SECONDARY / luxe) — gardent le nom --hx-violet-* (non-breaking)
       mais portent la rampe OR. Alias --hx-gold-* fournis. */
    --hx-violet-400: #E5C158;   /* gold-light */
    --hx-violet-500: #D4AF37;   /* stabgold — SECONDARY */
    --hx-violet-600: #B8962E;
    --hx-violet-700: #9A7D26;
    --hx-violet-800: #8A6F22;   /* or-texte : premier cran AA (4.8:1) pour de l'or SUR FOND CLAIR */
    --hx-violet-900: #6B561A;   /* or-texte renforce (7.1:1 sur blanc) : petites tailles sur clair */

    /* REGLE AA (contraste calcule, audit 2026-07-17) :
       - texte OR sur fond clair : uniquement -800/-900 (500 = 1.9:1, 600 = 2.7:1, 700 = 3.9:1 → interdits en texte normal) ;
       - fond OR (-400/-500/-600) : texte SOMBRE obligatoire (--hx-slate-900 ≈ 9:1) — `color: white` sur or = 1.9:1. */

    /* Alias sémantiques or (nouveau code) */
    --hx-gold-300: #EFD98A; --hx-gold-400: #E5C158; --hx-gold-500: #D4AF37;
    --hx-gold-600: #B8962E; --hx-gold-700: #9A7D26;
    --hx-gold-800: #8A6F22; --hx-gold-900: #6B561A;

    /* Sky (TERTIARY ACCENT) — data viz, info */
    --hx-sky-400: #38BDF8;
    --hx-sky-500: #0EA5E9;
    --hx-sky-600: #0284C7;
    --hx-sky-700: #0369A1;

    /* Emerald (SUCCESS) */
    --hx-emerald-400: #34D399;
    --hx-emerald-500: #10B981;
    --hx-emerald-600: #059669;
    --hx-emerald-700: #047857;

    /* Amber (WARNING) */
    --hx-amber-400: #FBBF24;
    --hx-amber-500: #F59E0B;
    --hx-amber-600: #D97706;
    --hx-amber-700: #B45309;

    /* Rose (DANGER) */
    --hx-rose-400: #FB7185;
    --hx-rose-500: #F43F5E;
    --hx-rose-600: #E11D48;
    --hx-rose-700: #BE123C;

    /* ========================================================================
       2. NEUTRALS — gris neutres (clairs) + noir Stabilis (sombres)
       Les teintes SOMBRES (700→950) sont neutralisées en noir Stabilis pour
       éliminer toute dominante bleu-slate (incohérente avec stabilis-it.ch).
       Les teintes claires (50→600) restent des gris froids neutres pour
       texte/bordures (déjà quasi-neutres, contraste OK en light & dark).
       ======================================================================== */
    --hx-slate-50:  #F8FAFC;
    --hx-slate-100: #F1F5F9;
    --hx-slate-200: #E2E8F0;
    --hx-slate-300: #CBD5E1;
    --hx-slate-400: #9CA3AF;
    --hx-slate-500: #6B7280;
    --hx-slate-600: #4B5563;
    --hx-slate-700: #242424;   /* ex #334155 slate → noir neutre */
    --hx-slate-800: #1A1A1A;   /* ex #1E293B slate → noir Stabilis */
    --hx-slate-900: #111111;   /* ex #0F172A slate → noir Stabilis */
    --hx-slate-950: #0A0A0A;   /* ex #020617 slate → noir Stabilis */

    /* ========================================================================
       3. SEMANTIC OVERRIDES — redefining legacy tokens to new palette
       Cascade: ces redéfinitions priment sur theme-global.css (chargé avant)
       ======================================================================== */

    /* Operational Calm — surfaces sobres, accent de marque unique. */
    --bg-primary:            #111111;
    --bg-secondary:          #1A1A1A;
    --accent-primary:        var(--tenant-accent, var(--hx-indigo-500));
    --accent-primary-hover:  var(--hx-indigo-600);
    --accent-primary-active: var(--hx-indigo-700);

    /* ------------------------------------------------------------------
       ENCRE ET SURFACE, CALCULEES SERVEUR — jamais ecrites en dur
       ------------------------------------------------------------------
       --accent-primary vaut var(--tenant-accent, #E63946) : sa valeur reelle
       depend donc du CLIENT. Une encre figee ne peut pas etre correcte.
       La preuve, mesuree le 2026-08-01 : la pastille de langue avait ete
       corrigee avec `#111111`, valeur exacte a 4,53:1 sur le rouge de marque.
       Remesuree ensuite a 3,31:1 — sans qu'une ligne de CSS ait bouge. Ce
       tenant-la a un accent VIOLET, et sur du violet c'est le blanc qui est
       lisible, pas le noir.

       helios_readable_ink() / helios_accessible_surface() (app_config.php)
       calculent ces deux valeurs a partir de la couleur du tenant, cote
       serveur, au rendu du <head>. Pas de JavaScript, pas de scintillement,
       resultat identique sur tous les navigateurs.

       Les replis (#111111 / #C41E3A) sont les valeurs justes pour le rouge
       Helios, servi quand aucune marque tenant n'est configuree.
       ------------------------------------------------------------------ */
    --accent-primary-contrast: var(--tenant-accent-ink, #111111);
    --accent-surface-strong:   var(--tenant-accent-surface, #C41E3A);
    --accent-primary-rgb:    230, 57, 70;   /* rouge — fallback des rgba(var(--accent-primary-rgb,...)) */

    /* Accent secondary → ROUGE clair (paire de dégradé brand, PLUS d'orange).
       L'OR reste disponible via --hx-gold-* et --accent-gradient-gold pour les
       accents pleins intentionnels (KPI, .btn-gold, halos), JAMAIS mélangé au
       rouge dans un même dégradé (ce mélange produisait l'orange). */
    --accent-secondary:        var(--hx-red-600);   /* #C41E3A — assez sombre pour
                                  du texte blanc en fond PLEIN (4.16:1) ET pas
                                  d'orange en paire avec le rouge primary. */
    --accent-secondary-hover:  var(--hx-red-700);

    /* Accent tertiary → rouge encore plus sombre (3ᵉ stop hero/shimmer) */
    --accent-tertiary: var(--hx-red-700);           /* #A01828 */

    /* Brand gradient — rouge → rouge SOMBRE (texte blanc lisible ≥3:1 partout ;
       #FF5A67 trop clair pour du texte blanc → on descend vers #C41E3A). */
    --accent-gradient: linear-gradient(135deg, var(--hx-red-500) 0%, var(--hx-red-600) 100%);
    /* Gradient or (CTA premium / badges luxe) */
    --accent-gradient-gold: linear-gradient(135deg, var(--hx-gold-500) 0%, var(--hx-gold-400) 100%);

    /* Aliases legacy (used massively) */
    --accent-cyan:        var(--hx-sky-500);
    --accent-coral:       var(--hx-red-500);
    --accent-terracotta:  var(--hx-gold-600);

    /* Opacity variants — rouge brand (0.05 → 0.5) */
    --accent-primary-05: rgba(230, 57, 70, 0.05);
    --accent-primary-08: rgba(230, 57, 70, 0.08);
    --accent-primary-10: rgba(230, 57, 70, 0.10);
    --accent-primary-13: rgba(230, 57, 70, 0.13);
    --accent-primary-15: rgba(230, 57, 70, 0.15);
    --accent-primary-20: rgba(230, 57, 70, 0.20);
    --accent-primary-30: rgba(230, 57, 70, 0.30);
    --accent-primary-50: rgba(230, 57, 70, 0.50);
    /* Opacity variants — rouge clair (secondary, plus d'orange dans les paires) */
    --accent-secondary-10: rgba(255, 90, 103, 0.10);
    --accent-secondary-15: rgba(255, 90, 103, 0.15);
    --accent-secondary-20: rgba(255, 90, 103, 0.20);
    --accent-secondary-30: rgba(255, 90, 103, 0.30);
    /* Variantes OR explicites (pour accents pleins, jamais en paire avec rouge) */
    --accent-gold-10: rgba(212, 175, 55, 0.10);
    --accent-gold-15: rgba(212, 175, 55, 0.15);
    --accent-gold-20: rgba(212, 175, 55, 0.20);

    /* Status colors — refined */
    --success:       var(--hx-emerald-500);
    --success-light: var(--hx-emerald-400);
    --success-dark:  var(--hx-emerald-700);
    --success-bg:    rgba(16, 185, 129, 0.10);
    --warning:       var(--hx-amber-500);
    --warning-light: var(--hx-amber-400);
    --warning-dark:  var(--hx-amber-700);
    --warning-bg:    rgba(245, 158, 11, 0.10);
    --danger:        var(--hx-rose-500);
    --danger-light:  var(--hx-rose-400);
    --danger-dark:   var(--hx-rose-700);
    --danger-bg:     rgba(244, 63, 94, 0.10);
    --info:          var(--hx-sky-500);
    --info-light:    var(--hx-sky-400);
    --info-dark:     var(--hx-sky-700);
    --info-bg:       rgba(14, 165, 233, 0.10);

    /* φ palette HSL overrides — keep structure, swap hue */
    --phi-cyan:    var(--hx-indigo-500);   /* primary */
    --phi-violet:  var(--hx-violet-500);
    --phi-magenta: var(--hx-violet-600);
    --phi-lime:    var(--hx-emerald-500);

    --phi-success:  var(--hx-emerald-500);
    --phi-warning:  var(--hx-amber-500);
    --phi-danger:   var(--hx-rose-500);
    --phi-info:     var(--hx-sky-500);

    /* ========================================================================
       4. BACKGROUNDS — Slate gradient (dark) / White (light)
       ======================================================================== */

    /* ===================================================================
       Noir corporate Stabilis — échelle de surfaces sombres
       =================================================================== */
    --stab-black:     #0A0A0A;   /* bg-dark (le plus profond) */
    --stab-black-2:   #111111;   /* bg-dark-secondary */
    --stab-black-3:   #1A1A1A;   /* bg-dark-tertiary / cards */
    --stab-black-4:   #2A2A2A;   /* bg-dark-elevated */

    /* Helios background tokens (used by sidebar, ATS, auth, etc.) → noir Stabilis */
    --helios-bg-darkest:    #0A0A0A;
    --helios-bg-darker:     #111111;
    --helios-bg-dark:       #1A1A1A;
    --helios-bg-dark-95:    #1A1A1A;

    /* Unified body background — dégradé noir profond Stabilis (dark default) */
    --theme-bg-start: #0A0A0A;
    --theme-bg-mid1:  #0D0D0D;
    --theme-bg-mid2:  #111111;
    --theme-bg-end:   #161616;
    --theme-bg-gradient: linear-gradient(180deg,
        #0A0A0A 0%,
        #0D0D0D 38.2%,
        #111111 61.8%,
        #161616 100%
    );

    /* ===================================================================
       Sidebar palette — overrides + ALIAS sémantiques (non-breaking).
       --cyan-* : legacy name (sidebar-main.css, chat-pusher, etc.)
       --sidebar-bg-* : nom sémantique correct (DEPRECATED le --cyan-* à terme)
       Les deux pointent vers la même valeur slate/indigo : changement de nom
       sans effet visuel. Pattern Design : Alias d'abord, rename après.
       =================================================================== */
    --cyan-900: #0A0A0A;
    --cyan-800: #111111;
    --cyan-700: #1A1A1A;
    --cyan-600: #2A2A2A;
    --cyan-500: var(--hx-red-600);
    --cyan-400: var(--hx-red-500);
    --cyan-300: var(--hx-red-400);
    --cyan-200: var(--hx-red-300);
    --cyan-100: var(--hx-red-200);
    --cyan-50:  var(--hx-red-50);

    /* Sidebar-bg-* (sémantique correct, à utiliser pour nouveau code) → noir + rouge */
    --sidebar-bg-darkest:  #0A0A0A;
    --sidebar-bg-darker:   #0D0D0D;
    --sidebar-bg-dark:     #111111;
    --sidebar-bg-medium:   #1A1A1A;
    --sidebar-accent:      var(--hx-red-500);
    --sidebar-accent-hover:var(--hx-red-600);
    --sidebar-text:        #F4F4F5;
    --sidebar-text-muted:  rgba(255, 255, 255, 0.62);
    --sidebar-border:      rgba(230, 57, 70, 0.12);

    /* Solid surfaces (kept for vivier/cra modules) → noir Stabilis */
    --bg-body:           #111111;
    --bg-card-solid:     #1A1A1A;
    --bg-elevated-solid: #2A2A2A;

    /* Glass surfaces — DARK-tinted (Stabilis: rgba(17,17,17,0.8)).
       Le verre teinté sombre reste premium AVEC le flou, et lisible SANS lui
       (screenshots, perf, prefers-reduced-transparency) → plus de "lait blanc". */
    --bg-card:           rgba(30, 30, 30, 0.55);
    --bg-card-hover:     rgba(44, 44, 44, 0.65);
    --bg-glass:          rgba(24, 24, 24, 0.52);
    --bg-glass-hover:    rgba(38, 38, 38, 0.62);
    --bg-input:          rgba(0, 0, 0, 0.28);
    --bg-input-focus:    rgba(0, 0, 0, 0.38);

    /* Text colors on dark — high contrast */
    /* SOURCE UNIQUE (2026-08-20). Ces trois rangs etaient declares 21 fois
       dans ce fichier, et trois blocs a forte specificite battaient la
       correspondance Aurora en (0,0,1) : la palette mesuree etait definie et
       n'atteignait jamais le texte. Meme piege que la marque le matin meme.
       Ils derivent tous des memes jetons desormais : quel que soit le bloc qui
       l'emporte, la valeur rendue est la meme. Le repli garde l'ancienne
       valeur, pour un contexte ou la couche Aurora ne serait pas chargee. */
    --text-primary:      var(--aurora-text, #F8FAFC);
    --text-secondary:    var(--aurora-text-secondary, #CBD5E1);
    --text-muted:        var(--aurora-text-faint, #94A3B8);
    --text-disabled:     #64748B;
    --text-inverse:      var(--hx-slate-900);

    /* Borders — subtle */
    --border-color:        rgba(148, 163, 184, 0.12);
    --border-color-hover:  rgba(148, 163, 184, 0.24);
    --border-focus:        var(--hx-indigo-500);

    /* ===================================================================
       CONTRAST FIX — semantic "text-dark" alias was rgba(0,0,0,0.81)
       which is INVISIBLE on dark bg. Remap to context-aware text color.
       Same for --text-secondary-dark, --text-muted-light/dark.
       VALEURS TERMINALES (littéraux, = --text-primary/secondary ci-dessus) :
       jamais var(--text-primary) ici, car theme-global.css:180 définit
       `--text-primary: var(--text-dark)` en light → cycle var() → tokens
       invalides. Un alias doit pointer vers une valeur, pas vers son inverse.
       =================================================================== */
    --text-dark:            #F8FAFC;
    --text-secondary-dark:  #CBD5E1;
    --text-dark-secondary:  #CBD5E1;
    --text-muted-light:     #94A3B8;
    --text-muted-dark:      #64748B;

    /* ========================================================================
       5. SHADOWS — Layered, slate-tinted (not pure black)
       ======================================================================== */
    --shadow-xs:  0 1px 2px 0 rgba(15, 23, 42, 0.06);
    --shadow-sm:  0 1px 3px 0 rgba(15, 23, 42, 0.10),
                  0 1px 2px -1px rgba(15, 23, 42, 0.06);
    --shadow-md:  0 4px 8px -2px rgba(15, 23, 42, 0.12),
                  0 2px 4px -2px rgba(15, 23, 42, 0.08);
    --shadow-lg:  0 12px 24px -6px rgba(15, 23, 42, 0.18),
                  0 4px 8px -2px rgba(15, 23, 42, 0.10);
    --shadow-xl:  0 24px 48px -12px rgba(15, 23, 42, 0.25),
                  0 8px 16px -4px rgba(15, 23, 42, 0.10);
    --shadow-2xl: 0 32px 64px -16px rgba(15, 23, 42, 0.35);

    /* Glow (focus/hover) — rouge brand Stabilis (signature) */
    --shadow-glow-sm: 0 0 0 3px rgba(230, 57, 70, 0.18);
    --shadow-glow-md: 0 0 16px rgba(230, 57, 70, 0.30);
    --shadow-glow-lg: 0 0 32px rgba(230, 57, 70, 0.38);
    --shadow-glow-xl: 0 0 48px rgba(230, 57, 70, 0.45);
    /* Glow or (accent premium) */
    --shadow-glow-gold: 0 0 24px rgba(212, 175, 55, 0.35);

    /* ========================================================================
       6. TYPOGRAPHY — platform-native, privacy-safe system stacks
       ======================================================================== */
    /* ========================================================================
       7. GLASSMORPHISM — Refined backdrop blur
       ======================================================================== */
    --h-glass-blur:   20px;
    --h-glass-sat:    180%;
    --h-glass-bg:     rgba(20, 20, 20, 0.55);
    --h-glass-border: rgba(255, 255, 255, 0.08);

    /* ========================================================================
       8. FOCUS RING — accessible, beautiful
       ======================================================================== */
    /* --focus-ring vaut une COULEUR (voir la couche Aurora plus bas), pas un
       triplet box-shadow. La declaration qui vivait ici en portait un, sans
       aucun consommateur : 0 usage en box-shadow contre 228 en couleur. Elle
       ne cassait rien tant que l'ordre du fichier la laissait perdre — mais le
       jour ou elle l'emportait, les 228 `outline: … var(--focus-ring)`
       devenaient invalides au calcul et l'anneau de focus DISPARAISSAIT
       partout, sans symptome visible a la souris. WCAG 2.4.7 sur toute
       l'application, d'un coup. */
    --focus-ring-offset: 2px;
}

/* ============================================================================
   CRITICAL FIX — Force phi-gray palette to DARK-mode values by default
   ============================================================================
   ROOT CAUSE : helios-golden-ratio.css contient un
   @media (prefers-color-scheme: light) { :root { --phi-gray-* : noir-alpha } }
   qui flippe la palette selon l'OS. theme-global.js applique .dark-theme par
   défaut (CLASSE) mais le legacy attend [data-theme="dark"] (ATTRIBUT) →
   mismatch → texte noir sur fond noir en OS-light.

   Fix : force la palette dark sur body:not(.light-theme), peu importe l'OS.
   body a une spécificité plus haute que :root dans la cascade des vars
   consommées dans des descendants de body.
   ============================================================================ */
/* Spécificité maximisée pour battre toute autre règle du legacy ; au pire
   égalité → cascade order (v2 charge en dernier) garantit win.
   ⚠️ PIÈGE (root cause thème clair cassé) : la classe thème vit sur <body>
   (<html> ne porte que data-theme) → `html:not(.light-theme) body` matchait
   AUSSI body.light-theme avec une spécificité (0,1,2) qui battait tous les
   blocs `body.light-theme` (0,1,1) → light theme forcé en palette dark.
   Chaque sélecteur de ce bloc DOIT exclure body.light-theme. */
html body:not(.light-theme),
html body.dark-theme,
html:not(.light-theme) body:not(.light-theme) {
    --bg-primary:     #111111;
    --bg-secondary:   #1A1A1A;
    --accent-primary: var(--tenant-accent, var(--hx-red-500));
    --phi-gray-50:   rgba(255, 255, 255, 0.05);
    --phi-gray-100:  rgba(255, 255, 255, 0.08);
    --phi-gray-200:  rgba(255, 255, 255, 0.13);
    --phi-gray-300:  rgba(255, 255, 255, 0.21);
    --phi-gray-400:  rgba(255, 255, 255, 0.34);
    --phi-gray-500:  rgba(255, 255, 255, 0.55);
    --phi-gray-600:  rgba(255, 255, 255, 0.69);
    --phi-gray-700:  rgba(255, 255, 255, 0.81);
    --phi-gray-800:  rgba(255, 255, 255, 0.90);
    --phi-gray-900:  rgba(255, 255, 255, 0.95);

    /* NOTE: --phi-dark-* gardés en BLACK-alpha (sémantique = overlay dark)
       car utilisés comme BACKGROUND dans plusieurs wizards (ats-wizard, etc).
       Les modules qui les utilisaient comme color: TEXT sont corrigés via
       sélecteurs ciblés dans stellar-polish.css (section Universal Contrast). */

    /* CRITICAL — re-anchor semantic text tokens at body level, sinon
       l'inherit from :root @media (prefers-color-scheme: light) garde
       du noir-alpha sur fond dark. */
    --text-primary:   var(--aurora-text, #F8FAFC);
    --text-secondary: var(--aurora-text-secondary, #CBD5E1);
    --text-muted:     var(--aurora-text-faint, #94A3B8);
    --text-disabled:  #64748B;
    --text-inverse:   #0F172A;

    /* Aliases legacy — valeurs TERMINALES (pas var(--text-primary) : cycle
       avec theme-global.css:180 `--text-primary: var(--text-dark)`) */
    --text-dark:           #F8FAFC;
    --text-secondary-dark: #CBD5E1;
    --text-dark-secondary: #CBD5E1;
    --text-muted-light:    #94A3B8;
    --text-muted-dark:     #64748B;

    /* Backgrounds re-ancrés aussi (au cas où @media OS-light les flippe) — dark glass */
    --bg-card:        rgba(30, 30, 30, 0.55);
    --bg-card-hover:  rgba(44, 44, 44, 0.65);
    --bg-glass:       rgba(24, 24, 24, 0.52);
    --bg-glass-hover: rgba(38, 38, 38, 0.62);
    --bg-input:       rgba(0, 0, 0, 0.28);
    --bg-input-focus: rgba(0, 0, 0, 0.38);
    --border-color:       rgba(148, 163, 184, 0.12);
    --border-color-hover: rgba(148, 163, 184, 0.24);
}

/* NUCLEAR OPTION — kill the @media (prefers-color-scheme: light) flip
   au niveau :root pour les phi-gray ; même si le browser est OS-light,
   tant qu'on n'a pas explicitement body.light-theme, on reste dark. */
@media (prefers-color-scheme: light) {
    :root {
        --phi-gray-50:   rgba(255, 255, 255, 0.05);
        --phi-gray-100:  rgba(255, 255, 255, 0.08);
        --phi-gray-200:  rgba(255, 255, 255, 0.13);
        --phi-gray-300:  rgba(255, 255, 255, 0.21);
        --phi-gray-400:  rgba(255, 255, 255, 0.34);
        --phi-gray-500:  rgba(255, 255, 255, 0.55);
        --phi-gray-600:  rgba(255, 255, 255, 0.69);
        --phi-gray-700:  rgba(255, 255, 255, 0.81);
        --phi-gray-800:  rgba(255, 255, 255, 0.90);
        --phi-gray-900:  rgba(255, 255, 255, 0.95);

        /* phi-dark-* NOT overridden (used as BG in wizards) */

        --text-primary:   var(--aurora-text, #F8FAFC);
        --text-secondary: var(--aurora-text-secondary, #CBD5E1);
        --text-muted:     var(--aurora-text-faint, #94A3B8);
        --text-disabled:  #64748B;
    }
    /* Si l'utilisateur a explicitement choisi LIGHT via toggle, revenir au light */
    body.light-theme {
        --phi-gray-50:   rgba(0, 0, 0, 0.05);
        --phi-gray-100:  rgba(0, 0, 0, 0.08);
        --phi-gray-200:  rgba(0, 0, 0, 0.13);
        --phi-gray-300:  rgba(0, 0, 0, 0.21);
        --phi-gray-400:  rgba(0, 0, 0, 0.34);
        --phi-gray-500:  rgba(0, 0, 0, 0.55);
        --phi-gray-600:  rgba(0, 0, 0, 0.69);
        --phi-gray-700:  rgba(0, 0, 0, 0.81);
        --phi-gray-800:  rgba(0, 0, 0, 0.90);
        --phi-gray-900:  rgba(0, 0, 0, 0.95);
        --text-primary:  var(--aurora-text, var(--hx-slate-900));
    }
}

/* ============================================================================
   LIGHT THEME OVERRIDES (explicit class — applies on body.light-theme)
   ============================================================================ */
body.light-theme,
[data-theme="light"] {
    /* In light mode, --text-dark stays dark (legacy semantic) */
    --text-dark:           var(--hx-slate-900);
    --text-secondary-dark: var(--hx-slate-600);
    --text-dark-secondary: var(--hx-slate-600);
    --text-muted-light:    var(--hx-slate-500);
    --text-muted-dark:     var(--hx-slate-400);

    /* Backgrounds — soft white with subtle indigo tint */
    --theme-bg-start: #FFFFFF;
    --theme-bg-mid1:  var(--hx-slate-50);
    --theme-bg-mid2:  #F1F5F9;
    --theme-bg-end:   var(--hx-slate-100);
    --theme-bg-gradient: linear-gradient(180deg, #FFFFFF 0%, var(--hx-slate-50) 100%);

    --bg-body:           var(--hx-slate-50);
    --bg-primary:        var(--hx-slate-50);
    --bg-secondary:      #FFFFFF;
    --bg-card-solid:     #FFFFFF;
    --bg-elevated-solid: #FFFFFF;

    /* Glass surfaces — solid-feeling for light readability */
    --bg-card:        #FFFFFF;
    --bg-card-hover:  var(--hx-slate-50);
    --bg-glass:       rgba(255, 255, 255, 0.85);
    --bg-glass-hover: #FFFFFF;
    --bg-input:       #FFFFFF;
    --bg-input-focus: #FFFFFF;

    /* Text on light bg — WCAG AAA */
    --text-primary:    var(--aurora-text, var(--hx-slate-900));
    --text-secondary:  var(--aurora-text-secondary, var(--hx-slate-600));
    --text-muted:      var(--aurora-text-faint, var(--hx-slate-500));
    --text-disabled:   var(--hx-slate-400);
    --text-inverse:    #FFFFFF;

    /* Borders — visible but soft */
    --border-color:        var(--hx-slate-200);
    --border-color-hover:  var(--hx-slate-300);
    --border-focus:        var(--hx-indigo-500);

    /* Sidebar in light mode — keep dark for contrast (premium pattern) */
    --cyan-900: var(--hx-slate-950);
    --cyan-800: var(--hx-slate-900);
    --cyan-700: var(--hx-slate-800);
    --helios-bg-darkest: var(--hx-slate-950);
    --helios-bg-darker:  var(--hx-slate-900);
    --helios-bg-dark:    var(--hx-slate-800);

    /* Shadows — even softer in light mode */
    --shadow-xs:  0 1px 2px 0 rgba(15, 23, 42, 0.04);
    --shadow-sm:  0 1px 3px 0 rgba(15, 23, 42, 0.07),
                  0 1px 2px -1px rgba(15, 23, 42, 0.04);
    --shadow-md:  0 4px 8px -2px rgba(15, 23, 42, 0.08),
                  0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --shadow-lg:  0 12px 24px -6px rgba(15, 23, 42, 0.10),
                  0 4px 8px -2px rgba(15, 23, 42, 0.06);
    --shadow-xl:  0 24px 48px -12px rgba(15, 23, 42, 0.14);

    /* Glass — solid white panels for clarity */
    --h-glass-bg:     rgba(255, 255, 255, 0.92);
    --h-glass-border: var(--hx-slate-200);
}

/* ============================================================================
   GLOBAL TYPOGRAPHY POLISH
   ============================================================================ */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01';
}

body {
    font-family: var(--h-font-family);
    letter-spacing: -0.011em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--h-font-header);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-transform: none;
}
h1 { letter-spacing: -0.028em; }

/* Titres de page — Inter bold, pas d'uppercase (comme /formations) */
.page-title, .h-page-title, .section-title, .hero-title {
    font-family: var(--h-font-header);
    text-transform: none;
    letter-spacing: -0.02em;
    font-weight: 700;
}

code, kbd, pre, samp {
    font-family: var(--h-font-mono);
    font-feature-settings: 'ss01', 'ss02';
}

/* ============================================================================
   GLOBAL UX POLISH
   ============================================================================ */

/* Cursor pointer on interactive elements (UI Pro Max rule) */
button:not(:disabled),
[role="button"]:not(:disabled),
a[href],
input[type="submit"]:not(:disabled),
input[type="button"]:not(:disabled),
input[type="checkbox"],
input[type="radio"],
select,
summary,
[onclick],
[data-action] {
    cursor: pointer;
}

button:disabled,
[role="button"][aria-disabled="true"],
[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Focus ring — keyboard nav only (no mouse focus artifacts) */
*:focus { outline: none; }
*:focus-visible {
    outline: 2px solid var(--focus-ring, #1677C8);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* Selection highlight — rouge Stabilis */
::selection {
    background: rgba(230, 57, 70, 0.28);
    color: #fff;
}

/* Scrollbar — slim & premium */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.6); background-clip: content-box; border: 2px solid transparent; }

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

/* ============================================================================
   COMPONENT POLISH — buttons, cards, inputs, badges
   ============================================================================ */

/* Primary CTA button — indigo gradient + glow */
.btn-primary,
.h-btn-primary,
button.primary {
    background: var(--accent-gradient) !important;
    color: #FFFFFF !important;
    border: none !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(230, 57, 70, 0.30) inset !important;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn-primary:hover:not(:disabled),
.h-btn-primary:hover:not(:disabled),
button.primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md), var(--shadow-glow-md) !important;
}
.btn-primary:active:not(:disabled),
.h-btn-primary:active:not(:disabled) { transform: translateY(0); }

/* Bootstrap primary alignment with brand */
.btn-primary { background-color: var(--hx-indigo-500) !important; border-color: var(--hx-indigo-500) !important; }
.text-primary { color: var(--hx-indigo-500) !important; }
.bg-primary { background-color: var(--hx-indigo-500) !important; }
.border-primary { border-color: var(--hx-indigo-500) !important; }
.btn-outline-primary { color: var(--hx-indigo-500); border-color: var(--hx-indigo-500); }
.btn-outline-primary:hover { background: var(--hx-indigo-500); color: #fff; }

/* Forms — premium focus state */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
textarea,
select {
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
textarea:focus,
select:focus {
    border-color: var(--hx-red-500) !important;
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.20) !important;
    outline: none;
}

/* Card hover lift (refined) */
.card:not(.no-hover),
.glass-card:not(.no-hover) {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.2s;
}

/* Glassmorphism refinement */
.glass,
.glass-card,
.h-card-glass {
    background: var(--h-glass-bg);
    backdrop-filter: blur(var(--h-glass-blur)) saturate(var(--h-glass-sat));
    -webkit-backdrop-filter: blur(var(--h-glass-blur)) saturate(var(--h-glass-sat));
    border: 1px solid var(--h-glass-border);
}

/* Badges — refined typography */
.badge,
.h-badge {
    font-weight: 600;
    letter-spacing: 0.01em;
    font-size: var(--text-xs);
    padding: 0.25rem 0.55rem;
}

/* Links — refined */
a:not(.btn):not(.h-btn):not(.nav-link):not(.no-style) {
    color: var(--hx-indigo-500);
    text-decoration: none;
    transition: color 0.15s;
}
a:not(.btn):not(.h-btn):not(.nav-link):not(.no-style):hover { color: var(--hx-indigo-600); }

/* Tables — premium hover */
table tr:hover { background: rgba(230, 57, 70, 0.06); }

body.light-theme table tr:hover { background: rgba(230, 57, 70, 0.05); }

/* Modal backdrop — noir profond Stabilis */
.modal-backdrop { background: rgba(0, 0, 0, 0.78) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ============================================================================
   STATUS BADGE PALETTE — vivier candidates (refined)
   ============================================================================ */
:root {
    --status-new:        var(--hx-sky-500);
    --status-contacted:  var(--hx-amber-500);
    --status-qualified:  var(--hx-emerald-500);
    --status-in-process: var(--hx-violet-500);
    --status-interview:  var(--hx-violet-600);
    --status-offer:      var(--hx-sky-500);
    --status-hired:      var(--hx-emerald-600);
    --status-rejected:   var(--hx-rose-500);
    --status-archived:   var(--hx-slate-500);
}

/* ============================================================================
   THEME TOGGLE FAB — quick UX polish (visible on every page)
   ============================================================================ */
.helios-theme-fab {
    position: fixed;
    bottom: var(--space-5);
    right: var(--space-5);
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    border-radius: 50%;
    background: var(--bg-glass);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9000;
    box-shadow: var(--shadow-lg);
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.helios-theme-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: var(--shadow-xl), var(--shadow-glow-md); }
.helios-theme-fab:active { transform: translateY(0); }
.helios-theme-fab svg, .helios-theme-fab i { font-size: var(--text-md); }

/* ============================================================================
   STABILIS AMBIANCE — fond noir premium (glow rouge/or + grille suisse)
   ============================================================================
   Recouvre le body en dark mode : dégradé noir + halos rouge/or diffus
   + texture grille fine (Swiss design). Inspiré de stabilis-it.ch.
   Loads last → gagne la cascade sur le background body legacy. */

/* Ancre le fond html en noir → aucune zone blanche possible (pages longues,
   scroll élastique, background-attachment: fixed).
   ⚠️ Le signal light sur <html> est data-theme (theme-global.js) — la classe
   .light-theme ne vit que sur <body>. */
html:not([data-theme="light"]):not(.light-theme) { background-color: #0A0A0A !important; }
body.light-theme, html[data-theme="light"] { background-color: #F4F4F5; }

html body:not(.light-theme) {
    /* Base sombre opaque (PAS de background-attachment: fixed — casse le rendu
       backdrop-filter des glass-cards dans Chromium). Les halos rouge/or +
       grille suisse sont posés sur un pseudo-élément FIXE dédié ci-dessous,
       ce qui préserve l'ambiance ET le rendu correct du flou. */
    background: var(--theme-bg-gradient) !important;
    background-attachment: scroll !important;
    background-repeat: no-repeat !important;
}

/* Halos rouge/or + grille suisse — couche FIXE en arrière-plan (z-index 0),
   sous le contenu applicatif. N'interfère pas avec backdrop-filter car ce
   n'est pas un background-attachment:fixed du body. */
html body:not(.light-theme)::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-color: transparent;
    background-image:
        radial-gradient(1100px circle at 8% -8%, rgba(230, 57, 70, 0.10), transparent 42%),
        radial-gradient(900px circle at 100% 4%, rgba(212, 175, 55, 0.05), transparent 38%),
        radial-gradient(800px circle at 50% 120%, rgba(230, 57, 70, 0.06), transparent 50%),
        linear-gradient(to right, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 54px 54px, 54px 54px;
}

/* Le contenu applicatif passe au-dessus de la grille */
.app-layout, .main-content, .app-header,
.layout-wrapper, main, .content-area { position: relative; z-index: 1; }

/* ============================================================================
   STABILIS — Boutons primaires & accents or (cohérence brand)
   ============================================================================ */
/* Accent or réutilisable : badges premium, highlights, liens VIP */
.gold, .text-gold { color: var(--hx-gold-500) !important; }
.bg-gold { background: var(--accent-gradient-gold) !important; color: #111 !important; }
.btn-gold {
    background: var(--accent-gradient-gold) !important;
    color: #111111 !important;
    border: none !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn-gold:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-md), var(--shadow-glow-gold) !important; }

/* KPI / chiffres-clés : mise en valeur or sur fond noir premium */
.kpi-value, .stat-value, .h-kpi-value, .metric-value {
    font-family: var(--h-font-header);
    letter-spacing: 0.01em;
}

/* Barre d'accent rouge sous les titres de page (signature Stabilis) */
.page-title::after, .h-page-title::after, .section-title.with-accent::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    margin-top: 0.5rem;
    border-radius: 2px;
    background: var(--accent-gradient);
}

/* ============================================================================
   STABILIS — Skeleton loaders sombres (plus de placeholders blancs)
   ============================================================================
   Les skeletons (chargement, ou état d'erreur API) doivent rester sombres
   sur fond noir : shimmer gris subtil, jamais de gradient blanc. */
html body:not(.light-theme) .skeleton-card,
html body:not(.light-theme) .skeleton,
html body:not(.light-theme) [class*="skeleton-"] {
    background-image: none !important;
    background-color: rgba(255, 255, 255, 0.035) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}
html body:not(.light-theme) .skeleton-card .card-header {
    background: transparent !important;
    background-image: none !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
html body:not(.light-theme) .bg-glass-light,
html body:not(.light-theme) .skeleton-card .bg-glass-light,
html body:not(.light-theme) [class*="skeleton"] .bg-glass-light {
    background: rgba(255, 255, 255, 0.07) !important;
    background-image: none !important;
}

/* ============================================================================
   STABILIS — composants Bootstrap par défaut blancs → sombres en dark theme
   ============================================================================
   .form-control / .form-select / .accordion / .input-group-text / certains
   .btn-icon héritent du fond blanc Bootstrap. On les force en verre sombre
   pour éliminer les "boîtes blanches" incohérentes sur fond noir. */
html body:not(.light-theme) .form-control,
html body:not(.light-theme) .form-select,
html body:not(.light-theme) textarea,
html body:not(.light-theme) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
html body:not(.light-theme) .input-group-text,
html body:not(.light-theme) .btn-icon,
html body:not(.light-theme) .accordion-button,
html body:not(.light-theme) .accordion-item,
html body:not(.light-theme) .accordion-body,
html body:not(.light-theme) .list-group-item {
    background-color: rgba(0, 0, 0, 0.28) !important;
    color: var(--text-primary) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}
html body:not(.light-theme) .btn-icon { background-color: rgba(255, 255, 255, 0.06) !important; }
html body:not(.light-theme) .btn-icon:hover { background-color: rgba(230, 57, 70, 0.18) !important; }

/* ============================================================================
   STABILIS — LISIBILITÉ dark theme : texte Bootstrap sombre → clair
   ============================================================================
   Bootstrap pose --bs-body-color: #212529 (texte noir) + .text-muted / .btn
   héritent → INVISIBLE sur fond noir. On remappe les variables de thème
   Bootstrap pour le dark, + overrides ciblés. */
html body:not(.light-theme) {
    --bs-body-color: #F4F4F5;
    --bs-body-color-rgb: 244, 244, 245;
    --bs-secondary-color: rgba(244, 244, 245, 0.70);
    --bs-secondary-color-rgb: 244, 244, 245;
    --bs-tertiary-color: rgba(244, 244, 245, 0.50);
    --bs-emphasis-color: #FFFFFF;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-heading-color: #F4F4F5;
    --bs-link-color: #FF5A67;
    --bs-link-color-rgb: 255, 90, 103;
    --bs-link-hover-color: #E63946;
    --bs-border-color: rgba(255, 255, 255, 0.12);
}
/* Utilitaires texte sombre → clair (battent les !important Bootstrap) */
html body:not(.light-theme) .text-muted,
html body:not(.light-theme) .text-body-secondary { color: rgba(244, 244, 245, 0.66) !important; }
html body:not(.light-theme) .text-dark,
html body:not(.light-theme) .text-black,
html body:not(.light-theme) .text-body,
html body:not(.light-theme) .text-body-emphasis { color: #F4F4F5 !important; }
html body:not(.light-theme) .btn-link { color: #FF5A67 !important; }
/* Boutons "glass"/sans variante qui héritaient du texte noir Bootstrap */
html body:not(.light-theme) .btn-primary-glass { color: #FFFFFF !important; }
html body:not(.light-theme) .btn:not([class*="btn-primary"]):not([class*="btn-danger"]):not([class*="btn-success"]):not([class*="btn-warning"]):not([class*="btn-gold"]):not([class*="btn-outline"]):not([class*="btn-light"]):not([class*="text-"]) {
    color: #F4F4F5;
}
/* Texte explicitement noir inline-ish (rgb 33,37,41) sur cartes sombres */
html body:not(.light-theme) .card-body .text-dark,
html body:not(.light-theme) .modal-body .text-dark { color: #F4F4F5 !important; }

/* ============================================================================
   STABILIS — MODALS sombres (Bootstrap modal blanc par défaut → noir)
   ============================================================================ */
html body:not(.light-theme) .modal-content {
    background-color: #161616 !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6) !important;
}
html body:not(.light-theme) .modal-header,
html body:not(.light-theme) .modal-footer {
    border-color: rgba(255, 255, 255, 0.10) !important;
    background: transparent !important;
}
html body:not(.light-theme) .modal-title,
html body:not(.light-theme) .modal-header h1,
html body:not(.light-theme) .modal-header h2,
html body:not(.light-theme) .modal-header h3,
html body:not(.light-theme) .modal-header h4,
html body:not(.light-theme) .modal-header h5 { color: #F4F4F5 !important; }
html body:not(.light-theme) .modal-body { color: var(--text-secondary) !important; }
html body:not(.light-theme) .modal-body .text-dark,
html body:not(.light-theme) .modal-body p,
html body:not(.light-theme) .modal-body li,
html body:not(.light-theme) .modal-body label,
html body:not(.light-theme) .modal-body td,
html body:not(.light-theme) .modal-body span:not([class*="badge"]):not([class*="text-"]) { color: var(--text-secondary); }
/* Croix de fermeture Bootstrap (SVG noir) → blanche */
html body:not(.light-theme) .btn-close { filter: invert(1) grayscale(1) brightness(1.8); opacity: 0.8; }
html body:not(.light-theme) .btn-close:hover { opacity: 1; }

/* ============================================================================
   STABILIS — éléments divers : cookie consent, onglets actifs, badges
   ============================================================================ */
/* Bouton "Accepter" cookies → rouge brand (était vert, contraste faible) */
html body .gdpr-accept,
html body #gdprAccept,
html body .cookie-accept,
html body [class*="gdpr"] .accept-btn {
    background: linear-gradient(135deg, #D6273C 0%, var(--accent-primary-strong, #C41E3A) 100%) !important; /* AA : pire stop 5.0:1 avec blanc (ex-var(--accent-primary, #E63946) = 4.17) */
    color: #FFFFFF !important;
    border: none !important;
}
/* Onglets Bootstrap actifs (sky → rouge brand) */
html body:not(.light-theme) .nav-link.active,
html body:not(.light-theme) .nav-pills .nav-link.active {
    /* --hx-red-500 (#E63946) ne porte le blanc qu'a 4,17:1, sous AA.
       --accent-surface-strong suit la couleur du tenant via
       --tenant-accent-surface, calculee serveur pour porter du clair. */
    background-color: var(--accent-surface-strong, #C41E3A) !important;
    color: #FFFFFF !important;
}
/* Boutons "header secondary" type new-topic (fond clair → verre sombre + texte clair) */
html body:not(.light-theme) .new-topic-btn {
    /* Meme raison que les onglets actifs ci-dessus : 4,17:1 -> 5,84:1. */
    background: var(--accent-surface-strong, #C41E3A) !important;
    color: #FFFFFF !important;
}
/* Badges sans variante de fond : verre sombre + texte clair (corrige or-sur-or) */
html body:not(.light-theme) .badge:not([class*="bg-"]):not([class*="badge-bg"]):not(.badge-count):not(.sidebar-badge):not(.tab-badge) {
    background-color: rgba(255, 255, 255, 0.10) !important;
    color: #F4F4F5 !important;
}

/* ============================================================================
   STABILIS — GARANTIE LISIBILITÉ CTA (texte blanc sur rouge SOMBRE ≥4.5:1)
   ============================================================================
   #FF5A67 (rouge clair) donne <2.3:1 avec du blanc, et #E63946 seulement 4.17:1
   (les libellés CTA font ~13px : le seuil AA est 4.5, pas le 3:1 « texte large »).
   Tous les CTA "primary" et onglets actifs : dégradé #D6273C→#C41E3A + blanc
   (pire stop = 5.0:1, contraste CALCULÉ — audit 2026-07-17). */
html body:not(.light-theme) .btn-header-primary,
html body:not(.light-theme) .btn-toolbar.primary,
html body:not(.light-theme) .crm-btn-primary,
html body:not(.light-theme) .crm-btn.crm-btn-primary,
html body:not(.light-theme) .tab-btn.active,
html body:not(.light-theme) .filter-chip.active,
html body:not(.light-theme) .helios-tab-btn.active,
html body:not(.light-theme) .view-toggle-btn.active,
html body:not(.light-theme) .forecast-tab-btn.active,
/* .cra-tab-btn.active retiré (UX R2 lot F) : l'onglet actif /cra n'est plus un
   CTA rouge plein (hiérarchie : « Générer les factures » = seul primaire) —
   son emphase est gérée dans modules/cra-admin.css (surface + soulignement). */
html body:not(.light-theme) .docs-tab.active,
html body:not(.light-theme) .doc-tab.active,
html body:not(.light-theme) .proactive-alert-btn {
    background: linear-gradient(135deg, #D6273C 0%, var(--accent-primary-strong, #C41E3A) 100%) !important; /* AA : pire stop 5.0:1 avec blanc (ex-var(--accent-primary, #E63946) = 4.17) */
    color: #FFFFFF !important;
    border-color: transparent !important;
}
/* Accents/boutons OR → texte SOMBRE (lisible sur or) */
html body .btn-gold,
html body .btn-gold *,
html body .bg-gold,
html body .bg-gold * {
    color: #1A1A1A !important;
}
/* Quick-leave CTA → rouge brand + texte blanc (était or, blanc illisible) */
html body .btn-quick-leave-cta,
html body .quick-leave-cta {
    background: linear-gradient(135deg, #D6273C 0%, var(--accent-primary-strong, #C41E3A) 100%) !important; /* AA : pire stop 5.0:1 avec blanc (ex-var(--accent-primary, #E63946) = 4.17) */
    color: #FFFFFF !important;
}
html body .btn-quick-leave-cta .quick-leave-cta-text,
html body .btn-quick-leave-cta .quick-leave-cta-kbd,
html body .btn-quick-leave-cta .quick-leave-cta-icon,
html body .quick-leave-cta-text,
html body .quick-leave-cta-kbd { color: #FFFFFF !important; }
/* Pills de score & badges divers : contraste garanti */
html body:not(.light-theme) .score-pill-low { color: #1A1A1A !important; }
/* --hx-red-500 vaut var(--tenant-accent, #E63946) : il ne porte le blanc qu'a
   4,17:1 sur le repli rouge. --accent-surface-strong suit la couleur du tenant
   via --tenant-accent-surface, calculee serveur pour porter du clair a >= 4,7:1. */
html body:not(.light-theme) .extension-update-badge { background: var(--accent-surface-strong, #C41E3A) !important; color: #FFFFFF !important; }
/* Liens (dark theme) → rouge CLAIR #FF5A67 : contraste ≥4.5:1 sur fond noir
   (le #E63946 ne donnait que 4.34). En light theme, garde le rouge foncé. */
/* .skip-to-content et .helios-skip-link exclus : ces liens reposent sur un FOND PLEIN rouge.
   Cette regle le repeignait en #FF5A67 — rouge clair sur rouge, mesure a
   1,37:1 en PROD. Or c'est le tout premier element qu'atteint un utilisateur
   au clavier, et son seul moyen d'eviter la navigation : invisible, il rend la
   page inutilisable a ceux qui en dependent. Le lien garde son texte blanc,
   defini par sa propre feuille. */
html body:not(.light-theme) a:not(.btn):not(.h-btn):not(.nav-link):not(.no-style):not(.skip-to-content):not(.helios-skip-link):not([class*="btn"]) { color: #FF5A67; }
html body:not(.light-theme) a:not(.btn):not(.h-btn):not(.nav-link):not(.no-style):not(.skip-to-content):not(.helios-skip-link):not([class*="btn"]):hover { color: #FF8A94; }
/* EXCLURE NE SUFFIT PAS — il faut POSER la couleur.
   Premiere tentative : ajouter :not(.skip-to-content) a la regle ci-dessus.
   Resultat mesure : le contraste est passe de 1,37:1 a 1,03:1, donc PIRE. En
   ecartant ce lien d'une regle, je l'ai simplement livre a la suivante, qui le
   peint avec la couleur d'accent du tenant — violet sur rouge.
   La regle ci-dessous reprend la meme chaine de :not() et y ajoute la classe :
   specificite (0,6,2) contre (0,5,1), elle gagne franchement, sans !important. */
html body:not(.light-theme) a.skip-to-content:not(.btn):not(.h-btn):not(.nav-link):not(.no-style):not([class*="btn"]),
html body a.skip-to-content:not(.btn):not(.h-btn):not(.nav-link):not(.no-style):not([class*="btn"]),
html body:not(.light-theme) a.helios-skip-link:not(.btn):not(.h-btn):not(.nav-link):not(.no-style):not([class*="btn"]),
html body a.helios-skip-link:not(.btn):not(.h-btn):not(.nav-link):not(.no-style):not([class*="btn"]) {
    color: var(--white, #FFFFFF);
    background: var(--accent-surface-strong, #C41E3A);
}
/* Badge de notification sidebar → rouge SOMBRE (texte blanc ≥4.5:1) */
html body .sidebar-badge,
html body .sidebar-badge-dot {
    background: linear-gradient(137.5deg, var(--accent-primary-strong, #C41E3A), #A01828) !important;
    color: #FFFFFF !important;
}

/* Couleurs sémantiques en TEXTE → versions CLAIRES en dark (≥4.5:1).
   Bootstrap .text-success/.text-danger (#198754/#dc3545) = ~3.9 sur noir. */
html body:not(.light-theme) .text-success,
html body:not(.light-theme) .distribution-bar-value.text-success { color: #34D399 !important; }
html body:not(.light-theme) .text-danger,
html body:not(.light-theme) .distribution-bar-value.text-danger { color: #FF6B78 !important; }
html body:not(.light-theme) .text-warning { color: #FBBF24 !important; }
html body:not(.light-theme) .text-info { color: #38BDF8 !important; }
/* Titres/labels en rouge brand utilisés comme TEXTE → rouge clair (≥4.5 sur noir).
   Cible tout h1-h6 dont la couleur est le rouge primary (via classes courantes). */
html body:not(.light-theme) h1.text-primary, html body:not(.light-theme) h2.text-primary,
html body:not(.light-theme) h3.text-primary, html body:not(.light-theme) h4.text-primary,
html body:not(.light-theme) .text-accent, html body:not(.light-theme) .text-red,
html body:not(.light-theme) .section-title.text-accent,
html body:not(.light-theme) h2.section-header, html body:not(.light-theme) h3.section-header {
    color: #FF5A67 !important;
}

/* Logo preview (empty state "Aucun logo") → boîte sombre + placeholder lisible */
html body:not(.light-theme) .logo-preview-box,
html body:not(.light-theme) .logo-preview,
html body:not(.light-theme) .company-logo-preview {
    background: #1A1A1A !important;
    border: 1px dashed rgba(255, 255, 255, 0.18) !important;
}
html body:not(.light-theme) .logo-preview-box .placeholder,
html body:not(.light-theme) .logo-preview .placeholder {
    background: transparent !important;   /* annule le fond blanc Bootstrap .placeholder */
    opacity: 1 !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Titres rouges de section (proactive-alerts etc.) → rouge CLAIR (≥4.5 sur noir) */
html body:not(.light-theme) .proactive-alerts-header h3,
html body:not(.light-theme) .proactive-alerts h3,
html body:not(.light-theme) .proactive-alerts-title { color: #FF5A67 !important; }

/* Badges Bootstrap à fond coloré → fond plein garanti + texte contrasté.
   (Corrige : rouge-sur-rouge bg-danger, ET bg-warning sans fond = noir sur noir.) */
/* Contraste mesure sur la famille COMPLETE, et non sur les seules variantes
   signalees par l'audit. Trois echecs sur huit :
       bg-danger  #E63946 + blanc = 4,17:1   -> #C41E3A = 5,84:1
       bg-primary #E63946 + blanc = 4,17:1   -> #C41E3A = 5,84:1
       bg-info    #0EA5E9 + blanc = 2,77:1   -> #0369A1 = 5,93:1
   bg-info etait de loin le pire et n'apparaissait sur aucun ecran de
   l'echantillon : mesurer la famille entiere le fait sortir, mesurer les
   symptomes ne l'aurait jamais montre.
   Les valeurs de remplacement sont des jetons DEJA presents dans la palette
   (--hx-red-600, --hx-sky-700) : aucune couleur nouvelle n'est introduite. */
html body .badge.bg-danger  { background-color: var(--accent-surface-strong, #C41E3A) !important; color: #FFFFFF !important; }
html body .badge.bg-primary { background-color: var(--accent-surface-strong, #C41E3A) !important; color: #FFFFFF !important; }
html body .badge.bg-success { background-color: #15803D !important; color: #FFFFFF !important; }
html body .badge.bg-info    { background-color: #0369A1 !important; color: #FFFFFF !important; }
html body .badge.bg-secondary { background-color: #4B5563 !important; color: #FFFFFF !important; }
html body .badge.bg-dark    { background-color: #1A1A1A !important; color: #FFFFFF !important; }
html body .badge.bg-warning { background-color: #F59E0B !important; color: #1A1A1A !important; }
html body .badge.bg-light   { background-color: #E2E8F0 !important; color: #1A1A1A !important; }
html body .badge.bg-danger *, html body .badge.bg-primary *, html body .badge.bg-success *,
html body .badge.bg-info *, html body .badge.bg-secondary * { color: #FFFFFF !important; }
html body .badge.bg-warning *, html body .badge.bg-light * { color: #1A1A1A !important; }
/* .text-primary employé comme TEXTE (dark) → rouge CLAIR lisible (≥4.5 sur noir) */
html body:not(.light-theme) .text-primary,
html body:not(.light-theme) .fw-bold.text-primary { color: #FF5A67 !important; }
/* Badges de niveau (organigramme) : fond clair inline + texte blanc = illisible.
   On force un verre sombre + texte blanc (lisibilité > teinte décorative). */
html body:not(.light-theme) .level-badge {
    background: rgba(0, 0, 0, 0.45) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* Labels de source (placeholders blog) → pastille sombre = lisibles sur tout dégradé */
html body .placeholder-source {
    background: rgba(0, 0, 0, 0.55);
    padding: 2px 8px;
    border-radius: 6px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Jauge d'intégrité : valeur en BLANC sur le disque central noir (::before).
   Sans tier → anneau rouge. Le chiffre reste lisible (blanc sur #141414). */
html body:not(.light-theme) .integrity-score-circle:not([data-tier]) { color: var(--accent-primary, #E63946); }
html body:not(.light-theme) .integrity-score-value { color: #FFFFFF !important; }
html body:not(.light-theme) .integrity-score-unit { color: rgba(255,255,255,0.7) !important; }

/* Boutons "IA" (crm-btn-ai, ai-*) → traitement OR premium + texte SOMBRE
   (distinct du rouge primary, lisible). Remplace les anciens dégradés pink. */
html body .crm-btn-ai,
html body .btn-ai,
html body [class*="btn"][class*="-ai"]:not([class*="-air"]):not([class*="-main"]) {
    background: linear-gradient(135deg, #D4AF37 0%, #B8962E 100%) !important;
    color: #1A1A1A !important;
    border: none !important;
}
html body .crm-btn-ai *,
html body .btn-ai *,
html body [class*="btn"][class*="-ai"]:not([class*="-air"]):not([class*="-main"]) * { color: #1A1A1A !important; }
html body:not(.light-theme) .form-control::placeholder,
html body:not(.light-theme) .form-select::placeholder { color: var(--text-muted) !important; }
html body:not(.light-theme) .form-control:focus,
html body:not(.light-theme) .form-select:focus {
    background-color: rgba(0, 0, 0, 0.38) !important;
    border-color: var(--hx-red-500) !important;
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.20) !important;
}
html body:not(.light-theme) .accordion-button:not(.collapsed) {
    background-color: rgba(230, 57, 70, 0.12) !important;
    color: #fff !important;
}
/* Icône chevron accordion Bootstrap (SVG noir par défaut) → blanc */
html body:not(.light-theme) .accordion-button::after { filter: invert(1) grayscale(1) brightness(1.6); }

/* --------------------------------------------------------------------------
   HELIOS AURORA — source canonique des tokens globaux premium
   -------------------------------------------------------------------------- */
:root {
    /* NEUTRES — une seule teinte (265 deg, bleu-ardoise) a chroma tres basse.
       Un gris pur lit « pas choisi » ; cette pointe de bleu tient le premium
       sans jamais colorer l'ecran. Les trois niveaux de texte tiennent AA sur
       la surface : 5,21:1 puis 8,18:1 puis 15,84:1, mesures et non estimes. */
    --aurora-bg: #0E1016;
    --aurora-surface: #161920;
    --aurora-surface-raised: #1F232B;
    --aurora-text: #F1F3F8;
    --aurora-text-secondary: #ACB1BC;
    --aurora-text-faint: #868C99;
    --aurora-border: #30343E;
    --aurora-border-strong: #414651;
    /* MARQUE — Aurora CONSOMME la couleur du tenant, il ne la decide pas.
       Helios est multi-tenant : figer une marque ici rendait invisible la
       couleur choisie en base (mesure production 2026-08-20 : --tenant-accent
       valait #E5395A pendant que le bouton primaire peignait #8584FF).
       Le repli ne sert que si le serveur n'a pas emis les tokens de marque. */
    --aurora-primary: var(--tenant-accent, #8584FF);
    --aurora-primary-hover: color-mix(in srgb, var(--aurora-primary) 86%, #FFFFFF);
    --aurora-primary-active: color-mix(in srgb, var(--aurora-primary) 74%, #FFFFFF);
    --aurora-on-primary: var(--tenant-accent-ink, #0D1020);
    --aurora-ink-on-bright: #0D1020;
    /* SEMANTIQUE — dit l'ETAT d'une donnee, ne sert JAMAIS d'action. Chaque
       valeur atteint 4,5:1 sur la surface courante. Elles restent independantes
       de la marque : un tenant change son accent, ces quatre ne bougent pas. */
    /* RESTAURATION des accents Aurora sur le theme SOMBRE (2026-08-22).
       Ils avaient ete recalcules a 4,6:1 le 2026-08-20 — le seuil AA — alors
       qu'ils l'atteignaient DEJA tres largement : succes 9,72:1, solaire
       11,09:1, danger 7,02:1. Viser le minimum les avait ternis pour zero
       gain d'accessibilite. Sur un fond sombre, une teinte vive est a la
       fois plus lisible et plus desirable : on maximise dans la plage
       accessible, on ne rase pas le seuil.
       Le theme CLAIR, lui, garde les valeurs recalculees : les originales
       y echouaient reellement (solaire 2,66:1, succes 4,27:1). */
    --aurora-info: #3D87CD;
    --aurora-success: #4DD6B5;
    --aurora-solar: #F4C76E;
    --aurora-danger: #FF7896;
    --aurora-primary-rgb: var(--tenant-accent-rgb, 133, 132, 255);
    --aurora-shadow-card: 0 var(--space-2) var(--space-6) rgba(3, 5, 16, 0.21);
    --aurora-shadow-raised: 0 var(--space-3) var(--space-8) rgba(3, 5, 16, 0.34);

    --bg-primary: var(--aurora-bg);
    --bg-secondary: var(--aurora-surface);
    --bg-tertiary: var(--aurora-surface-raised);
    --bg-card: var(--aurora-surface);
    --bg-glass: var(--aurora-surface);
    --bg-glass-hover: var(--aurora-surface-raised);
    --bg-input: var(--aurora-surface-raised);
    --bg-input-focus: var(--aurora-surface);
    --text-primary: var(--aurora-text);
    --text-secondary: var(--aurora-text-secondary);
    /* Trois niveaux de texte, trois valeurs distinctes. --text-muted pointait
       sur --text-secondary : la hierarchie annoncait trois rangs et n'en
       rendait que deux. Le rang faible tient AA lui aussi (5,21:1 en sombre,
       4,63:1 en clair) — c'est precisement celui que les systemes bradent a
       3:1 « parce que c'est secondaire ». */
    --text-muted: var(--aurora-text-faint);
    --border-color: var(--aurora-border);
    --border-subtle: var(--aurora-border);
    --border-strong: var(--aurora-border-strong);
    --accent-primary: var(--tenant-accent, var(--aurora-primary));
    --accent-primary-hover: var(--aurora-primary-hover);
    --accent-primary-active: var(--aurora-primary-active);
    --accent-primary-contrast: var(--aurora-on-primary);
    /* Variante SOMBRE de la marque. 267 regles peignaient #C41E3A en dur —
       le rouge fonce historique — donc ne suivaient aucun tenant. Elle se
       calcule desormais depuis l'accent, et reste donc juste quelle que
       soit la couleur du client. */
    --accent-primary-strong: color-mix(in srgb, var(--accent-primary) 84%, #000000);
    --accent-surface-strong: var(--aurora-primary);
    --accent-primary-rgb: var(--aurora-primary-rgb);
    --accent-primary-05: rgba(var(--aurora-primary-rgb), 0.05);
    --accent-primary-08: rgba(var(--aurora-primary-rgb), 0.08);
    --accent-primary-10: rgba(var(--aurora-primary-rgb), 0.10);
    --accent-primary-13: rgba(var(--aurora-primary-rgb), 0.13);
    --accent-primary-15: rgba(var(--aurora-primary-rgb), 0.15);
    --accent-primary-20: rgba(var(--aurora-primary-rgb), 0.20);
    --accent-primary-30: rgba(var(--aurora-primary-rgb), 0.30);
    --accent-primary-50: rgba(var(--aurora-primary-rgb), 0.50);
    --accent-secondary: var(--aurora-solar);
    --success: var(--aurora-success);
    --danger: var(--aurora-danger);
    --info: var(--aurora-info);
    /* ANNEAU DE FOCUS — semantique, jamais la marque.
       Principe 9 de la doctrine : « le corail Helios ne represente pas
       simultanement la marque, l'alerte, le danger et tous les controles ».
       227 regles de focus peignaient l'accent : sur un tenant au rouge, un
       anneau rouge autour d'un champ VIDE lit « erreur de saisie » par
       convention universelle. Le bleu d'information est la convention du
       focus, il est garanti AA sur les deux surfaces, et il reste a 125 deg
       de teinte de la marque comme du danger — donc jamais confondu. */
    --focus-ring: var(--aurora-info);
    --focus-ring-halo: color-mix(in srgb, var(--aurora-info) 26%, transparent);
    --warning: var(--aurora-solar);
}

body.light-theme,
body.theme-light,
html[data-theme='light'] {
    --aurora-bg: #F9FAFD;
    --aurora-surface: #FFFFFF;
    --aurora-surface-raised: #F5F7FB;
    --aurora-text: #1D2330;
    --aurora-text-secondary: #515763;
    --aurora-text-faint: #6F7581;
    --aurora-border: #DCE0E6;
    --aurora-border-strong: #C8CCD6;
    /* Theme clair : meme marque, le survol s'assombrit au lieu de s'eclaircir. */
    --aurora-primary: var(--tenant-accent, #5554E8);
    --aurora-primary-hover: color-mix(in srgb, var(--aurora-primary) 86%, #000000);
    --aurora-primary-active: color-mix(in srgb, var(--aurora-primary) 74%, #000000);
    --aurora-on-primary: var(--tenant-accent-ink, #FFFFFF);
    --aurora-info: #1677C8;
    --aurora-success: #008645;
    --aurora-solar: #A36800;
    --aurora-danger: #C93C5D;
    --aurora-primary-rgb: var(--tenant-accent-rgb, 85, 84, 232);
    --aurora-shadow-card: 0 var(--space-2) var(--space-6) rgba(40, 44, 75, 0.08);
    --aurora-shadow-raised: 0 var(--space-3) var(--space-8) rgba(40, 44, 75, 0.13);
}

html body[class] {
    --accent-primary: var(--tenant-accent, var(--aurora-primary));
    --accent-primary-hover: var(--aurora-primary-hover);
    --accent-primary-active: var(--aurora-primary-active);
    --accent-primary-contrast: var(--aurora-on-primary);
    --accent-primary-rgb: var(--aurora-primary-rgb);
    --accent-gradient: linear-gradient(137.5deg, var(--aurora-primary), var(--aurora-solar));
    --hx-indigo-500: var(--aurora-primary);
}