@import url("fonts.css");
/* =============================================================
   In Extenso Centre Ouest — Candidature Martial Moisan
   Design tokens — v3 « manifeste éditorial institutionnel »
   Charte In Extenso 2023 · Bricolage Grotesque + Inter (auto-hébergées)
   ============================================================= */

:root {
  /* --- Palette officielle In Extenso (charte 2023) --- */
  --tomate:   #ef4130;
  --tangerine:#f58220;
  --mimosa:   #ffcb05;
  --canari:   #f9ec00;
  --bonbon:   #e33e80;
  --azur:     #a1daf8;
  --celeste:  #00aadb;
  --lavande:  #8981b5;
  --vert-eau: #94d1be;
  --menthol:  #6bb989;
  --violine:  #583f99;
  --nuit:     #00002c;
  --white:    #ffffff;

  /* --- Rôles sémantiques — discipline : Nuit + Tomate, papier chaud --- */
  --paper:      #faf8f3;                 /* fond principal, blanc chaud éditorial */
  --surface:    #ffffff;
  --ink:        #16162a;                 /* texte riche (presque nuit) */
  --accent:     var(--tomate);           /* accent primaire UNIQUE */
  --accent-cool:var(--celeste);          /* accent secondaire, liens/données */

  --bg:         var(--paper);
  --bg-light:   #f1ede4;                 /* surface chaude alternée */
  --bg-nuit:    var(--nuit);
  --text:       var(--ink);
  --text-muted: #55556a;
  --text-faint: #8a8a9d;
  --line:       rgba(0, 0, 44, 0.14);
  --line-soft:  rgba(0, 0, 44, 0.07);
  --on-nuit:      rgba(255, 255, 255, 0.80);
  --on-nuit-soft: rgba(255, 255, 255, 0.52);
  --primary:    var(--tomate);

  /* --- Typographie --- */
  --font-display: "Bricolage Grotesque", "Arial Narrow", "Segoe UI", sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-title:   var(--font-display);   /* alias rétro-compat */

  /* Échelle fluide — display casse mixte, grotesque à caractère */
  --fs-hero:    clamp(2.7rem, 1rem + 7.4vw, 6.3rem);
  --fs-display: clamp(2.05rem, 1.2rem + 3.6vw, 4.1rem);
  --fs-h2:      clamp(1.85rem, 1.2rem + 2.5vw, 3rem);
  --fs-h3:      clamp(1.2rem, 1rem + 0.85vw, 1.6rem);
  --fs-stat:    clamp(2.8rem, 1.6rem + 5vw, 5.4rem);
  --fs-lead:    clamp(1.08rem, 1rem + 0.5vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.0;
  --lh-snug:  1.08;
  --lh-body:  1.68;

  --tr-eyebrow: 0.16em;
  --tr-title:   -0.012em;
  --tr-display: -0.028em;
  --tr-btn:     0.03em;

  /* --- Rythme & mise en page --- */
  --container:      1200px;
  --container-wide: 1360px;
  --container-text: 720px;
  --gutter: clamp(1.2rem, 0.6rem + 2.6vw, 2.75rem);
  --pad-section: clamp(4rem, 2.6rem + 6vw, 9rem);
  --pad-block:   clamp(2rem, 1.4rem + 2.5vw, 3.75rem);

  /* --- Formes — moderne premium, angles doux maîtrisés --- */
  --r-card: 16px;
  --r-btn:  10px;
  --r-chip: 7px;
  --r-pill: 999px;

  --shadow-sm:    0 1px 2px rgba(16,16,40,0.04), 0 8px 20px -14px rgba(16,16,40,0.30);
  --shadow-card:  0 2px 4px rgba(16,16,40,0.03), 0 26px 52px -30px rgba(16,16,40,0.34);
  --shadow-float: 0 34px 66px -30px rgba(16,16,40,0.42), 0 10px 24px -20px rgba(16,16,40,0.30);

  /* --- Mouvement --- */
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur:      320ms;
  --dur-slow: 640ms;

  --header-h: 76px;
}

@media (max-width: 640px) { :root { --header-h: 62px; } }