/* ==========================================================================
   Brandt Energy — layout.css : section, conteneur, fonds, grilles, stack.
   Règle : Section (fond pleine largeur, gouttières, padding vertical)
           > Conteneur (max 1100 px, centré) > contenu.
   ========================================================================== */

.section {
  padding-block: var(--section-padding);
  padding-inline: var(--gutter);
  background: var(--brandt-white);
}
.section--white { background: var(--brandt-white); }
.section--light { background: var(--brandt-light); }
.section--red { background: var(--brandt-red); color: var(--brandt-white); }

/* Première section sous un bloc « Titre de page » ou sans hero : 32 px mobile / 64 px desktop en haut. */
.section--under-title { padding-top: var(--section-padding-under-title); }
/* Étapes du tunnel de devis : 48 px en haut. */
/* Bandeaux (univers, repères, ancres, barre particulier) : padding propre, plus serré. */
.section--band { padding-block: var(--space-16); }
@media (min-width: 1024px) { .section--band { padding-block: var(--space-20); } }

.container {
  width: 100%;
  max-width: var(--size-container-1100);
  margin-inline: auto;
}

/* --- En-tête de section : titre + intro ---------------------------------- */
.section-head { display: flex; flex-direction: column; gap: var(--space-12); margin-bottom: var(--space-24); }
.section-head--center { align-items: center; text-align: center; }
.section-head--center .t-body { max-width: var(--size-text-max); }
@media (min-width: 1024px) {
  .section-head { gap: var(--space-16); margin-bottom: var(--space-32); }
}

/* --- Stack vertical générique ------------------------------------------- */
.stack { display: flex; flex-direction: column; gap: var(--space-12); }
.stack--16 { gap: var(--space-16); }
.stack--20 { gap: var(--space-20); }
.stack--24 { gap: var(--space-24); }

/* --- Grilles : 1 colonne mobile, 2 tablette (768–1023), N desktop ---------
   Les cartes d'une rangée s'égalisent par la grille (align-items: stretch), jamais par une hauteur fixe. */
.grid { display: grid; gap: var(--grid-gap); align-items: stretch; grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .grid--2, .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}