/* Focusme · jetons de la direction « Grand bleu », partagés par site.css et legal.css.
   De la profondeur et de la lumière : un abysse bleu nuit traversé de lueurs de glace.
   Les zones « profondeurs » (bandeau, en-tête, héros, sections sombres, pied de page)
   passent par les tokens --x-* ; le thème clair ne redéfinit que ceux-là. */

:root {
  /* Couleurs de marque */
  --c-blue: #0F4C81;
  --c-deep: #0A3357;
  --c-abyss: #0C2B4A;
  --c-trench: #071C31;          /* teinte plus sombre dérivée de l'abysse */
  --c-ice: #8FC7E8;
  --c-ice-soft: #B9DDF0;
  --c-ice-mist: #EAF3FA;        /* teinte claire dérivée de la glace */
  --c-paper: #F9F7F2;
  --c-white: #FFFFFF;
  --c-ink: #101820;
  --c-safety: #F5B700;
  --c-safety-ink: #7A5C00;      /* jaune assombri, lisible sur fond clair */
  --c-safety-mist: #FDF3D3;

  /* Couleurs fonctionnelles */
  --c-text: var(--c-ink);
  --c-text-muted: #46525E;
  --c-text-on-dark: var(--c-white);
  --c-text-on-dark-muted: #C4DCEC;
  --c-link: var(--c-blue);
  --c-link-on-dark: var(--c-ice-soft);
  --c-line: #E2DDD2;
  --c-line-cool: #D5E3EE;
  --c-line-on-dark: rgb(185 221 240 / 0.16);
  --c-surface: var(--c-white);
  --c-surface-dark: rgb(16 54 92 / 0.55);
  --c-surface-dark-solid: #11385E;
  --c-glass: rgb(9 33 58 / 0.78);
  --c-glass-edge: rgb(185 221 240 / 0.22);
  --c-glass-highlight: rgb(255 255 255 / 0.06);
  --c-header: rgb(7 28 49 / 0.94);
  --c-focus: var(--c-safety);
  --c-ok: #1F7A4D;
  --c-ok-on-dark: #7FE0AE;
  --c-mask: #000000;           /* couleur pleine des masques CSS */

  /* Lueurs du maillage (opacité portée par les calques) */
  --c-mesh-ice: rgb(143 199 232 / 0.55);
  --c-mesh-blue: rgb(15 76 129 / 0.95);
  --c-mesh-soft: rgb(185 221 240 / 0.38);
  --c-mesh-safety: rgb(245 183 0 / 0.22);

  /* Dégradés */
  --g-abyss: linear-gradient(180deg, var(--c-trench) 0%, var(--c-abyss) 45%, var(--c-deep) 100%);
  --g-abyss-reverse: linear-gradient(180deg, var(--c-deep) 0%, var(--c-abyss) 55%, var(--c-trench) 100%);
  --g-ice-edge: linear-gradient(135deg, rgb(185 221 240 / 0.35), rgb(185 221 240 / 0.04) 40%, rgb(143 199 232 / 0.18));
  --g-paper: linear-gradient(180deg, var(--c-paper) 0%, var(--c-white) 100%);
  --g-mist: linear-gradient(180deg, var(--c-ice-mist) 0%, var(--c-paper) 100%);
  --g-depth-fade: linear-gradient(180deg, rgb(7 28 49 / 0) 0%, rgb(7 28 49 / 0.85) 100%);
  --g-blob-ice: radial-gradient(closest-side, var(--c-mesh-ice), rgb(143 199 232 / 0));
  --g-blob-blue: radial-gradient(closest-side, var(--c-mesh-blue), rgb(15 76 129 / 0));
  --g-blob-soft: radial-gradient(closest-side, var(--c-mesh-soft), rgb(185 221 240 / 0));
  --g-blob-safety: radial-gradient(closest-side, var(--c-mesh-safety), rgb(245 183 0 / 0));

  /* Familles typographiques */
  --f-display: "Archivo", "IBM Plex Sans", system-ui, sans-serif;
  --f-accent: "Fraunces", Georgia, serif;
  --f-body: "IBM Plex Sans", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Échelle typographique fluide */
  --fs-2xs: 0.75rem;
  --fs-xs: 0.8125rem;
  --fs-sm: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-lg: clamp(1.125rem, 1.04rem + 0.4vw, 1.3125rem);
  --fs-xl: clamp(1.3125rem, 1.15rem + 0.7vw, 1.625rem);
  --fs-2xl: clamp(1.875rem, 1.35rem + 2.3vw, 3.125rem);
  --fs-3xl: clamp(2.5rem, 1.55rem + 4.4vw, 5.25rem);
  --fs-3xl-long: clamp(2.125rem, 1.45rem + 3vw, 4rem);
  --fs-stat: clamp(2.5rem, 1.9rem + 2.6vw, 3.75rem);

  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-body: 1.65;
  --ls-display: -0.03em;
  --ls-heading: -0.02em;
  --ls-mono: 0.12em;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heavy: 780;
  --wdth-display: 104%;
  --wdth-condensed: 78%;

  /* Espacements */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 6rem;
  --sp-section: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --sp-gutter: clamp(1rem, 0.6rem + 2vw, 2rem);

  /* Largeurs */
  --w-page: 1200px;
  --w-wide: 1320px;
  --w-text: 38rem;
  --w-lead: 34rem;
  --w-narrow: 46rem;

  /* Rayons */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Élévation : ombres multicouches douces */
  --e-0: none;
  --e-1: 0 1px 1px rgb(12 43 74 / 0.04), 0 2px 4px rgb(12 43 74 / 0.05);
  --e-2: 0 1px 2px rgb(12 43 74 / 0.05), 0 4px 10px rgb(12 43 74 / 0.06), 0 12px 24px -6px rgb(12 43 74 / 0.08);
  --e-3: 0 2px 4px rgb(12 43 74 / 0.05), 0 10px 24px -4px rgb(12 43 74 / 0.10), 0 30px 60px -18px rgb(12 43 74 / 0.22);
  --e-4: 0 4px 8px rgb(7 28 49 / 0.10), 0 24px 48px -12px rgb(7 28 49 / 0.35), 0 60px 120px -30px rgb(7 28 49 / 0.55);
  --e-dark: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 20px 40px -16px rgb(0 0 0 / 0.45), 0 50px 90px -40px rgb(0 0 0 / 0.6);
  --e-btn: 0 1px 2px rgb(7 28 49 / 0.2), 0 6px 16px -4px rgb(15 76 129 / 0.45);
  --e-btn-safety: 0 1px 2px rgb(7 28 49 / 0.25), 0 8px 22px -6px rgb(245 183 0 / 0.55);

  /* Mouvement */
  --d-fast: 160ms;
  --d-base: 260ms;
  --d-slow: 700ms;
  --d-mesh: 26s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --reveal-shift: 18px;

  /* Plans */
  --z-base: 0;
  --z-raised: 2;
  --z-overlay: 10;
  --z-header: 50;
  --z-skip: 100;

  /* Divers */
  --header-h: 68px;
  --waterline-h: clamp(36px, 5vw, 80px);
  --focus-ring: 0 0 0 3px var(--c-focus);

  /* Contexte « profondeurs » : couleurs des zones sombres (hero, sections
     sombres, en-tête, pied de page). Le thème clair ne redéfinit que ces
     tokens et ceux des surfaces sombres ci-dessus. */
  --x-strong: var(--c-white);
  --x-accent: var(--c-ice);
  --x-accent-soft: var(--c-ice-soft);
  --x-chrome: var(--c-trench);
  --x-wave-abyss: var(--c-trench);
  --x-wave-deep: var(--c-deep);
  --x-berg-tip: var(--c-white);
  --x-safety: var(--c-safety);
  color-scheme: dark light;
}

/* Thème clair « Grand bleu, surface » : choisi par le visiteur avec le
   bouton de l'en-tête (le thème sombre reste celui par défaut). Mêmes
   couleurs de marque, les profondeurs deviennent des bleus glace. */
:root[data-theme="light"] {
  --c-light-trench: #D6E7F4;    /* glace soutenue, pendant clair de la fosse */
  --c-light-deep: #F3F8FC;      /* glace très légère, pendant clair du profond */

  --x-strong: var(--c-ink);
  --x-accent: var(--c-blue);
  --x-accent-soft: var(--c-deep);
  --x-chrome: var(--c-ice-mist);
  --x-wave-abyss: var(--c-light-trench);
  --x-wave-deep: var(--c-light-deep);
  --x-berg-tip: var(--c-blue);
  --x-safety: var(--c-safety-ink);

  --c-text-on-dark: var(--c-ink);
  --c-text-on-dark-muted: #3C4A57;
  --c-link-on-dark: var(--c-blue);
  --c-line-on-dark: rgb(15 76 129 / 0.16);
  --c-surface-dark: var(--c-white);
  --c-surface-dark-solid: var(--c-ice-mist);
  --c-glass: rgb(255 255 255 / 0.86);
  --c-glass-edge: rgb(15 76 129 / 0.16);
  --c-glass-highlight: rgb(15 76 129 / 0.05);
  --c-header: rgb(249 247 242 / 0.94);
  --c-ok-on-dark: var(--c-ok);

  --c-mesh-ice: rgb(143 199 232 / 0.45);
  --c-mesh-blue: rgb(143 199 232 / 0.55);
  --c-mesh-soft: rgb(255 255 255 / 0.7);
  --c-mesh-safety: rgb(245 183 0 / 0.14);

  --g-abyss: linear-gradient(180deg, var(--c-light-trench) 0%, var(--c-ice-mist) 45%, var(--c-light-deep) 100%);
  --g-abyss-reverse: linear-gradient(180deg, var(--c-light-deep) 0%, var(--c-ice-mist) 55%, var(--c-light-trench) 100%);

  --e-dark: var(--e-3);
  color-scheme: light;
}