/* ============================================================
   OVERSE — Design tokens
   Source : variables nommées du fichier Figma M54DWfjHctWs4xsMFfsmdJ
            + computed styles du site live (overse.ai)
   Règle : tailles de police = live · tout le reste = Figma
   ============================================================ */
:root {
  /* ---------- Couleurs de marque ---------- */
  --c-ink: #201e1c;          /* color/grey/12 · overse.ai/Dune — titres, bloc CTA, bouton newsletter */
  --c-ink-ui: #1f1d1c;       /* color/grey/12 2 — textes des maquettes UI */
  --c-cream: #faf9f8;        /* color/grey/98 2 — panneaux r40, pilules, cartes bento */
  --c-white: #ffffff;
  --c-coral: #f28a6b;        /* color/red/68 — boutons, icônes, courbe, accordéon ouvert */
  --c-coral-text: #f1896a;   /* color/red/68 2 — texte du badge ROI */
  --c-coral-soft: rgba(232, 121, 88, 0.1); /* color/red/63 10% — fond du badge ROI */
  --c-orange-link: #ff9352;  /* color/orange/66 3 — lien « Yod Lynci » */
  --c-text: #5a5857;         /* color/grey/35 4 — gris texte courant + 2e rond d'icône */
  --c-text-ui: #5a5856;      /* color/grey/35 5 — gris des maquettes UI */
  --c-title-alt: #333333;    /* color/grey/20 — titres de la grille, H5, titres d'étape */
  --c-dot: #c4c4c4;          /* color/grey/77 — pastille intérieure des étapes */
  --c-star: #fac666;         /* étoiles des témoignages */

  /* ---------- Bordures : 4 valeurs distinctes, ne pas confondre ---------- */
  --b-nav: rgba(32, 30, 28, 0.08);      /* color/grey/12 8%  — pilule de navigation */
  --b-pill: rgba(94, 96, 117, 0.12);    /* color/blue/41 12% — pilules, newsletter, séparateur footer */
  --b-faq: rgba(12, 14, 23, 0.1);       /* color/blue/7 10%  — séparateurs FAQ, anneau du bouton +/− */
  --b-card: rgba(55, 50, 47, 0.08);     /* color/grey/20 8%  — cartes de maquette UI */
  --b-btn-white: #ececec;               /* color/grey/93 3   — bordure du bouton blanc */
  --b-badge: #eaedf2;                   /* color/grey/93 4   — micro-badges */

  /* ---------- Ombres ---------- */
  --sh-card: 0 3px 4px rgba(0, 0, 0, 0.05);      /* cartes UI, pilule de nav */
  --sh-card-soft: 0 3px 2px rgba(0, 0, 0, 0.05); /* cartes de la Feature 02 */
  --sh-btn-white: 0 1px 6px rgba(0, 0, 0, 0.04); /* bouton secondaire */
  --sh-float: 0 8px 6.5px rgba(0, 0, 0, 0.2);    /* avatars flottants du footer */
  --sh-tilt: 0 2.681px 1.787px rgba(0, 0, 0, 0.05); /* carte inclinée « 65 » */
  --sh-cta: 0 4px 20px rgba(242, 138, 107, 0.4); /* bouton flottant Calendly */
  --sh-cta-hover: 0 6px 30px rgba(242, 138, 107, 0.6);

  /* ---------- Typographie ---------- */
  --f-sans: 'Uncut Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-display: 'Anton', 'Arial Narrow', sans-serif;     /* questions FAQ, titres d'étape */
  --f-manrope: 'Manrope', var(--f-sans);                /* H2 du bloc méthode, un seul usage */
  --f-num: 'Arial Black', Arial, sans-serif;            /* chiffres géants 1-2-3 (Gilroy non servi) */
  --f-ui: 'Sansation', var(--f-sans);                   /* textes des maquettes UI */
  --f-ui-alt: 'Poppins', var(--f-sans);                 /* listes et badges des maquettes UI */
  --f-inter: 'Inter', var(--f-sans);                    /* eyebrows et sous-titres gras */

  /* Échelle — tailles du live, interlignes et letter-spacing de Figma */
  --fs-h1: 64px;      --lh-h1: 76.8px;   --ls-h1: -3px;
  --fs-h1-cta: 72px;  --lh-h1-cta: 82.8px; --ls-h1-cta: -2px;  /* footer */
  --fs-h2: 48px;      --lh-h2: 62.4px;   --ls-h2: -2px;
  --fs-h2-alt: 40px;  --lh-h2-alt: 48px; --ls-h2-alt: -1.2px;  /* Manrope, bloc méthode */
  --fs-h3: 36px;      --lh-h3: 50.4px;   --ls-h3: -1px;        /* newsletter */
  --fs-h4: 24px;      --lh-h4: 33.6px;   --ls-h4: -0.5px;      /* cartes bento */
  --fs-lead: 20px;    --lh-lead: 34px;                          /* accroches, titres de grille */
  --fs-hero-lead: 18px; --lh-hero-lead: 30.6px;                 /* paragraphe du hero (mesuré live) */
  --fs-body: 16px;    --lh-body: 27.2px; --ls-body: -0.2px;
  --fs-eyebrow: 16px; --lh-eyebrow: 22.4px;                     /* Inter Bold corail */
  --fs-sub: 18px;     --lh-sub: 25.2px;                         /* Inter Bold, H5 centré */
  --fs-pill: 14px;    --lh-pill: 23.8px;                        /* pilule-badge standard */
  --fs-num: 204px;    --lh-num: 204px;   --ls-num: -4.08px;
  --op-num: 0.05;                                               /* opacité des chiffres géants */

  /* ---------- Layout ---------- */
  --container: 1320px;   /* variable Figma width/1320 */
  --pad-x: 30px;         /* padding latéral des sections */
  --pad-x-mobile: 20px;

  /* ---------- Rayons ---------- */
  --r-panel: 40px;   /* corner radius/40 — grands panneaux, pilule « Icon Box » */
  --r-card: 16px;    /* cartes, boutons, panneau FAQ */
  --r-field: 20px;   /* formulaire newsletter, pastille d'étape */
  --r-faq-btn: 30px; /* width/30 — bouton +/− */
  --r-link: 10px;    /* liens de nav et de footer */
  --r-pill: 100px;   /* pilules-badges */
  --r-tilt: 14.3px;  /* carte inclinée « 65 » */
  --r-badge: 18.36px;/* micro-badges */
  --r-avatar: 27.54px;

  /* ---------- Espacements nommés (variables Figma) ---------- */
  --sp-7: 7px;    --sp-8: 8px;    --sp-10: 10px;  --sp-12: 12px;
  --sp-16: 16px;  --sp-21: 21px;  --sp-24: 24px;  --sp-42: 42px;
  --sp-54: 54px;  --sp-55: 55px;  --sp-60: 60px;  --sp-65: 65px;
  --sp-90: 90px;

  /* ---------- Marquees (vitesses mesurées sur le live) ---------- */
  --mq-hero: 90px;    /* logos clients, vers la gauche */
  --mq-row1: 40px;    /* intégrations rangée 1, vers la gauche */
  --mq-row2: 35px;    /* rangée 2, vers la droite */
  --mq-row3: 30px;    /* rangée 3, vers la gauche */
}