/* =============================================================================
   tokens.css
   -----------------------------------------------------------------------------
   UNIQUEMENT des variables de charte. Aucune règle de mise en page ici.
   Aucune couleur en dur ailleurs dans le projet.

   Valeurs relevées dans l’identité visuelle Innolive (globals.css du projet
   source), pas approximées. Voir docs/IDENTITE-VISUELLE.md.
============================================================================= */

:root {

  /* ---- Couleurs de marque -------------------------------------------------
     Sept couleurs, pas plus. Le bleu et l’orange coexistent volontairement.
     Ni noir pur ni blanc pur : les valeurs absolues tuent la profondeur.     */
  --background:  #FEFEFE;  /* fond de page                                   */
  --ink:         #1B1B1B;  /* texte principal, fonds sombres                 */
  --bleu:        #1F6BFF;  /* accent principal, liens, aplats de titre       */
  --orange:      #FF4D00;  /* accent secondaire, pastilles, surlignes        */
  --muted:       #5C5C5C;  /* légendes et libellés secondaires uniquement    */
  --surface:     #F0F6FC;  /* fonds de section alternés                      */
  --bleu-light:  #D8E2F2;  /* aplats doux, états survolés                    */
  --line:        #C3C4C7;  /* bordures, séparateurs                          */

  /* ---- Dérivées de contraste ---------------------------------------------
     Mesures WCAG 2.1 sur --background :
       --ink        17.08:1  AAA  -> tout le corps de texte
       --muted       6.63:1  AA   -> légendes, libellés, jamais un paragraphe
       --bleu        4.52:1  AA   -> liens et gros titres, pas le corps
     Blanc sur --orange ne fait que 3.33:1. La version assombrie (#D63A00,
     4.70:1) passait AA mais donnait un orange terne, incohérent avec
     l'orange de marque du reste de la page. Décision Alexis : orange de
     marque #FF4D00 partout, fond de bouton compris. --orange-cta-hover reste
     juste assombri pour le survol.                                          */
  --orange-cta:       #FF4D00;
  --orange-cta-hover: #E64500;
  --bleu-hover:       #1557D6;
  --white:            #FFFFFF;

  /* --line ne fait que 1.73:1 sur le fond : suffisant pour un filet
     décoratif, insuffisant pour la bordure d’un champ ou d’un bouton, qui
     doit atteindre 3:1 (WCAG 1.4.11). --line-strong est mesurée à 3.37:1 sur
     --background et 3.13:1 sur --surface.                                   */
  --line-strong:      #8A8B8F;

  /* ---- Couches sur fond sombre ------------------------------------------
     Pas de nouvelle couleur : des voiles de blanc sur --ink. Garde la palette
     à sept teintes tout en donnant de la profondeur aux bandes sombres.     */
  --sur-sombre-1:   rgba(255, 255, 255, 0.04);  /* surface de carte          */
  --sur-sombre-2:   rgba(255, 255, 255, 0.08);  /* surface survolée          */
  --sur-sombre-filet: rgba(255, 255, 255, 0.14);
  --sur-sombre-filet-fort: rgba(255, 255, 255, 0.28);

  /* ---- Familles ---------------------------------------------------------- */
  --font-display: 'Integral CF', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Échelle typographique --------------------------------------------
     Titrage en casse normale, avec italique sur l’ouverture de section : le
     geste du site Innolive. Corps à 17px minimum, la cible a 45 à 60 ans.   */
  --fs-hero:     clamp(2.25rem, 5vw, 4.5rem);
  --fs-section:  clamp(1.875rem, 3.6vw, 3.25rem);
  --fs-sub:      clamp(1.25rem, 2.2vw, 1.625rem);
  --fs-lead:     clamp(1.0625rem, 1.35vw, 1.25rem);
  --fs-body:     1.0625rem;   /* 17px */
  --fs-small:    0.9375rem;   /* 15px, plancher absolu */
  --fs-price:    clamp(2.25rem, 4.5vw, 3.25rem);
  --fs-overline: 0.9375rem;
  --fs-ghost:    clamp(3.5rem, 8vw, 7rem);   /* chiffres fantômes */
  --fs-bandeau:  clamp(2.25rem, 6vw, 5rem);  /* bande défilante */
  --fs-statement: clamp(2rem, 5.2vw, 4.25rem);

  --lh-tight: 1.04;
  --lh-title: 1.1;
  --lh-body:  1.65;

  --ls-hero:     -0.035em;
  --ls-section:  -0.025em;
  --ls-overline:  0.16em;

  /* ---- Courbes signature -------------------------------------------------
     Deux courbes, jamais d’autre. Le mouvement doit être reconnaissable.    */
  --ease-hero:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);

  --dur-reveal: 0.6s;
  --dur-hero:   0.85s;
  --dur-mask:   0.9s;
  --dur-ui:     0.25s;

  /* ---- Rayons ------------------------------------------------------------ */
  --r-sm:   0.5rem;
  --r-md:   1rem;      /* boutons secondaires, aplats de titre */
  --r-lg:   1.5rem;    /* cartes */
  --r-xl:   1.75rem;   /* cadres média */
  --r-2xl:  2.5rem;    /* grands blocs */
  --r-3xl:  3rem;      /* bandes pleine largeur */
  --r-pill: 999px;

  /* ---- Ombres, toujours teintées ---------------------------------------- */
  --shadow-card:  0 14px 40px -16px rgba(27, 27, 27, 0.22);
  --shadow-lift:  0 28px 60px -24px rgba(27, 27, 27, 0.28);
  --shadow-media: 0 40px 90px -45px rgba(31, 107, 255, 0.4);
  --shadow-bleu:  0 30px 70px -30px rgba(31, 107, 255, 0.55);
  --shadow-cta:   0 12px 28px -10px rgba(255, 77, 0, 0.35);
  --shadow-pop:   0 24px 60px -24px rgba(27, 27, 27, 0.45);
  /* Arête intérieure : simule la réfraction d’un bord de verre. */
  --edge-clair:   inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --edge-sombre:  inset 0 1px 0 rgba(255, 255, 255, 0.12);

  /* ---- Rythme vertical et gouttières ------------------------------------ */
  --section-y:    5.5rem;
  --section-y-lg: 8rem;
  --container:    80rem;
  --gutter:       1.25rem;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* ---- Cibles tactiles --------------------------------------------------- */
  --tap: 2.75rem;  /* 44px */

  /* ---- Empilement -------------------------------------------------------- */
  --z-grain:    5;
  --z-header:   30;
  --z-sticky:   40;
  --z-lightbox: 60;
}