/* ============================================================
   Design tokens — heleneguillon.fr
   Source : _pre-dev/design/design-tokens.css
   Ajustements faits à l'intégration (relevés au pixel sur
   landing_page_hg_apercu.pdf, 12 artboards 1920×1080) :
     · --color-navy passe de #04263a (échantillon) à #012236
       (valeur exacte des spans texte + aplats de boutons du .ai)
     · ajout des tokens manquants pour l'intégration :
       échelle typo complémentaire, épaisseurs de filets,
       durées d'animation, variante vermillon accessible.
   Règle : aucune couleur / taille en dur dans style.css.
   ============================================================ */

:root {
  /* --- Couleurs de marque (confirmées) --- */
  --color-cream:      #f0ebdd;  /* fond principal */
  --color-vermillon:  #e84f37;  /* accent / blocs pleins */
  --color-navy:       #012236;  /* boutons, texte fort — relevé au pixel */

  /* --- Neutres dérivés --- */
  --color-cream-200:  #e9e1d3;  /* variations de fond / survols */
  --color-border:     #d1c8bd;  /* filets, contours de cartes */
  --color-navy-700:   #102f40;  /* nuance marine intermédiaire */

  /* Variante vermillon assombrie pour le TEXTE FIN sur crème.
     Vermillon pur sur crème = 3,15:1 → insuffisant en AA sous 24px.
     #b83a22 sur crème = 4,8:1 → AA. Réservée au petit texte
     (pied de page, mentions) ; les titres restent en vermillon pur. */
  --color-vermillon-deep: #b83a22;

  /* --- Rôles sémantiques --- */
  --bg:                var(--color-cream);
  --bg-invert:         var(--color-vermillon);
  --text:              var(--color-navy);
  --text-on-vermillon: var(--color-cream);
  --btn-bg:            var(--color-navy);
  --btn-text:          var(--color-cream);
  --link:              var(--color-vermillon);
  --rule:              var(--color-vermillon);   /* filets du pied de page */

  /* --- Typographie : Juana (fonte unique) ---
     Auto-hébergée via fonts.css. Licence actuelle = Desktop
     uniquement → licence WEB requise avant mise en ligne ;
     d'ici là le fallback Georgia/serif prend le relais. */
  --font-serif: "Juana", "Georgia", "Times New Roman", serif;

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* --- Échelle typographique (fluide via clamp) ---
     Les `vw` sont calés sur la maquette (base 1920 : 100 / 72 / 48 / 36 /
     30 / 24 / 21 px) : à 1920px de large, chaque taille retombe exactement
     sur l'artboard ; en dessous, tout descend proportionnellement, borné
     par un plancher lisible (corps ≥ 16px). */
  --fs-hero:    clamp(2.25rem, 3.75vw, 4.5rem);    /* titre hero (72) */
  --fs-display: clamp(2.5rem, 5.2vw, 6.25rem);     /* bannière manifeste (100) */
  --fs-price:   clamp(2.75rem, 5.2vw, 6.25rem);    /* 450 € / jour (100) */
  --fs-h2:      clamp(1.75rem, 2.5vw, 3rem);       /* titres de section (48) */
  --fs-h3:      clamp(1.125rem, 1.6vw, 1.875rem);  /* sous-titres, étapes (30) */
  --fs-lead:    clamp(1.125rem, 1.875vw, 2.25rem); /* chapô, sous-titres (36) */
  --fs-body:    clamp(1rem, 1.25vw, 1.5rem);       /* corps (24) */
  --fs-ui:      clamp(0.9375rem, 1.1vw, 1.3125rem);/* boutons, puces (21) */
  --fs-small:   0.875rem;                         /* mentions (14) */
  --fs-xsmall:  0.75rem;                          /* ligne légale (11) */

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.55;
  --ls-tight:   -0.01em;

  /* --- Espacement (base 8) --- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;
  --section-padding: clamp(3rem, 8vw, 7rem);
  --gutter: clamp(1.25rem, 5vw, 4rem);

  /* --- Rayons, filets & largeurs --- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;    /* cartes tarif */
  --radius-pill: 999px;   /* puces de réassurance, pastilles d'étapes */
  --hairline:    1px;     /* filets vermillon (frise, cartes, footer) */
  --content-max: 1200px;
  --wide-max:    1560px;  /* blocs pleine largeur bordés (05, frise, footer) */
  --header-h:    clamp(4rem, 7vw, 5.5rem);

  /* --- Mouvement --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur:      280ms;
  --dur-slow: 640ms;
  --dur-orbit: 22s;   /* rotation lente du sceau — repère de défilement, var. A */

  /* --- Breakpoints (référence, non consommables en @media) --- */
  --bp-mobile:  480px;
  --bp-tablet:  768px;
  --bp-desktop: 1200px;
}