/* ============================================================
   M&K — Système de design
   Source unique des couleurs, typographies, espacements, rythmes.
   Toute valeur utilisée dans le site vient d'ici.
   ============================================================ */

:root {
  /* Le site n'a qu'un thème clair. Le déclarer évite que le
     navigateur dessine les contrôles natifs — champs, listes,
     barres de défilement — en sombre chez un visiteur dont le
     téléphone est en mode nuit. */
  color-scheme: light;

  /* --- Couleurs ------------------------------------------------ */
  --noir:      #000000;   /* noir de marque : hero, en-tête, pied de page */
  --papier:    #F4F3F0;   /* blanc cassé froid, fond général */
  --papier-2:  #EAE8E3;   /* fond secondaire, alternance de sections */
  --graphite:  #3A3A38;   /* texte courant sur fond clair — 9.8:1 */
  --gris:      #6E6A64;   /* texte secondaire — 4.9:1 */
  --trait:     #D8D5CF;   /* filets, coutures, bordures */
  --trait-fort:#B9B5AD;   /* bordure de champ, état hover */
  --fond-image:#FAFAFA;   /* fond des visuels produit, accordé aux photos */
  --oxblood:   #6E2639;   /* accent unique — 8.1:1 sur papier */
  --oxblood-clair: #A85C6E;/* accent sur fond noir — 5.2:1 */

  /* Sur fond noir */
  --sur-noir:      #F4F3F0;
  --sur-noir-doux: #A9A59E;  /* 6.4:1 sur noir */
  --trait-noir:    #2E2C29;

  /* États */
  --erreur:  #8C2F1E;
  --succes:  #2F5D3A;

  /* --- Typographies -------------------------------------------- */
  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Échelle éditoriale — plafond 6rem conformément au plancher qualité */
  --t-display: clamp(3rem, 9vw, 6rem);
  --t-1:       clamp(2.1rem, 5.2vw, 3.6rem);
  --t-2:       clamp(1.6rem, 3.4vw, 2.3rem);
  --t-3:       clamp(1.15rem, 2vw, 1.4rem);
  --t-corps:   1rem;
  --t-petit:   0.875rem;
  --t-mini:    0.78rem;

  --interligne-serre: 0.98;
  --interligne-titre: 1.12;
  --interligne-corps: 1.62;

  --chasse-display: -0.035em;  /* plancher de tracking : -0.04em */
  --chasse-titre:   -0.02em;
  --chasse-nav:     0.02em;

  --mesure: 68ch;   /* longueur de ligne du corps de texte */

  /* --- Espacements — échelle de 4 px ---------------------------- */
  --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
  --e-5: 1.5rem;   --e-6: 2rem;     --e-7: 3rem;     --e-8: 4rem;
  --e-9: 6rem;     --e-10: 8rem;    --e-11: 11rem;

  /* Respiration verticale des sections */
  --section: clamp(4.5rem, 9vw, 8.5rem);

  /* --- Mise en page -------------------------------------------- */
  --gouttiere: clamp(1.25rem, 4vw, 3.5rem);
  --largeur-max: 1560px;
  --largeur-texte: 46rem;
  --hauteur-entete: 68px;

  /* --- Mouvement ----------------------------------------------- */
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);   /* ease-out exponentiel */
  --doux:   cubic-bezier(0.4, 0, 0.2, 1);
  --d-court:  180ms;
  --d-moyen:  340ms;
  --d-long:   680ms;

  /* --- Profondeur — décalage + flou, jamais de halo centré ------ */
  --ombre-couche: 0 12px 34px -12px rgba(0, 0, 0, 0.34);
  --ombre-flottant: 0 8px 20px -8px rgba(0, 0, 0, 0.28);

  /* --- Rayon --------------------------------------------------- */
  --rayon: 0;   /* engagement de la maison : aucune arête arrondie */

  --z-entete: 60;
  --z-menu: 80;
  --z-toast: 90;
}