/* ================================================================
   NOUVELLES SECTIONS — styles partagés
   ================================================================
   Schweppes (.sw), Coca-Cola (.cc), Babybel (.bb),
   Citeo (.ct), Braderie de la mode (.br)
   ================================================================ */


/* ---- Mixin hero (image ou vidéo + titre overlay) ---- */

.ns__hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  color: #FFFFFF;
}
.ns__hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.ns__hero-voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.4) 0%,
    rgba(0,0,0,0)   22%,
    rgba(0,0,0,0)   55%,
    rgba(0,0,0,0.7) 100%
  );
}
.ns__hero-contenu {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: var(--espace-l) var(--padding-cote);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--espace-m);
}
.ns__titre {
  font-family: var(--typo-titre);
  font-weight: 700;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
  font-size: clamp(60px, 9vw, 180px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: #FFFFFF;
  margin: 0;
}
.ns__titre em {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'WONK' 1, 'wght' 700;
  color: var(--couleur-accent);
}
.ns__baseline {
  font-family: var(--typo-titre);
  font-style: italic;
  font-variation-settings: 'opsz' 24, 'SOFT' 50, 'WONK' 0, 'wght' 400;
  font-size: var(--taille-l);
  line-height: 1.25;
  max-width: 680px;
  margin: 0 0 var(--espace-l) 0;
  color: rgba(255,255,255,0.92);
}

/* ---- Crédits ---- */
.ns__meta-bloc {
  padding: var(--espace-m) var(--padding-cote) var(--espace-l);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.ns__meta {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espace-s);
  margin: 0;
  padding: var(--espace-m) 0 0;
  border-top: 1px solid var(--couleur-trait);
}
.ns__meta li { display: flex; flex-direction: column; gap: 4px; }
.ns__meta-label {
  font-family: var(--typo-corps);
  font-size: var(--taille-xs);
  font-variation-settings: 'wght' 500, 'wdth' 100;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--couleur-texte-doux);
}
.ns__meta-valeur {
  font-family: var(--typo-corps);
  font-size: var(--taille-s);
  font-variation-settings: 'wght' 500, 'wdth' 100;
  color: var(--couleur-texte);
}

/* ---- Film(s) sur fond noir ---- */
.ns__films-wrap {
  background-color: #0F0E0C;
  padding: var(--espace-l) var(--padding-cote) var(--espace-xl);
  display: flex;
  flex-direction: column;
  gap: var(--espace-l);
  align-items: center;
}

.ns__film {
  position: relative;
  width: 100%;
  max-width: 1400px;
  aspect-ratio: 16 / 9;
  background-color: #000;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}
.ns__film video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ================================================================
   SCHWEPPES — 3 KV portrait sur fond noir
   ================================================================ */

.sw {
  position: relative;
  background-color: var(--couleur-fond);
}


/* ================================================================
   COCA-COLA — 2 films + 3 KV paysage (~16:9)
   ================================================================ */

.cc {
  position: relative;
  background-color: var(--couleur-fond);
}


/* ================================================================
   BABYBEL — juste un film (pas de KVs)
   ================================================================ */

.bb {
  position: relative;
  background-color: var(--couleur-fond);
}


/* ================================================================
   CITEO — 2 films empilés sur fond noir
   ================================================================ */

.ct {
  position: relative;
  background-color: var(--couleur-fond);
  padding-top: var(--espace-xxl);
}
.ct__entete-bloc {
  padding: var(--espace-l) var(--padding-cote) var(--espace-m);
}
.ct__entete {
  display: flex;
  flex-direction: column;
  gap: var(--espace-m);
  max-width: 1100px;
}
.ct__titre {
  font-family: var(--typo-titre);
  font-weight: 700;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
  font-size: clamp(56px, 8vw, 160px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--couleur-texte);
  margin: 0;
}
.ct__titre em {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'WONK' 1, 'wght' 700;
  color: var(--couleur-accent);
}
.ct__baseline {
  font-family: var(--typo-titre);
  font-style: italic;
  font-variation-settings: 'opsz' 24, 'SOFT' 50, 'WONK' 0, 'wght' 400;
  font-size: var(--taille-l);
  line-height: 1.25;
  max-width: 680px;
  margin: 0;
  color: var(--couleur-texte);
}


/* ================================================================
   BRADERIE DE LA MODE — scroll horizontal pinné (type AMI)
   ================================================================
   Mix de formats : KV paysage (~3:2), affiches portrait (3:4),
   "other KV" portrait. On utilise une hauteur uniforme et chaque
   carte respecte son aspect-ratio.
   ================================================================ */

.br {
  position: relative;
  background-color: var(--couleur-fond);
  padding-top: var(--espace-xxl);
}
.br__entete-bloc {
  padding: var(--espace-l) var(--padding-cote) var(--espace-m);
}
.br__entete {
  display: flex;
  flex-direction: column;
  gap: var(--espace-m);
  max-width: 1100px;
}
.br__titre {
  font-family: var(--typo-titre);
  font-weight: 700;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
  font-size: clamp(52px, 7vw, 150px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--couleur-texte);
  margin: 0;
}
.br__titre em {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'SOFT' 80, 'WONK' 1, 'wght' 700;
  color: var(--couleur-accent);
}


/* ---- Responsive ---- */
@media (max-width: 900px) {
  .ns__meta { grid-template-columns: repeat(2, 1fr); gap: var(--espace-m); }
}