:root {
  --color-principal: #5f3afc;
  --color-secondaire: #f5f5f5;
  --color-texte: #090909;
  --color-accentue: #ff9fff;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-extra-1: #392396;
  --color-extra-2: #e8e2ff;
  --color-extra-3-print: #f2ccfd;
  --color-extra-4-print: #3300ff;
  --color-gris-1: #f5f5f5;
  --color-gris-2: #f1f1f1;
  --color-gris-3: #e6e6e7;
  --color-gris-4-border: #d8d8d8;
  --color-gris-5-texte-secondaire: #a6a6a6;
  --color-gris-6-texte-secondaire: #848484;
  --color-state-rouge: #ff6d6d;
  --color-state-vert: #a1f57e;
  --color-state-jaune: #ffd049;
  --color-tags: #e3ccfd;
  --color-filtre-selection: #d9d0ff;
  --color-tarif-badge-actif: #a9f6b7;
  --gradient-nav-primary: linear-gradient(167.94deg, #090909 66.747%, #6f6f6f 99.881%);
  --gradient-nav-top: linear-gradient(90deg, #000000 0%, #3d3d3d 100%);
  --color-nav-disabled: rgba(255, 255, 255, 0.35);
  --shadow-02: 0 10px 30px 0 rgba(35, 55, 128, 0.08);
  --shadow-button-02: 0 15px 16px 0 rgba(74, 58, 255, 0.22);
  --shadow-popover: 0px 4px 10px rgba(0, 0, 0, 0.25);
  --font-primary: 'DM Sans', sans-serif;
  --font-text: 'Inter', sans-serif;
  --fs-display-1: 90px;
  --fs-display-2: 72px;
  --fs-display-3: 44px;
  --fs-display-4: 28px;
  --fs-h1: 54px;
  --fs-h2: 42px;
  --fs-h3: 32px;
  --fs-h4: 24px;
  --fs-h5: 20px;
  --fs-h6: 18px;
  --fs-body-l: 18px;
  --fs-body-m: 16px;
  --fs-body-s: 14px;
  --fs-body-xs: 12px;
  --fs-button-l: 18px;
  --fs-button-m: 16px;
  --fs-button-s: 14px;
  --fs-button-xs: 12px;
  --fs-subtitle-m: 16px;
  --fs-subtitle-s: 14px;
  --fs-caption: 20px;
  --lh-display: 1.1;
  --lh-heading: 1.1;
  --lh-body: 1.4;
  --lh-button: 1.2;
  --lh-subtitle: 1.2;
  --lh-caption: 1;
  --container-max-width: 1440px;
  --space-section-y: var(--space-48);
  --space-section-x: var(--space-24);
}
@media (min-width: 768px) {
  :root {
    --space-section-y: var(--space-64);
    --space-section-x: var(--space-32);
  }
}
@media (min-width: 1024px) {
  :root {
    --space-section-y: var(--space-80);
    --space-section-x: var(--space-48);
  }
}
:root {
  --space-0: 0;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --radius: 15px;
  --radius-pill: 999px;
  --radius-round: 50%;
}
:root {
  --shell-menu-width: 226px;
  --shell-aside-width: 226px;
}
:root {
  --color-roadmap-bg: #0c0920;
  --color-roadmap-bg-deep: #07051a;
  --color-roadmap-surface: #1a1440;
  --color-roadmap-surface-raised: #241c55;
  --color-roadmap-surface-glass: rgba(26, 20, 64, 0.72);
  --color-roadmap-grid: rgba(217, 208, 255, 0.05);
  --color-roadmap-line: rgba(217, 208, 255, 0.14);
  --color-roadmap-line-strong: rgba(217, 208, 255, 0.32);
  --color-roadmap-highlight: rgba(255, 255, 255, 0.4);
  --color-roadmap-text: var(--color-white);
  --color-roadmap-text-muted: #b8b0de;
  --color-roadmap-text-dim: #9c94c8;
  --color-roadmap-accent: var(--color-accentue);
  --color-roadmap-accent-soft: var(--color-filtre-selection);
  --color-roadmap-glow: rgba(95, 58, 252, 0.6);
  --color-roadmap-glow-soft: rgba(95, 58, 252, 0.28);
  --color-roadmap-glow-accent: rgba(255, 159, 255, 0.5);
  --color-roadmap-glow-accent-soft: rgba(255, 159, 255, 0.12);
  --color-roadmap-stripe: rgba(12, 9, 32, 0.34);
  --color-roadmap-done: var(--color-state-vert);
  --color-roadmap-done-soft: rgba(161, 245, 126, 0.12);
  --color-roadmap-done-line: rgba(161, 245, 126, 0.35);
  --color-roadmap-current-soft: rgba(255, 159, 255, 0.14);
  --color-roadmap-current-line: rgba(255, 159, 255, 0.45);
  --gradient-roadmap-progress: linear-gradient(90deg, var(--color-principal) 0%, var(--color-accentue) 100%);
  --gradient-roadmap-title: linear-gradient(100deg, var(--color-white) 35%, var(--color-filtre-selection) 65%, var(--color-accentue) 100%);
}
:root {
  --color-cockpit-page: var(--color-secondaire);
  --color-cockpit-card: var(--color-white);
  --color-cockpit-card-line: color-mix(in srgb, var(--color-texte) 6%, transparent);
  --color-cockpit-chip: var(--color-secondaire);
  --color-cockpit-ink: var(--color-texte);
  --color-cockpit-ink-muted: color-mix(in srgb, var(--color-texte) 66%, var(--color-white));
  --color-cockpit-ink-inverse: var(--color-white);
  --color-cockpit-violet: var(--color-principal);
  --color-cockpit-violet-deep: var(--color-extra-1);
  --color-cockpit-violet-soft: var(--color-extra-2);
  --color-cockpit-pink: var(--color-accentue);
  --color-cockpit-pill-active: var(--color-texte);
  --color-cockpit-focus: var(--color-principal);
  --color-cockpit-halo: color-mix(in srgb, var(--color-principal) 9%, transparent);
  --color-cockpit-ok: var(--color-state-vert);
  --color-cockpit-ok-line: color-mix(in srgb, var(--color-state-vert) 55%, transparent);
  --color-cockpit-warning: var(--color-state-jaune);
  --color-cockpit-warning-soft: color-mix(in srgb, var(--color-state-jaune) 28%, var(--color-white));
  --color-cockpit-hero-bg: var(--color-texte);
  --color-cockpit-hero-grid: var(--color-roadmap-grid);
  --color-cockpit-hero-line: var(--color-roadmap-line);
  --color-cockpit-hero-line-strong: var(--color-roadmap-line-strong);
  --color-cockpit-hero-text: var(--color-roadmap-text);
  --color-cockpit-hero-text-muted: var(--color-roadmap-text-muted);
  --color-cockpit-hero-accent: var(--color-roadmap-accent);
  --color-cockpit-hero-surface: var(--color-roadmap-surface-glass);
  --color-cockpit-glow: var(--color-roadmap-glow);
  --color-cockpit-glow-soft: var(--color-roadmap-glow-soft);
  --color-cockpit-glow-accent: var(--color-roadmap-glow-accent);
  --color-cockpit-glow-accent-soft: var(--color-roadmap-glow-accent-soft);
  --color-cockpit-track: var(--color-gris-2);
  --color-cockpit-track-line: color-mix(in srgb, var(--color-texte) 5%, transparent);
  --color-cockpit-handle: var(--color-texte);
  --color-cockpit-seg-active: color-mix(in srgb, var(--color-state-vert) 80%, var(--color-texte));
  --color-cockpit-seg-notice: var(--color-accentue);
  --color-cockpit-seg-soon: var(--color-principal);
  --color-cockpit-seg-terminated: var(--color-gris-4-border);
  --color-cockpit-ok-soft: color-mix(in srgb, var(--color-state-vert) 32%, var(--color-white));
  --color-cockpit-danger: var(--color-state-rouge);
  --color-cockpit-danger-soft: color-mix(in srgb, var(--color-state-rouge) 16%, var(--color-white));
  --color-cockpit-danger-ink: color-mix(in srgb, var(--color-state-rouge) 50%, var(--color-texte));
  --color-cockpit-chart-area: color-mix(in srgb, var(--color-principal) 30%, transparent);
  --color-cockpit-chart-area-end: color-mix(in srgb, var(--color-accentue) 0%, transparent);
  --color-cockpit-chart-grid: color-mix(in srgb, var(--color-texte) 9%, transparent);
  --color-cockpit-tooltip: var(--color-texte);
  --gradient-cockpit-accent: var(--gradient-roadmap-progress);
  --gradient-cockpit-progress: linear-gradient(90deg, var(--color-principal) 0%, var(--color-accentue) 100%);
  --gradient-cockpit-progress-done: linear-gradient(90deg, color-mix(in srgb, var(--color-state-vert) 40%, var(--color-white)) 0%, var(--color-state-vert) 100%);
  --gradient-cockpit-hero-title: var(--gradient-roadmap-title);
  --color-cockpit-ambiance-base: var(--color-cockpit-hero-bg);
  --color-cockpit-ambiance-1: var(--color-principal);
  --color-cockpit-ambiance-2: var(--color-accentue);
  --color-cockpit-ambiance-3: var(--color-filtre-selection);
  --color-cockpit-ambiance-4: var(--color-extra-1);
  --color-cockpit-ambiance-1-soft: color-mix(in srgb, var(--color-principal) 42%, transparent);
  --color-cockpit-ambiance-1-faint: color-mix(in srgb, var(--color-principal) 18%, transparent);
  --color-cockpit-ambiance-2-soft: color-mix(in srgb, var(--color-accentue) 30%, transparent);
  --color-cockpit-ambiance-2-faint: color-mix(in srgb, var(--color-accentue) 12%, transparent);
  --color-cockpit-ambiance-3-soft: color-mix(in srgb, var(--color-filtre-selection) 45%, transparent);
  --color-cockpit-ambiance-3-faint: color-mix(in srgb, var(--color-filtre-selection) 16%, transparent);
  --color-cockpit-ambiance-4-soft: color-mix(in srgb, var(--color-extra-1) 75%, transparent);
  --cockpit-ambiance-veil-start: 78%;
  --cockpit-ambiance-veil-mid: 42%;
  --cockpit-ambiance-veil-at: 34%;
  --cockpit-ambiance-veil-end: 62%;
  --gradient-cockpit-ambiance-veil: linear-gradient(90deg, color-mix(in srgb, var(--color-cockpit-hero-bg) var(--cockpit-ambiance-veil-start), transparent) 0%, color-mix(in srgb, var(--color-cockpit-hero-bg) var(--cockpit-ambiance-veil-mid), transparent) var(--cockpit-ambiance-veil-at), transparent var(--cockpit-ambiance-veil-end));
  --color-cockpit-ambiance-pill: color-mix(in srgb, var(--color-cockpit-hero-bg) 82%, transparent);
  --color-cockpit-surprise-violet: var(--color-principal);
  --color-cockpit-surprise-pink: var(--color-accentue);
  --color-cockpit-surprise-lavender: var(--color-filtre-selection);
  --color-cockpit-surprise-gold: var(--color-state-jaune);
  --color-cockpit-surprise-green: var(--color-state-vert);
  --color-cockpit-surprise-white: var(--color-white);
  --color-cockpit-surprise-pumpkin: color-mix(in srgb, var(--color-state-jaune) 55%, var(--color-state-rouge));
  --color-cockpit-surprise-ink: var(--color-cockpit-hero-bg);
  --gradient-cockpit-milestone-shine: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--color-white) 28%, transparent) 50%, transparent 70%);
  --shadow-cockpit-card: var(--shadow-02);
  --shadow-cockpit-hover: 0 22px 44px -18px color-mix(in srgb, var(--color-extra-1) 28%, transparent);
}
:root {
  --motion-duration-fast: 120ms;
  --motion-duration-base: 200ms;
  --motion-duration-slow: 320ms;
  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --motion-ease-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --motion-ease-spring: linear(0, 0.089 4%, 0.277 8%, 0.48 12%, 0.659 16%, 0.798 20%, 0.915 25%, 0.98 30%, 1.013 36%, 1.02 42%, 1.014 50%, 1.005 60%, 1.001 70%, 1 85%, 1);
  --motion-distance-s: 4px;
  --motion-distance-m: 8px;
  --motion-scale-press: 0.98;
  --motion-scale-pop: 0.96;
}
@supports not (transition-timing-function: linear(0, 1)) {
  :root {
    --motion-ease-spring: var(--motion-ease-standard);
  }
}
:root {
  --color-surface-page: var(--color-cockpit-page);
  --color-surface-card: var(--color-cockpit-card);
  --color-surface-card-line: var(--color-cockpit-card-line);
  --color-surface-chip: var(--color-cockpit-chip);
  --color-ink: var(--color-cockpit-ink);
  --color-ink-muted: var(--color-cockpit-ink-muted);
  --color-ink-inverse: var(--color-cockpit-ink-inverse);
  --color-pill-dark: var(--color-cockpit-pill-active);
  --color-focus-ring: var(--color-cockpit-focus);
  --color-glow: var(--color-cockpit-glow);
  --shadow-card-soft: var(--shadow-cockpit-card);
  --shadow-card-hover: var(--shadow-cockpit-hover);
  --gradient-accent: var(--gradient-cockpit-accent);
  --ease-soft: var(--motion-ease-decelerate);
  --color-monogram-1-bg: var(--color-cockpit-violet-soft);
  --color-monogram-1-ink: var(--color-cockpit-violet-deep);
  --color-monogram-2-bg: color-mix(in srgb, var(--color-accentue) 26%, var(--color-white));
  --color-monogram-2-ink: color-mix(in srgb, var(--color-accentue) 34%, var(--color-texte));
  --color-monogram-3-bg: var(--color-cockpit-ok-soft);
  --color-monogram-3-ink: color-mix(in srgb, var(--color-state-vert) 30%, var(--color-texte));
  --color-monogram-4-bg: color-mix(in srgb, var(--color-cockpit-surprise-pumpkin) 24%, var(--color-white));
  --color-monogram-4-ink: color-mix(in srgb, var(--color-cockpit-surprise-pumpkin) 40%, var(--color-texte));
  --color-hero-bg: var(--color-cockpit-hero-bg);
  --color-hero-grid: var(--color-cockpit-hero-grid);
  --color-hero-line: var(--color-cockpit-hero-line);
  --color-hero-line-strong: var(--color-cockpit-hero-line-strong);
  --color-hero-surface: var(--color-cockpit-hero-surface);
  --color-hero-text: var(--color-cockpit-hero-text);
  --color-hero-text-muted: var(--color-cockpit-hero-text-muted);
  --color-hero-accent: var(--color-cockpit-hero-accent);
  --color-hero-glow-soft: var(--color-cockpit-glow-soft);
  --color-hero-glow-accent-soft: var(--color-cockpit-glow-accent-soft);
  --color-hero-ok: var(--color-cockpit-ok);
  --color-hero-danger: color-mix(in srgb, var(--color-state-rouge) 70%, var(--color-white));
  --color-hero-danger-soft: color-mix(in srgb, var(--color-state-rouge) 22%, transparent);
  --gradient-hero-title: var(--gradient-cockpit-hero-title);
}
:root {
  --space-shell-gap: var(--space-16);
  --space-page-gap: var(--space-24);
  --color-badge-ok-bg: var(--color-tarif-badge-actif);
  --color-badge-ok-ink: var(--color-monogram-3-ink);
  --color-badge-warn-bg: var(--color-cockpit-warning-soft);
  --color-badge-warn-ink: color-mix(in srgb, var(--color-state-jaune) 30%, var(--color-texte));
  --color-badge-danger-bg: var(--color-cockpit-danger-soft);
  --color-badge-danger-ink: color-mix(in srgb, var(--color-state-rouge) 35%, var(--color-texte));
  --color-badge-info-bg: var(--color-monogram-1-bg);
  --color-badge-info-ink: var(--color-monogram-1-ink);
  --color-badge-neutral-bg: var(--color-surface-card);
  --color-badge-neutral-ink: var(--color-ink-muted);
  --color-badge-neutral-line: var(--color-tags);
  --color-overlay-scrim: color-mix(in srgb, var(--color-black) 32%, transparent);
}
:root {
  --color-discussion-note-bg: var(--color-badge-warn-bg);
  --color-discussion-reply-line: color-mix(in srgb, var(--color-principal) 40%, transparent);
}