/* ==========================================================================
   DE MONTIGNY — tokens.css
   Variables de design : couleurs, typographies, espacements, durées.
   C'est le seul fichier à modifier pour changer l'apparence globale du site.
   ========================================================================== */

:root {

  /* --- Couleurs de fond et de texte ------------------------------------- */
  --noir:            #0A0A0A;   /* texte, header, boutons pleins */
  --blanc:           #FFFFFF;   /* fond principal */
  --ivoire:          #F4F2EF;   /* fond des visuels produit, sections alternées */
  --ivoire-fonce:    #E8E4DF;   /* filets, séparateurs sur fond ivoire */
  --gris:            #6E6E6E;   /* texte secondaire, légendes — 5,10:1 sur blanc
                                   et 4,56:1 sur ivoire : lisible en petit corps */
  --gris-clair:      #E2E2E2;   /* filets sur fond blanc */
  --gris-moyen:      #8E8E8E;   /* fond du rendu 3D du nœud, accordé à l'image */
  --noir-profond:    #151515;   /* fond des visuels sur section noire */

  /* --- Couleurs de marque ----------------------------------------------- */
  --azalea:          #B5154A;   /* accent unique : liens actifs, prix promo, focus */
  --azalea-profond:  #650629;   /* survol de l'accent */
  --bordeaux:        #4A0D22;   /* réservé aux aplats rares (bandeau, citation) */

  /* --- Coloris produit (pastilles de sélection) ------------------------- */
  --coloris-azalea:  #AF1D4A;
  --coloris-noir:    #141414;
  --coloris-bleu:    #2E6C9B;
  --coloris-mink:    #BCA99C;
  --coloris-rose:    #C8175C;

  /* --- Typographies ------------------------------------------------------
     Aucune police n'est téléchargée : on s'appuie sur les polices déjà
     présentes sur la machine du visiteur. Zéro dépendance, zéro temps de
     chargement. Voir PLAN.md, dette technique D6.                          */
  --font-titre:  "Helvetica Neue", "Helvetica", "Arial", "Segoe UI", system-ui, sans-serif;
  --font-texte:  "Helvetica Neue", "Helvetica", "Arial", "Segoe UI", system-ui, sans-serif;
  --font-serif:  "Didot", "Bodoni 72", "Bodoni MT", "Playfair Display", "Times New Roman", Georgia, serif;

  /* --- Échelle typographique (fluide : s'adapte à la largeur d'écran) ---- */
  --t-geant:     clamp(3.5rem, 13vw, 12rem);    /* nom de marque, hero */
  --t-titre-1:   clamp(2.2rem, 6.5vw, 5.5rem);  /* titres de section */
  --t-titre-2:   clamp(1.5rem, 3.2vw, 2.6rem);  /* titres de produit */
  --t-titre-3:   clamp(1.1rem, 1.8vw, 1.4rem);  /* sous-titres */
  --t-texte:     0.9375rem;                     /* 15px — corps de texte */
  --t-petit:     0.8125rem;                     /* 13px — légendes */
  --t-label:     0.6875rem;                     /* 11px — labels capitales */

  /* --- Graisses et interlettrages --------------------------------------- */
  --w-normal:    400;
  --w-medium:    500;
  --w-gras:      700;
  --w-noir:      800;
  --ls-serre:   -0.035em;   /* grands titres : lettres resserrées */
  --ls-normal:   0;
  --ls-label:    0.22em;    /* labels capitales : lettres très espacées */

  /* --- Espacements (échelle de 4 px) ------------------------------------ */
  --e-1:  0.25rem;   /*  4px */
  --e-2:  0.5rem;    /*  8px */
  --e-3:  0.75rem;   /* 12px */
  --e-4:  1rem;      /* 16px */
  --e-6:  1.5rem;    /* 24px */
  --e-8:  2rem;      /* 32px */
  --e-12: 3rem;      /* 48px */
  --e-16: 4rem;      /* 64px */
  --e-24: 6rem;      /* 96px */
  --e-32: 8rem;      /* 128px */

  /* --- Gouttières et marges de page ------------------------------------- */
  --marge-page:  clamp(1.25rem, 4vw, 4rem);
  --gouttiere:   clamp(0.75rem, 1.5vw, 1.5rem);

  /* --- Hauteurs ---------------------------------------------------------- */
  --h-header:    72px;
  --h-header-mobile: 56px;

  /* --- Proportions d'image ----------------------------------------------- */
  --ratio-produit:  3 / 4;   /* cartes produit, galerie */
  --ratio-editorial: 4 / 5;  /* blocs éditoriaux */
  --ratio-paysage:  16 / 9;  /* bandeaux */

  /* --- Mouvement ---------------------------------------------------------- */
  --duree-courte:  180ms;
  --duree-moyenne: 420ms;
  --duree-longue:  900ms;
  --courbe:        cubic-bezier(0.16, 1, 0.3, 1);  /* décélération franche */

  /* --- Épaisseurs de filet ------------------------------------------------ */
  --filet: 1px;
}

/* Très grands écrans : la marge de page grandit pour que le contenu ne
   s'étire pas indéfiniment. Tout le site utilisant --marge-page, une seule
   règle suffit à contenir la largeur de lecture partout. */
@media (min-width: 1900px) {
  :root { --marge-page: calc((100vw - 1700px) / 2); }
}

/* Respect du réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duree-courte:  0ms;
    --duree-moyenne: 0ms;
    --duree-longue:  0ms;
  }
}