/*******************
  JETONS DE LA REFONTE (14/10/2026)
  Source : BAT SHOOLDY V7 (PSD desktop 1920 px, planche mobile 780 px = 2 x 390).
  Valeurs relevées dans le PSD (remplissage des formes, taille x échelle des calques
  texte), pas à la pipette. Les anciens jetons de start.css pointent vers ceux-ci.

  Tailles fluides : interpolation linéaire entre 390 px et 1920 px de fenêtre,
  bornée aux deux bouts. Toutes les cotes sont à 90 % de la maquette (demande
  d'Antoine du 14/10/2026) : borne haute = 0,9 x PSD desktop. Planchers de
  lisibilité en mobile : texte 14 px, petit texte 12 px, mentions 11 px.
*******************/

:root {
  /* Couleurs */
  --c-accent: #08b8b6;          /* turquoise de marque : planche mobile, thème actuel */
  --c-btn: var(--c-accent);     /* fond des boutons pleins */
  --c-ink: #303143;             /* texte courant des maquettes */
  --c-ink-soft: #1f2b38;        /* textes de réassurance ; ancien --black */
  --c-black: #000;
  --c-white: #fff;
  --c-beige: #f9f5f1;           /* fonds beiges, pastilles de réassurance */
  --c-menthe: #cdf1ec;          /* cartes menthe de la page « La marque » (29/10) */
  --c-menthe-fort: #7eddd3;     /* « Rond menthe soutenue » (page « La marque ») */
  --c-sable: #ead8c4;           /* « Rond sable doré » (page « La marque ») */
  --c-sable-clair: #e8ded4;     /* points éteints des chiffres (page « La marque ») */
  --c-bandeau: #232223;         /* bandeau « 30 nuits d'essai » */
  --c-alerte: #c62828;          /* avertissements (profil « opéré » de C'est pour qui, 29/10) */
  --c-header-bar: rgba(239, 236, 234, 0.7); /* barre du header posée sur le hero */
  --c-line: rgba(48, 49, 67, 0.2);          /* filets (Ligne 5, opacité 20 %) */
  --c-field-border: rgba(48, 49, 67, 0.5);  /* contour des champs (opacité 50 %) */

  /* Polices */
  --f-base: 'Plus Jakarta Sans', sans-serif;
  --f-italic: "ivypresto-display", serif;   /* Light Italic (300), seule graisse du kit Typekit */

  /* Échelle de titres et de textes (PSD desktop en borne haute) */
  --fs-h1: clamp(30.6px, 22.3px + 2.118vw, 63px);
  --fs-h2: clamp(25.2px, 20.2px + 1.294vw, 45px);
  --fs-h3: clamp(19.8px, 15.2px + 1.176vw, 37.8px);
  --fs-h4: clamp(17.1px, 15.3px + 0.471vw, 25.2px);
  --fs-lead: clamp(15.3px, 13.7px + 0.412vw, 21.6px);
  --fs-text: clamp(14px, 12.3px + 0.294vw, 18px);
  --fs-small: clamp(12px, 11px + 0.176vw, 14.4px);
  --fs-tiny: clamp(11px, 10.3px + 0.118vw, 12.6px);
  --fs-btn: clamp(14px, 13.2px + 0.2vw, 17px);   /* boutons réduits à la demande d'Antoine (14/10) */
  --fs-nav: clamp(13.5px, 10.3px + 0.401vw, 18px);
  --lh-title: 1.2;
  --lh-text: 1.45;

  /* Rayons */
  --btn-h: clamp(42px, 39.4px + 0.65vw, 52px);    /* hauteur mini des boutons */
  --field-h: var(--btn-h);                         /* champs de formulaire : même hauteur que les boutons */
  --fs-field: var(--fs-btn);
  --r-btn: clamp(9px, 6.9px + 0.294vw, 12.6px);
  --r-field: 9px;
  --r-card: 18px;
  --r-card-lg: 27px;
  --r-bloc: clamp(18px, 12.2px + 1.471vw, 36px);  /* hero, grandes cartes */
  --r-pill: 9999px;

  /* Ombres */
  --sh-card: 0 10px 30px rgba(48, 49, 67, 0.08);
  --sh-bar: 0 4px 20px rgba(48, 49, 67, 0.06);

  /* Espacements */
  --sp-2xs: 4px;
  --sp-xs: 8px;
  --sp-s: clamp(10.8px, 9.5px + 0.353vw, 14.4px);
  --sp-m: clamp(14.4px, 11.6px + 0.706vw, 25.2px);
  --sp-l: clamp(21.6px, 14.8px + 1.765vw, 48.6px);
  --sp-xl: clamp(36px, 23.6px + 3.176vw, 84.6px);
  --sp-2xl: clamp(50.4px, 30.2px + 5.177vw, 129.6px);

  /* Gabarit */
  --page-edge: clamp(8px, 4.4px + 0.928vw, 25px);  /* bord de page des blocs en carte : hero, rails de cartes (même couloir) */
  --wrap-wide: 1728px;                              /* contenu du footer et des sections pleines */
  --side: clamp(16px, 2.86vw, 100px);               /* marge latérale des sections pleines */
  --tunnel: 2000px;                                 /* largeur maximale du header et des sections de l'accueil */
}