/* ============================================================
   TULIPE PALETTES - RYTHME GLOBAL DES SECTIONS
   Couche d'harmonisation chargée APRÈS les feuilles de section :
   elle impose une seule échelle de padding vertical, une seule
   gouttière/largeur de conteneur, un seul style de titre et de
   sur-titre (eyebrow) à toute la page. Valeurs : css/global/tokens.css.
   Le préfixe `main` (spécificité +1) garantit la priorité sur les
   media queries des feuilles de section.
   ============================================================ */

/* --- 1. Padding vertical : même respiration pour toutes les sections --- */
main .categories,
main .featured-products,
main .brand-story,
main .engagement,
main .testimonials,
main .faq,
main .winter-cta {
  padding-block: var(--section-padding-y);
}

/* Le padding vertical de la storytelling et de la réassurance vivait dans
   leur conteneur : on le déplace/normalise. */
main .brand-story__container { padding-block: 0; }

/* Colonne unique (≤ 840 px) : l'image est le dernier élément de la section philosophie.
   On retire le padding bas pour qu'elle touche la bande sombre des chiffres,
   au lieu de laisser une bande crème vide entre les deux. */
@media (max-width: 840px) {
  main .brand-story { padding-bottom: 0; }
}
main .reassurance__container { padding-block: var(--band-padding-y); }

/* --- 2. Conteneur et gouttière latérale communs --- */
main .hero__container,
main .reassurance__container,
main .categories__container,
main .featured-products__container,
main .brand-story__container,
main .testimonials__container,
main .winter-cta__container,
.site-footer__container {
  max-width: var(--container-max-width-wide);
  margin-inline: auto;
  padding-inline: var(--container-padding-x);
}

main .engagement,
main .winter-cta {
  padding-inline: var(--container-padding-x);
}
main .winter-cta__container { padding-inline: 0; }

/* Le conteneur du hero porte déjà son padding vertical propre */
main .hero__container { padding-block: var(--hero-padding-block); }

/* --- 3. Titres de section (H2) --- */
main .categories__title,
main .featured-products__title,
main .brand-story__title,
main .testimonials__title,
main .faq__title,
main .winter-cta__title {
  font-size: var(--fs-section-title);
  font-weight: 500;
  line-height: 1.15;
}

/* --- 4. Sur-titres (eyebrow) --- */
main .categories__eyebrow,
main .featured-products__eyebrow,
main .brand-story__eyebrow,
main .faq__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-ember);
}

/* Écart sur-titre → titre identique partout */
main .categories__header { gap: var(--eyebrow-title-gap); }
main .featured-products__heading { gap: var(--eyebrow-title-gap); }
main .brand-story__eyebrow { margin-bottom: var(--eyebrow-title-gap); }
main .faq__title { margin-top: var(--eyebrow-title-gap); }

/* --- 5. Écart en-tête de section → contenu --- */
main .categories__header { margin-bottom: var(--section-header-gap); }
main .featured-products__container,
main .testimonials__container { gap: var(--section-header-gap); }
main .faq__header { padding-block: 0 var(--section-header-gap); }

@media (max-width: 767px) {
  main .categories__eyebrow,
  main .featured-products__eyebrow,
  main .brand-story__eyebrow,
  main .faq__eyebrow { font-size: 12px; }
}