/* ==========================================================================
   CLINIQUE SOLUTIONS AUDITIVES — TOKENS
   Palette imposée par la direction artistique (fait foi sur la maquette XD).
   ========================================================================== */

:root {

  /* ---------- COULEURS DE MARQUE ---------- */
  --csa-creme:        #FFF7EC;  /* fond clair principal, remplace le blanc pur */
  --csa-vert:         #004435;  /* couleur d'ancrage */
  --csa-lime:         #B3CC3F;  /* accent énergique, avec parcimonie */
  --csa-lavande:      #B697EB;  /* couleur signature */
  --csa-violet:       #6F5CEF;  /* accent secondaire soutenu */
  --csa-noir:         #000000;  /* contraste maximal */

  /* Variantes utilitaires, dérivées de la palette (jamais de nouvelle teinte) */
  --csa-vert-clair:   #0B5C48;  /* motif ton sur ton sur fond vert */
  --csa-vert-fonce:   #00312639; /* ombres portées teintées */
  --csa-lavande-fonce:#9C77E4;
  --csa-lime-fonce:   #93A832;

  /* ---------- CONTRASTE : PAIRES AUTORISÉES ----------
     Vert forêt   : crème 10,3:1 · lime 6,1:1 · lavande 4,5:1
     Crème        : noir 19,6:1 · vert 10,3:1 · violet 4,6:1
     Lavande      : noir 8,6:1 · vert 4,5:1
     Lime         : noir 11,6:1 · vert 6,1:1
     Violet       : crème 4,8:1

     INTERDITS (contraste insuffisant) :
     blanc/crème sur lime · blanc/crème sur lavande · lime sur crème
     --------------------------------------------------------- */

  /* ---------- TYPOGRAPHIE ---------- */
  --csa-font-titre:  "Bricolage Grotesque", "Outfit", "Trebuchet MS", sans-serif;
  --csa-font-texte:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --csa-h1: clamp(3.5rem, 8vw, 8rem);      /* 56 → 128 px */
  --csa-h2: clamp(2.625rem, 6vw, 5.5rem);  /* 42 → 88 px  */
  --csa-h3: clamp(1.75rem, 3.5vw, 3.25rem);/* 28 → 52 px  */
  --csa-h4: clamp(1.375rem, 2vw, 1.75rem); /* 22 → 28 px  */

  --csa-texte:       1.1875rem;  /* 19 px desktop */
  --csa-texte-grand: 1.375rem;   /* 22 px, chapeaux */
  --csa-texte-petit: 1.0625rem;  /* 17 px, plancher absolu */

  --csa-lh-titre: 0.95;
  --csa-lh-texte: 1.6;
  --csa-ls-titre: -0.02em;

  /* ---------- ESPACEMENTS (base 8) ---------- */
  --csa-esp-1: 0.5rem;
  --csa-esp-2: 1rem;
  --csa-esp-3: 1.5rem;
  --csa-esp-4: 2rem;
  --csa-esp-5: 3rem;
  --csa-esp-6: 4rem;
  --csa-esp-7: 6rem;
  --csa-esp-8: 8rem;

  --csa-section-y: clamp(4rem, 9vw, 9rem);
  --csa-contenu:   1280px;  /* colonne de lecture */
  --csa-large:     1600px;  /* en-tête et bandeau : plus large, pour que rien ne se casse sur deux lignes */
  --csa-header-h:  88px;    /* hauteur de l'en-tête collant, reprise par le héro et les ancres */
  --csa-gouttiere:  clamp(1.25rem, 4vw, 3rem);
  --csa-mesure:    62ch;   /* longueur de ligne maximale */

  /* ---------- FORMES ---------- */
  --csa-r-capsule: 999px;
  --csa-r-bloc:    28px;
  --csa-r-organique-1: 48% 52% 60% 40% / 45% 55% 45% 55%;
  --csa-r-organique-2: 62% 38% 45% 55% / 55% 48% 52% 45%;
  --csa-trait: 3px;  /* contour épais, langage collage */

  /* ---------- CIBLES TACTILES (clientèle 65 ans et plus) ---------- */
  --csa-cible-min: 48px;
  --csa-cta-h:     56px;
  --csa-cta-h-lg:  64px;

  /* ---------- MOTION (budget : 3 moments sur la page) ---------- */
  --csa-dur-rapide: 180ms;
  --csa-dur-moyen:  320ms;
  --csa-dur-lent:   600ms;
  --csa-dur-reveal: 700ms;  /* révélation à l'entrée en vue */
  --csa-ease:       cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---------- PROFONDEUR ----------
     Pas d'ombre grise générique : ombres teintées vert forêt ou décalage plein. */
  --csa-ombre-collage: 0 10px 0 rgba(0, 49, 38, 0.18);
  --csa-ombre-douce:   0 14px 32px rgba(0, 49, 38, 0.14);

  --csa-z-header: 100;
  --csa-z-menu:   200;
}

/* Réduction de mouvement : neutralise les 3 moments de motion. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --csa-dur-rapide: 0.01ms;
    --csa-dur-moyen:  0.01ms;
    --csa-dur-lent:   0.01ms;
    --csa-dur-reveal: 0.01ms;
  }
}