/* =========================================================================
   ZoKids : bandeau « En vrai, chez nos clients » (includes/videos-band.php)
   Vidéos au format story. Chargé par l'accueil et les fiches structure
   via $page_extra_styles (2026-09-25).
   ========================================================================= */

.videos-section {
  padding: clamp(40px, 5vw, 64px) 0 clamp(56px, 7vw, 96px);
}
.videos-band {
  --band-pad: clamp(24px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding: var(--band-pad);
  background:
    radial-gradient(circle at 0% 0%, rgba(227, 185, 88, .18), transparent 45%),
    radial-gradient(circle at 100% 100%, rgba(227, 185, 88, .10), transparent 40%),
    var(--navy);
  color: var(--cream);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.videos-band .videos-intro .eyebrow {
  color: var(--gold-2);
}
.videos-band .videos-intro h2 {
  color: var(--cream);
  font-size: clamp(30px, 3.4vw, 46px);
  margin: 14px 0;
  text-wrap: balance;
}
.videos-band .videos-intro h2 em {
  font-style: italic;
  color: var(--gold-2);
  font-family: inherit;
  font-weight: inherit;
}
.videos-intro p {
  color: rgba(246, 239, 227, .78);
  font-size: 16px;
  line-height: 1.6;
  max-width: 40ch;
}
.videos-facts {
  list-style: none;
  margin: 22px 0 28px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.videos-facts li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--cream);
  font-size: 15px;
}
.videos-facts li::before {
  content: "✓";
  flex: none;
  color: var(--gold-2);
  font-weight: 700;
}
.videos-row {
  display: flex;
  gap: 16px;
}
.story {
  position: relative;
  flex: none;
  width: 200px;
  aspect-ratio: 9 / 16;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid rgba(246, 239, 227, .16);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .65);
}
.videos-band--solo .story {
  width: 220px;
}
.videos-band--trio .story {
  width: clamp(160px, 14.5vw, 200px);
}
.story video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-cap {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: 6px;
  padding: 48px 14px 14px;
  background: linear-gradient(180deg, transparent, rgba(16, 26, 59, .88));
  pointer-events: none;
  transition: opacity .3s;
}
.story-badge {
  justify-self: start;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--gold-2);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.story-text {
  color: var(--cream);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}
.story-play {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  place-items: center;
  padding: 0 0 0 3px;
  border: 0;
  border-radius: 50%;
  background: rgba(246, 239, 227, .94);
  color: var(--ink);
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .5);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform .2s;
}
.js-stories .story-play {
  display: grid;
}
.story-play:hover,
.story-play:focus-visible {
  transform: translate(-50%, -50%) scale(1.08);
}
.story.is-playing .story-play {
  display: none;
}
.story.is-playing:not(.story--auto) .story-cap {
  opacity: 0;
}

/* Tablette et mobile : une colonne, vidéos qui défilent à l'horizontale */
@media (max-width: 1000px) {
  .videos-band {
    grid-template-columns: 1fr;
  }
  .videos-row {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--band-pad));
    padding-inline: var(--band-pad);
    scroll-padding-inline: var(--band-pad);
    scrollbar-width: none;
  }
  .videos-row::-webkit-scrollbar {
    display: none;
  }
  .story,
  .videos-band--trio .story {
    width: 200px;
    scroll-snap-align: start;
  }
}
@media (max-width: 800px) {
  .story,
  .videos-band--solo .story,
  .videos-band--trio .story {
    width: min(54vw, 220px);
  }
  .videos-band--solo .videos-row {
    justify-content: center;
  }
  .videos-facts,
  .videos-intro .btn {
    display: none;
  }
}