/* ============================================================
   ARGANE \002014 Kit typographique (composant partag\0000e9)
   ------------------------------------------------------------
   SOURCE UNIQUE de l'\0000e9chelle typographique pour TOUTES les pages.
   \0000c0 inclure dans le <head>, AVANT le  propre \0000e0 la page :
       <link rel="stylesheet" href="components/argane-type.css" />

   D\0000e9pend des familles de marque d\0000e9finies dans le :root de chaque
   page : --ff-display (Space Grotesk), --ff-body (DM Sans),
   --ff-mono (DM Mono).

   \0000c9chelle fluide (clamp min \0000b7 id\0000e9al \0000b7 max) \002014 ratio ~1.5 :
     display      H1 hero, toutes pages
     display-lg   nom produit en hero PDP (le plus grand de tout le site)
     h1 / h2 / h3 / h4 / h5 / h6
     lead         chap\0000f4 / sous-titre d'intro
     body-lg / body / small / micro
     label        libell\0000e9s DM Mono majuscules

   Utilitaires : .t-display .t-h1\002026h6 .t-lead .t-body .t-small
                 .t-micro .t-label
   ============================================================ */

:root{
  /* ---- Tailles (fluides) ---- */
  --fs-display:    clamp(36px, 4.4vw, 66px);   /* H1 hero */
  --fs-display-lg: clamp(46px, 5.8vw, 86px);   /* nom produit PDP */
  --fs-h1:         clamp(32px, 3.7vw, 56px);
  --fs-h2:         clamp(27px, 2.9vw, 44px);
  --fs-h3:         clamp(22px, 2.1vw, 30px);
  --fs-h4:         clamp(19px, 1.5vw, 22px);
  --fs-h5:         clamp(16px, 1.2vw, 18px);
  --fs-h6:         clamp(14px, 1.0vw, 15px);

  --fs-lead:       clamp(17px, 1.35vw, 20px);  /* chap\0000f4 */
  --fs-body-lg:    clamp(16px, 1.15vw, 18px);
  --fs-body:       16px;
  --fs-small:      14px;
  --fs-micro:      13px;
  --fs-label:      12px;

  /* ---- Interlignes ---- */
  --lh-display: 0.96;
  --lh-head:    1.04;
  --lh-snug:    1.2;
  --lh-body:    1.6;

  /* ---- Approches (letter-spacing) ---- */
  --ls-display: -0.04em;
  --ls-head:    -0.03em;
  --ls-tight:   -0.015em;
  --ls-label:   0.16em;

  /* ---- Espacements de section (fluides) ---- */
  --sp-hero-top:    clamp(190px, 19vh, 240px);
  --sp-crumb-gap:   clamp(40px, 5vw, 64px);
  --sp-hero-bottom: clamp(56px, 7vw, 96px);
  --sp-section:     clamp(72px, 9vw, 140px);   /* section standard */
  --sp-head:        clamp(36px, 4.5vw, 56px);  /* titre de section -> contenu */
  --sp-section-sm:  clamp(48px, 6vw, 88px);    /* section resserr\0000e9e */
}

/* ============================================================
   Styles de base \002014 appliqu\0000e9s par d\0000e9faut aux \0000e9l\0000e9ments.
   (Les r\0000e8gles propres \0000e0 chaque page, charg\0000e9es apr\0000e8s, peuvent
   surcharger ; les classes de titre des pages r\0000e9f\0000e9rencent ces
   m\0000eames tokens pour rester synchronis\0000e9es.)
   ============================================================ */
h1,h2,h3,h4,h5,h6{
  font-family:var(--ff-display, "Space Grotesk", sans-serif);
  font-weight:500;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:var(--fs-display); line-height:var(--lh-display); letter-spacing:var(--ls-display); }
h2{ font-size:var(--fs-h2);      line-height:var(--lh-head);    letter-spacing:var(--ls-head); }
h3{ font-size:var(--fs-h3);      line-height:var(--lh-head);    letter-spacing:var(--ls-head); }
h4{ font-size:var(--fs-h4);      line-height:var(--lh-snug);    letter-spacing:var(--ls-tight); }
h5{ font-size:var(--fs-h5);      line-height:var(--lh-snug);    letter-spacing:var(--ls-tight); }
h6{ font-size:var(--fs-h6);      line-height:var(--lh-snug);    letter-spacing:var(--ls-tight); }

/* ============================================================
   Utilitaires \002014 pour standardiser les nouveaux contenus.
   ============================================================ */
.t-display{ font-family:var(--ff-display); font-weight:500; font-size:var(--fs-display); line-height:var(--lh-display); letter-spacing:var(--ls-display); margin:0; text-wrap:balance; }
.t-display-lg{ font-family:var(--ff-display); font-weight:500; font-size:var(--fs-display-lg); line-height:var(--lh-display); letter-spacing:var(--ls-display); margin:0; text-wrap:balance; }
.t-h1{ font-family:var(--ff-display); font-weight:500; font-size:var(--fs-h1); line-height:var(--lh-head); letter-spacing:var(--ls-head); margin:0; text-wrap:balance; }
.t-h2{ font-family:var(--ff-display); font-weight:500; font-size:var(--fs-h2); line-height:var(--lh-head); letter-spacing:var(--ls-head); margin:0; text-wrap:balance; }
.t-h3{ font-family:var(--ff-display); font-weight:500; font-size:var(--fs-h3); line-height:var(--lh-head); letter-spacing:var(--ls-head); margin:0; }
.t-h4{ font-family:var(--ff-body); font-weight:600; font-size:var(--fs-h4); line-height:var(--lh-snug); letter-spacing:var(--ls-tight); margin:0; }
.t-h5{ font-family:var(--ff-body); font-weight:600; font-size:var(--fs-h5); line-height:var(--lh-snug); letter-spacing:var(--ls-tight); margin:0; }
.t-h6{ font-family:var(--ff-body); font-weight:600; font-size:var(--fs-h6); line-height:var(--lh-snug); letter-spacing:var(--ls-tight); margin:0; }

.t-lead{ font-family:var(--ff-body); font-weight:400; font-size:var(--fs-lead); line-height:1.62; margin:0; }
.t-body{ font-family:var(--ff-body); font-weight:400; font-size:var(--fs-body); line-height:var(--lh-body); margin:0; }
.t-small{ font-family:var(--ff-body); font-weight:400; font-size:var(--fs-small); line-height:1.55; margin:0; }
.t-micro{ font-family:var(--ff-body); font-weight:400; font-size:var(--fs-micro); line-height:1.5; margin:0; }

.t-label{
  font-family:var(--ff-mono, "DM Mono", ui-monospace, monospace);
  font-weight:500; font-size:var(--fs-label);
  letter-spacing:var(--ls-label); text-transform:uppercase;
  line-height:1; margin:0;
}