/* ============================================================================
   VSN STRAPS — VARIABLES
   Tous les tokens de design : couleurs, typographies, espacements, courbes.
   Modifier ici change tout le site.
   ============================================================================ */
:root {
  /* --- Palette (codes confirmés au cahier des charges, §10) ----------------
     L'ivoire porte les pages, l'encre porte les ruptures. Le scarlet et
     l'olive sont des teintes RÉELLES du catalogue, réemployées en fonds de
     section pour que la page change d'environnement au lieu de rester crème
     du haut en bas. */
  --color-warm-white: #faf9f6;   /* blanc cassé : cartes, zones lumineuses */
  --color-ivory:      #f3efe6;   /* ivoire chaud : fond principal */
  --color-ivory-deep: #ebe5d8;   /* ivoire soutenu : ruptures douces */
  --color-sand:       #ddd2c1;
  --color-sand-soft:  #ece5d8;
  --color-plate:      #f7f5f0;   /* fond normalisé des visuels produit */
  /* Plateau de la fiche produit, refonte du 04.09.2026. L'ancien partait d'un
     BLANC PUR au centre : c'est lui qui faisait « cheap », un studio n'éclaire
     jamais un fond à 100 %. On reste dans les ivoires de la maison, ceux de la
     section Matériaux, et on assombrit vers les bords pour que la pièce se
     détache par l'ombre plutôt que par un encadré. Le plateau sombre, lui, a
     été essayé le 29.08 et refusé : il cernait le Starlight crème de noir. */
  --plateau-haut:     #f6f2e8;   /* lumière du haut, jamais #fff */
  --plateau-fond:     #ece5d7;   /* beige assumé, celui de la section texture */
  --plateau-bord:     #ded4c1;   /* vignettage : c'est lui qui donne le volume */
  --color-black:      #11110f;   /* encre */
  --color-charcoal:   #292824;
  --color-muted:      #6d6a64;   /* gris chaud : textes secondaires */
  --color-navy:       #14233f;   /* bleu nuit : focus, filets, détails */
  --color-olive:      #67693f;
  /* Scarlet et orange sont des couleurs de PRODUIT (pastilles, nuancier),
     jamais des couleurs d'interface : c'est ce qui faisait dérailler la page.
     L'interface n'a que deux fonds et deux accents. */
  --color-scarlet:    #a42a35;
  --color-orange:     #d4581f;

  /* --- Les deux seuls accents d'interface ---------------------------------
     L'or ne vit QUE sur fond sombre (c'est de la lumière), le bleu nuit QUE
     sur fond clair (c'est de l'encre). Ils ne se croisent jamais. */
  --color-gold:       #d6b76b;
  --color-gold-deep:  #b4903f;
  --color-border:     rgba(17, 17, 15, 0.14);
  --color-border-soft: rgba(17, 17, 15, 0.08);
  --color-ok:         #3f6b4b;
  --color-err:        #8c3a2e;

  /* --- Typographie ---------------------------------------------------------
     UN SEUL système : Instrument Sans, grotesque contemporaine recommandée
     par le cahier des charges (§10). Le caractère vient du contraste de
     taille et de graisse, pas d'une serif de « luxe » posée par réflexe. */
  --font-ui:      "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.86rem;
  --text-base: 1rem;
  --text-md: 1.14rem;
  --text-lg: 1.5rem;
  --text-xl: clamp(1.8rem, 3.4vw, 2.8rem);
  --text-hero: clamp(2.9rem, 7.4vw, 6.4rem);   /* contraste fort assumé */
  --text-wall: clamp(1.5rem, 4.3vw, 3.9rem);   /* mur de statements : chaque
     phrase doit tenir sur UNE ligne, sinon la liste perd son rythme d'index */

  --tracking-caps: 0.1em;        /* labels : espacement contenu, pas décoratif */
  --tracking-tight: -0.028em;    /* grands titres : serrés, tenus */

  /* --- Espacements & mise en page ----------------------------------------- */
  --space-1: 0.5rem;  --space-2: 1rem;   --space-3: 1.75rem;
  --space-4: 2.75rem; --space-5: 4.5rem; --space-6: 7rem;
  --container: 1240px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --radius: 2px;                 /* angles sobres, à peine adoucis */
  --radius-lg: 6px;

  /* --- Ombres (presque imperceptibles) ------------------------------------ */
  --shadow-card: 0 1px 2px rgba(17,17,15,0.04), 0 10px 34px rgba(17,17,15,0.05);
  --shadow-float: 0 18px 60px rgba(17,17,15,0.14);

  /* --- Mouvement ----------------------------------------------------------- */
  --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-ui:     cubic-bezier(0.33, 0, 0.15, 1);
  --dur-fast: 260ms;            /* interactions courtes */
  --dur-med:  760ms;            /* apparitions */
  --dur-slow: 1050ms;           /* transitions éditoriales */
  /* Alias sémantiques (compat. brief) */
  --duration-fast: var(--dur-fast);
  --duration-medium: 480ms;
  --duration-slow: var(--dur-med);

  /* --- Composants ----------------------------------------------------------- */
  --header-h: 84px;
  --header-h-scrolled: 66px;
}

/* --- Ajouts de la passe mobile-first (09.08.2026) -------------------------
   Le trafic vient de TikTok, donc du téléphone. Ces trois jetons servent aux
   retours immédiats, ceux qu'on sent sous le doigt. */
:root {
  /* Alias sémantique : --ease-luxury est déjà un ease-out fort, mais son nom
     ne dit pas à quoi il sert. Un retour d'appui n'est pas du « luxe ». */
  --ease-out: var(--ease-luxury);
  /* Appui : 130 ms. Au-delà de 160 ms le doigt a quitté l'écran avant la fin
     de l'animation, et le bouton semble répondre en retard. */
  --dur-press: 130ms;
  /* De combien un élément s'enfonce quand on le presse. Assez pour se sentir,
     jamais assez pour se voir. */
  --press: 0.97;
}