/* ========================================
   TYPOGRAPHY HIERARCHY - Strict & Consistent
   Garantit que H1 > H2 > H3 partout sur le site
   ======================================== */

/* === RÈGLES STRICTES === */

/* H1 minimum: toujours > H2 (2.618rem) */
h1,
.h1 {
  font-size: clamp(3.5rem, 6vw, 5rem) !important; /* augmenté: 3.5-5rem */
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* Hero H1: encore plus grand */
[data-hero] h1,
.home-title,
.page-title {
  font-size: clamp(3.8rem, 7vw, 5.5rem) !important; /* augmenté: 3.8-5.5rem */
}

/* H2: taille fixe basée sur le nombre d'or */
h2,
.h2 {
  font-size: clamp(2rem, 4vw, 2.618rem) !important;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* H3 */
h3,
.h3 {
  font-size: clamp(1.4rem, 3vw, 1.618rem) !important;
  font-weight: 400;
  line-height: 1.2;
}

/* === EXCEPTIONS: Labels et petits textes === */

/* Les labels NE DOIVENT PAS utiliser h2/h3 */
/* Si nécessaire pour la sémantique, utiliser un span ou p */
.section-label {
  font-size: 0.8rem !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 400;
  /* Si c'est un h2/h3 malgré tout, forcer la petite taille */
}

/* Project code: pas un vrai heading */
.project-code {
  font-size: 1.75rem !important;
  font-weight: 600;
  text-transform: uppercase;
}

/* === MOBILE === */

@media (max-width: 768px) {
  h1,
  .h1 {
    font-size: clamp(3rem, 9vw, 4rem) !important; /* augmenté mobile */
  }
  
  [data-hero] h1,
  .home-title,
  .page-title {
    font-size: clamp(3.2rem, 10vw, 4.5rem) !important; /* augmenté mobile */
  }
  
  h2,
  .h2 {
    font-size: clamp(1.8rem, 6vw, 2.2rem) !important;
  }
  
  h3,
  .h3 {
    font-size: clamp(1.3rem, 5vw, 1.5rem) !important;
  }
}

/* === RESET margins === */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 1rem 0;
}

/* Headings dans hero: pas de margin */
[data-hero] h1,
[data-hero] h2 {
  margin: 0;
}