/* ============================================================================
   TYPOGRAPHY SYSTEM — Gouttières Boréal
   ----------------------------------------------------------------------------
   Système typographique fluide, scalable et responsive.
   Basé sur : CSS variables + clamp() + spacing contextuel intelligent.

   Architecture :
     1. Design tokens (`:root`)            ─ tailles, poids, line-heights, spacing
     2. Base typo                          ─ body, h1-h6, p, listes, liens
     3. Spacing contextuel (`:has()`)      ─ rythme vertical auto entre titres
     4. Utilitaires (lead, display, etc.)  ─ classes optionnelles réutilisables
     5. Theme adapter (template Bexon)     ─ mappe les classes existantes du
                                             template sur les tokens du système

   À charger APRÈS `main.css` pour pouvoir surcharger les styles du template.
   ============================================================================ */


/* ---------------------------------------------------------------------------- 
   1. DESIGN TOKENS
   ---------------------------------------------------------------------------- */
:root {
  /* ----- Échelle typographique fluide (clamp(min, preferred, max)) ----- */
  --fs-display: clamp(3rem, 1.6rem + 5vw, 6rem);          /* hero / display    */
  --fs-h1:      clamp(2.5rem, 1.2rem + 3vw, 4rem);        /* page heading      */
  --fs-h2:      clamp(2rem, 1rem + 2vw, 3rem);            /* section heading   */
  --fs-h3:      clamp(1.5rem, 0.8rem + 1.5vw, 2.25rem);   /* sub heading       */
  --fs-h4:      clamp(1.25rem, 0.85rem + 1vw, 1.5rem);    /* card heading      */
  --fs-h5:      clamp(1.125rem, 0.95rem + 0.5vw, 1.25rem);
  --fs-h6:      clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-body-lg: clamp(1.0625rem, 0.95rem + 0.3vw, 1.1875rem); /* lead          */
  --fs-body:    1rem;                                     /* paragraphe        */
  --fs-small:   0.875rem;                                 /* meta / small      */
  --fs-xs:      0.75rem;                                  /* badges, captions  */

  /* ----- Poids ----- */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ----- Line-heights ----- */
  --lh-tight:       1.05;
  --lh-snug:        1.15;
  --lh-cozy:        1.25;
  --lh-comfortable: 1.4;
  --lh-relaxed:     1.6;
  --lh-loose:       1.75;

  /* ----- Letter-spacing ----- */
  --ls-display:  -0.025em;
  --ls-heading:  -0.01em;
  --ls-body:     0;
  --ls-eyebrow:  0.08em;   /* sous-titres en MAJUSCULES */
  --ls-button:   0.01em;   /* boutons / CTA — léger air entre les lettres */

  /* ----- Largeur de mesure (caractères par ligne) ----- */
  --measure:     65ch;
  --measure-sm:  45ch;
  --measure-lg:  80ch;

  /* ----- Spacing pour les titres (fluide) ----- */
  --heading-spacing-xl: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  --heading-spacing-lg: clamp(1.25rem, 0.85rem + 1.2vw, 2rem);
  --heading-spacing-md: clamp(1rem, 0.75rem + 0.8vw, 1.5rem);
  --heading-spacing-sm: clamp(0.75rem, 0.6rem + 0.5vw, 1.2rem);
  --heading-spacing-xs: clamp(0.5rem, 0.4rem + 0.3vw, 0.875rem);

  /* Valeur courante (peut être réassignée par contexte via :has()) */
  --heading-spacing: var(--heading-spacing-md);

  /* ----- Couleur de texte ------------------------------------------------
     Branchées sur les brand tokens avec un fallback raisonnable au cas où
     `brand-tokens.css` ne serait pas chargé. */
  --text-color:        var(--brand-text-body, #0A0A0A);
  --text-color-muted:  var(--brand-text-muted, #5B6566);
}


/* ----------------------------------------------------------------------------
   2. BASE TYPO
   ---------------------------------------------------------------------------- */
body {
  font-family: var(--brand-font-body, 'Poppins', sans-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--text-color);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--brand-font-heading, var(--brand-font-body, 'Poppins', sans-serif));
  color: inherit;
  margin: 0 0 var(--heading-spacing);
  /* `text-wrap: balance` n'est PAS appliqué globalement : sur les titres
     courts (≤ ~6 mots) il produit parfois un découpage en 3 lignes peu
     esthétique. On l'active de façon opt-in via la classe `.text-balance`
     ou sur les cas où l'on sait que c'est sûr (slider, display, etc.). */
}

.text-display,
.slider-title {
  font-family: var(--brand-font-display, var(--brand-font-heading, 'Poppins', sans-serif));
}

h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  --heading-spacing: var(--heading-spacing-xl);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  --heading-spacing: var(--heading-spacing-lg);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-cozy);
  --heading-spacing: var(--heading-spacing-md);
}

h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-cozy);
  --heading-spacing: var(--heading-spacing-md);
}

h5 {
  font-size: var(--fs-h5);
  font-weight: var(--fw-medium);
  line-height: var(--lh-comfortable);
  --heading-spacing: var(--heading-spacing-sm);
}

h6 {
  font-size: var(--fs-h6);
  font-weight: var(--fw-medium);
  line-height: var(--lh-comfortable);
  --heading-spacing: var(--heading-spacing-sm);
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  max-width: var(--measure);
  text-wrap: pretty;                   /* évite les veuves/orphelines */
  margin: 0 0 1em;
}
p:last-child { margin-bottom: 0; }

ul, ol {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  max-width: var(--measure);
}

small { font-size: var(--fs-small); }


/* ----------------------------------------------------------------------------
   3. SPACING CONTEXTUEL (smart rhythm)
   ----------------------------------------------------------------------------
   Si un conteneur logique (section, .container, header de section) contient
   un titre de niveau N, on ajuste automatiquement l'espacement par défaut.
   Les niveaux supérieurs ont priorité.
   ---------------------------------------------------------------------------- */
@supports (selector(:has(*))) {
  section:has(> h1, > .container h1),
  .sec-heading:has(h1) {
    --heading-spacing: var(--heading-spacing-xl);
  }

  section:has(> h2, > .container h2),
  .sec-heading:has(h2) {
    --heading-spacing: var(--heading-spacing-lg);
  }

  section:has(> h3, > .container h3):not(:has(h2)),
  .sec-heading:has(h3):not(:has(h2)) {
    --heading-spacing: var(--heading-spacing-md);
  }

  section:has(> h4):not(:has(h2, h3)),
  .sec-heading:has(h4):not(:has(h2, h3)) {
    --heading-spacing: var(--heading-spacing-sm);
  }
}


/* ----------------------------------------------------------------------------
   4. UTILITAIRES
   ---------------------------------------------------------------------------- */
.text-display {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}

.text-lead,
.lead {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-comfortable);
  color: var(--text-color);
  max-width: var(--measure-lg);
}

.text-small  { font-size: var(--fs-small); }
.text-xs     { font-size: var(--fs-xs); }

.text-eyebrow {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  line-height: var(--lh-comfortable);
}

.text-muted   { color: var(--text-color-muted); }
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }
.no-measure   { max-width: none; }

.measure-sm { max-width: var(--measure-sm); }
.measure    { max-width: var(--measure); }
.measure-lg { max-width: var(--measure-lg); }


/* ----------------------------------------------------------------------------
   5. THEME ADAPTER — template Bexon
   ----------------------------------------------------------------------------
   Mappe les classes spécifiques du template (qui ont leur propre `font-size`
   en pixels dans main.css) sur les tokens fluides du système.
   But : avoir un site responsive sans media query sur la typo.

   Pour désactiver l'adapter (revenir au comportement du template d'origine),
   commenter la section 5 entière OU retirer simplement le <link> qui charge
   ce fichier dans index-2.html.
   ---------------------------------------------------------------------------- */

/* ----- Hero (banner slider) ----- */
.slider-title {
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;             /* léger air entre les lettres */
  text-wrap: balance;                  /* sûr ici : titre toujours sur >= 2 lignes */
}
.slider-title span {
  font-weight: var(--fw-light);       /* mot accentué plus aéré */
}

.slider-desc {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-comfortable);
  max-width: var(--measure);
}

/* ----- Section heading ----- */
.sec-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
}

.sec-heading .sub-title,
.sub-title {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  line-height: var(--lh-comfortable);
}

/* ----- Cartes / items (choose, service, blog, project, team, pricing…) ----- */
.choose-box .title,
.service-item .title,
.blog-item .title,
.team-content .title,
.project-item .title,
.pricing-box .title,
.feature-content .title,
.mission-vision-box .title,
.process-content .title,
.cta-content .title,
.footer-widget .title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-cozy);
}

/* ----- Descriptions / paragraphes du template ----- */
.choose-box .desc,
.service-item .desc,
.blog-item .desc,
.mission-vision-box .desc,
.process-content .desc,
.about-desc,
.footer-text p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  max-width: var(--measure);
}

/* ----- Counters / stats ----- */
.countup-item .count-text {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-comfortable);
}

/* ----- Témoignages ----- */
.testimonial-item .desc p {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-comfortable);
}
.testimonial-author .title {
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-comfortable);
}
.testimonial-author .designation {
  font-size: var(--fs-small);
  color: var(--text-color-muted);
}

/* ----- FAQ ----- */
.tj-faq .faq-title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-cozy);
}
.tj-faq .faq-text p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  max-width: var(--measure);
}

/* ----- Boutons -----
   Les boutons natifs du theme Bexon (`.tj-primary-btn`, `.tj-primary-btn-lg`,
   `.text-btn`) consomment notre système typographique :
     - font-family : variable de marque (Poppins par défaut)
     - font-size   : fluide via clamp() (--fs-body) — le bouton lg utilise --fs-h6
     - font-weight : 600 (--fw-semibold) — assez ferme pour un CTA
     - letter-spacing : --ls-button (légèrement aéré)
   La taille du `-lg` reste un cran au-dessus pour préserver la hiérarchie. */
.tj-primary-btn,
.tj-primary-btn-lg,
.text-btn {
  font-family: var(--brand-font-body, 'Poppins', sans-serif);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-button);
  line-height: 1;
}
.tj-primary-btn,
.text-btn {
  font-size: var(--fs-body);
}
.tj-primary-btn-lg {
  font-size: var(--fs-h6);
}


/* ----------------------------------------------------------------------------
   6. BONUS — accessibilité
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    text-wrap: initial;                /* certains navigateurs glitchent */
  }
}