/* ========================================
   COMPONENT TYPOGRAPHY CLASSES
   ======================================== */

/* SECTION TITLES - Standardized */

/* Large section title (hero, main pages) - 3.6rem base */
.section-title-lg {
  font-size: 3.6rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  margin-bottom: 2rem;
}

/* Medium section title - 3.2rem base */
.section-title-md {
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  margin-bottom: 1.5rem;
}

/* Small section title - 2.4rem base */
.section-title-sm {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  margin-bottom: 1rem;
}

/* Extra small section title - 1.75rem base */
.section-title-xs {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-strong);
  margin-bottom: 0.75rem;
}

/* ========================================
   SPECIFIC COMPONENT TITLE CLASSES
   (Replace old 100px + inconsistencies)
   ======================================== */

/* Hero section titles - use .section-title-lg */
.hero-title {
  font-size: clamp(2rem, 6vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
}



/* Service/Offer card titles */
.card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 0.5rem;
}

.card-subtitle {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

/* ========================================
   ATOUT / SHOWCASE / SERVICE SECTIONS
   (Fixing the 100px anomalies)
   ======================================== */



/* Special cases - override base with specific sizes when needed */
/* 
.qualite-title {
  font-size: 3.6rem;
  color: var(--text-strong);
}

.leviers-title {
  font-size: 3.2rem;
  font-weight: 900;
}

.ready-title {
  font-size: 3.6rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.tracking-title {
  font-size: 3.6rem;
  color: white;
}

.formats-title {
  font-size: 3.6rem;
  color: var(--text-strong);
}

.testimonials-title,
.faq-title,
.offer-section-title {
  font-size: 3.6rem;
  font-weight: 800;
} */

/* ========================================
   FIT + SECTEURS TITLES (Special case)
   ======================================== */


/* HOME PAGE H2 LARGE - For main content h2 in home sections */
.home-page h2,
.h2-home {
  font-size: 4rem;
  font-weight: 800;
  color: var(--text-strong);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
}