/* quartier/section-videos.css
   -----------------------------------------------
   Mise en page de la section "Videos" d'un quartier
   - Fond bleu nuit
   - Titres Playfair
   - Deux blocs :
     * Faces & stories  (carrousel 3:4)
     * Feuilletons      (carrousel 16:9)
   ----------------------------------------------- */

#quartier-videos {
  padding: 56px 0 72px;
  background: #03001e;
  color: #fef8f0;
}

#quartier-videos .qv-container {
  width: min(1040px, 92vw);
  margin: 0 auto;
}

/* ---------- Titres ---------- */

#quartier-videos .qv-header-main {
  margin-bottom: 32px;
}

#quartier-videos .qv-title {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: #fef8f0;
}

#quartier-videos .qv-block {
  margin-top: 32px;
}

#quartier-videos .qv-header-block {
  margin-bottom: 14px;
}

#quartier-videos .qv-subtitle {
  margin: 0 0 4px;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.2rem, 2vw, 1.4rem);
}

#quartier-videos .qv-subtext {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #e4d9c8;
}

/* message "vide" si pas de vidéos */
#quartier-videos .qv-empty {
  margin: 10px 0 0;
  font-family: Georgia, serif;
  font-size: 0.95rem;
  color: #cbb8a4;
}

/* ---------- Carrousels ---------- */

#quartier-videos .qv-carousel {
  margin-top: 12px;
}

/* on laisse les styles principaux aux CSS de block-carousel-*-v2,
   ici on ajuste seulement l'enveloppe */

#quartier-videos .qv-carousel .swiper {
  padding: 6px 0 4px;
}

/* toutes les vignettes */
#quartier-videos .qv-carousel .swiper-slide-inner {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #020014;
}

/* images dans les vignettes */
#quartier-videos .qv-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Portraits 3:4 (Faces & stories) */
#quartier-videos .qv-carousel-faces .swiper-slide-inner {
  aspect-ratio:
/* ---- Laisser Swiper gérer le flux, mais fixer les largeurs des slides 16:9 ---- */

/* Mobile : ~1.1–1.2 slide visible */
#quartier-feuilletons .swiper-slide {
  flex: 0 0 88% !important;   /* environ 1.15 slides avec 14px de gap */
  max-width: 88% !important;
}

/* Tablette : ~2.15 slides */
@media (min-width: 768px) {
  #quartier-feuilletons .swiper-slide {
    flex-basis: 46% !important;
    max-width: 46% !important;
  }
}

/* Desktop : ~4 slides */
@media (min-width: 1024px) {
  #quartier-feuilletons .swiper-slide {
    flex-basis: 23% !important;
    max-width: 23% !important;
  }
}