/* ============================================================
   DESIGN SYSTEM : les jetons (valeurs de base) du site. Rien d'autre ici.
   Les composants sont dans style.css et n'utilisent QUE ces variables pour les espaces, les textes, les arrondis et les couleurs.
   Principe (inspiré d'Apple) : grille de 8 px, échelle typographique fluide, 3 niveaux d'arrondi, une seule largeur de contenu.
   ============================================================ */
:root{
  /* ---------- Couleurs ---------- */
  --background:#f8f8f7; --foreground:#161716; --muted:#edeeeb; --muted-foreground:#5c6059; --panel:#f1f1ee;
  --ring:#000;                                       /* contour de focus clavier */
  --accent:#125a42; --accent-hi:#1d7357; --accent-lo:#0a3a2b;   /* identité : vert bouteille (haut → milieu → bas du dégradé) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.55 0 0 0 .22 .55 0 0 0 .22 .55 0 0 0 .22 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ---------- Police ---------- */
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;

  /* ---------- Espacement : grille de 8 px ---------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  /* Espacement « sémantique » (fluide) : c'est CELUI-CI qu'on utilise dans les composants */
  --page-x:clamp(20px,5vw,72px);              /* marge gauche/droite de la page */
  --section-y:clamp(64px,9vw,128px);          /* distance entre deux sections */
  --sy:calc(var(--section-y) / 2);            /* moitié : chaque section en met autant en haut et en bas */
  --head-gap:clamp(24px,3vw,48px);            /* titre de section → contenu */
  --card-gap:clamp(12px,1.5vw,20px);          /* entre deux cartes */
  --card-pad:clamp(20px,2.4vw,32px);          /* à l'intérieur d'une carte */
  --card-pad-lg:clamp(28px,5vw,64px);         /* grands panneaux */
  --col-gap:clamp(24px,5vw,72px);             /* entre deux colonnes de texte */
  --max:1400px;                               /* largeur maximale du contenu */

  /* ---------- Typographie : échelle fluide (corps 17 px comme apple.com) ---------- */
  --fs-display:clamp(2.75rem,1rem + 6vw,6rem);       /* hero */
  --fs-title:clamp(2rem,1rem + 4vw,4.5rem);          /* titre de page (h1) */
  --fs-section:clamp(1.75rem,1rem + 2.4vw,3.5rem);   /* titre de section (h2) */
  --fs-sub:clamp(1.4rem,1rem + 1.4vw,2.25rem);       /* phrase d'accroche */
  --fs-card:clamp(1.25rem,1rem + .9vw,1.75rem);      /* titre de carte (h3) */
  --fs-lead:clamp(1.125rem,1rem + .5vw,1.5rem);      /* texte d'introduction */
  --fs-body:1.0625rem;                               /* 17 px */
  --fs-small:.875rem;                                /* 14 px */
  --lh-tight:1.05; --lh-head:1.12; --lh-body:1.45;
  --tr-display:-.045em; --tr-head:-.04em; --tr-body:-.01em;

  /* ---------- Arrondis : 3 niveaux ---------- */
  --r-pill:999px;                              /* boutons, pastilles, filtres */
  --r-card:clamp(16px,2vw,28px);               /* cartes, panneaux, fenêtres */
  --r-sm:12px;                                 /* petits éléments (miniatures, champs) */

  /* ---------- Mouvement ---------- */
  --ease:cubic-bezier(.22,1,.36,1);
  --sheet-ease:cubic-bezier(.32,.72,0,1);
}