/* ──────────────────────────────────────────────────────────────────────────
   Photos de tournage · Wanda Studio
   Blocs AJOUTÉS aux pages existantes, jamais en remplacement de quoi que ce
   soit. Tout est préfixé « wp- » et scopé sous la section, pour ne croiser
   aucune classe des feuilles inline de chaque page.

   Reprend le rythme du site : sections en 80px/24px, titres en poids 900
   avec un interlettrage de -0.035em, et les variables --black / --gold /
   --white / --gray déjà déclarées sur ces pages (fallbacks au cas où).
   ────────────────────────────────────────────────────────────────────────── */

.wp-bloc {
  --wp-or:     var(--gold,  #C9A84C);
  --wp-noir:   var(--black, #080604);
  --wp-clair:  var(--white, #ffffff);
  --wp-doux:   var(--gray,  #999999);
  --wp-trait:  rgba(255, 255, 255, 0.1);

  padding: 80px 24px;
  background: var(--wp-noir);
}
.wp-inner { max-width: 1240px; margin: 0 auto; }

/* ── en-têtes, calqués sur ceux des sections voisines ── */
.wp-bloc .wp-label {
  display: block;
  margin: 0 0 14px;
  font: 700 10.5px/1 'Inter', -apple-system, sans-serif;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--wp-or);
}
.wp-bloc .wp-titre {
  margin: 0 0 14px;
  font-size: clamp(30px, 4.2vw, 54px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--wp-clair);
  text-wrap: balance;
}
.wp-bloc .wp-sous {
  margin: 0 0 38px;
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--wp-doux);
}

/* ── la bande de visages ─────────────────────────────────────────────────
   Titre en colonne à gauche, bande défilante à droite : le bloc tient sur
   une seule ligne (environ 310 px sur un grand écran) et le titre se lit
   dans le même regard que les visages. Pas de nom sous les photos : c'est
   la répétition du cadre qui fait la preuve. */
.wp-visages { padding: 64px 24px; }
.wp-visages .wp-inner {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);   /* minmax(0,…) : la piste en max-content ne doit pas pousser la colonne */
  gap: 36px;
  align-items: center;
}
.wp-visages .wp-titre { font-size: clamp(24px, 2.9vw, 36px); margin-bottom: 0; }
.wp-visages .wp-label { margin-bottom: 12px; }
.wp-visages .wp-bande {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 9%, #000 94%, transparent);
}
.wp-visages .wp-piste {
  display: flex;
  gap: 8px;
  width: max-content;
  animation: wp-defile 75s linear infinite;
  will-change: transform;
}
.wp-visages .wp-bande:hover .wp-piste { animation-play-state: paused; }
.wp-visages figure { margin: 0; flex: 0 0 auto; width: 150px; }
.wp-visages img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 3px;
  background: #141210;
}
/* La piste contient deux fois les 18 visages : -50 % ramène exactement au
   point de départ, la boucle est invisible. */
@keyframes wp-defile { to { transform: translateX(-50%); } }

/* ── à quoi ressemble une session : trois plans larges ── */
.wp-sessions .wp-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.wp-sessions figure { margin: 0; }
.wp-sessions img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 3px;
  background: #141210;
}
.wp-sessions figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--wp-doux);
}
.wp-sessions figcaption b { color: var(--wp-clair); font-weight: 600; }

/* ── la matière : deux macros ── */
.wp-matiere .wp-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.wp-matiere img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 3px;
  background: #141210;
}

/* ── la salle habitée : une photo pleine largeur ── */
.wp-vivante { padding: 0; }
.wp-vivante img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #141210;
}
.wp-vivante .wp-cap {
  max-width: 1240px;
  margin: 14px auto 0;
  padding: 0 24px;
  font: 600 10.5px/1.4 'Inter', -apple-system, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wp-doux);
}
.wp-vivante .wp-cap b { color: var(--wp-or); font-weight: 700; }

/* ── qui a tourné dans cette salle : six visages ── */
.wp-salle .wp-six {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.wp-salle figure { margin: 0; }
.wp-salle img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 3px;
  background: #141210;
}

/* ── le bandeau backstage des études de cas ── */
.wp-backstage { padding: 72px 24px 80px; border-top: 1px solid var(--wp-trait); }
/* auto-fit : selon les tournages le bandeau compte 3, 4 ou 5 vues, et
   une colonne vide ferait bricolage. */
.wp-backstage .wp-cinq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.wp-backstage img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 3px;
  background: #141210;
}

/* ── mobile ─────────────────────────────────────────────────────────────
   Trois colonnes plutôt que six : en dessous, un visage devient illisible
   et la grille ne prouve plus rien. */
@media (max-width: 900px) {
  .wp-visages .wp-inner { grid-template-columns: 1fr; gap: 22px; }
  .wp-visages figure { width: 124px; }
  .wp-visages .wp-piste { gap: 6px; animation-duration: 55s; }
  .wp-salle .wp-six      { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .wp-sessions .wp-trio  { grid-template-columns: 1fr; gap: 14px; }
  .wp-matiere .wp-duo    { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 600px) {
  .wp-bloc { padding: 56px 18px; }
  .wp-backstage { padding: 52px 18px 60px; }
  .wp-backstage .wp-cinq { grid-template-columns: repeat(3, 1fr); }
  .wp-bloc .wp-sous { margin-bottom: 28px; }
  .wp-vivante .wp-cap { padding: 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .wp-visages .wp-piste { animation: none; }
  .wp-visages .wp-bande { overflow-x: auto; mask-image: none; -webkit-mask-image: none; scrollbar-width: thin; }
}