/* ==========================================================================
   Freelane DS v2 — 08/10/2026
   Source : tokens W3C (98 tokens, QA), page Figma 612:3,
   note d'intégration 614:2. Maquette d'origine : Homepage desktop v3 (537:4).

   Fichier unique. Les composants de la homepage lisent ces variables.
   Le site est du HTML statique : l'équivalent de next/font est @font-face
   sur des woff2 auto-hébergés.

   Typo (décision du 08/10, note 614:2) :
   - titres : OT Jubilee Regular 400. Italic seulement sur les <em>
     d'emphase des titres de section (style h1-italic).
   - hero et montants (« 59 € ») : style h2, 44 px, Regular.
     537:4 les montre encore en Merriweather Light 48 : écart assumé.
   - texte courant : Inter. « Votre situation » aussi (Inter).
   - General Sans : fausses cartes d'interface seulement
     (comparatif, trajectoire, message de l'expert, frise Démarrage).
   - Geist Mono : jalons « J0 » et « J+7 ouvrés » seulement.
   ========================================================================== */

/* --- Inter (Google Fonts, variable, latin) ------------------------------- */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Fallback';
  src: local('Liberation Sans'), local('Arial');
  font-weight: 100 900;
  font-style: normal;
  size-adjust: 107.64%;
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0%;
}

/* --- Geist Mono (Google Fonts, latin, graisse 400) ----------------------- */
@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fonts/GeistMono-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Merriweather : auto-hébergée, non appliquée. ------------------------
   Le style Figma du H1 hero s'appelle encore Merriweather. Le DS v2
   et la décision assumée le remplacent par Jubilee h2. ----------------- */
@font-face {
  font-family: 'Merriweather';
  src: url('/assets/fonts/Merriweather-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Merriweather';
  src: url('/assets/fonts/Merriweather-italic-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- General Sans : déclarée dans freelane.css (Fontshare). -------------- */

/* --- OT Jubilee VF --------------------------------------------------------
   TODO(typo): aucun woff2 licencié d'OT Jubilee n'est dans le repo.
   Ne pas y déposer une copie non officielle.
   Fichiers attendus, dans /assets/fonts/ :
   - OTJubilee-Regular.woff2  graisse 400 (tous les titres, y compris le hero h2)
   - OTJubilee-Italic.woff2   graisse 400 italique (emphase des titres de section)
   La graisse 300 n'est plus demandée : tous les titres sont en Regular 400.
   Précharger uniquement OTJubilee-Regular.woff2 (hero, au-dessus de la
   ligne de flottaison). Ne pas précharger l'italique.
   Tant que le fichier manque, le <link rel="preload"> reste commenté
   dans index.html pour ne pas concurrencer le LCP avec un 404.
   Recalibrer size-adjust / ascent-override / descent-override /
   line-gap-override du fallback si le CLS à 390 px dépasse 0,1 au swap.
   -------------------------------------------------------------------------- */
/*
@font-face {
  font-family: 'OT Jubilee VF';
  src: url('/assets/fonts/OTJubilee-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'OT Jubilee VF';
  src: url('/assets/fonts/OTJubilee-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
*/

@font-face {
  font-family: 'OT Jubilee Fallback';
  src: local('Liberation Serif'), local('Times New Roman');
  font-weight: 400;
  font-style: normal;
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'OT Jubilee Fallback';
  src: local('Liberation Serif Italic'), local('Times New Roman Italic');
  font-weight: 400;
  font-style: italic;
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  /* Familles — le fallback métrique reste dans la pile display
     tant que les woff2 licenciés manquent. */
  --font-family-display: 'OT Jubilee VF', 'OT Jubilee Fallback', serif;
  --font-family-body: 'Inter', 'Inter Fallback', sans-serif;
  --font-family-mock: 'General Sans', 'Inter', sans-serif;
  --font-family-mono: 'Geist Mono', ui-monospace, monospace;

  /* color/text */
  --color-text-primary: #23120B;
  --color-text-secondary: #5C5049;
  --color-text-muted: #6D625D;
  --color-text-accent: #835E14;
  --color-text-on-brand: #F6E7D4;
  --color-text-on-brand-secondary: #C9B9A9;

  /* color/ring */
  --color-ring-focus-light: #835E14;
  --color-ring-focus-dark: #C9A24D;

  /* color/brand */
  --color-brand-surface: #3C2416;
  --color-brand-surface-deep: #2A1810;
  --color-brand-surface-accent: #371506;

  /* color/accent — or : fonds et décor. Jamais du texte sur fond clair. */
  --color-accent-gold: #C9A24D;
  --color-accent-gold-deep: #835E14;

  /* color/pastille */
  --color-pastille-yellow-bg: #FFE480;
  --color-pastille-yellow-text: #332905;

  /* color/button */
  --color-button-hero-bg: #FFF5F0;

  /* color/neutral */
  --color-neutral-cream: #F0EFEA;
  --color-neutral-paper: #F8F6F3;
  --color-neutral-white: #FFFFFF;
  --color-neutral-blush-50: #FCF7F4;
  --color-neutral-blush-100: #F5ECE6;
  --color-neutral-peach: #FFE8DC;
  --color-neutral-blush-200: #EDE2DB;
  --color-neutral-blush-150: #F1E8E2;

  /* color/border
     subtle et default : séparateurs seulement.
     control : seul contour des champs et des contrôles. */
  --color-border-strong: #8A8680;
  --color-border-subtle: #E2DED6;
  --color-border-default: #E6E0DD;
  --color-border-on-brand: #533D30;
  --color-border-control: #837F7A;

  /* color/surface — alias résolu de color/text/primary */
  --color-surface-inverse: var(--color-text-primary);

  /* space */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;
  --space-192: 192px;

  /* radius — 14/15 → xl 16, 18 → 2xl 20, 6 → md 8, 2/3 → sm 4 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* shadow */
  --shadow-sm: 0 1px 2px #23120B14;
  --shadow-md: 0 4px 12px #00000026;
  --shadow-lg: 0 24px 48px -12px #14080266;
  --shadow-ring-subtle: 0 0 0 1px #23120B1A;
  --shadow-ring-focus: 0 0 0 2px #835E14;
  --shadow-ring-focus-dark: 0 0 0 2px #C9A24D;

  /* motion — spec v1.1.
     Courbe de liste, ease des chiffres, sortie spec, zoom 900 ms,
     compteur 825 ms et parallaxe 14 px : validés par Fayaz sur cette passe. */
  --motion-duration-exit: 180ms;
  --motion-duration-fade-reduced: 150ms;
  --motion-duration-menu: 240ms;
  --motion-duration-text: 325ms;
  --motion-duration-stat: 350ms;
  --motion-duration-base: 375ms;
  --motion-duration-title: 475ms;
  --motion-duration-zoom: 900ms;
  --motion-duration-counter: 825ms;
  --motion-easing-standard: cubic-bezier(0.42, 0, 0.58, 1);
  --motion-easing-list: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --motion-easing-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --motion-easing-emphasized-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-easing-exit: cubic-bezier(0.55, 0, 1, 0.45);
  --motion-blur-enter: 4px;
  --motion-distance-title: 10px;
  --motion-distance-small: 6px;
  --motion-distance-parallax: 14px;
  --motion-scale-hero: 1.04;
  --motion-stagger-desktop: 50ms;
  --motion-stagger-mobile: 40ms;

  /* typography/display — chiffres clés */
  --type-display-weight: 400;
  --type-display-size: 80px;
  --type-display-leading: 1;
  --type-display-tracking: -0.03em;

  /* typography/h1 — titres de section */
  --type-h1-weight: 400;
  --type-h1-size: 54px;
  --type-h1-leading: 1.04;
  --type-h1-tracking: -0.03em;

  /* typography/h2 — hero et montants */
  --type-h2-weight: 400;
  --type-h2-size: 44px;
  --type-h2-leading: 1;
  --type-h2-tracking: -0.04em;

  /* typography/h3 — onglets situation */
  --type-h3-weight: 400;
  --type-h3-size: 36px;
  --type-h3-leading: 1.07;
  --type-h3-tracking: -0.025em;

  /* typography/h4 — titres de bloc méthode */
  --type-h4-weight: 400;
  --type-h4-size: 30px;
  --type-h4-leading: 1.03;
  --type-h4-tracking: -0.02em;

  /* typography/h5 — métiers */
  --type-h5-weight: 400;
  --type-h5-size: 26px;
  --type-h5-leading: normal;
  --type-h5-tracking: 0em;

  /* typography/h6 — FAQ et étapes */
  --type-h6-weight: 400;
  --type-h6-size: 22px;
  --type-h6-leading: normal;
  --type-h6-tracking: 0em;

  /* typography/title-s — titres des cartes d'illustration */
  --type-title-s-weight: 400;
  --type-title-s-size: 16px;
  --type-title-s-leading: 1.31;
  --type-title-s-tracking: 0em;

  /* typography/lead */
  --type-lead-weight: 300;
  --type-lead-size: 18px;
  --type-lead-leading: 1.6;
  --type-lead-tracking: 0em;

  /* typography/body-l */
  --type-body-l-weight: 400;
  --type-body-l-size: 16px;
  --type-body-l-leading: 1.625;
  --type-body-l-tracking: -0.02em;

  /* typography/body-m */
  --type-body-m-weight: 400;
  --type-body-m-size: 15px;
  --type-body-m-leading: 1.5;
  --type-body-m-tracking: -0.015em;

  /* typography/body-s */
  --type-body-s-weight: 400;
  --type-body-s-size: 14px;
  --type-body-s-leading: 1.5;
  --type-body-s-tracking: 0em;

  /* typography/caption */
  --type-caption-weight: 400;
  --type-caption-size: 13px;
  --type-caption-leading: 1.46;
  --type-caption-tracking: -0.006em;

  /* typography/eyebrow */
  --type-eyebrow-weight: 500;
  --type-eyebrow-size: 12px;
  --type-eyebrow-leading: normal;
  --type-eyebrow-tracking: 0.1em;

  /* typography/button */
  --type-button-weight: 500;
  --type-button-size: 14px;
  --type-button-leading: 1.21;
  --type-button-tracking: -0.02em;

  /* typography/pastille */
  --type-pastille-weight: 600;
  --type-pastille-size: 12px;
  --type-pastille-leading: normal;
  --type-pastille-tracking: 0em;

  /* typography/mock */
  --type-mock-label-m-weight: 500;
  --type-mock-label-m-size: 14px;
  --type-mock-label-m-leading: 1.43;
  --type-mock-label-m-tracking: -0.01em;

  --type-mock-body-m-weight: 400;
  --type-mock-body-m-size: 14px;
  --type-mock-body-m-leading: 1.43;
  --type-mock-body-m-tracking: -0.01em;

  --type-mock-body-s-weight: 400;
  --type-mock-body-s-size: 13px;
  --type-mock-body-s-leading: 1.46;
  --type-mock-body-s-tracking: -0.006em;

  --type-mock-caption-weight: 400;
  --type-mock-caption-size: 12px;
  --type-mock-caption-leading: 1.42;
  --type-mock-caption-tracking: 0em;

  --type-mock-tag-weight: 500;
  --type-mock-tag-size: 12px;
  --type-mock-tag-leading: 1.42;
  --type-mock-tag-tracking: 0em;

  /* typography/mono/label */
  --type-mono-label-weight: 400;
  --type-mono-label-size: 12px;
  --type-mono-label-leading: normal;
  --type-mono-label-tracking: 0em;
}