/* ============================================================================
   Cosmeek V2 — Section « Projets »
   Tokens. Toutes les valeurs proviennent des variables Figma du node 2952:2730.
   Aucun composant ne doit contenir de valeur en dur.
   ========================================================================= */

:root {
  /* ── Couleur ─────────────────────────────────────────────────────────── */
  /* Ces deux teintes sont aussi consommées par le shader des puits image, qui
     a besoin de composantes numériques : elles sont donc définies en triplet
     et la forme hexadécimale en dérive — une seule source de vérité. */
  --c-cream-rgb: 255 251 244;
  --c-brown-light-rgb: 49 41 40;
  /* Le voile de la galerie du hero a besoin du marron en composantes. */
  --c-brown-rgb: 42 36 35;
  /* L'aplat du radar est un orange à 40 % : la teinte doit être divisible. */
  --c-orange-rgb: 255 75 39;

  --c-cream: rgb(var(--c-cream-rgb)); /* Background / Crème · Texte (Inverse) / Primaire */
  --c-cream-deep: #eeeae2;     /* Background / Crème foncée */
  --c-brown: rgb(var(--c-brown-rgb)); /* Background / Marron · Texte / Primaire */
  --c-brown-light: rgb(var(--c-brown-light-rgb)); /* Background / Marron clair */
  --c-label: #6d5d5a;          /* Background / Label */
  --c-label-deep: #4d3e3c;     /* Background / Label foncé */
  --c-grey: #989690;           /* Background / Gris */
  --c-orange: rgb(var(--c-orange-rgb)); /* Background / Orange */
  --c-orange-deep: #6b2315;    /* Texte (Inverse) / Orange foncée */
  /* Blanc pur, distinct du crème : la maquette du CTA le demande en propre
     pour l'aplat de survol, qui doit trancher sur le fond crème. */
  --c-white: #fff;

  --c-label-mid: #564846;      /* pastille de fermeture de la modale */
  --c-orange-mid: #c9391c;     /* pastille d'icône sur la barre orange pleine largeur */

  --c-ink-2: rgb(42 36 35 / 0.6);          /* Texte / Secondaire — #2a242399 */
  --c-ink-inv-2: rgb(255 251 244 / 0.6);   /* Texte (Inverse) / Secondaire — #fffbf499 */
  --c-ink-inv-3: #696160;                  /* Texte (Inverse) / Label */

  --c-border: rgb(152 150 144 / 0.2);      /* Border / Primaire — #98969033 */
  --c-border-inv: rgb(255 251 244 / 0.05); /* Border / Inverse — #fffbf40d */

  /* ── Typographie ─────────────────────────────────────────────────────
     Les letter-spacing Figma sont exprimés en POURCENTAGE, pas en px :
     H1 -3 %, H3/Large/Medium/Small -2 %, Label/Tag +2 %.
     On les traduit en `em` pour qu'ils restent justes à toutes les tailles. */
  --ff-display: "Helvetica Now Var", "HN Fallback", Arial, sans-serif;
  --ff-mono: "Chivo Mono", "CM Fallback", ui-monospace, Menlo, monospace;

  /* Échelles fluides calées sur les valeurs Figma à 1440 (coef. = px / 1440 × 100). */
  --fs-xl: clamp(2.25rem, 4.4444vw, 4rem);          /* 36 → 64 — Texte/X-Large */
  --fs-h1: clamp(2rem, 3.8889vw, 3.5rem);           /* 32 → 56 */
  --fs-h2: clamp(1.75rem, 3.3333vw, 3rem);          /* 28 → 48 — titre de modale */
  --fs-h3: clamp(1.5rem, 2.2222vw, 2rem);           /* 24 → 32 */
  --fs-lg: clamp(1.125rem, 1.3889vw, 1.25rem);      /* 18 → 20 */
  --fs-md: clamp(1rem, 1.25vw, 1.125rem);           /* 16 → 18 */
  --fs-sm: 0.875rem;                                /* 14 — pas de réduction : lisibilité */
  --fs-body: 0.8125rem;                             /* 13 — idem */
  --fs-body-sm: 0.75rem;                            /* 12 — descriptifs d'étape */
  /* Le bloc sombre nomme « Texte/Body » un 15 px, là où les sections claires
     nomment ainsi un 13 px. Incohérence de la maquette : on garde les deux
     plutôt que d'écraser l'existant. */
  --fs-body-lg: 0.9375rem;                          /* 15 — bloc sombre */
  --fs-tag: 0.625rem;                               /* 10 — idem */

  /* Figma affiche 19.987 : artefact d'un composant mis à l'échelle, c'est un
     20 px. */
  --fs-brand: 1.25rem;                              /* 20 — signature CSMK */
  --fs-stat: 1.5rem;                                /* 24 — compteur du widget */

  /* Bouton — écart assumé avec la maquette (10 px / 16-24), validé avec la DA :
     à 10 px la hauteur de ligne tombe à 9 px, illisible sur un CTA.
     12 px en interligne 1 donne une hauteur nette de 40 px (14 + 12 + 14). */
  --fs-btn: 0.75rem;
  --lh-btn: 1;
  --pad-btn-block: 14px;
  --pad-btn-inline: 28px;
  /* Hauteur nette d'un bouton, dérivée et non recopiée : la vignette de
     contact s'y aligne, et suivra si le rembourrage change. */
  --size-btn: calc(2 * var(--pad-btn-block) + var(--fs-btn) * var(--lh-btn));

  --lh-tight: 0.9;   /* Titre/H1 · Label/Tag */
  --lh-flat: 1;      /* Titre/H3 · Texte Large/Medium/Small */
  --lh-body: 1.2;    /* Texte/Body · Label/Tag (X-Height) */

  --ls-h1: -0.03em;
  --ls-tight: -0.02em;
  --ls-tag: 0.02em;

  --fw-regular: 400;
  --fw-bold: 700;

  /* Axes de la variable : opsz 30 = coupe « Display », opsz 12 = coupe « Text ».
     Figma distingue explicitement les deux (Texte/Medium est en Text Bold). */
  --opsz-display: 30;
  --opsz-text: 12;

  /* Compensation `text-box-trim` pour les navigateurs sans support natif.
     Dérivation, en em, avec ascent .875 / descent .208 / line-gap 0 / cap .712
     (métriques imposées par le @font-face, donc identiques sur toute plateforme) :
       demi-interligne  = (lh − (asc + desc)) / 2
       ligne de base    = demi-interligne + asc
       haut de capitale = ligne de base − cap
       bas alphabétique = lh − ligne de base                                  */
  --trim-cap-lh09: 0.0715em;   /* lh 0.9 : 0.7835 − 0.712 */
  --trim-base-lh09: 0.1165em;  /* lh 0.9 : 0.9 − 0.7835   */
  --trim-cap-lh10: 0.1215em;   /* lh 1   : 0.8335 − 0.712 */
  --trim-base-lh10: 0.1665em;  /* lh 1   : 1 − 0.8335     */

  /* ── Rythme d'espacement ─────────────────────────────────────────────
     Repris tel quel du design : ce n'est pas une échelle 8pt régulière,
     le rythme (2 / 6 / 12 / 14 / 40) est intentionnel. */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-28: 28px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-56: 56px;
  --sp-64: 64px;
  --sp-96: 96px;

  /* Respiration entre deux sections — la seule : 200 px de contenu à contenu,
     partout. Entre deux sections de même fond, c'est le haut de la seconde qui
     la porte en entier ; quand le fond change, chaque côté de l'arête prend
     `--sp-edge` (160), pour que le contenu ne paraisse jamais collé.
     Réduite sur téléphone pour ne pas creuser l'écran. */
  --sp-inter: 200px;
  --sp-edge: 160px;

  /* ── Grille ──────────────────────────────────────────────────────────
     À 1440 : gouttière 56, contenu 1328. Au-delà, le contenu est plafonné
     à 1440 et les gouttières absorbent le reste — au-dessus, la carte offre
     dépasserait 900px de haut et sortirait d'un viewport 1080p. */
  /* Navigation flottante : 220 de large, encartée de 16 en haut à droite. */
  --nav-w: 220px;
  --nav-inset: 16px;

  --gutter: clamp(20px, 5vw, 56px);
  --shell-max: calc(1440px + 2 * var(--gutter));

  /* ── Rayons ──────────────────────────────────────────────────────────── */
  --r-card: 24px;   /* carte offre + puits image */
  --r-md: 12px;     /* bloc audio-guide · barre CTA pleine largeur */
  --r-lg: 16px;     /* cartes et vignettes du bloc sombre */
  --r-sm: 8px;      /* durée projet · étapes · visuel méthode */
  --r-xs: 4px;      /* vignette d'avatar dans le widget de contact */
  --r-pill: 3000px; /* pastille audio */

  /* Débord de l'aplat de survol du CTA, sur les quatre côtés. C'est aussi la
     moitié de l'écart vignette/bouton : au survol chacun se rapproche de cette
     valeur, l'écart se referme et le contenu reste centré dans l'aplat. */
  --cta-bleed: 3px;

  /* ── Motion ──────────────────────────────────────────────────────────
     Deux courbes sur toute la section, pas une de plus.                */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);    /* entrées — décélération franche */
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1); /* transitions symétriques */
  /* Troisième et dernière courbe : le léger dépassement donne aux widgets de
     navigation la sensation de venir *se clipser* les uns sous les autres. */
  --e-snap: cubic-bezier(0.34, 1.4, 0.64, 1);
  /* Ressort léger, ~4 % de dépassement (zoom des portraits de CTA). */
  --e-spring: linear(
    0,
    0.009,
    0.035 2.1%,
    0.141 4.4%,
    0.723 12.9%,
    0.938 16.7%,
    1.017 20.8%,
    1.041 24.7%,
    1.038 28.9%,
    1.006 41.2%,
    0.998 51.5%,
    1
  );

  --d-micro: 200ms;  /* hover / focus */
  --d-acc: 420ms;    /* ouverture accordéon */
  --d-enter: 620ms;  /* entrée d'un élément */
  --d-line: 760ms;   /* révélation de ligne de titre */
  --d-narrative: 900ms; /* tracé de la timeline — narratif assumé */
  --d-slide: 900ms;     /* passage d'un témoignage à l'autre */
  --stagger: 70ms;
  --d-nav-lead: 220ms; /* la carte se déplie avant que les widgets se greffent */
  /* Relais d'un logo dans la bande de clients : le temps que l'ancien sorte
     par le haut et que le nouveau prenne sa place. Relevé sur la vidéo de
     référence, où la course dure un peu moins d'un tiers de seconde. */
  --d-logo: 340ms;
  /* Bascule d'une carte à l'autre dans le jeu des blocages. Assez long pour
     qu'on suive la carte qui recule, assez court pour enchaîner. */
  --d-carte: 420ms;
  /* Changement de teinte d'une carte : plus court que son déplacement, et
     retardé pour la carte qui recule — sinon le passage du marron au crème se
     voit comme un flash. */
  --d-teinte: 220ms;
  --card-lift: 28px; /* course d'entrée d'une carte offre */

  /* ── Élévation (échelle fermée, aucun z-index arbitraire) ────────────── */
  --z-base: 0;
  --z-scrim: 10;
  --z-overlay: 20;
  --z-modal: 50;
  --z-consent: 60; /* au-dessus de la modale : le choix de consentement prime */
}

@media (max-width: 767px) {
  :root {
    --sp-inter: 96px;
    --sp-edge: 72px;
  }
}