/* ============================================================
   IMASCIENCE — Design tokens
   Source : maquette Framer de Cléa (imascience.framer.website)
   Extraits le 7/7/2026 depuis la version publiée.
   ============================================================ */

:root {
  /* ---------- Couleurs (tokens Framer) ---------- */
  --color-ink:        #1f1f1f;  /* texte principal */
  --color-ink-soft:   #353535;  /* texte secondaire */
  --color-bg:         #f7faff;  /* fond clair bleuté */
  --color-white:      #ffffff;

  --color-blue:       #3e5381;
  --color-blue-slate: #2f4858;
  --color-orange:     #ff5f00;
  --color-magenta:    #c2418d;
  --color-pink:       #f4365e;
  --color-violet:     #7b5298;

  /* Thème sombre (header, hero, footer) et bandes violettes */
  --color-dark:        #170b1d;  /* aubergine quasi noir */
  --color-dark-soft:   #1f0f27;
  --color-purple:      #2e1140;  /* bande chiffres + encart CTA */
  --color-purple-soft: #3d1a4a;
  --color-faq-bg:      #edf2fb;  /* fond des items FAQ */
  --color-section-alt: #f0f4fb;  /* fond section projets */

  /* Rôles */
  --color-accent:      var(--color-orange);   /* boutons, icônes */
  --color-highlight:   var(--color-pink);     /* fragments de titres en italique */
  --color-heading:     var(--color-ink);

  /* ---------- Typographie ---------- */
  /* Raleway variable (100–900), auto-hébergée. Échelle relevée sur la maquette :
     54/48/42/32/28/24/20/18/16/14/12 px */
  --font-sans: "Raleway", system-ui, sans-serif;

  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 — taille la plus fréquente (nav, labels) */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.25rem;   /* 20 — intro / lead */
  --text-2xl:  1.5rem;    /* 24 */
  --text-3xl:  1.75rem;   /* 28 */
  --text-4xl:  2rem;      /* 32 */
  --text-5xl:  2.625rem;  /* 42 */
  --text-6xl:  3rem;      /* 48 */
  --text-7xl:  3.375rem;  /* 54 — display hero */

  --weight-regular:  400;
  --weight-medium:   500;  /* corps de texte maquette */
  --weight-semibold: 600;  /* dominante maquette (titres, nav) */
  --weight-bold:     700;

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-body:  1.6;

  /* ---------- Espacements ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* ---------- Rayons (relevés maquette : 8/10/18/24, pill) ---------- */
  --radius-sm:   8px;
  --radius-md:   10px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-pad: clamp(1rem, 4vw, 2.5rem);

  /* ---------- Transitions ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
}

/* ---------- Breakpoints (maquette Framer — pour référence) ----------
   mobile   : < 810px
   tablette : 810–1199px
   desktop  : 1200–1919px
   xl       : ≥ 1920px
   Usage : @media (min-width: 810px), (min-width: 1200px), (min-width: 1920px)
--------------------------------------------------------------------- */