/* ============================================================================
   etik.css — socle visuel du site vitrine etikpharma.com
   Canon : ~/refetik/charte/etikpharma-maison.md, marque v2.0 / charte v1.6 (2026-08-25).

   AUCUNE valeur ici n'est inventée : toutes viennent du bloc `tokens` du canon ou
   de sa table des grades. Pour changer une couleur, on change le canon, puis ce
   fichier — jamais l'inverse, et jamais une valeur en dur dans une page.

   ── Famille de neutres : CHAUDE ────────────────────────────────────────────
   Le canon impose deux familles de neutres et dit que le choix ne se fait pas au
   goût : il DÉCOULE du public. Famille « Comptoir » (interne, dense) → neutres
   froids ; famille « Public » (externe, mobile-first) → neutres chauds. Ce site
   s'adresse à des visiteurs, des confrères et des partenaires : c'est la famille
   Public, donc les neutres chauds — ce que le site faisait déjà de fait (#FBFAF5).

   ⚠️ La rampe chaude est INCOMPLÈTE, et le canon l'assume : il n'existe aucun
   neutre chaud sous 80 % de clarté sur tout le périmètre. Son `encre` (#7B6E4B)
   est CALCULÉE, jamais mesurée, et fait partie des trois valeurs qui attendent
   l'œil de Mehdi. Le canon tranche donc : « tant que ce point n'est pas tranché,
   la famille chaude ne couvre que sol, surface et filet, et toute encre reste
   ink ». C'est appliqué ici — aucun #7B6E4B dans ce fichier.
   ============================================================================ */

:root{
  /* ---- Marque (canon, bloc tokens) ---------------------------------------
     La palette est ancrée SUR le logo depuis le 2026-08-25 : corail et teal sont
     pris dans le tracé du « e », les autres dérivés à teinte/clarté/chroma
     conservés. Ne pas re-substituer les anciennes valeurs (#2D7A8B, #1F5764,
     #F26A45, #FF8463, #E0664F) : elles sont hors canon depuis cette date. */
  --corail:      #F68451;   /* grade `plein`  — aplat porteur de sens */
  --corail-deep: #EB7039;   /* grade `plein-deep` */
  --corail-soft: #FFE9E0;   /* grade `surface` */
  --teal:        #1C757F;   /* grade `plein` */
  --teal-deep:   #1E585F;   /* grade `encre` — 7,71:1 sur sol chaud */
  --teal-soft:   #E4EEEF;   /* grade `surface` */

  /* ---- Neutres chauds (famille Public) ---------------------------------- */
  --sol:     #FBFAF5;   /* = `creme` du canon — fond de page */
  --surface: #F6F3EA;   /* fond de carte */
  --filet:   #E8E3D6;   /* = `line` — bordure, séparateur */

  /* ---- Encres — froides par prescription du canon (cf. en-tête) ---------- */
  --ink:   #1F2A37;   /* texte courant       — 13,21:1 */
  --muted: #4A5566;   /* texte secondaire    —  6,86:1 */

  /* ---- États (canon, table des grades) ----------------------------------
     Les `plein` remplissent, les `encre` écrivent. Le palier du milieu de ok et
     warn (#1A8C56, #B07D20) est un `plein-deep` : il franchit 3:1 donc il peut
     remplir, mais il ÉCHOUE 4,5:1 des deux côtés — il ne peut pas porter de
     texte. Le nommer « ink » ailleurs a déjà produit du texte illisible. */
  --ok-surface:   #DCFCE7; --ok-plein:   #2BB673; --ok-encre:   #0F6B3D;
  --warn-surface: #FEF3C7; --warn-plein: #FFB020; --warn-encre: #7A5600;
  --err-surface:  #FDECEC; --err-plein:  #E5484D; --err-encre:  #C0353A;
  --info-surface: #DBEAFE; --info-plein: #0284C7; --info-encre: #026BA2;

  /* ---- Typo (canon : display Lora, texte Inter, technique Space Grotesk) --
     Les trois sont auto-hébergées dans /charte/fonts.css. Le CSP `font-src
     'self'` bloque tout CDN : ne jamais ajouter de <link> Google Fonts. */
  --display: 'Lora', Georgia, serif;
  --texte:   'Inter', system-ui, -apple-system, sans-serif;
  --tech:    'Space Grotesk', ui-monospace, monospace;

  /* ---- Mouvement (canon, bloc motion — Bézier partagées avec Remotion) --- */
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit:  cubic-bezier(0.333, 0, 0.667, 0);

  /* ---- Mesures ---- */
  --mesure: 720px;      /* largeur de lecture confortable */
  --large:  1080px;     /* largeur de page */
  --marge:  clamp(1.25rem, 3vw, 2rem);
  --rayon:  16px;
}