/* ============================================================
 * TYPOGRAPHIE — SOURCE UNIQUE
 * Toute la typo du site est ici : familles, echelle, graisses,
 * capitales. Les gabarits PHP ne declarent plus que la couleur
 * et la mise en page de leurs titres.
 *
 * Titres  : Inter 600, CAPITALES
 * Textes  : Inter 500
 * Logo    : Montserrat 700
 * Boutons : Inter 600 / 15px
 * ============================================================ */

:root{
  --font-display:'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-sans:'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-logo:'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ui:'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Echelle — valeurs mobile */
  --fs-h1:26px;        --lh-h1:27px;
  --fs-h2:20px;        --lh-h2:24px;
  --fs-h3:15px;        --lh-h3:19px;
  --fs-eyebrow:13px;   --lh-eyebrow:20px;
  --fs-lead:16px;      --lh-lead:24px;
  --fs-chapo:15.5px;   --lh-chapo:23px;
  --fs-body:13.5px;    --lh-body:20px;
  --fs-btn:15px;

  /* Capitales : les titres ont besoin d'un interlettrage positif */
  --ls-title:0.02em;
}

@media (min-width:880px){
  :root{
    --fs-h1:35px;        --lh-h1:40px;
    --fs-h2:32px;        --lh-h2:38px;
    --fs-h3:17px;        --lh-h3:22px;
    --fs-eyebrow:14px;   --lh-eyebrow:21px;
    --fs-lead:18px;      --lh-lead:27px;
    --fs-chapo:17px;     --lh-chapo:26px;
  }
}

/* ------------------------------------------------------------ Socle */
body{
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:500;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:var(--ls-title);
  color:var(--pdc-brun, #4A3F35);
}
h1{ font-size:var(--fs-h1); line-height:var(--lh-h1); }
h2{ font-size:var(--fs-h2); line-height:var(--lh-h2); }
h3{ font-size:var(--fs-h3); line-height:var(--lh-h3); }

/* ------------------------------------------------- Roles de texte */
.tEyebrow{
  font-family:var(--font-display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:var(--ls-title);
  color:var(--pdc-brun, #4A3F35);
  font-size:var(--fs-eyebrow);
  line-height:var(--lh-eyebrow);
}
.tLead{
  font-family:var(--font-sans);
  font-weight:500;
  font-size:var(--fs-lead);
  line-height:var(--lh-lead);
}
.tChapo{
  font-family:var(--font-sans);
  font-weight:500;
  font-size:var(--fs-chapo);
  line-height:var(--lh-chapo);
}

/* ------------------------------------------ Boutons et logo */
button,
input[type="submit"],
input[type="button"],
.btn, .btn-dark, .btn-light, .btn-ghost, .btn-block,
.gtCtaBtn, .gtCta, .alNewsBtn{
  font-family:var(--font-ui);
  font-weight:600;
  font-size:var(--fs-btn);
}
.alLogo{
  font-family:var(--font-logo);
  font-weight:700;
}

/* ============================================================
 * TITRES DU SITE
 * Ajouter un titre = ajouter son selecteur dans la bonne liste.
 * ============================================================ */

/* --- Niveau 1 : titres de page et de heros --- */
h1,
.csH1,
.artHead h1,
.blogHead h1,
.cnlHero h1,
.scsHero h1,
.colHead h1,
.gtHead h1,
.hpHeroVid-title,
.crtHead h1,
.prHead h1,
.prEdit-title,
.pdpName{
  font-family:var(--font-display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:var(--ls-title);
  font-size:var(--fs-h1);
  line-height:var(--lh-h1);
}

/* --- Niveau 2 : titres de section --- */
h2,
.alNewsBand h2,
.csSectionH2,
.artContent h2,
.artRelated h2,
.colSeoBody h1,
.proSuccess h2,
.gtSection-title,
.gtCta h2,
.hpCarousel-title,
.hpDuoCard-title,
.hpFaq-title,
.crtEmpty h2,
.prStep-title,
.pdpDesc h2{
  font-family:var(--font-display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:var(--ls-title);
  color:var(--pdc-brun, #4A3F35);
  font-size:var(--fs-h2);
  line-height:var(--lh-h2);
}

/* --- Niveau 3 : titres de carte et de bloc --- */
h3,
.alDrawerNav a,
.alFootBrand h3,
.artContent h3,
.blogCard-title,
.blogEmpty h3,
.scsStep-title,
.colEmpty h3,
.colSeoBody h2,
.cmpCard h2,
.gtSelector-title,
.gtReco-title,
.gtCalc h3,
.hpColl-title,
.hpCatCard-title,
.hpFaqItem-q,
.crtSummary h3,
.crtConfirm-box h3,
.prEdit-h3,
.pdpProse h2{
  font-family:var(--font-display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:var(--ls-title);
  color:var(--pdc-brun, #4A3F35);
  font-size:var(--fs-h3);
  line-height:var(--lh-h3);
}

/* --- Nom de produit : meme gabarit que le niveau 3, mais en casse
       normale. Un nom de reference se lit mal tout en capitales. --- */
.pCard-name{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--pdc-brun, #4A3F35);
  font-size:var(--fs-h3);
  line-height:var(--lh-h3);
}

/* --- Titres secondaires : ils gardent leur taille propre --- */
.artContent h4,
.colFilterModal-top h3,
.colSeoBody h3,
.colSeoBody h4,
.proFormBlock-title,
.gtRecoCard-size,
.gtSchema-name,
.gtFaq-item summary,
.crtRow-name,
.prMatCard-name,
.prColorModal-title,
.prItem-name,
.prCart-title,
.pdpProse h3,
.pdpProse h4{
  font-family:var(--font-display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:var(--ls-title);
  color:var(--pdc-brun, #4A3F35);
}

/* ============================================================
 * FICHE PRODUIT — titres plus compacts
 * Le nom du produit occupait le niveau 1 (54px en bureau), trop
 * lourd en capitales a cote de la galerie et du prix.
 * ============================================================ */
.pdpDesc h2{
  font-size:18px;
  line-height:23px;
}
@media (min-width:880px){
  .pdpDesc h2{
    font-size:26px;
    line-height:32px;
  }
}