/* =============================================================
   JIANG COACHING — CHARTE GRAPHIQUE
   Feuille de style de référence. Tout est tokenisé.
   RÈGLE : dans les composants, n'utiliser QUE les tokens sémantiques
   (--pad-*, --gap-*, --mb-*, --radius-*, --border-*, --shadow-*).
   Jamais de px en dur, jamais de --space-* brut dans un composant.
   Un rôle = un token = une valeur, partout.
   ============================================================= */

/* ---------- TOKENS ---------- */
:root {
    /* Couleurs — charte */
    --c-blue: #d0e7ea;
    --c-blue-deep: #9ec7cf;
    --c-yellow: #fbff84;
    --c-yellow-deep: #e7eb55;
    --c-cream: #fbf4f1;
    --c-ink: #313333;
    /* Couleurs — derivees */
    --c-ink-deep: #1f2020;
    --c-ink-soft: #76716e;
    --c-white: #ffffff;
    --c-line: #e8ddd6;
    --c-placeholder: #b8b2ad;

    /* Rôles couleur */
    --bg: var(--c-cream);
    --surface: var(--c-white);
    --text: var(--c-ink);
    --text-soft: var(--c-ink-soft);
    --accent-hover: var(--c-ink-deep); /* hover du bouton charbon */
    --blue-wash: color-mix(
        in srgb,
        var(--c-blue) 30%,
        transparent
    ); /* fond sélection (consent, carte ring) */
    --nav-bg: color-mix(
        in srgb,
        var(--c-cream) 93%,
        transparent
    ); /* header sticky translucide */

    /* Polices */
    --font-display: "Very Vogue Display", Georgia, "Times New Roman", serif;
    --font-serif-txt: "Very Vogue Text", Georgia, serif;
    --font-sub: "Apotheosis Sans", "Urbanist", sans-serif;
    --font-sans: "Urbanist", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: "Urbanist", ui-monospace, monospace;

    /* Poids */
    --w-light: 300;
    --w-reg: 400;
    --w-medium: 500;
    --w-semi: 600;
    --w-black: 900;

    /* Échelle typographique — échelle modulaire Perfect Fourth (ratio 1.333), base 18px.
     Paliers : 13 · 18 · 24 · 32 · 43 · 57 · 76. Hiérarchie stricte décroissante
     (Titre 57 > Sous-titre 32 > Citation 24 > Corps 18). Polices/casse/tracking =
     charte ; tailles = échelle modulaire (les pt du PDF étant contradictoires). */
    --fs-hero: clamp(48px, 8vw, 76px); /* Titre H1 hero — palier 76 */
    --fs-h1: clamp(38px, 6.5vw, 57px); /* Titre H1 — palier 57 */
    --fs-h1-sm: clamp(
        30px,
        5vw,
        43px
    ); /* Titre H1 compact (question) — palier 43 */
    --fs-h2: clamp(
        20px,
        3.2vw,
        24px
    ); /* Sous-titre H2 (subhead) — palier 24, toujours < Titre */
    --fs-h3: 24px; /* Titre de composant (carte) — palier 24 */
    --fs-lead: clamp(
        20px,
        3vw,
        24px
    ); /* Accroche — Very Vogue Text italic — palier 24 */
    --fs-citation: clamp(
        21px,
        2.8vw,
        24px
    ); /* Citation — Urbanist Black — palier 24 */
    --fs-body: 18px; /* Corps — Urbanist Light — base 18 */
    --fs-sm: 13px; /* Corps small — palier 13 */
    --fs-label: 13px; /* Label UI (Urbanist) — hors charte */
    --fs-xs: 12px; /* Micro-label UI (Urbanist) — hors charte */

    /* Interlignes */
    --lh-tight: 1.05;
    --lh-heading: 1.15;
    --lh-snug: 1.4;
    --lh-body: 1.55;
    --lh-relaxed: 1.6;

    /* Letter-spacing (charte) */
    --ls-titre: 0; /* Very Vogue (charte) */
    --ls-sub: -7px; /* Apotheosis -10 (charte) */
    --ls-citation: 0; /* Urbanist Black (charte) */
    --ls-label: 0.08em; /* label UI majuscule en Urbanist (hors charte, lisibilite) */

    /* ---- Échelle d'espacement (multiple de 4) — base, ne pas utiliser
          directement dans les composants : passer par les tokens sémantiques. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    /* ---- Espacement sémantique (un rôle = un token, utilisé partout) ---- */
    /* Padding */
    --pad-block: var(
        --space-7
    ); /* 48 — vertical des sections + hero + footer */
    --pad-inline: var(
        --space-5
    ); /* 24 — horizontal global (nav, sections, hero, footer) */
    --pad-card: var(--space-5); /* 24 — interne cartes / panels */
    --pad-card-sm: var(
        --space-3
    ); /* 12 — interne petits blocs (swatch, consent) */
    --pad-field: var(--space-4); /* 16 — interne des champs */
    --pad-field-unit: var(--space-7); /* 48 — reserve droite unite (cm/kg) */
    --pad-btn: var(--space-4) var(--space-6); /* 16/32 — bouton standard */
    --pad-btn-sm: var(--space-3) var(--space-5); /* 12/24 — bouton compact (nav) */
    /* Boutons — tokens sémantiques */
    --btn-radius: var(--radius-pill); /* 999px — CTA */
    --btn-radius-ui: var(--radius-md); /* 12px  — bouton UI secondaire */
    --btn-font: var(--font-sans);
    --btn-fs: var(--fs-body); /* 18px */
    --btn-fw: var(--w-semi); /* 600 */
    --btn-ls: 0; /* Urbanist 18px, pas de tracking */
    --btn-shadow: var(--shadow-cta); /* CTA uniquement */
    /* Primaire (charbon) */
    --btn-primary-bg: var(--c-ink);
    --btn-primary-fg: var(--c-white);
    --btn-primary-hover: var(--accent-hover); /* --c-ink-deep */
    /* Secondaire (contour) */
    --btn-secondary-bg: transparent;
    --btn-secondary-fg: var(--c-ink);
    --btn-secondary-border: var(--border-strong);
    /* Ghost */
    --btn-ghost-bg: transparent;
    --btn-ghost-fg: var(--c-ink);
    /* Gaps */
    --gap-stack: var(--space-4); /* 16 — pile verticale (champs, formulaire) */
    --gap-inline: var(
        --space-5
    ); /* 24 — gap horizontal (grilles, nav, boutons) */
    --gap-tight: var(
        --space-2
    ); /* 8  — paire tres serree (titre→sous-titre, micro-marges demo, footer) */
    --gap-mid: var(
        --space-3
    ); /* 12 — gap intermediaire (logo, consent, hero buttons) */
    /* Marges verticales de hierarchie */
    --mb-eyebrow: var(--space-3); /* 12 — micro-label / eyebrow → titre */
    --mb-title: var(--space-3); /* 12 — titre de bloc → corps */
    --mb-heading: var(--space-6); /* 32 — titre de section → contenu */
    --mb-block: var(--space-6); /* 32 — entre blocs / groupes / samples */
    --mb-micro: var(--space-1); /* 4  — sous une valeur (hex, erreur) */
    /* Hiérarchie titre/media — mb seul, pas de padding-top sur l'élément suivant */
    --mb-h1-h2: var(
        --space-6
    ); /* 32 — H1 → H2 (gap > H2→body, règle proximité) */
    --mb-h2-body: var(--space-5); /* 24 — H2 → contenu dessous */
    --mb-before-media: var(--space-7); /* 48 — texte → vidéo */
    --mb-after-media: var(--space-7); /* 48 — vidéo → section suivante */

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    /* Bordures */
    --bw-hair: 0.5px;
    --bw-base: 1.2px;
    --border-hair: var(--bw-hair) solid var(--c-line);
    --border-base: var(--bw-base) solid var(--c-line);
    --border-strong: var(--bw-base) solid var(--c-ink);

    /* Ombres & rings */
    --shadow-sm: 0 8px 28px rgba(49, 51, 51, 0.07);
    --shadow-md: 0 14px 44px rgba(49, 51, 51, 0.12);
    --shadow-cta: 0 6px 18px rgba(49, 51, 51, 0.22);
    --ring-shadow: 0 0 0 3px var(--c-blue), var(--shadow-sm);

    /* Layout */
    --maxw-content: 740px;
    --maxw-wide: 900px;
    --maxw-xwide: 1080px;
    --maxw-read: 520px;
    --maxw-form: 520px;

    /* Transitions */
    --t-fast: all 0.2s ease;
}