/* =========================================================================
   LVMP — Jetons de design
   Ce fichier ne contient QUE des variables. Aucun sélecteur d'élément,
   aucun reset, aucune mise en page : tout cela vit dans style.css.
   Les noms et les valeurs de la section « contrat » sont figés
   (docs/CONTRAT.md §3, §4, §5) — ne pas renommer, ne pas remplacer.
   Ratios de contraste vérifiés par calcul : voir docs/design-system.md
   ========================================================================= */

:root{

  /* ---- Couleurs — CONTRAT §3, valeurs figées -------------------------- */

  --void:#08090C;                       /* fond principal — jamais de noir pur */
  --navy:#132A4F;                       /* couleur du monogramme LVMP */
  --navy-deep:#0B1729;                  /* fonds de section alternés */

  --ivory:#F4EEE2;                      /* texte principal — 17,2:1 sur --void */
  --ivory-soft:rgba(244,238,226,.62);   /* texte secondaire — 6,8:1 sur --void */

  --champagne:#C9A96B;                  /* filets, numéros, focus — DÉCORATIF uniquement */
  --champagne-text:#D9BE86;             /* seule teinte champagne autorisée pour du texte */

  --line:rgba(244,238,226,.14);         /* séparateurs — non textuel, exempt de ratio */

  --neon:#FFFFFF;                       /* réseau du hero (CONTRAT §18) — lumière, jamais du texte */

  /* Obligatoire sous tout texte posé sur un média. La zone lisible est le
     bas du dégradé : au-delà de ~23 % de sa hauteur l'opacité tombe sous le
     seuil des 4,5:1 dans le pire cas (image claire). Détail dans la doc. */
  --scrim:linear-gradient(to top,
            rgba(8,9,12,.86) 0%,
            rgba(8,9,12,.15) 62%,
            transparent 100%);

  /* ---- Typographie — CONTRAT §4 --------------------------------------- */
  /* Le chargement des polices est fait dans le HTML, pas ici : pas d'@import. */

  --font-display:'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Échelle fluide, bornée entre 375px et 1440px de viewport.
     Chaque clamp() atteint sa borne basse à 375px et sa borne haute à 1440px. */

  --fs-display:clamp(3rem,    1.42rem + 6.76vw, 7.5rem);   /*  48 → 120px — titre du hero */
  --fs-h1:     clamp(2.25rem, 1.46rem + 3.38vw, 4.5rem);   /*  36 →  72px */
  --fs-h2:     clamp(1.75rem, 1.31rem + 1.88vw, 3rem);     /*  28 →  48px */
  --fs-h3:     clamp(1.25rem, 1.07rem + .75vw,  1.75rem);  /*  20 →  28px */
  --fs-body:   clamp(1rem,     .96rem + .19vw,  1.125rem); /*  16 →  18px */
  --fs-small:  clamp(.875rem,  .85rem + .09vw,  .9375rem); /*  14 →  15px */
  --fs-eyebrow:clamp(.75rem,   .73rem + .09vw,  .8125rem); /*  12 →  13px — capitales interlettrées */

  --lh-tight:1.08;                      /* display et h1 en Cormorant */
  --lh-normal:1.6;                       /* corps de texte */
  --lh-loose:1.85;                       /* paragraphes isolés, légendes aérées */

  --ls-wide:.18em;                       /* CONTRAT §4 — capitales des sur-titres */
  --ls-tight:-.01em;                     /* rattrape la chasse de Cormorant en grand corps */

  /* ---- Espacement — CONTRAT §5, rythme 8px ---------------------------- */

  --sp-1:.5rem;
  --sp-2:1rem;
  --sp-3:1.5rem;
  --sp-4:2rem;
  --sp-5:3rem;
  --sp-6:4.5rem;
  --sp-7:7rem;
  --sp-8:10rem;

  /* ---- Conteneurs — CONTRAT §5 ---------------------------------------- */

  --container:1240px;
  --container-narrow:760px;
  --gutter:clamp(1.5rem, 5vw, 5rem);

  /* ---- Animation — CONTRAT §5 ----------------------------------------- */

  --ease:cubic-bezier(.16,1,.3,1);
  --dur-s:220ms;
  --dur-m:480ms;
  --dur-l:900ms;

  /* ---- Rayons ---------------------------------------------------------- */
  /* Volontairement quasi nuls : la marque n'a pas de coins ronds. */

  --radius-s:2px;
  --radius-m:4px;

  /* ---- Plans (z-index) -------------------------------------------------- */
  /* Trois paliers de 100, rien entre les deux. Le seuil est au-dessus de
     tout : c'est le voile de chargement, il doit masquer la page entière. */

  --z-header:100;
  --z-modal:200;
  --z-threshold:300;

  /* ---- Profondeur ------------------------------------------------------- */
  /* Sur #08090C une ombre portée noire est invisible (1,05:1 contre le fond).
     Cette ombre ne sert donc QUE lorsque l'élément chevauche un média : là
     elle décolle réellement la surface. Sur fond plat, la profondeur vient
     du palier de valeur --void → --navy-deep et d'un filet --line en arête,
     pas d'ici. Voir docs/design-system.md § Profondeur. */

  --shadow-lift:0 40px 120px -24px rgba(0,0,0,.9);
}

/* Mouvement réduit : on neutralise les durées et la courbe. Les hooks JS du
   CONTRAT §6 gèrent le reste (parallaxe, scroll-expand, Lenis) de leur côté. */
@media (prefers-reduced-motion:reduce){
  :root{
    --dur-s:1ms;
    --dur-m:1ms;
    --dur-l:1ms;
    --ease:linear;
  }
}