/* ===================================================================
   UDi — tokens.css
   Source de vérité : maquette Figma « UDi Studio »
   (fileKey QZ77OKEhMKJm7od1hEFn4C). Tokens extraits via get_variable_defs
   le 01/07/2026. Base 16px = 1rem.
   Hiérarchie : PRIMITIFS (ce que la chose EST) → SÉMANTIQUES (son rôle).
   Règle : les composants ne référencent QUE des sémantiques
   (+ échelles --space-*, --fs-*). Une valeur en dur est un bug.
   =================================================================== */

:root {
  /* =========================================================
     PRIMITIFS
     ========================================================= */

  /* — Couleurs (valeurs exactes Figma) — */
  --color-black-1000: #1e140d;    /* noir chaud */
  --color-black-80:   #1e140dcc;
  --color-black-70:   #1e140db2;
  --color-black-12:   #1e140d1f;
  --color-orange-1000:#f5700a;    /* accent unique */
  --color-orange-50:  #f5700a80;
  --color-beige-1000: #f8efe9;
  --color-white-1000: #fffaf7;    /* blanc chaud (crème) */
  --color-white-85:   #fffaf7d9;
  --color-white-60:   #fffaf799;
  --color-white-20:   #fffaf733;
  --color-white-6:    #fffaf70f;
  --color-red-1000:   #ff6b5c;    /* rouge d'erreur — hors maquette, ajouté pour la validation du formulaire */

  /* — Familles — */
  --font-heading: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body:    "Public Sans", system-ui, sans-serif;

  /* — Tailles de police (px → rem) — */
  --fs-h1:    clamp(2.25rem, 1.1rem + 5vw, 4rem);      /* 36 → 64 (fluide) */
  --fs-h2:    clamp(1.75rem, 1.15rem + 2.6vw, 2.5rem); /* 28 → 40 (fluide) */
  --fs-h3:    1.5rem;    /* 24 */
  --fs-h4:    1.25rem;   /* 20 */
  --fs-body1: 1rem;      /* 16 */
  --fs-body2: 0.875rem;  /* 14 */

  /* — Poids — */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* — Interlignes (ratios Figma) — */
  --lh-tight:   1.1;   /* H1 */
  --lh-heading: 1.3;   /* H2, H3 */
  --lh-solid:   1;     /* H4, tagline */
  --lh-normal:  1.5;   /* corps */

  /* — Interlettrages (Figma exprime en %, converti en em) — */
  --ls-heading: -0.04em;  /* titres Bricolage (Figma -4%) */
  --ls-tagline:  0.06em;  /* eyebrow (Figma 6%) — CONFIRMER au rendu */

  /* — Espacement : base 4px, multiples de 8 (px → rem) — */
  --space-1:  0.25rem;  /* 4   */
  --space-2:  0.5rem;   /* 8   */
  --space-3:  0.75rem;  /* 12  */
  --space-3-5:0.875rem; /* 14  (padding CTA small) */
  --space-4:  1rem;     /* 16  */
  --space-5:  1.25rem;  /* 20  */
  --space-6:  1.5rem;   /* 24  (item spacing/s+) */
  --space-8:  2rem;     /* 32  */
  --space-10: 2.5rem;   /* 40  */
  --space-12: 3rem;     /* 48  */
  --space-16: 4rem;     /* 64  */
  --space-20: 5rem;     /* 80  */
  --space-24: 6rem;     /* 96  */
  --space-32: 8rem;     /* 128 (marge horizontale des sections) */
  --space-40: 10rem;    /* 160 (padding vertical des sections) */
  --space-48: 12rem;    /* 192 (padding vertical du hero) */

  /* — Rayons — */
  --radius-button: 6px;   /* boutons / CTA */
  --radius-sm:   12px;    /* Borders/border small — cartes */
  --radius-pill: 100px;   /* pills / badges — CONFIRMER au rendu */

  /* — Mise en page — */
  --container-max: 1184px;  /* contenu (1440 − 2×128) */
  --viewport-ref:  1440px;  /* largeur maquette desktop */

  /* =========================================================
     SÉMANTIQUES (rôle) — les composants n'utilisent que ceux-ci
     ========================================================= */

  /* Surfaces & textes — clair (défaut) */
  --color-surface:         var(--color-white-1000);
  --color-surface-alt:     var(--color-beige-1000);
  --color-surface-nav:     var(--color-white-1000);  /* navbar : fond plein, sans opacité (le glass a été abandonné) */
  --color-text-default:    var(--color-black-1000);
  --color-text-soft:       var(--color-black-80);   /* titres narratifs intermédiaires */
  --color-text-muted:      var(--color-black-70);
  --color-border-hairline: var(--color-black-12);
  --color-danger:          var(--color-red-1000);   /* état d'erreur (validation de formulaire) */

  /* Surfaces & textes — sombre (sections encre) */
  --color-surface-dark:       var(--color-black-1000);
  --color-text-on-dark:       var(--color-white-1000);
  --color-text-on-dark-soft:  var(--color-white-85);
  --color-text-on-dark-muted: var(--color-white-60);
  --color-border-on-dark:     var(--color-white-20);

  /* Accent — réservé (CTA, point du i, marqueurs) */
  --color-accent:      var(--color-orange-1000);
  --color-accent-soft: var(--color-orange-50);

  /* Rythme */
  /* Espacements structurels — PALIERS fixes, valeurs EXACTES multiples de 8 par breakpoint
     (mobile ici ; tablette ≥768 et desktop ≥1200 redéfinis en @media après :root).
     Hiérarchie à CHAQUE palier : section ≫ gap-block (H2↔sous-sections, UNIFORME) ≫ gap-block-sm. */
  --section-padding-block: 80px;   /* mobile */
  --gap-block:    48px;            /* mobile — gap uniforme H2 wrapper ↔ sous-sections */
  --gap-block-sm: 32px;            /* mobile — gap interne d'une sous-section (< gap-block) */
  --gap-block-lg: 48px;            /* mobile — grands gaps horizontaux (consequence, contact) */

  /* Cartes — padding intérieur harmonisé sur TOUT le site (une seule échelle) */
  --card-pad: var(--space-6);   /* 24 — marge intérieure (bord) des cartes de contenu */
  --card-gap: var(--space-4);   /* 16 — espace entre icône / titre / paragraphe */

  --nav-height: 4.25rem;  /* 68 — hauteur navbar mobile (burger) ; sert au dégagement du hero */
  --section-padding-inline: var(--space-32);  /* 128 */
  --measure: 66ch;  /* largeur de ligne lisible */

  /* Composant — bouton (paddings non tokenisés dans Figma, figés ici) */
  --btn-pad-block:     var(--space-3-5);  /* 14 */
  --btn-pad-inline:    1.375rem;          /* 22 */
  --btn-pad-block-sm:  var(--space-2);    /* 8  */
  --btn-pad-inline-sm: var(--space-3-5);  /* 14 */
}

/* Paliers d'espacement — valeurs exactes sur la grille de 8, une par breakpoint */
@media (min-width: 768px) {   /* tablette */
  :root {
    --section-padding-block: 128px;
    --gap-block:    56px;
    --gap-block-sm: 40px;
    --gap-block-lg: 64px;
  }
}
@media (min-width: 1200px) {  /* desktop */
  :root {
    --section-padding-block: 160px;
    --gap-block:    64px;
    --gap-block-sm: 48px;
    --gap-block-lg: 80px;
  }
}