/* ==========================================================================
   YONA COSMETICS : jetons de direction artistique.
   Seul fichier à toucher pour changer l'esthétique. Le moteur (styles.css)
   ne lit que des variables, il ne porte aucune valeur esthétique en dur.

   COULEURS : mesurées au pixel sur les vraies photos de la séance du
   10/09/2026, pas choisies au goût.
     bleu de marque .... #1EA2CC  (bord de raccord de la photo du héros :
                                   c'est ce bord qui doit se confondre avec
                                   le panneau de texte)
     carmin ............ #750102  (fond des photos 13/50)
     ivoire ............ #F6F0EB  (la soie des photos 20/27/35/40/42)

   Le bleu et le carmin sont les deux valeurs à ne pas déplacer à la légère :
   changer l'un sans rechanger la photo qui va avec fait réapparaître la
   couture entre le panneau et l'image.

   TYPO (V9, 17/09) : UNE seule police pour lire, Figtree : texte, titres, prix et chiffres.
   Troisième refus de Rayan sur le titrage (« change la police pour récupérer de la
   visibilité, c'est trop bizarre, notamment sur les chiffres ; je t'avais déjà dit d'arrêter
   cette police ») : après Newsreader 600, Plus Jakarta Sans 700 puis Playfair Display 500, on
   ne propose plus une police de titrage de plus, on RETIRE la couche. Les deux empattements
   dessinaient des chiffres elzéviriens, qui descendent sous la ligne (le « 3 » de « 3 packs »,
   les prix), et leurs déliés se perdaient sur le fond de soie. Figtree a des chiffres droits
   et c'est la police que Rayan lit déjà partout sans gêne. La Didone ne reste que sur le mot
   « YONA » de l'entête : c'est un logo, celui des flacons, pas un texte à lire.
   Corps 17 px sur mobile, 18 px sur bureau. Rien sous 14 px, sauf les
   petites capitales espacées, plancher 13 px, une par section.
   Aucun lissage forcé des glyphes : les déliés y disparaissent.
   ========================================================================== */

:root{
  /* --- matière ------------------------------------------------------- */
  --ivoire:#F6F0EB;
  --ivoire-clair:#FCFAF8;
  --sable:#EDE3D8;
  --encre:#12191E;
  --encre-nuit:#0C1216;
  --encre-douce:#55636B;
  --bleu:#1EA2CC;
  --bleu-profond:#0186B2;
  --bleu-nuit:#01516E;
  --carmin:#750102;
  --cuivre:#A0744C;        /* mesuré, photo 02 : FERTILIZER sur le cacao */
  --cuivre-nuit:#6C2404;   /* mesuré, photo 02 : le brun profond du cacao */
  --or:#7A5C1E;
  --or-clair:#D9B871;
  --blanc:#FFFFFF;
  --filet:rgba(18,25,30,.18);
  --filet-fort:rgba(18,25,30,.34);
  --filet-clair:rgba(255,255,255,.30);
  --filet-encre:rgba(18,25,30,.24);   /* filets sur le bleu : encre, pas blanc */

  /* --- typographie ---------------------------------------------------- */
  --f-texte:'Figtree','Figtree repli',"Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-titre:var(--f-texte);    /* titres, prix, chiffres : la police du texte, chiffres droits */
  --f-marque:'Playfair Display','Playfair Display repli',"Iowan Old Style","Palatino Linotype",Georgia,serif;   /* le mot « YONA » de l'entête, et lui seul : la Didone des flacons */

  /* graisses : rien sous 450, titrage à 600 */
  --g-corps:460;
  --g-fort:640;
  --g-titre:560;          /* Figtree : 560, net sans crier (le 700 de Plus Jakarta Sans avait été refusé) */
  --g-marque:500;         /* le mot « YONA » du logo, en Didone : inchangé depuis la V7 */
  --g-label:640;

  /* échelle : ratio d'environ 1,28 ; corps 17 puis 18 px */
  --t-geant:clamp(4.5rem,1.6rem + 12.4vw,13rem);
  --t-display:clamp(2.85rem,1.45rem + 5.9vw,5.9rem);
  --t-h2:clamp(2.05rem,1.5rem + 2.4vw,3.5rem);
  --t-h3:clamp(1.45rem,1.25rem + .85vw,2rem);
  --t-h4:clamp(1.22rem,1.14rem + .34vw,1.4rem);
  --t-corps:clamp(1.0625rem,1.03rem + .16vw,1.125rem);   /* 17 puis 18 px */
  --t-lead:clamp(1.19rem,1.1rem + .42vw,1.4rem);
  --t-petit:1rem;        /* 16 px : les secondaires restent lisibles */
  --t-menu:1rem;         /* 16 px : le menu est une information utile */
  --t-mini:.875rem;      /* 14 px : plancher absolu, mentions de pied */
  --t-label:.8125rem;    /* 13 px : petites capitales, une par section */
  --ls-label:.16em;

  /* --- espace (échelle fluide, aucun @media nécessaire) --------------- */
  --e1:.375rem; --e2:.625rem; --e3:1rem; --e4:1.5rem;
  --e5:clamp(1.85rem,1.5rem + 1.5vw,2.9rem);
  --e6:clamp(2.6rem,2rem + 2.6vw,4.75rem);
  --section:clamp(4.75rem,3rem + 7vw,9.5rem);      /* la fin de page respire */
  --gouttiere:clamp(1.25rem,.75rem + 2.2vw,3.5rem);
  --page:1320px;
  --texte-large:70ch;

  /* --- formes : aucun arrondi, on est en éditorial -------------------- */
  --r-0:0px;

  /* --- texte SUR la photo (V4, retour Rayan R1) -----------------------
     UNE seule recette de voile pour tout le site : mêmes angles, mêmes
     paliers, mêmes opacités. Seule la TEINTE change d'une page à l'autre.
     C'est ce qui fait que dix écrans différents se lisent comme une seule
     matière au lieu de dix bandeaux côte à côte.

     --teinte ....... la couleur de la page (posée par la classe de tête)
     --teinte-force . combien de couleur on verse sur la photo
     --ombre-* ...... les paliers du dégradé qui garantit le contraste
     Mesuré : l'ivoire sur --encre-nuit donne 15,9:1, sur --bleu-nuit 7,6:1,
     sur --cuivre-nuit 9,8:1. Le voile ne descend jamais sous ce qu'il faut
     pour tenir 4,5:1 aux endroits réels du texte. */
  --teinte:var(--encre-nuit);
  --teinte-force:38%;
  --ombre-bas:.86;
  --ombre-milieu:.52;
  --ombre-haut:.10;
  --chapeau-h:clamp(26rem,72svh,38rem);      /* têtes de page intérieures */
  --hero-h:clamp(34rem,92svh,48rem);      /* le héros de l'accueil */

  /* --- mouvement (rare, lent, intentionnel) --------------------------- */
  --duree-reveal:900ms;
  --duree-court:280ms;
  --courbe:cubic-bezier(.22,.61,.36,1);
  --kenburns:30s;
  --defile:38s;
  --diapo:6500ms;          /* un plan du diaporama du héros */
  --fondu:1400ms;          /* le fondu enchaîné entre deux plans */

  /* --- hauteur de l'entête, mesurée par app.js et reposée ici --------- */
  --entete-h:78px;
}