/* Site de formation : design system Grand large. Généré depuis tokens.json ; pour changer la palette, ne modifier que les variables --brand-*. */
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat/Montserrat-ExtraLight.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat/Montserrat-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat/Montserrat-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat/Montserrat-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat/Montserrat-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat/Montserrat-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat/Montserrat-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

.fv-training {
  --font-sans: Montserrat, -apple-system, BlinkMacSystemFont, Roboto, sans-serif, Helvetica, Arial;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --duration-instant: 90ms;
  --duration-fast: 160ms;
  --duration-base: 260ms;
  --duration-slow: 420ms;
  --duration-tide: 900ms;
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-enter: cubic-bezier(0.1, 0.8, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-tide: cubic-bezier(0.45, 0.05, 0.35, 1);
  --size-tap: 44px;
  --size-tap-lg: 56px;
  --size-icon: 24px;
  --size-icon-sm: 18px;
  --size-reading: 68ch;
  --size-sidebar: 300px;
  --size-container: 1200px;
  --brand-navy: #0b2b4b;
  --brand-navy-deep: #06182b;
  --brand-navy-mid: #0e2f50;
  --brand-navy-ocean: #154468;
  --brand-navy-soft: #46607a;
  --brand-navy-line: #2c4a68;
  --brand-mist: #b9c9d9;
  --brand-mist-line: #7f97ae;
  --brand-lagoon: #08686f;
  --brand-lagoon-deep: #075c62;
  --brand-lagoon-bright: #5fd6cf;
  --brand-lagoon-tint: #dcf1ef;
  --brand-lagoon-night: #0d4047;
  --brand-ocean: #1f5fa6;
  --brand-ocean-deep: #174b85;
  --brand-ocean-bright: #8dc3ff;
  --brand-ocean-soft: #bcd9fb;
  --brand-ocean-tint: #e6f0fb;
  --brand-ocean-night: #14304f;
  --brand-sand: #f3ebdb;
  --brand-sand-light: #faf6ee;
  --brand-sand-line: #d8cab0;
  --brand-sand-strong: #8a7a5e;
  --brand-foam: #ffffff;
  --brand-kelp: #17694a;
  --brand-kelp-bright: #74d9a6;
  --brand-kelp-tint: #dcf2e6;
  --brand-kelp-night: #0f3b2c;
  --brand-glow: #7cc4f2;
  --brand-glow-ink: #0e4a78;
  --brand-glow-bright: #9fd6f7;
  --brand-glow-tint: #e1f2fc;
  --brand-glow-night: #0f3550;
  --brand-signal: #a41b3d;
  --brand-signal-bright: #ff93a7;
  --brand-signal-tint: #fbe4e9;
  --brand-signal-night: #4a1222;
  --brand-dusk: #5a4a9a;
  --brand-dusk-deep: #43367a;
  --brand-dusk-bright: #c8bdf5;
  --brand-dusk-tint: #ece8f8;
  --brand-dusk-night: #2c2552;
  --surface: var(--brand-sand-light);
  --surface-raised: var(--brand-foam);
  --surface-sunken: var(--brand-sand);
  --surface-inverse: var(--brand-navy);
  --ink: var(--brand-navy);
  --ink-muted: var(--brand-navy-soft);
  --ink-inverse: var(--brand-sand-light);
  --ink-inverse-muted: var(--brand-mist);
  --primary: var(--brand-ocean);
  --primary-hover: var(--brand-ocean-deep);
  --primary-bright: var(--brand-ocean-bright);
  --on-primary: var(--brand-foam);
  --primary-soft: var(--brand-ocean-tint);
  --primary-ink: var(--brand-ocean-deep);
  --accent: var(--brand-lagoon);
  --accent-hover: var(--brand-lagoon-deep);
  --on-accent: var(--brand-foam);
  --accent-soft: var(--brand-lagoon-tint);
  --accent-ink: var(--brand-lagoon);
  --accent-bright: var(--brand-lagoon-bright);
  --success: var(--brand-kelp);
  --on-success: var(--brand-foam);
  --success-soft: var(--brand-kelp-tint);
  --success-ink: var(--brand-kelp);
  --success-bright: var(--brand-kelp-bright);
  --warning: var(--brand-dusk);
  --on-warning: var(--brand-foam);
  --warning-soft: var(--brand-dusk-tint);
  --warning-ink: var(--brand-dusk-deep);
  --reward: var(--brand-glow);
  --reward-bright: var(--brand-glow-bright);
  --on-reward: var(--brand-navy);
  --reward-soft: var(--brand-glow-tint);
  --reward-ink: var(--brand-glow-ink);
  --danger: var(--brand-signal);
  --on-danger: var(--brand-foam);
  --danger-soft: var(--brand-signal-tint);
  --danger-ink: var(--brand-signal);
  --border: var(--brand-sand-line);
  --border-strong: var(--brand-sand-strong);
  --focus-ring: var(--brand-navy);
  --focus-ring-inverse: var(--brand-lagoon-bright);
  --on-media: var(--brand-foam);
  --shade: var(--brand-navy-deep);
  --hero-deep: var(--brand-navy-deep);
  --hero-base: var(--brand-navy);
  --hero-lit: var(--brand-ocean-deep);
  --progress-track: var(--brand-sand-line);
  --progress-fill: var(--brand-ocean);
  --progress-done: var(--brand-kelp);
  --cover-sea: var(--brand-lagoon);
  --cover-sand: var(--brand-sand-line);
  --cover-ocean: var(--brand-navy-ocean);
  --cover-deep: var(--brand-navy);
  --cover-glow: var(--brand-glow);
  --shadow-sm: 0 1px 2px rgba(11,43,75,0.08), 0 2px 8px rgba(11,43,75,0.06);
  --shadow-md: 0 4px 12px rgba(11,43,75,0.10), 0 12px 32px rgba(11,43,75,0.08);
  --shadow-lg: 0 8px 24px rgba(11,43,75,0.12), 0 24px 56px rgba(11,43,75,0.14);
}

@media (prefers-color-scheme: dark) {
  .fv-training {
    --brand-navy: #0b2b4b;
    --brand-navy-deep: #06182b;
    --brand-navy-mid: #0e2f50;
    --brand-navy-ocean: #154468;
    --brand-navy-soft: #46607a;
    --brand-navy-line: #2c4a68;
    --brand-mist: #b9c9d9;
    --brand-mist-line: #7f97ae;
    --brand-lagoon: #08686f;
    --brand-lagoon-deep: #075c62;
    --brand-lagoon-bright: #5fd6cf;
    --brand-lagoon-tint: #dcf1ef;
    --brand-lagoon-night: #0d4047;
    --brand-ocean: #1f5fa6;
    --brand-ocean-deep: #174b85;
    --brand-ocean-bright: #8dc3ff;
    --brand-ocean-soft: #bcd9fb;
    --brand-ocean-tint: #e6f0fb;
    --brand-ocean-night: #14304f;
    --brand-sand: #f3ebdb;
    --brand-sand-light: #faf6ee;
    --brand-sand-line: #d8cab0;
    --brand-sand-strong: #8a7a5e;
    --brand-foam: #ffffff;
    --brand-kelp: #17694a;
    --brand-kelp-bright: #74d9a6;
    --brand-kelp-tint: #dcf2e6;
    --brand-kelp-night: #0f3b2c;
    --brand-glow: #7cc4f2;
    --brand-glow-ink: #0e4a78;
    --brand-glow-bright: #9fd6f7;
    --brand-glow-tint: #e1f2fc;
    --brand-glow-night: #0f3550;
    --brand-signal: #a41b3d;
    --brand-signal-bright: #ff93a7;
    --brand-signal-tint: #fbe4e9;
    --brand-signal-night: #4a1222;
    --brand-dusk: #5a4a9a;
    --brand-dusk-deep: #43367a;
    --brand-dusk-bright: #c8bdf5;
    --brand-dusk-tint: #ece8f8;
    --brand-dusk-night: #2c2552;
    --surface: var(--brand-navy-deep);
    --surface-raised: var(--brand-navy-mid);
    --surface-sunken: var(--brand-navy);
    --surface-inverse: var(--brand-navy-ocean);
    --ink: var(--brand-sand-light);
    --ink-muted: var(--brand-mist);
    --ink-inverse: var(--brand-sand-light);
    --ink-inverse-muted: var(--brand-mist);
    --primary: var(--brand-ocean-bright);
    --primary-hover: var(--brand-ocean-soft);
    --primary-bright: var(--brand-ocean-bright);
    --on-primary: var(--brand-navy-deep);
    --primary-soft: var(--brand-ocean-night);
    --primary-ink: var(--brand-ocean-bright);
    --accent: var(--brand-lagoon-bright);
    --accent-hover: var(--brand-foam);
    --on-accent: var(--brand-navy-deep);
    --accent-soft: var(--brand-lagoon-night);
    --accent-ink: var(--brand-lagoon-bright);
    --accent-bright: var(--brand-lagoon-bright);
    --success: var(--brand-kelp-bright);
    --on-success: var(--brand-navy-deep);
    --success-soft: var(--brand-kelp-night);
    --success-ink: var(--brand-kelp-bright);
    --success-bright: var(--brand-kelp-bright);
    --warning: var(--brand-dusk-bright);
    --on-warning: var(--brand-navy-deep);
    --warning-soft: var(--brand-dusk-night);
    --warning-ink: var(--brand-dusk-bright);
    --reward: var(--brand-glow-bright);
    --reward-bright: var(--brand-glow-bright);
    --on-reward: var(--brand-navy-deep);
    --reward-soft: var(--brand-glow-night);
    --reward-ink: var(--brand-glow-bright);
    --danger: var(--brand-signal-bright);
    --on-danger: var(--brand-navy-deep);
    --danger-soft: var(--brand-signal-night);
    --danger-ink: var(--brand-signal-bright);
    --border: var(--brand-navy-line);
    --border-strong: var(--brand-mist-line);
    --focus-ring: var(--brand-lagoon-bright);
    --focus-ring-inverse: var(--brand-lagoon-bright);
    --on-media: var(--brand-foam);
    --shade: var(--brand-navy-deep);
    --hero-deep: var(--brand-navy-deep);
    --hero-base: var(--brand-navy);
    --hero-lit: var(--brand-ocean-deep);
    --progress-track: var(--brand-navy-line);
    --progress-fill: var(--brand-ocean-bright);
    --progress-done: var(--brand-kelp-bright);
    --cover-sea: var(--brand-lagoon-night);
    --cover-sand: var(--brand-navy-line);
    --cover-ocean: var(--brand-ocean-night);
    --cover-deep: var(--brand-navy-ocean);
    --cover-glow: var(--brand-glow-night);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.5), 0 12px 32px rgba(0,0,0,0.35);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.55), 0 24px 56px rgba(0,0,0,0.45);
  }
}