/* FormaSkills Design System — tokens sémantiques (§168). Aucune couleur en dur dans les composants. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cairo'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('../fonts/cairo-var-arabic.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Cairo'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('../fonts/cairo-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Palette brute (référence interne, ne pas utiliser dans les composants) */
  --fs-violet-50:#F5F1FF; --fs-violet-100:#EBE3FF; --fs-violet-200:#D4C4FF; --fs-violet-500:#7C3CFF; --fs-violet-600:#6A2EEB; --fs-violet-700:#4A24C0;
  --fs-blue-50:#EDF4FF; --fs-blue-100:#DBE8FF; --fs-blue-500:#1789FF; --fs-blue-600:#1F66E0;
  --fs-pink-50:#FFF0FB; --fs-pink-100:#FDDDF8; --fs-pink-500:#EE20DC; --fs-pink-600:#C918BA;
  --fs-orange-50:#FFF3EA; --fs-orange-100:#FFE2CC; --fs-orange-500:#FF8A2B; --fs-orange-600:#E8731A;
  --fs-green-50:#EAFBF3; --fs-green-100:#CFF5E2; --fs-green-500:#16C47F; --fs-green-600:#10A56A;
  --fs-cyan-50:#E6FBFF; --fs-cyan-100:#C9F4FB; --fs-cyan-500:#07AECA; --fs-cyan-600:#078FB0;
  --fs-amber-50:#FFF8E6; --fs-amber-100:#FFEDBF; --fs-amber-500:#FFB020; --fs-amber-600:#E0950F;
  --fs-rose-50:#FFEEF1; --fs-rose-100:#FFD6DD; --fs-rose-500:#FF4D6D; --fs-rose-600:#E63757;
  --fs-gray-0:#FFFFFF; --fs-gray-25:#F7F9FE; --fs-gray-50:#F5F8FF; --fs-gray-100:#EEF2F9; --fs-gray-200:#DFE6F3; --fs-gray-300:#CBD5E6; --fs-gray-400:#8D98AD; --fs-gray-450:#5A6985; --fs-gray-500:#60708F; --fs-gray-550:#55647E; --fs-gray-600:#3E4C68; --fs-gray-700:#25304A; --fs-gray-800:#16203A; --fs-gray-900:#111B35;
  /* Nuances « solides » — fond d'un composant portant du texte blanc, contraste verifie >= 4,5:1 (WCAG 2.2 AA, CA-50). */
  --fs-blue-700:#2A6BEF; --fs-pink-700:#B516A6; --fs-pink-800:#9A0F8C; --fs-orange-700:#C25700; --fs-orange-800:#A34900;
  --fs-green-700:#0D8055; --fs-green-800:#0A6B47; --fs-cyan-700:#0B7A8F; --fs-cyan-800:#095F70; --fs-amber-700:#A56A00; --fs-rose-700:#DE2A4B; --fs-rose-800:#C9184A;
  /* Nuances de bordure (§108) : un cran au-dessus du fond teinté, comme --fs-violet-200 pour le violet.
     Sans elles, alertes et étiquettes réemployaient -soft-2 (un FOND) comme bordure. --fs-blue-800 : état pressé du bleu. */
  --fs-blue-200:#B0CCFF; --fs-blue-800:#1A55BF; --fs-pink-200:#F7B2EE; --fs-green-200:#8EE3BC; --fs-cyan-200:#86DCEB; --fs-amber-200:#FFD06A; --fs-rose-200:#FFB0BE;

  /* Sémantique — couleurs fonctionnelles (§108). Chaque rôle porte les MÊMES nuances, dans le même ordre :
     couleur · survolé (-hover) · pressé (-active) · fond très clair (-soft, -soft-2) · bordure (-border) · texte (-text).
     Un composant n'a donc jamais à improviser une bordure ou un état pressé ; tests/UiInteractionsTest.php
     vérifie la présence des six nuances et leurs contrastes dans les deux thèmes. */
  --fs-primary:var(--fs-violet-500); --fs-primary-hover:var(--fs-violet-600); --fs-primary-active:var(--fs-violet-700); --fs-primary-soft:var(--fs-violet-50); --fs-primary-soft-2:var(--fs-violet-100); --fs-primary-border:var(--fs-violet-200); --fs-primary-text:var(--fs-violet-700);
  --fs-secondary:var(--fs-blue-500); --fs-secondary-hover:var(--fs-blue-600); --fs-secondary-active:var(--fs-blue-800); --fs-secondary-soft:var(--fs-blue-50); --fs-secondary-soft-2:var(--fs-blue-100); --fs-secondary-border:var(--fs-blue-200); --fs-secondary-text:#1A5AC8;
  --fs-accent:var(--fs-pink-500); --fs-accent-hover:var(--fs-pink-600); --fs-accent-active:var(--fs-pink-800); --fs-accent-soft:var(--fs-pink-50); --fs-accent-soft-2:var(--fs-pink-100); --fs-accent-border:var(--fs-pink-200); --fs-accent-text:#A3139A;
  --fs-success:var(--fs-green-500); --fs-success-hover:var(--fs-green-600); --fs-success-active:var(--fs-green-700); --fs-success-soft:var(--fs-green-50); --fs-success-soft-2:var(--fs-green-100); --fs-success-border:var(--fs-green-200); --fs-success-text:#0B7A4F;
  --fs-warning:var(--fs-amber-500); --fs-warning-hover:var(--fs-amber-600); --fs-warning-active:var(--fs-amber-700); --fs-warning-soft:var(--fs-amber-50); --fs-warning-soft-2:var(--fs-amber-100); --fs-warning-border:var(--fs-amber-200); --fs-warning-text:#8A5A00;
  --fs-danger:var(--fs-rose-500); --fs-danger-hover:var(--fs-rose-600); --fs-danger-active:var(--fs-rose-800); --fs-danger-soft:var(--fs-rose-50); --fs-danger-soft-2:var(--fs-rose-100); --fs-danger-border:var(--fs-rose-200); --fs-danger-text:#B4233F;
  --fs-info:var(--fs-cyan-500); --fs-info-hover:var(--fs-cyan-600); --fs-info-active:var(--fs-cyan-700); --fs-info-soft:var(--fs-cyan-50); --fs-info-soft-2:var(--fs-cyan-100); --fs-info-border:var(--fs-cyan-200); --fs-info-text:#0B6F82;
  /* Fonds pleins portant du texte blanc (boutons, pastilles) — jamais les teintes vives, qui restent reservees aux accents. */
  --fs-primary-solid:var(--fs-violet-500); --fs-primary-solid-hover:var(--fs-violet-600);
  --fs-secondary-solid:var(--fs-blue-700); --fs-secondary-solid-hover:var(--fs-blue-600);
  --fs-accent-solid:var(--fs-pink-700); --fs-accent-solid-hover:var(--fs-pink-800);
  --fs-success-solid:var(--fs-green-700); --fs-success-solid-hover:var(--fs-green-800);
  --fs-danger-solid:var(--fs-rose-700); --fs-danger-solid-hover:var(--fs-rose-800);
  --fs-warning-solid:var(--fs-amber-700); --fs-info-solid:var(--fs-cyan-700); --fs-course-solid:var(--fs-orange-700);
  --fs-course-text:#B4500F; --fs-success-mid:#0FA96C; --fs-on-warning:#3B2A00;
  /* Encre pour une surface qui reste claire dans les deux themes (pastille sur visuel, etiquette blanche). */
  --fs-on-light:var(--fs-gray-600);
  /* Couleur de lien : le violet de marque tombe a 2,97:1 sur une surface sombre (CA-50, texte 4,5:1).
     Le jeton suit le theme, les regles CSS n'ont pas a le savoir. */
  --fs-link:var(--fs-primary); --fs-link-hover:var(--fs-primary-hover);
  --fs-ai:#7C3AED; --fs-ai-hover:#6D28D9; --fs-ai-solid:#7C3AED; --fs-code-bg:var(--fs-gray-900); --fs-code-text:#E2E8F0;
  /* Coloration syntaxique (sur --fs-code-bg) et surlignage : contrastes verifies >= 4,5:1 (CA-50). */
  --fs-code-gutter:#8B98AD; --fs-code-com:#8B98AD; --fs-code-kw:#C792EA; --fs-code-str:#C3E88D; --fs-code-num:#F78C6C;
  --fs-code-fn:#82AAFF; --fs-code-cls:#FFCB6B; --fs-code-var:#F07178; --fs-code-op:#89DDFF; --fs-code-pct:#94A3B8;
  --fs-highlight:#FFE58A; --fs-highlight-text:var(--fs-gray-900);
  /* Couleurs par module (§109) */
  --fs-mod-ai:var(--fs-violet-500); --fs-mod-progress:var(--fs-green-500); --fs-mod-course:var(--fs-orange-500); --fs-mod-live:var(--fs-pink-500); --fs-mod-cert:var(--fs-cyan-500); --fs-mod-notif:var(--fs-amber-500); --fs-mod-alert:var(--fs-rose-500);
  --fs-mod-course-soft:var(--fs-orange-50); --fs-mod-live-soft:var(--fs-pink-50); --fs-mod-cert-soft:var(--fs-cyan-50); --fs-mod-ai-soft:var(--fs-violet-50);
  /* Progression, notifications et alertes avaient leur couleur mais aucun fond ni encre : les écrans retombaient
     sur success/warning/danger et la lecture « par module » disparaissait. L'encre -text garantit 4,5:1 sur le fond -soft. */
  --fs-mod-progress-soft:var(--fs-green-50); --fs-mod-notif-soft:var(--fs-amber-50); --fs-mod-alert-soft:var(--fs-rose-50);
  --fs-mod-progress-text:var(--fs-success-text); --fs-mod-notif-text:var(--fs-warning-text); --fs-mod-alert-text:var(--fs-danger-text);
  --fs-on-mod-notif:var(--fs-on-warning);
  --fs-grad-progress:linear-gradient(135deg,var(--fs-mod-progress) 0%,var(--fs-mod-cert) 100%);
  /* Dégradés */
  --fs-grad-primary:linear-gradient(118deg,#09D8F5 0%,#1789FF 42%,#7C3CFF 73%,#EE20DC 100%);
  --fs-grad-accent:linear-gradient(135deg,#7C3CFF 0%,#EE20DC 100%);
  --fs-grad-ai:linear-gradient(135deg,#7C3AED 0%,#3B82F6 55%,#06B6D4 100%);
  --fs-grad-cyan:linear-gradient(135deg,#2D7CFF 0%,#14B8D6 100%);
  --fs-grad-warm:linear-gradient(135deg,#FF8A2B 0%,#FF2E9A 100%);
  --fs-grad-success:linear-gradient(135deg,#16C47F 0%,#14B8D6 100%);
  --fs-grad-hero:radial-gradient(1200px 600px at 10% -10%, rgba(108,62,245,.18), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(255,46,154,.14), transparent 55%), radial-gradient(700px 400px at 50% 110%, rgba(45,124,255,.12), transparent 60%);
  /* Variantes « solid » des degrades : chaque arret garde un contraste >= 4,5:1 avec du texte blanc. */
  --fs-grad-success-solid:linear-gradient(135deg,#0D8055 0%,#0B7A8F 100%);
  --fs-grad-warm-solid:linear-gradient(135deg,#C25700 0%,#D6157A 100%);
  --fs-grad-danger-solid:linear-gradient(135deg,#DE2A4B 0%,#C9184A 100%);
  --fs-grad-ai-solid:linear-gradient(135deg,#7C3AED 0%,#2A6BEF 55%,#0B7A8F 100%);
  --fs-grad-cyan-solid:linear-gradient(135deg,#2A6BEF 0%,#0B7A8F 100%);
  --fs-grad-brand-text:linear-gradient(118deg,#09D8F5 0%,#1789FF 42%,#7C3CFF 73%,#EE20DC 100%);
  --fs-grad-brand-text-light:linear-gradient(90deg,#8FB4FF,#C4B5FD 55%,#FFA3D2);
  --fs-grad-promo:linear-gradient(90deg,#6C3EF5,#FF2E9A 60%,#FF8A2B);
  --fs-grad-live:linear-gradient(135deg,#FF4D6D,#FF8A2B);
  /* Surfaces & texte */
  --fs-bg:var(--fs-gray-50); --fs-bg-subtle:var(--fs-gray-25); --fs-surface:var(--fs-gray-0); --fs-surface-raised:var(--fs-gray-0); --fs-surface-sunken:var(--fs-gray-100); --fs-surface-hover:var(--fs-gray-50); --fs-surface-2:var(--fs-gray-50); --fs-surface-glass:rgba(255,255,255,.72);
  --fs-text:var(--fs-gray-900); --fs-text-secondary:var(--fs-gray-700); --fs-text-muted:var(--fs-gray-550); --fs-text-faint:var(--fs-gray-450); --fs-text-on-primary:#FFFFFF; --fs-text-inverse:#FFFFFF;
  --fs-border:var(--fs-gray-200); --fs-border-strong:var(--fs-gray-300); --fs-border-subtle:var(--fs-gray-100); --fs-divider:var(--fs-gray-100);
  /* Bordure d'un COMPOSANT d'interface (champ, case, interrupteur) : WCAG 2.2 SC 1.4.11 exige
     3:1 contre la surface adjacente — une bordure decorative de carte n'y est pas soumise.
     Mesures : #7B8496 vaut 3,76:1 sur blanc, 3,3:1 sur la surface creusee (CA-50). */
  --fs-border-input:#74819C; --fs-border-input-hover:#66748F;
  --fs-sidebar-bg:#FFFFFF; --fs-sidebar-text:var(--fs-gray-600); --fs-sidebar-active:var(--fs-violet-50); --fs-sidebar-active-text:var(--fs-violet-700);
  --fs-topbar-bg:rgba(255,255,255,.85); --fs-topbar-bg-solid:rgba(255,255,255,.97);
  /* Verre (§115). Le flou d'arrière-plan se recalcule à chaque image de défilement sous un élément collant :
     son coût croît avec le rayon. Quatre jetons, du plus coûteux au plus léger, pour le régler en un seul endroit :
     · -sticky  : barres permanentes (topbar, en-tête public, lecteur, salle live) — rayon réduit, la saturation
                  préserve l'aspect « verre dépoli » ; neutralisé sur mobile, où le fond devient presque opaque ;
     · -glass   : widgets ponctuels (carte glass, carte de salle d'attente) ;
     · -overlay : voile d'une modale ou d'une palette ;
     · -chip    : petite pastille posée sur un visuel. */
  --fs-blur-sticky:saturate(1.6) blur(8px); --fs-blur-glass:blur(14px); --fs-blur-overlay:blur(4px); --fs-blur-chip:blur(6px);
  --fs-focus-color:var(--fs-violet-500); --fs-focus-ring:0 0 0 4px rgba(9,216,245,.34); --fs-focus-outline:2px solid var(--fs-focus-color); --fs-focus-offset:2px;
  --fs-overlay:rgba(4,9,26,.52);
  /* Ombre de bord d'une zone defilante (tableaux larges, §154) : indique qu'il reste du contenu. */
  --fs-shadow-edge:rgba(17,27,53,.13);
  --fs-skeleton:linear-gradient(90deg,var(--fs-gray-100) 25%,var(--fs-gray-200) 37%,var(--fs-gray-100) 63%);
  /* Typographie (§120) */
  --fs-font:'Inter','Cairo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans Arabic',sans-serif;
  --fs-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-text-xs:12px; --fs-text-sm:13px; --fs-text-base:14px; --fs-text-md:15px; --fs-text-lg:17px; --fs-text-xl:20px; --fs-text-2xl:24px; --fs-text-3xl:30px; --fs-text-4xl:38px; --fs-text-5xl:48px;
  --fs-leading:1.55; --fs-leading-tight:1.25;
  /* Espacement */
  --fs-space-2xs:4px; --fs-space-xs:8px; --fs-space-sm:12px; --fs-space-md:16px; --fs-space-lg:24px; --fs-space-xl:32px; --fs-space-2xl:48px; --fs-space-3xl:64px;
  /* Rayons (§113) */
  --fs-radius-2xs:4px; --fs-radius-xs:6px; --fs-radius-sm:8px; --fs-radius-md:12px; --fs-radius-lg:14px; --fs-radius-xl:22px; --fs-radius-2xl:32px; --fs-radius-full:999px;
  /* ds6 (§34.1) — rayons des boutons de la proposition 01 : 13 px (normal), 12 px (petit), 15 px (grand). */
  --fs-radius-btn:.8125rem; --fs-radius-btn-sm:.75rem; --fs-radius-btn-lg:.9375rem;
  /* Alias historiques : utilises par studio.css / admin_a.css / player.css, ils etaient indefinis (repli code en dur ou rayon nul). */
  --fs-radius-pill:var(--fs-radius-full);
  /* Ombres (§114) */
  /* ds6 (§34.1) — ombres de la proposition 01 : légère 0 10px 34px (cartes), profonde 0 32px 90px (modales). */
  --fs-shadow-xs:0 1px 2px rgba(27,48,92,.05);
  --fs-shadow-sm:0 1px 2px rgba(27,48,92,.04),0 10px 34px rgba(28,47,90,.065);
  --fs-shadow-md:0 13px 42px rgba(24,46,88,.09);
  --fs-shadow-lg:0 22px 48px rgba(26,42,82,.13);
  --fs-shadow-xl:0 32px 90px rgba(4,9,26,.28);
  --fs-shadow-primary:0 11px 28px rgba(61,85,255,.32);
  --fs-shadow-ai:0 0 0 1px rgba(124,58,237,.18),0 10px 30px -8px rgba(59,130,246,.35);
  --fs-shadow-glow:0 0 40px rgba(124,58,237,.25);
  /* Mouvement (§118) */
  --fs-ease:cubic-bezier(.2,.8,.2,1); --fs-fast:150ms; --fs-normal:220ms; --fs-slow:320ms;
  /* Z-index */
  --fs-z-dropdown:60; --fs-z-sticky:30; --fs-z-sidebar:50; --fs-z-drawer:80; --fs-z-modal:100; --fs-z-toast:120; --fs-z-palette:130;
  /* Pictogrammes (§168 « Icons ») : tailles du sprite assets/icons.svg. Les classes publiques suivent
     l'échelle — .ic-sm = sm, .ic = défaut, .ic-lg = lg, .ic-xl = xl — et une feuille de module
     ne pose plus de pixels sur une icône : elle choisit un cran. Les rares tailles propres à un
     composant (bouton lecture de la vidéo, visuel de certificat) restent locales à ce composant. */
  --fs-icon-xs:14px; --fs-icon-sm:16px; --fs-icon-md:18px; --fs-icon:20px; --fs-icon-lead:22px; --fs-icon-lg:24px; --fs-icon-xl:32px; --fs-icon-2xl:40px; --fs-icon-3xl:44px;
  /* Points de rupture (§168 « Breakpoints ») — échelle de référence, largeur maximale incluse.
     CSS n'accepte pas var() dans une requête @media : les feuilles écrivent donc la valeur en clair,
     et tests/AccessibiliteWcag22Test.php vérifie qu'elle appartient à cette échelle. Le script lit
     les jetons (FS.bp) au lieu de recopier les nombres. */
  --fs-bp-xs:420px; --fs-bp-sm:640px; --fs-bp-md:720px; --fs-bp-lg:900px; --fs-bp-xl:1024px; --fs-bp-2xl:1100px;
  /* Taille minimale d'une cible de pointage (WCAG 2.2 SC 2.5.8, niveau AA) : 24 × 24 px CSS. */
  --fs-target-min:24px;
  /* Layout */
  --fs-sidebar-w:264px; --fs-sidebar-w-collapsed:76px; --fs-topbar-h:64px; --fs-header-h:72px; --fs-bottom-nav-h:64px; --fs-content-max:1440px;
  /* Barres collantes (WCAG 2.2 SC 2.4.11, focus non masqué) : hauteur occupée en haut et en bas de la
     fenêtre par les bandeaux qui restent affichés au défilement. Chaque gabarit ajuste ces deux jetons ;
     html s'en sert comme marge de défilement, si bien qu'un élément qui reçoit le focus n'est jamais
     ramené SOUS la barre supérieure ou la navigation basse. */
  --fs-sticky-top:var(--fs-topbar-h); --fs-sticky-bottom:0px;
  /* Surfaces sombres fixes (salle live, lecteur video, liseuse) : disponibles quel que soit le theme (§150, §167). */
  --fs-dark-bg:#04091A; --fs-dark-bg-2:#07122A; --fs-dark-surface:#0A1834; --fs-dark-surface-2:#0D1D3D; --fs-dark-surface-3:#132650;
  --fs-dark-border:#1B2D52; --fs-dark-border-2:#253C69; --fs-dark-text:#EEF4FF; --fs-dark-text-2:#C7D3EB; --fs-dark-muted:#A9B9D5; --fs-dark-faint:#8D9BB6;
  --fs-dark-glass:rgba(10,24,52,.78); --fs-dark-glass-solid:rgba(10,24,52,.96); --fs-dark-shadow:0 12px 40px -10px rgba(0,0,0,.6); --fs-dark-overlay:rgba(4,9,26,.72);
  --fs-paper:#FFFFFF; --fs-paper-grid:#E9ECF3; --fs-paper-text:#0F172A;
  /* Bandeaux sombres permanents (pied de page, colonne d'authentification) — identiques dans les deux themes. */
  --fs-footer-bg:#050B1D; --fs-footer-text:#CBD5E1; --fs-footer-muted:#A5B1C6; --fs-footer-hover:#FFFFFF;
  --fs-gold-soft:#FFF6D6; --fs-silver-soft:#F1F3F8; --fs-bronze-soft:#FDE9DA; --fs-brand-linkedin:#0A66C2; --fs-brand-linkedin-hover:#004182;
  --fs-method-get:var(--fs-secondary); --fs-method-post:var(--fs-success); --fs-method-patch:var(--fs-mod-course); --fs-method-delete:var(--fs-danger);
  --fs-cyan-on-dark:#67E8F9; --fs-blue-on-dark:#8FB8FF; --fs-danger-on-dark:#FF8FA3; --fs-warning-on-dark:#FCD34D; --fs-success-on-dark:#6EE7B7; --fs-video-mat:#000000; --fs-ai-text:#5B21B6;
  --fs-on-solid:#FFFFFF;
  /* Series de graphiques (§132) : contraste >= 4,5:1 avec la surface du theme, adaptation automatique clair/sombre. */
  --fs-chart-1:var(--fs-violet-500); --fs-chart-2:var(--fs-secondary-solid); --fs-chart-3:var(--fs-accent-solid); --fs-chart-4:var(--fs-course-solid);
  --fs-chart-5:var(--fs-success-solid); --fs-chart-6:var(--fs-info-solid); --fs-chart-7:var(--fs-warning-solid); --fs-chart-8:var(--fs-ai-solid);
  --fs-chart-grid:var(--fs-border); --fs-chart-dot-stroke:var(--fs-surface);
  /* ds6 (§34.1) — composants de la proposition 01 appliqués à toute l'application :
     bouton principal (dégradé 118deg + ombre + reflet interne), pastilles de filtre actives, barre de progression,
     panneaux « bleu nuit », infobulle, bouton blanc. Les dégradés repassent par --fs-grad-primary, redéfini par la
     marque blanche : une organisation garde sa charte. */
  --fs-grad-filter:linear-gradient(118deg,#1AA4F7,#6346EC 72%,#BD2DCC);
  --fs-grad-bar:linear-gradient(90deg,#11DFF3,#6247FF 55%,#DD2BE4);
  --fs-grad-panel:linear-gradient(125deg,#0A1A42 0%,#30309A 55%,#8A27BA 100%);
  --fs-grad-cta:linear-gradient(105deg,#086FAE,#5542D8 52%,#A923BD);
  --fs-shadow-btn:0 11px 28px rgba(61,85,255,.32),inset 0 1px rgba(255,255,255,.3);
  --fs-shadow-btn-hover:0 15px 36px rgba(68,77,255,.42),inset 0 1px rgba(255,255,255,.3);
  --fs-shadow-btn-white:0 16px 36px rgba(14,6,48,.23);
  --fs-shadow-filter:0 8px 20px rgba(75,73,218,.24);
  --fs-shadow-card:0 10px 35px rgba(28,47,90,.065);
  --fs-shadow-card-hover:0 22px 48px rgba(26,42,82,.13);
  --fs-btn-white-text:#35236D; --fs-filter-text:#5A6985; --fs-filter-hover:#4D47C8; --fs-filter-hover-border:#AAA6FF; --fs-filter-border:#DCE4F0;
  --fs-kicker:#5269CC; --fs-tooltip-bg:#07122A; --fs-navy:#07122A; --fs-navy-2:#0A1635; --fs-on-navy:#EEF4FF; --fs-on-navy-muted:#A9B9D5; --fs-nav-active:#5DECFF;
  --fs-font-p01:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color-scheme: light;
}

/* ds6 (§34.1) — thème sombre « bleu nuit » de la proposition 01 (navy 950/900/850/800/700). */
[data-theme="dark"] {
  color-scheme: dark;
  --fs-bg:#050B1D; --fs-bg-subtle:#07122A; --fs-surface:#0A1834; --fs-surface-raised:#0D1D3D; --fs-surface-sunken:#081430; --fs-surface-hover:#11244A; --fs-surface-2:#0D1D3D; --fs-surface-glass:rgba(10,24,52,.75);
  --fs-text:#EEF4FF; --fs-text-secondary:#C7D3EB; --fs-text-muted:#A9B9D5; --fs-text-faint:#8D9BB6;
  --fs-border:#1B2D52; --fs-border-strong:#2A4170; --fs-border-subtle:#132447; --fs-divider:#132447;
  --fs-border-input:#6E80A6; --fs-border-input-hover:#7D8FB5;
  --fs-sidebar-bg:#04091A; --fs-sidebar-text:#C7D3EB; --fs-sidebar-active:rgba(52,208,255,.13); --fs-sidebar-active-text:#5DECFF;
  --fs-topbar-bg:rgba(5,11,29,.8); --fs-topbar-bg-solid:rgba(5,11,29,.96);
  --fs-primary-soft:rgba(124,60,255,.16); --fs-primary-soft-2:rgba(124,60,255,.26); --fs-primary-border:rgba(124,60,255,.42); --fs-primary-text:#C4B5FD;
  --fs-secondary-soft:rgba(23,137,255,.16); --fs-secondary-soft-2:rgba(23,137,255,.28); --fs-secondary-border:rgba(23,137,255,.42); --fs-secondary-text:#8FB8FF;
  --fs-link:var(--fs-primary-text); --fs-link-hover:#DDD4FF;
  --fs-accent-soft:rgba(238,32,220,.16); --fs-accent-soft-2:rgba(238,32,220,.28); --fs-accent-border:rgba(238,32,220,.42);
  --fs-success-soft:rgba(22,196,127,.14); --fs-success-soft-2:rgba(22,196,127,.26); --fs-success-border:rgba(22,196,127,.4); --fs-success-text:#6EE7B7;
  --fs-warning-soft:rgba(255,176,32,.14); --fs-warning-soft-2:rgba(255,176,32,.26); --fs-warning-border:rgba(255,176,32,.4); --fs-warning-text:#FCD34D;
  --fs-danger-soft:rgba(255,77,109,.14); --fs-danger-soft-2:rgba(255,77,109,.26); --fs-danger-border:rgba(255,77,109,.4); --fs-danger-text:#FDA4AF;
  --fs-info-soft:rgba(9,216,245,.13); --fs-info-soft-2:rgba(9,216,245,.24); --fs-info-border:rgba(9,216,245,.4); --fs-info-text:#6FF5FF;
  --fs-mod-course-soft:rgba(255,138,43,.14); --fs-mod-live-soft:rgba(238,32,220,.14); --fs-mod-cert-soft:rgba(9,216,245,.13); --fs-mod-ai-soft:rgba(124,60,255,.16);
  --fs-mod-progress-soft:rgba(22,196,127,.14); --fs-mod-notif-soft:rgba(255,176,32,.14); --fs-mod-alert-soft:rgba(255,77,109,.14);
  --fs-overlay:rgba(2,5,16,.68); --fs-shadow-edge:rgba(0,0,0,.55);
  --fs-focus-color:#5DECFF; --fs-focus-ring:0 0 0 4px rgba(124,60,255,.45);
  --fs-accent-text:#FF8BF4; --fs-course-text:#FFC08A; --fs-ai:#C4B5FD; --fs-ai-hover:#DDD6FE; --fs-code-bg:#04091A; --fs-code-text:#E2E8F0; --fs-ai-text:#DDD6FE; --fs-footer-bg:#04091A;
  --fs-skeleton:linear-gradient(90deg,#0D1D3D 25%,#1B2D52 37%,#0D1D3D 63%);
  --fs-filter-text:#C7D3EB; --fs-filter-hover:#FFFFFF; --fs-filter-hover-border:#7C6BFF; --fs-filter-border:#1B2D52; --fs-kicker:#68EAFA; --fs-btn-white-text:#35236D;
  --fs-shadow-card:0 1px 0 rgba(255,255,255,.03) inset,0 14px 38px rgba(0,0,0,.35); --fs-shadow-card-hover:0 22px 48px rgba(0,0,0,.5);
  --fs-chart-1:#A78BFA; --fs-chart-2:#60A5FA; --fs-chart-3:#F472B6; --fs-chart-4:#FB923C; --fs-chart-5:#34D399; --fs-chart-6:#22D3EE; --fs-chart-7:#FBBF24; --fs-chart-8:#C4B5FD;
  --fs-shadow-sm:0 1px 3px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.22); --fs-shadow-md:0 13px 36px rgba(0,0,0,.42); --fs-shadow-lg:0 22px 50px rgba(0,0,0,.55); --fs-shadow-xl:0 32px 90px rgba(0,0,0,.6);
  --fs-grad-hero:radial-gradient(1200px 600px at 10% -10%, rgba(124,60,255,.28), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(9,216,245,.14), transparent 55%);
}

/* ds6 (§34.1) — barre latérale des espaces connectés : bleu nuit de la maquette (.demo-sidebar), dans les deux
   thèmes. Les jetons sont redéfinis dans SA portée : entrées, sous-entrées (backoffice.css), volet réduit et pied
   (compte) suivent sans règle supplémentaire ; l'entrée active reprend le cyan sur voile cyan de la maquette. */
.sidebar {
  color-scheme: dark;
  --fs-sidebar-bg:#07122A; --fs-sidebar-text:#C7D3EB; --fs-sidebar-active:rgba(52,208,255,.13); --fs-sidebar-active-text:#5DECFF; --fs-sidebar-hover:rgba(255,255,255,.06);
  --fs-text:#EEF4FF; --fs-text-secondary:#C7D3EB; --fs-text-muted:#A9B9D5; --fs-text-faint:#8D9BB6;
  --fs-surface:#0D1D3D; --fs-surface-raised:#0D1D3D; --fs-surface-sunken:rgba(255,255,255,.07); --fs-surface-hover:rgba(255,255,255,.09);
  --fs-border:#1B2D52; --fs-border-subtle:rgba(255,255,255,.08); --fs-divider:rgba(255,255,255,.08);
  --fs-primary-text:#5DECFF; --fs-primary-border:rgba(93,236,255,.4); --fs-primary-soft:rgba(52,208,255,.13); --fs-link:#5DECFF; --fs-link-hover:#FFFFFF;
  --fs-focus-color:#5DECFF; --fs-focus-ring:0 0 0 4px rgba(124,60,255,.5); --fs-ai:#C4B5FD; --fs-mod-live:#FF8BF4;
}
[data-theme="dark"] .sidebar { --fs-sidebar-bg:#04091A; }

/* §115 — coût du verre. Sur un petit écran ou un appareil tactile (GPU modeste, défilement permanent), les barres
   collantes renoncent au flou et deviennent presque opaques : même teinte, lisibilité intacte, aucune recomposition
   par image. Les deux thèmes suivent, car -solid est lui-même redéfini par [data-theme="dark"]. */
@media (max-width:720px), (pointer:coarse) {
  :root { --fs-blur-sticky:none; --fs-blur-overlay:none; --fs-topbar-bg:var(--fs-topbar-bg-solid); --fs-dark-glass:var(--fs-dark-glass-solid); }
}
/* Réglage système « réduire la transparence » : plus aucun flou, les surfaces vitrées deviennent pleines. */
@media (prefers-reduced-transparency: reduce) {
  :root { --fs-blur-sticky:none; --fs-blur-glass:none; --fs-blur-overlay:none; --fs-blur-chip:none; --fs-topbar-bg:var(--fs-topbar-bg-solid); --fs-surface-glass:var(--fs-surface); --fs-dark-glass:var(--fs-dark-glass-solid); }
}
/* Navigateur sans backdrop-filter : un fond translucide sans flou nuirait à la lisibilité du texte superposé. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :root { --fs-topbar-bg:var(--fs-topbar-bg-solid); --fs-dark-glass:var(--fs-dark-glass-solid); }
}

[dir="rtl"] { --fs-font:'Cairo','Inter',-apple-system,'Segoe UI',Tahoma,'Noto Sans Arabic',Arial,sans-serif; }

@media (prefers-reduced-motion: reduce) {
  :root { --fs-fast:0ms; --fs-normal:0ms; --fs-slow:0ms; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* Accueil « proposition 01 » (assets/css/home-p01.css) : palette de la maquette validée par le client, thème fixe. */
:root {
  --fs-p01-navy-950:#04091a; --fs-p01-navy-900:#07122a; --fs-p01-navy-850:#0a1834; --fs-p01-navy-800:#0d1d3d; --fs-p01-navy-700:#19305c; --fs-p01-ink:#111b35; --fs-p01-muted:#60708f; --fs-p01-line:#dfe6f3; --fs-p01-surface:#f5f8ff; --fs-p01-cyan:#09d8f5; --fs-p01-blue:#1789ff; --fs-p01-violet:#7c3cff; --fs-p01-pink:#ee20dc;
  --fs-p01-c-02e8ff:#02e8ff; --fs-p01-c-030817:#030817; --fs-p01-c-050a1d:#050a1d; --fs-p01-c-050b1d:#050b1d; --fs-p01-c-057bb6:#057bb6; --fs-p01-c-059ebd:#059ebd;
  --fs-p01-c-06d8f1:#06d8f1; --fs-p01-c-07132d:#07132d; --fs-p01-c-07142f:#07142f; --fs-p01-c-071a4c:#071a4c; --fs-p01-c-078fb0:#078fb0; --fs-p01-c-07aeca:#07aeca;
  --fs-p01-c-082c51:#082c51; --fs-p01-c-086fae:#086fae; --fs-p01-c-08bfdc:#08bfdc; --fs-p01-c-09d3cd:#09d3cd; --fs-p01-c-0a1541:#0a1541; --fs-p01-c-0a1635:#0a1635;
  --fs-p01-c-0a1a42:#0a1a42; --fs-p01-c-0d1e4a:#0d1e4a; --fs-p01-c-0e2346:#0e2346; --fs-p01-c-101947:#101947; --fs-p01-c-11dff3:#11dff3; --fs-p01-c-15213e:#15213e;
  --fs-p01-c-15288c:#15288c; --fs-p01-c-157feb:#157feb; --fs-p01-c-15bcd8:#15bcd8; --fs-p01-c-16203a:#16203a; --fs-p01-c-16c9e5:#16c9e5; --fs-p01-c-17213c:#17213c;
  --fs-p01-c-172442:#172442; --fs-p01-c-17284d:#17284d; --fs-p01-c-17cde8:#17cde8; --fs-p01-c-182541:#182541; --fs-p01-c-18315a:#18315a; --fs-p01-c-192541:#192541;
  --fs-p01-c-1a2540:#1a2540; --fs-p01-c-1a2744:#1a2744; --fs-p01-c-1aa4f7:#1aa4f7; --fs-p01-c-1ae7f3:#1ae7f3; --fs-p01-c-1b2742:#1b2742; --fs-p01-c-1c275e:#1c275e;
  --fs-p01-c-1dab86:#1dab86; --fs-p01-c-1dd8ec:#1dd8ec; --fs-p01-c-1fc6dc:#1fc6dc; --fs-p01-c-2253e3:#2253e3; --fs-p01-c-24304a:#24304a; --fs-p01-c-243150:#243150;
  --fs-p01-c-248bdc:#248bdc; --fs-p01-c-25304a:#25304a; --fs-p01-c-25304b:#25304b; --fs-p01-c-253357:#253357; --fs-p01-c-25d9e8:#25d9e8; --fs-p01-c-27c5bb:#27c5bb;
  --fs-p01-c-286eff:#286eff; --fs-p01-c-2b80f5:#2b80f5; --fs-p01-c-2b9fea:#2b9fea; --fs-p01-c-2f5378:#2f5378; --fs-p01-c-30309a:#30309a; --fs-p01-c-32ac88:#32ac88;
  --fs-p01-c-336cff:#336cff; --fs-p01-c-35236d:#35236d; --fs-p01-c-39cf95:#39cf95; --fs-p01-c-3d2985:#3d2985; --fs-p01-c-3ddceb:#3ddceb; --fs-p01-c-421263:#421263;
  --fs-p01-c-4434e5:#4434e5; --fs-p01-c-4666df:#4666df; --fs-p01-c-4b62cf:#4b62cf; --fs-p01-c-4cdfa1:#4cdfa1; --fs-p01-c-4d47c8:#4d47c8; --fs-p01-c-4d59cf:#4d59cf;
  --fs-p01-c-4d62d8:#4d62d8; --fs-p01-c-4e43a6:#4e43a6; --fs-p01-c-511371:#511371; --fs-p01-c-52607a:#52607a; --fs-p01-c-5264ca:#5264ca; --fs-p01-c-5264db:#5264db;
  --fs-p01-c-5268dd:#5268dd; --fs-p01-c-5269cc:#5269cc; --fs-p01-c-5269dd:#5269dd; --fs-p01-c-536be6:#536be6; --fs-p01-c-5542d8:#5542d8; --fs-p01-c-55647e:#55647e;
  --fs-p01-c-5670a5:#5670a5; --fs-p01-c-5a4bdd:#5a4bdd; --fs-p01-c-5a6985:#5a6985; --fs-p01-c-5b47d8:#5b47d8; --fs-p01-c-5d53e2:#5d53e2; --fs-p01-c-5d78e9:#5d78e9;
  --fs-p01-c-5decff:#5decff; --fs-p01-c-604de0:#604de0; --fs-p01-c-6050d9:#6050d9; --fs-p01-c-6247ff:#6247ff; --fs-p01-c-6252db:#6252db; --fs-p01-c-6346ec:#6346ec;
  --fs-p01-c-6477cb:#6477cb; --fs-p01-c-66758e:#66758e; --fs-p01-c-667590:#667590; --fs-p01-c-67e8f6:#67e8f6; --fs-p01-c-68eafa:#68eafa; --fs-p01-c-697892:#697892;
  --fs-p01-c-6b48ff:#6b48ff; --fs-p01-c-6d44ff:#6d44ff; --fs-p01-c-6d4ee3:#6d4ee3; --fs-p01-c-6ff5ff:#6ff5ff; --fs-p01-c-7097dd:#7097dd; --fs-p01-c-713cff:#713cff;
  --fs-p01-c-7145df:#7145df; --fs-p01-c-7146ed:#7146ed; --fs-p01-c-7150ed:#7150ed; --fs-p01-c-71809a:#71809a; --fs-p01-c-7250df:#7250df; --fs-p01-c-7546df:#7546df;
  --fs-p01-c-7646df:#7646df; --fs-p01-c-78869f:#78869f; --fs-p01-c-7890bd:#7890bd; --fs-p01-c-7951f0:#7951f0; --fs-p01-c-7a879e:#7a879e; --fs-p01-c-7c4ade:#7c4ade;
  --fs-p01-c-7c899f:#7c899f; --fs-p01-c-7cecff:#7cecff; --fs-p01-c-7ceefa:#7ceefa; --fs-p01-c-7e8ba1:#7e8ba1; --fs-p01-c-8090ab:#8090ab; --fs-p01-c-8290a7:#8290a7;
  --fs-p01-c-8290a8:#8290a8; --fs-p01-c-8290aa:#8290aa; --fs-p01-c-8491a7:#8491a7; --fs-p01-c-8591a5:#8591a5; --fs-p01-c-8592a9:#8592a9; --fs-p01-c-85f7ff:#85f7ff;
  --fs-p01-c-8895aa:#8895aa; --fs-p01-c-8a27ba:#8a27ba; --fs-p01-c-8a95a8:#8a95a8; --fs-p01-c-8a97ac:#8a97ac; --fs-p01-c-8b4de7:#8b4de7; --fs-p01-c-8d98ad:#8d98ad;
  --fs-p01-c-8e29ff:#8e29ff; --fs-p01-c-9b25d5:#9b25d5; --fs-p01-c-9c29c2:#9c29c2; --fs-p01-c-9dabc5:#9dabc5; --fs-p01-c-a0a9b9:#a0a9b9; --fs-p01-c-a923bd:#a923bd;
  --fs-p01-c-a9b9d5:#a9b9d5; --fs-p01-c-aaa6ff:#aaa6ff; --fs-p01-c-aebbd5:#aebbd5; --fs-p01-c-aebedc:#aebedc; --fs-p01-c-b298ff:#b298ff; --fs-p01-c-b9c7e3:#b9c7e3;
  --fs-p01-c-b9c7e4:#b9c7e4; --fs-p01-c-b9d7ff:#b9d7ff; --fs-p01-c-bca1ff:#bca1ff; --fs-p01-c-bd2dcc:#bd2dcc; --fs-p01-c-c7d1e2:#c7d1e2; --fs-p01-c-c7d3eb:#c7d3eb;
  --fs-p01-c-c846c5:#c846c5; --fs-p01-c-cad6ef:#cad6ef; --fs-p01-c-cb4bce:#cb4bce; --fs-p01-c-cbd3f0:#cbd3f0; --fs-p01-c-cbd5e6:#cbd5e6; --fs-p01-c-cbd7ec:#cbd7ec;
  --fs-p01-c-d24ccc:#d24ccc; --fs-p01-c-d443bd:#d443bd; --fs-p01-c-d9e4f9:#d9e4f9; --fs-p01-c-da3bbb:#da3bbb; --fs-p01-c-db28ef:#db28ef; --fs-p01-c-dbe2ef:#dbe2ef;
  --fs-p01-c-dce4f0:#dce4f0; --fs-p01-c-dce4f2:#dce4f2; --fs-p01-c-dce5f1:#dce5f1; --fs-p01-c-dce9ff:#dce9ff; --fs-p01-c-dd2be4:#dd2be4; --fs-p01-c-df31b4:#df31b4;
  --fs-p01-c-df3db6:#df3db6; --fs-p01-c-dfe6f1:#dfe6f1; --fs-p01-c-e0e5ee:#e0e5ee; --fs-p01-c-e0e6f0:#e0e6f0; --fs-p01-c-e0e6f1:#e0e6f1; --fs-p01-c-e0e7f1:#e0e7f1;
  --fs-p01-c-e0e7f2:#e0e7f2; --fs-p01-c-e1e6f0:#e1e6f0; --fs-p01-c-e4e9f2:#e4e9f2; --fs-p01-c-e536c7:#e536c7; --fs-p01-c-e5eaf2:#e5eaf2; --fs-p01-c-e5f9fd:#e5f9fd;
  --fs-p01-c-e6fbff:#e6fbff; --fs-p01-c-e839be:#e839be; --fs-p01-c-e8ecf3:#e8ecf3; --fs-p01-c-e8ecf4:#e8ecf4; --fs-p01-c-e8edf4:#e8edf4; --fs-p01-c-e92790:#e92790;
  --fs-p01-c-e9edf5:#e9edf5; --fs-p01-c-eaf4ff:#eaf4ff; --fs-p01-c-eafafc:#eafafc; --fs-p01-c-ebeff5:#ebeff5; --fs-p01-c-ed45c7:#ed45c7; --fs-p01-c-edf0f5:#edf0f5;
  --fs-p01-c-eeeaff:#eeeaff; --fs-p01-c-eef4ff:#eef4ff; --fs-p01-c-eef5ff:#eef5ff; --fs-p01-c-ef2bd9:#ef2bd9; --fs-p01-c-ef2e84:#ef2e84; --fs-p01-c-ef30dc:#ef30dc;
  --fs-p01-c-ef3fa7:#ef3fa7; --fs-p01-c-ef518f:#ef518f; --fs-p01-c-f0ebff:#f0ebff; --fs-p01-c-f0edff:#f0edff; --fs-p01-c-f0f3f8:#f0f3f8; --fs-p01-c-f0f3f9:#f0f3f9;
  --fs-p01-c-f1f4fa:#f1f4fa; --fs-p01-c-f28ae9:#f28ae9; --fs-p01-c-f2efff:#f2efff; --fs-p01-c-f2f5fa:#f2f5fa; --fs-p01-c-f3f6fb:#f3f6fb; --fs-p01-c-f5f1ff:#f5f1ff;
  --fs-p01-c-f5f7fc:#f5f7fc; --fs-p01-c-f7f9fd:#f7f9fd; --fs-p01-c-f7f9fe:#f7f9fe; --fs-p01-c-f7fbff:#f7fbff; --fs-p01-c-ff4a99:#ff4a99; --fs-p01-c-ff6681:#ff6681;
  --fs-p01-c-ff8bf4:#ff8bf4; --fs-p01-c-ffc95f:#ffc95f; --fs-p01-c-fff0f7:#fff0f7; --fs-p01-c-fff0fb:#fff0fb;
  --fs-p01-gradient:linear-gradient(118deg,var(--fs-p01-cyan) 0%,var(--fs-p01-blue) 42%,var(--fs-p01-violet) 73%,var(--fs-p01-pink) 100%);
  --fs-p01-shadow-sm:0 10px 34px rgba(27,48,92,.09); --fs-p01-shadow-lg:0 32px 90px rgba(4,9,26,.28); --fs-p01-container:1520px;
}