/*
 * Layout — conteneur, grille de section générique, sections "pilier" plein écran.
 * Réutilisable par les futures pages profondes (Entreprise, Laboratoire, etc.).
 */

.bcc-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Section générique : fond + respiration verticale. Modificateurs de couleur
   ci-dessous — "une couleur = un pôle" (brief §7). */
.bcc-section {
  position: relative;
  padding: 8rem 2rem;
  overflow: hidden;
}

.bcc-section--cream-warm { background: var(--cream-warm); }
.bcc-section--sage-wash  { background: var(--sage-wash); }
.bcc-section--teal       { background: var(--teal); color: #fff; }
.bcc-section--teal-dark  { background: var(--teal-dark); color: #fff; }
.bcc-section--teal-deep  { background: var(--teal-deep); color: #fff; }

/* Grille 2 colonnes générique (Entreprise, Savoir-faire). */
.bcc-grid-2 {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 5rem;
}

.bcc-grid-2--start   { align-items: start; }
.bcc-grid-2--center  { align-items: center; }

@media (max-width: 700px) {
  .bcc-container { padding: 0 1.25rem; }
  .bcc-section   { padding: 5.5rem 1.25rem; }
  .bcc-grid-2    { gap: 3rem; }
}

/*
 * Bloc "pilier" plein écran (Laboratoire / Fabrication / Conditionnement) :
 * une colonne de texte centrée verticalement + un panneau vidéo (placeholder),
 * chacun occupant 100% de la hauteur visible (scroll-snap, cf. base.css .bcc-page).
 */
.bcc-pillar {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
  align-items: stretch;
}

.bcc-pillar__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3.5rem, 7vh, 6rem) clamp(2rem, 4.5vw, 5rem);
  position: relative;
  z-index: 2;
}

/* Ordre inversé (texte à droite, panneau vidéo à gauche) — Laboratoire et Conditionnement. */
.bcc-pillar--reverse .bcc-pillar__text  { order: 2; }
.bcc-pillar--reverse .bcc-pillar__video { order: 1; }

.bcc-pillar__video {
  position: relative;
  overflow: hidden;
  min-height: 54svh;
  height: 100%;
}

/* Photo plein cadre (remplace l'ancien placeholder vidéo) — recadrée en
   cover, indépendante du padding du panneau (absolute + inset:0). */
.bcc-pillar__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}