/* ==========================================================
   WPZ / PixiPlace – CSS CONSOLIDÉ (sans doublons + anti-conflits)
   Source: ton CSS actuel nettoyé et stabilisé
   ========================================================== */

/* =============================================
   🌐 BASE
   ============================================= */
html, body{ overflow-x:hidden; }

body{
  font-family:"Segoe UI",sans-serif;
  background-color:var(--couleur-blanc);
  color:var(--couleur-textes);
  font-size:16px;
  line-height:1.6;
  margin:0;
  padding:0;
}

h1,h2,h3,h4,h5,h6{
  color:var(--couleur-titres);
  font-weight:600;
  line-height:1.2;
  margin-top:1.5rem;
  margin-bottom:.75rem;
}
h1{ font-size:2rem; text-align:center; }

p{ margin:0 0 1rem 0; color:var(--couleur-textes); font-size:1rem; }

a{
  color:var(--couleur-rouge);
  text-decoration:none;
  transition:color .2s ease;
}
a:hover{ color:#922b1b;  }


/* =========================================================
   🔗 RÈGLE GLOBALE — LIENS SANS SOULIGNEMENT
   ========================================================= */

/* =========================================================
   🔒 GLOBAL FINAL — INTERDIT TOUT UNDERLINE SUR TOUT LE SITE
   (doit être tout en bas du style.css)
   ========================================================= */
a,
a:hover,
a:focus,
a:active,
a:visited,
a:focus-visible{
  text-decoration: none !important;
}

a:focus-visible{
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}


ul,ol{ margin:1rem 0; padding-left:1.5rem; }
li{ margin-bottom:.5rem; }

table{ width:100%; border-collapse:collapse; margin:1.5rem 0; }
th,td{ border:1px solid var(--border); padding:.75rem; text-align:left; }
th{ background-color:#f2f2f2; font-weight:bold; }

img{ border-radius:5px; }

button{ font-family:inherit; font-size:1rem; cursor:pointer; }
input,select,textarea{
  font-family:inherit;
  font-size:1rem;
  line-height:1.4;
  border:1px solid var(--border-strong);
  border-radius:4px;
  padding:.5rem;
}





/* =============================================
   📦 CONTAINER GLOBAL
   ============================================= */
.site-container{
  max-width:var(--wpz-container);
  margin:0 auto;
  padding:1rem;
  box-sizing:border-box;
}

@media (max-width:768px){
  .archive-films,
  .film-container{ margin-top:0 !important; }
}


/* =============================================
   🎬 ARCHIVES / SINGLE FILM – CONTAINER + TEXTES
   ============================================= */
.archive-films,
.film-container{
  background:none;
  padding:1rem;
  color:var(--text);
  max-width:var(--wpz-container);
  margin:0 auto;
}

.archive-films h1,
.film-container h1{
  font-size:1.5rem;
  margin-bottom:1rem;
  text-align:left;
}

/* Titres internes */
.film-container h2{
  font-size:1.2rem;
  border-bottom:2px solid #eee;
  padding-bottom:.3rem;
  margin-top:2rem;
}
.film-container h3{
  font-size:1rem;
  margin-top:1.5rem;
}

/* Meta film */
.film-infos-meta{
  font-size:.95rem;
  line-height:1.4;
  margin-top:0;
  margin-bottom:0;
  color:var(--couleur-textes);
}
.film-infos-meta .meta-item{ margin-bottom:.3rem; }
.film-infos-meta a{ color:var(--primary); font-weight:500; }
.film-infos-meta a:hover{ text-decoration:underline; }
.film-infos-meta .meta-note{ font-style:italic; color:var(--text-muted); font-weight:400; margin-left:.25rem; }

.film-infos-extra{ font-size:.95rem; margin-bottom:2rem; color:#444; }
.film-infos-extra .meta-item{ margin-bottom:.3rem; }

.film-tagline{
  font-family:'Dancing Script',cursive;
  text-align:left;
  font-size:1.2rem;
  color:#3c2e2e;
  padding:.5rem;
}
.film-tagline::before,
.film-tagline::after{
  content:"”";
  font-size:1.6rem;
  color:var(--primary);
}
.film-tagline::before{ margin-right:.5rem; }
.film-tagline::after{ margin-left:.5rem; }

/* Backdrops */
.film-backdrops{ margin-top:2rem; }

.backdrops-scroll-wrapper{
  display:flex;
  overflow-x:auto;
  gap:1rem;
  padding-bottom:.5rem;
  scroll-snap-type:x mandatory;
}
.backdrop-slide{
  flex:0 0 auto;
  width:300px;
  scroll-snap-align:start;
}
.backdrop-slide img{
  width:100%;
  border-radius:var(--radius);
  object-fit:cover;
  height:auto;
  box-shadow:0 4px 10px rgba(0,0,0,.1);
}

/* Ligne infos (durée/genre clic) */
.film-infos-ligne{
  font-size:1rem;
  color:var(--text-soft);
  margin-top:.5rem;
  margin-bottom:1rem;
}
.film-infos-ligne a{ color:var(--primary); }
.film-infos-ligne a:hover{ text-decoration:underline; }

/* =============================================
   🔎 RECHERCHE + FILTRES
   ============================================= */
.search-bar-full{ width:100%; margin-bottom:1.2rem; }
.search-bar-full input[type="text"],
.search-bar-full input{
  width:100%;
  font-size:1.1rem;
  padding:.75rem 1rem;
  border:1px solid var(--border-strong);
  border-radius:6px;
  box-sizing:border-box;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.search-bar-full input[type="text"]:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(192,57,43,.2);
  outline:none;
}

/* Bloc filtres */
.film-filters{
  max-width:var(--wpz-container);
  margin-bottom:2rem;
  padding:1.5rem;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

.film-filters .filter-grid{
  display:grid;
  gap:1rem;
  width:100%;
  grid-template-columns:repeat(1,1fr);
}

.film-filters select{
  padding:.6rem .8rem;
  font-size:1rem;
  border:1px solid var(--border-strong);
  border-radius:6px;
  background-color:#fafafa;
  color:var(--couleur-textes);
  transition:border-color .2s;
  width:100%;
  min-width:0;
}
.film-filters select:focus{
  outline:none;
  border-color:var(--primary);
  background:var(--bg);
}

.film-filters .submit-full{ width:100%; }
.film-filters .submit-full .button{
  width:100%;
  display:block;
  text-align:center;
  padding:.8rem 1rem;
  font-size:1.1rem;
  border-radius:6px;
  background-color:var(--primary);
  color:#fff;
  border:none;
  cursor:pointer;
  transition:background-color .3s;
}
.film-filters .submit-full .button:hover{ background-color:var(--primary-hover); }

@media (min-width:1024px){ .film-filters .filter-grid{ grid-template-columns:repeat(7,1fr); } }
@media (min-width:768px) and (max-width:1023px){ .film-filters .filter-grid{ grid-template-columns:repeat(3,1fr); } }

/* Tri actif */
.tri-actif{
  text-align:center;
  font-size:.95rem;
  color:var(--text-soft);
  margin:1rem auto 2rem;
  width:100%;
}
.tri-actif strong{ color:var(--primary); }

@media (max-width:768px){
  .film-filters{ padding:1.2rem; gap:.5rem; margin:0; }
  .tri-actif{ font-size:.9rem; margin:.5rem auto 1.5rem; }
  .search-bar-full input{ font-size:1rem; padding:.6rem .9rem; }
}

/* Filtres actifs (recherche) */
.filtres-actifs-inline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem;
  margin:1rem 0 2rem;
  padding:1rem;
  background:#fefefe;
  border:1px solid var(--border);
  border-radius:6px;
  font-size:.95rem;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.titre-filtres{ font-weight:bold; color:var(--primary); margin-right:.5rem; }

.badge-filtre{
  background:#f0f0f0;
  border-radius:4px;
  padding:.3rem .7rem;
  border:1px solid var(--border-strong);
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.badge-filtre .remove-filtre{
  color:#e74c3c;
  font-weight:bold;
  text-decoration:none;
  font-size:.8rem;
}
.badge-filtre .remove-filtre:hover{ text-decoration:none; }

.button-reset-inline{
  margin-left:auto;
  background-color:#e74c3c;
  color:#fff;
  padding:.4rem 1rem;
  border-radius:6px;
  text-decoration:none;
  font-weight:bold;
  transition:background .3s;
}
.button-reset-inline:hover{ background-color:var(--primary); color:#fff; }

/* Accordéon filtres avancés */
.toggle-advanced-filters{
  background:none;
  color:var(--primary);
  font-weight:bold;
  border:none;
  font-size:1rem;
  padding:.5rem 0;
  cursor:pointer;
  text-align:left;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.toggle-advanced-filters .arrow{
  display:inline-block;
  transition:transform .3s ease;
  font-size:1rem;
}
.toggle-advanced-filters.open .arrow{ transform:rotate(180deg); }

.advanced-filters-accordion{
  display:none;
  opacity:0;
  transform:scaleY(0);
  transform-origin:top;
  transition:all .3s ease;
}
.advanced-filters-accordion.open{
  display:block;
  opacity:1;
  transform:scaleY(1);
  margin-bottom:1rem;
}
@media (max-width:768px){
  .toggle-advanced-filters{ margin-top:-1rem; }
}

/* =============================================
   🎬 FILMS GRID + THUMB (UNE SEULE VERSION)
   ============================================= */
.films-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1rem;
}
@media (max-width:1200px){ .films-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:1024px){ .films-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px){ .films-grid{ grid-template-columns:repeat(2,1fr); } }

.film-thumb{
  position:relative;
  width:100%;
  aspect-ratio:2/3;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:#000;
}
.film-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Cards grid (si utilisées) */
.film-card{
  position:relative;
  box-sizing:border-box;
  padding:.5rem;
  margin:0;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  text-align:center;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform .2s, box-shadow .2s;
}
.film-card:hover{
  transform:scale(1.02);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.film-card h2{ font-size:.92rem; margin:.2rem 0; color:var(--couleur-textes); }

.film-card__year{
  margin-top: 1rem;
  margin-bottom:.5rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;

  font-size: .80rem;
  line-height: 1;
  font-weight: 600;

  color: rgba(0,0,0,.62);
  background: rgba(0,0,0,.06);
 
  border-radius: 5px;

  padding: .32rem .55rem;
  white-space: nowrap;
}
.film-card__title{ font-size:.92rem; margin-top: 0px;}
.film-card p{ font-size:.8rem; margin:.25rem 0; color:var(--text-soft); }
.film-card a{ color:inherit; }
.film-card a:hover h2{ color:var(--primary); }

/* =====================================================
   🎬 BADGES FILMS — POSITION UNIQUE / COULEUR PAR TYPE
   ===================================================== */

/* Base commune */
.badge-nouveau,
.badge-decompte,
.badge-salle,
.badge-cinema{
  position:absolute;
  top:30px;
  left:0;

  color:#fff;
  padding:.3rem .6rem;
  font-size:.8rem;
  font-weight:700;
  line-height:1.1;

  border-radius:0 5px 5px 0;
  z-index:10;

  box-shadow:var(--shadow-xs);
  white-space:nowrap;
}

/* 🔴 NOUVEAUTÉ */
.badge-nouveau{
  background-color:#e74c3c; /* rouge */
}

/* 🔵 SORTIE À VENIR / DÉCOMPTE */
.badge-decompte{
  background-color:#2980b9; /* bleu */
}

/* 🟢 SALLE / ANCIEN (si encore utilisé) */
.badge-salle{
  background-color:#27ae60; /* vert */
}

/* 🎬 AU CINÉMA (PRIORITAIRE) */
.badge-cinema{
  background-color:#f39c12; /* orange cinéma / projecteur */
}

/* =====================================================
   📱 MOBILE — ajustement léger
   ===================================================== */
@media (max-width:768px){
  .badge-nouveau,
  .badge-decompte,
  .badge-salle,
  .badge-cinema{
    top:20px;
    font-size:.75rem;
    padding:.25rem .55rem;
  }
}
/* 📅 SORTIE FUTURE (date précise) */
.badge-futur{
  position:absolute;
  top:30px;
  left:0;

  color:#fff;
  padding:.3rem .6rem;
  font-size:.8rem;
  font-weight:700;
  line-height:1.1;

  border-radius:0 5px 5px 0;
  z-index:10;

  background-color:#2980b9; /* bleu */
  box-shadow:var(--shadow-xs);
  white-space:nowrap;
}


@media (max-width:768px){
  .badge-nouveau,
  .badge-decompte,
  .badge-salle,
  .badge-cinema,
  .badge-futur{
    top:20px;
    font-size:.75rem;
    padding:.25rem .55rem;
  }
}



.film-thumb--placeholder{
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:2/3;
}

.film-thumb__noposter{
  color:#fff;
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  opacity:.75;
}




/* =============================================
   🎠 FILMS CAROUSEL + FLÈCHES ROUGES (carousel-arrow)
   ============================================= */
.carousel-wrapper{ position:relative; }

.films-carousel{
  display:flex;
  height:auto;
  gap:1rem;
  overflow-x:auto;
  padding-bottom:1rem;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.films-carousel::-webkit-scrollbar{ display:none; }

.carousel-film-card{
  flex:0 0 calc(100%/1.5);
  scroll-snap-align:start;
  background:var(--bg);
  border-radius:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-sm);
  transition:transform .3s;
  position:relative;
}
.carousel-film-card:hover{ transform:translateY(-4px); }





.carousel-film-thumb{ position:relative; }
.carousel-film-thumb img{
  width:100%;
  height:auto;
  max-height:400px;
  object-fit:cover;
  display:block;
}

.carousel-film-info{
  padding:.6rem;
  background:var(--bg);
  text-align:center;
}
.carousel-film-info h2{
  font-size:.92rem;
  margin:0;
  color:var(--text);
  line-height:1.3;
  font-weight:600;
  overflow:hidden;
  white-space:normal;
  text-overflow:ellipsis;
}

/* Tablette/desktop cards */
@media (min-width:600px){ .carousel-film-card{ flex:0 0 calc(100%/2.5); } }
@media (min-width:1024px){ .carousel-film-card{ flex:0 0 calc(100%/4.5); } }

/* ✅ FLÈCHES CAROUSEL — VERSION UNIQUE */
/* ✅ FLÈCHES CAROUSEL — STYLE GLOBAL UNIQUE (premium rond blanc)
   Remplace le bloc .carousel-arrow actuel (transparent/rouge) */
.carousel-wrapper{ position:relative; }

.carousel-arrow{
  display:none;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:20;

  width:42px;
  height:42px;

  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.92);
  color:var(--text);

  cursor:pointer;
  align-items:center;
  justify-content:center;

  font-size:26px;
  line-height:1;
  box-shadow:0 10px 24px rgba(0,0,0,.14);

  transition:background .2s ease, transform .15s ease, box-shadow .2s ease;
}

.carousel-arrow:hover{
  background:var(--bg);
  transform:translateY(-50%) scale(1.05);
  box-shadow:0 14px 34px rgba(0,0,0,.18);
}

.carousel-arrow-left{ left:-10px; }
.carousel-arrow-right{ right:-10px; }

/* Desktop only (comme ton JS) */
@media (min-width:769px){
  .carousel-arrow{ display:flex; }
}
@media (max-width:768px){
  .carousel-arrow{ display:none !important; }
}



/* =============================================
   🎭 GENRES CHIPS (UNE SEULE VERSION STABLE)
   ============================================= */
.genres-carousel-container{
  width:100%;
  max-width:var(--wpz-container, 1200px); /* si tu as une variable globale, elle s'applique */
  margin:clamp(.6rem,1.6vw,1.1rem) auto;  /* auto = centré */
  padding:0 12px;                         /* respirations comme le contenu */
  box-sizing:border-box;
}

.genres-carousel-container .carousel-wrapper{ position:relative; padding:2px 0; }

.genres-carousel-container .films-carousel.genres-carousel{
  display:flex;
  align-items:center;
  gap:clamp(8px,1.2vw,12px);
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:12px;
  scrollbar-width:none;
  padding:8px 10px 10px;
    width:100%;
  max-width:none; /* important: on annule le max-width qui casse */
}
.genres-carousel-container .films-carousel.genres-carousel::-webkit-scrollbar{ display:none; }

.genres-carousel-container .genre-chip.carousel-film-card{
  flex:0 0 auto;
  scroll-snap-align:start;

  height:42px;
  max-width:min(78vw,260px);
  padding:0 14px;
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.01em;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  background:rgba(0,0,0,.05);
  color:var(--text);
  border:1px solid rgba(0,0,0,.10);
  border-radius:5px;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  text-decoration:none;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  transform:translateZ(0);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}

.genres-carousel-container .genre-chip__name{
  font-weight:700;
  color:inherit;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.genres-carousel-container .genre-chip__count{
  flex:0 0 auto;
  min-width:26px;
  height:22px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.10);
  color:rgba(0,0,0,.70);
  font-size:.78rem;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

@media (hover:hover){
  .genres-carousel-container .genre-chip.carousel-film-card:hover{
    background:var(--bg);
    border-color:rgba(192,57,43,.25);
    box-shadow:0 6px 24px rgba(0,0,0,.08);
    transform:translateY(-1px);
  }
}

.genres-carousel-container .genre-chip.is-active{
  background:var(--couleur-rouge,var(--primary));
  border-color:var(--couleur-rouge,var(--primary));
  color:#fff;
  box-shadow:0 10px 26px rgba(192,57,43,.22);
}
.genres-carousel-container .genre-chip.is-active .genre-chip__count{
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.22);
  color:rgba(255,255,255,.95);
}

/* Flèches genres (desktop) – on utilise carousel-arrow existant, mais scoppé ici */
/* AVANT */
.genres-carousel-container .carousel-arrow{ display:flex; }

/* APRÈS */
.genres-carousel-container .carousel-arrow{
  display:flex;       /* OK */
  background:unset;   /* ❌ aucune couleur ici */
}
@media (max-width:768px){
  .genres-carousel-container .carousel-arrow{ display:none !important; }
  .genres-carousel-container .films-carousel.genres-carousel{
    padding:8px 6px 10px;
    scroll-padding-inline:8px;
  }
  .genres-carousel-container .genre-chip.carousel-film-card{
    height:40px;
    padding:0 12px;
    font-size:.86rem;
    max-width:82vw;
  }
}
@media (max-width:380px){
  .genres-carousel-container .genre-chip.carousel-film-card{ height:38px; padding:0 11px; font-size:.84rem; }
  .genres-carousel-container .genre-chip__count{ min-width:24px; height:21px; padding:0 7px; font-size:.76rem; }
}



/* =========================================================
   ✅ CAROUSEL UX PATCH (premium)
   - drag cursor
   - flèches disabled
   - fade edges (indication contenu hors champ)
   ========================================================= */

/* Drag UX */
.films-carousel{
  cursor: grab;
  user-select: auto; /* ✅ on laisse le clic/link normal */
}

/* On empêche juste la sélection d'images/texte à l'intérieur (safe) */
.films-carousel img,
.films-carousel .film-card__title,
.films-carousel .film-card__year{
  user-select: none;
  -webkit-user-drag: none;
}

.films-carousel.is-dragging{
  cursor: grabbing;
}

/* Ne pas casser les clics images/links : on garde pointer-events normaux */
.films-carousel a,
.films-carousel img{
  user-select: none;
  -webkit-user-drag: none;
}

/* Flèches disabled */
.carousel-arrow[disabled],
.carousel-arrow.is-disabled{
  opacity: .35;
  cursor: default;
  pointer-events: none;
  transform: translateY(-50%);
  box-shadow: none;
}

/* Fade edges via pseudo-éléments sur wrapper */
.carousel-wrapper.is-scrollable::before,
.carousel-wrapper.is-scrollable::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:44px;
  z-index:15;
  pointer-events:none;
  opacity:0;
  transition: opacity .2s ease;
}



/* droite visible seulement si on peut scroller à droite */
.carousel-wrapper.is-right::after{
  right:0;
  opacity:1;
  background: linear-gradient(to left, rgba(255,255,255,.92), rgba(255,255,255,0));
}

/* Si ton carousel est sur fond sombre, tu peux surcharger ces gradients
   dans une classe contextuelle (.is-dark) sans toucher au JS */








/* =============================================
   ⭐ ÉTOILES (global)
   ============================================= */

.etoile{ color:var(--wpz-star); line-height:1; }
.etoile.vide{ color:var(--wpz-star-empty); }
.etoile.demi{ position:relative; display:inline-block; color:var(--wpz-star-empty); }
.etoile.demi::before{
  content:'★';
  position:absolute;
  left:0;
  width:50%;
  overflow:hidden;
  color:var(--wpz-star);
}

/* =============================================
   🧩 PLATEFORMES (overlay vignette)
   ============================================= */
.plateformes-icons{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  position:absolute;
  left:10px;
  bottom:10px;
  z-index:5;
}
.plateforme-icon{
  width:30px;
  height:30px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.92);
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.plateforme-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}





/* =========================================================
   ✅ Carousel films : dernière carte "Voir tout" en GROS "+"
   ========================================================= */
.wpz-carousel-more{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border:2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
  min-height: 260px;              /* hauteur proche d'une vignette 3/4 */
  position:relative;
  overflow:hidden;
  box-shadow: var(--shadow-xs);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.wpz-carousel-more:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--primary);
  background: #fff;
}

.wpz-carousel-more__plus{
  font-size: clamp(56px, 6vw, 84px);
  font-weight: 900;
  line-height: 1;
  color: var(--text);
  opacity: .9;
}

/* option : un léger motif discret "vide" */
.wpz-carousel-more::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(0,0,0,.035) 0,
      rgba(0,0,0,.035) 10px,
      rgba(0,0,0,0) 10px,
      rgba(0,0,0,0) 20px
    );
  pointer-events:none;
}








/* =============================================
   🟥 PLATEFORMES STRIP (anti-conflit + flèches rouges)
   ============================================= */
.plateformes-strip{
  position:relative;
  margin:26px 0 28px; /* 36px → 26px = -10px */
  padding-top:14px;
}

.plateformes-strip::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(to right, transparent, rgba(255,255,255,.25), transparent);
}

/* Base logos */
.plateformes-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  text-decoration:none;
  line-height:0;
  opacity:.9;
  transition:transform .2s ease, opacity .2s ease, filter .2s ease;
}
.plateformes-logo img{
  display:block;
  width:auto;
  height:auto;
  max-width:80px;
  max-height:80px;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
@media (hover:hover){
  .plateformes-logo:hover{ opacity:1; transform:translateY(-3px); filter:brightness(1.05); }
}
@media (max-width:768px){
  .plateformes-strip{ margin:28px 0 22px; padding-top:10px; }
  .plateformes-logo img{ max-width:64px; max-height:64px; }
}

/* ✅ Version carousel + anti-conflit (hérite de ton HTML actuel) */
.plateformes-strip.carousel{
  --plat-item-h: 80px;
  --plat-arrow-w: 30px;
  --plat-track-pad-top: 12px;
  --plat-track-pad-bot: 6px;
  --plat-strip-pad-top: 14px;
}

.plateformes-strip.carousel .carousel-track.plateformes-carousel{
  display:flex;
  align-items:center;
  gap:22px;
  padding:var(--plat-track-pad-top) var(--plat-arrow-w) var(--plat-track-pad-bot) !important;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  scrollbar-width:none;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--plat-arrow-w) !important;
  position:relative;
  z-index:1;
}
.plateformes-strip.carousel .carousel-track.plateformes-carousel::-webkit-scrollbar{ display:none; }

.plateformes-strip.carousel .plateformes-logo.carousel-item{
  height:var(--plat-item-h) !important;
  display:inline-flex !important;
  align-items:center !important;
  flex:0 0 auto;
  scroll-snap-align:start;
}
.plateformes-strip.carousel .plateformes-logo.carousel-item img{
  max-height:100%;
  width:auto;
  display:block;
}

/* ✅ Flèches : scoppées sur la section plateformes (corrige les conflits) */
@media (min-width:769px){
  .plateformes-strip.carousel > .carousel-nav{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    position:absolute !important;
    top:calc(var(--plat-strip-pad-top) + var(--plat-track-pad-top)) !important;
    height:var(--plat-item-h) !important;
    width:var(--plat-arrow-w) !important;

    z-index:999 !important;

    border:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;

    transform:none !important;

    font-size:34px !important;
    line-height:1 !important;
    opacity:1 !important;
    cursor:pointer !important;

    transition:color .2s ease, transform .2s ease, opacity .2s ease !important;
    transform-origin:center !important;
	  color:inherit !important;
  background:none !important;
  }

  .plateformes-strip.carousel > .carousel-nav.prev{ left:0 !important; right:auto !important; }
  .plateformes-strip.carousel > .carousel-nav.next{ right:0 !important; left:auto !important; }

  .plateformes-strip.carousel > .carousel-nav:hover{
    color:rgba(204,0,0,.9) !important;
    transform:scale(1.06) !important;
  }

  .plateformes-strip.carousel > .carousel-nav:disabled{
    opacity:.25 !important;
    pointer-events:none !important;
  }
}
@media (max-width:768px){
  .plateformes-strip.carousel > .carousel-nav{ display:none !important; }
  .plateformes-strip.carousel .carousel-track.plateformes-carousel{
    padding:12px 8px 6px !important;
    scroll-padding-inline:8px !important;
  }
}



/* ==========================================================
   🎭 ACTEURS — CAROUSEL (LAYOUT UNIQUEMENT, SANS DOUBLON)
   - Ne stylise PAS les vignettes (géré par assets/css/vignettes-acteurs.css)
   - Garde ton JS carousel existant
   - Objectif : mêmes largeurs “films-like” + items stretch (hauteur uniforme)
   ========================================================== */

/* Track (layout seulement) */
.acteurs-block .films-carousel.acteurs-carousel{
  gap:14px;
  padding-bottom:12px;
  align-items:stretch !important; /* ✅ toutes les cartes même hauteur */
}

/* Items : largeur responsive (1.5 / 2.5 / 4.5 visibles) */
.acteurs-block .films-carousel.acteurs-carousel > a.carousel-film-card.acteur-card{
  flex:0 0 calc(100%/1.5) !important; /* mobile */
  height:100%;
}

/* Tablette */
@media (min-width:600px){
  .acteurs-block .films-carousel.acteurs-carousel > a.carousel-film-card.acteur-card{
    flex:0 0 calc(100%/2.5) !important;
  }
}

/* Desktop */
@media (min-width:1024px){
  .acteurs-block .films-carousel.acteurs-carousel > a.carousel-film-card.acteur-card{
    flex:0 0 calc(100%/4.5) !important;
  }
}




/*page liste acteurs*/
/* ==========================================================
   🎭 LISTE DES ACTEURS — CSS COMPLET
   - UI cohérente archives/taxo
   - Typeahead plus “cliquable” (zones + padding + stabilité)
   ========================================================== */

/* Page container */
.wpz-acteurs-page .site-container{
  padding-top:0 !important;
}

/* Titre */
.wpz-acteurs-title{
  font-size:clamp(1.8rem,4.8vw,3rem);
  font-weight:900;
  margin:10px 0 14px;
  letter-spacing:-.02em;
}

/* ==========================================================
   Barre recherche (haut)
   ========================================================== */
.wpz-filterbar{
  display:flex;
  gap:12px;
  margin:12px 0 12px;
}
.wpz-filterbar .search-bar-full{
  flex:1;
  margin:0;
}
.wpz-filterbar input{
  width:100%;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.14);
  padding:0 14px;
  font-size:1rem;
  outline:none;
  background:#fff;
}
.wpz-filterbar input:focus{
  border-color:rgba(192,57,43,.65);
  box-shadow:0 0 0 3px rgba(192,57,43,.12);
}

/* ==========================================================
   Filtres (2 colonnes desktop)
   ========================================================== */
.wpz-actor-filters{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin:0 0 10px;
}
.wpz-actor-filters input{
  height:44px;
  border-radius:12px;
  font-size:.98rem;
  width:100%;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  padding:0 12px;
  outline:none;
}
.wpz-actor-filters input:focus{
  border-color:rgba(192,57,43,.65);
  box-shadow:0 0 0 3px rgba(192,57,43,.12);
}

/* Mobile */
@media (max-width:768px){
  .wpz-actor-filters{
    grid-template-columns:1fr;
  }
}

/* ==========================================================
   Badges actifs
   ========================================================== */
.filtres-actifs-inline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem;
  margin:10px 0 16px;
  padding:12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.titre-filtres{
  font-weight:900;
  color:#c0392b;
  margin-right:.4rem;
}
.badge-filtre{
  background:rgba(0,0,0,.04);
  border-radius:999px;
  padding:.34rem .75rem;
  border:1px solid rgba(0,0,0,.10);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.badge-filtre .remove-filtre{
  width:22px;
  height:22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(231,76,60,.12);
  color:#e74c3c;
  text-decoration:none;
  font-weight:900;
  line-height:1;
}
.badge-filtre .remove-filtre:hover{
  background:rgba(231,76,60,.18);
}

.button-reset-inline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#e74c3c;
  color:#fff;
  border:0;
  padding:10px 14px;
  font-weight:800;
  cursor:pointer;
  border-radius:12px;
  text-decoration:none;
  transition:transform .12s ease, filter .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.button-reset-inline:hover{
  filter:brightness(.95);
  transform:translateY(-1px);
}
.button-reset-inline:active{
  transform:translateY(0);
}

/* ==========================================================
   Typeahead (suggestions)
   ✅ “Plus cliquable” : padding + min-height + gap + stabilité
   ✅ Moins sensible : pas de fermeture au moindre move
   ========================================================== */
.wpz-ta-wrap{
  position:relative;
}

/* Liste suggestions */
.wpz-ta-list{
  position:absolute;
  z-index:9999;
  left:0;
  right:0;
  top:calc(100% + 8px);
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  box-shadow:0 14px 40px rgba(0,0,0,.14);
  max-height:320px;
  overflow:auto;

  /* ✅ plus “safe” au tap */
  padding:10px;
  display:none;

  /* évite les sélections texte involontaires */
  user-select:none;
  -webkit-user-select:none;

  /* scrolling tactile clean */
  -webkit-overflow-scrolling:touch;
}
.wpz-ta-list.open{
  display:block;
}

/* Item suggestion */
.wpz-ta-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  /* ✅ zone de clic plus grande */
  padding:14px 12px;
  min-height:48px;

  border-radius:12px;
  cursor:pointer;

  /* améliore la précision mobile */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;

  /* micro-transition douce */
  transition: background .12s ease, transform .12s ease;
}
.wpz-ta-item:hover{
  background:rgba(0,0,0,.04);
}
.wpz-ta-item:active{
  background:rgba(0,0,0,.06);
  transform:scale(.995);
}

/* Texte */
.wpz-ta-item strong{
  font-weight:900;
}
.wpz-ta-muted{
  opacity:.7;
  font-size:.92em;
}

/* Séparateur subtil entre items (sans casser arrondis) */
.wpz-ta-item + .wpz-ta-item{
  margin-top:6px;
}

/* Accessibilité focus (si tu ajoutes tabindex plus tard) */
.wpz-ta-item:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px rgba(192,57,43,.18);
  background:rgba(192,57,43,.06);
}

/* ==========================================================
   Grille acteurs (style cartes HOME)
   ========================================================== */
#acteur-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:12px !important;
}

@media (min-width:600px){
  #acteur-grid{
    grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  }
}
@media (min-width:1024px){
  #acteur-grid{
    grid-template-columns:repeat(6, minmax(0,1fr)) !important;
  }
}

/* Anti-misclick : verrouille la grille pendant refresh */
#acteur-grid.wpz-grid-lock{
  pointer-events:none !important;
}

/* Sentinel */
#acteur-sentinel{
  height:1px;
}

/* ==========================================================
   Chargement
   ========================================================== */
#chargement-acteurs{
  text-align:center;
  margin:2rem;
  display:none;
  font-weight:800;
  opacity:.75;
}




/* =============================================
   ❤️ FAVORIS – sécurise le bouton
   ============================================= */
form .action-btn[data-action="favoris"]{
  display:inline-flex !important;
  width:40px !important;
  height:40px !important;
  padding:0 !important;
  margin:0 !important;
  line-height:0 !important;
}
@media (max-width:768px){
  form .action-btn[data-action="favoris"]{
    width:34px !important;
    height:34px !important;
  }
}
.action-btn[data-action="favoris"]{ z-index:30 !important; }






/* Optionnel mais recommandé : quand on clique sur un ancre/titre, ça ne passe pas sous le header */
h1,h2,h3,[id]{
  scroll-margin-top:calc(var(--header-height) + 16px);
}





/* Le track ne doit pas hériter de comportements de "cards" */
.genres-carousel-container .genre-chip.carousel-film-card{
  flex-direction:row !important;
  justify-content:center !important;
  box-shadow:none !important;
  padding:0 14px !important;
}

/* Empêche les flèches de masquer les chips (desktop) */
@media (min-width:769px){
  .genres-carousel-container .films-carousel.genres-carousel{
    padding-left:44px;
    padding-right:44px;
    scroll-padding-inline:44px;
  }
}








/* ==========================================================
   🧭 BREADCRUMB – DISCRET (gris clair + rouge subtil)
   - full-bleed
   - aucun gap (anti-liseret)
   - sticky mobile OK
   - ✅ noir TRANSPARENT (1 seule couche, pas de double noir/gris)
   ========================================================== */

/* WRAP full-bleed collé AU HEADER (couche UNIQUE) */
.breadcrumb-wrap{
  position:relative;
  z-index:60;

  width:100vw;
  max-width:none;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);

  margin:0 !important;
  padding:0 !important;

  /* ✅ couche unique */
  background:rgba(0,0,0,.55) !important;
  backdrop-filter:saturate(1.1) blur(6px);
  -webkit-backdrop-filter:saturate(1.1) blur(6px);

  border-top:0 !important;
  border-bottom:1px solid rgba(255,255,255,.06);

  /* ✅ recouvre tout micro-gap éventuel */
  margin-top:-1px !important;

  box-shadow:none !important;
  outline:0 !important;
}

/* ✅ BARRE INTERNE : même largeur que le contenu global */
.breadcrumb{
  height:44px;
  display:flex;
  align-items:center;

  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;

  max-width:var(--wpz-container);
  margin-left:auto;
  margin-right:auto;

  /* Desktop = alignement parfait */
  padding:0;

  box-sizing:border-box;

  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
  border:0 !important;
}

/* 📱 Mobile & tablette : même padding que les containers */
@media (max-width: 1024px){
  .breadcrumb{
    padding: 0 1rem; /* EXACTEMENT comme .site-container */
  }
}
@media (max-width: 900px){
  .breadcrumb{
    padding: 0 1rem; /* EXACTEMENT comme .site-container */
  }
}

.breadcrumb::-webkit-scrollbar{ display:none; }

/* ✅ Anti pseudo-éléments parasites */
.breadcrumb-wrap::before,
.breadcrumb-wrap::after,
.breadcrumb::before,
.breadcrumb::after{
  content:none !important;
  display:none !important;
}

/* RESET UL / LI */
.breadcrumb-list{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  white-space:nowrap;
  min-width:max-content;

  gap:8px;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;

  font-size:.82rem;
  line-height:1;

  background:transparent !important;
}
.breadcrumb-list li{
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
}

/* Séparateurs (très discrets) */
.breadcrumb-list .bc-sep{
  color:rgba(255,255,255,.22);
  font-weight:700;
  transform:translateY(-.5px);
}

/* CHIPS (base) */
.bc-link,
.bc-current{
  display:inline-flex;
  align-items:center;
  height:30px;
  padding:0 11px;
  border-radius:var(--radius-lg);
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}

/* Liens : gris clair discret */
.bc-link{
  color:rgba(255,255,255,.74);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  font-weight:600;
}
.bc-link:hover{
  color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.14);
}

/* Actif : rappel rouge fin */
.bc-current{
  color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(192,57,43,.60);
  font-weight:700;
}

/* ACCESSIBILITÉ */
.bc-link:focus-visible,
.bc-current:focus-visible{
  box-shadow:
    0 0 0 2px rgba(255,255,255,.18),
    0 0 0 4px rgba(192,57,43,.25);
}

/* AUCUN espace entre breadcrumb et contenu */
.site-container,
.archive-films,
.film-container{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* MOBILE : sticky (collé) */
@media (max-width:768px){
  .
  .breadcrumb{ height:42px; }
  .breadcrumb-list{ font-size:.78rem; gap:6px; }
  .bc-link,.bc-current{ height:28px; padding:0 9px; }
}

/* Très petits écrans */
@media (max-width:380px){
  .breadcrumb{ height:40px; }
  .breadcrumb-list{ font-size:.75rem; }
  .bc-link,.bc-current{ height:27px; padding:0 8px; }
}

/* Motion */
@media (prefers-reduced-motion:reduce){
  .breadcrumb-wrap{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  
  
}




/* ======================================================
   🧭 Breadcrumb : suit la logique no-hero (comme le header)
   ====================================================== */

/* Par défaut (pages avec hero) : transparent premium */
.breadcrumb-wrap{
  background:rgba(0,0,0,.55) !important;
  backdrop-filter:saturate(1.1) blur(6px);
  -webkit-backdrop-filter:saturate(1.1) blur(6px);
}

/* Pages SANS hero : opaque propre (jamais gris) */
body.no-hero .breadcrumb-wrap{
  background:var(--bg-dark) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Sécurité anti double couche (si un enfant reçoit un bg par erreur) */
body.no-hero .breadcrumb,
body.no-hero .breadcrumb-list,
body.no-hero .breadcrumb-list li{
  background:transparent !important;
}

/* =============================================
   🖤 HEADER — NOIR TRANSPARENT (UNE SEULE COUCHE)
   -> évite le "double noir" (header + inner)
   ============================================= */

/* La couche unique */
.site-header{
  background:rgba(0,0,0,.55) !important;  /* ajuste .45 à .70 si besoin */
  backdrop-filter:saturate(1.1) blur(6px);
  -webkit-backdrop-filter:saturate(1.1) blur(6px);

  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  z-index:80;
}

/* IMPORTANT : l’intérieur doit rester TRANSPARENT */
.site-header .header-inner{
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Liens */
.site-header a,
.site-header nav a,
.site-header .menu-item a{
  color:#fff !important;
}
.site-header a:hover{
  color:var(--couleur-rouge,var(--primary)) !important;
}

/* Anti pseudo-éléments */
.site-header::before,
.site-header::after,
.site-header .header-inner::before,
.site-header .header-inner::after{
  content:none !important;
  display:none !important;
}



/* =========================================
   🖤 HEADER — comportement contextuel
   ========================================= */

/* Par défaut : header TRANSPARENT (pages avec image) */
.site-header{
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
}

/* Pages SANS image de fond → header OPAQUE propre */
body.no-hero .site-header{
  background: var(--bg-dark); /* noir net, jamais gris */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Par défaut : transparent (si tu veux garder ce comportement) */
.site-header{
  background: rgba(0,0,0,.55) !important;
  backdrop-filter: blur(6px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.1) !important;
}

/* IMPORTANT : éviter double couche */
.site-header .header-inner{
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Pages SANS hero : opaque net (jamais gris) */
body.no-hero .site-header{
  background: var(--bg-dark) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.no-hero .site-header .header-inner{
  background: transparent !important;
}


/* =========================================================
   LOGO — desktop + logo mobile
   ========================================================= */

.site-logo{
  display:inline-flex;
  align-items:center;
  line-height:1;
}

/* Taille par défaut des images de logo */
.site-logo img{
  max-height:38px;
  width:auto;
  height:auto;
  display:block;
}

/* Desktop: on cache le logo mobile */
.site-logo__link--mobile{
  display:none;
}

/* Mobile */
@media (max-width: 768px){

  /* on cache le logo desktop WP (le lien + l'image) */
  .site-logo .custom-logo-link{
    display:none !important;
  }

  /* on affiche le logo mobile */
  .site-logo__link--mobile{
    display:inline-flex;
    align-items:center;
  }

  .site-logo img.logo-mobile{
    max-height:28px;
  }
}



/* =============================================
   🎬 WPZ TRAILERS — CAROUSEL + CARDS + MODALE
   - Compatible .carousel-wrapper / .films-carousel / arrows
   - Aucun doublon
   ============================================= */

/* Wrapper */
.wpz-trailers-wrapper{ position:relative; }

/* Track (on réutilise .films-carousel existant) */
.films-carousel.wpz-trailers-carousel{
  align-items:stretch;
  gap:1rem;
  padding-bottom:1rem;
}

/* Card */
.wpz-trailer-card.carousel-film-card{
  flex:0 0 calc(100% / 1.15); /* mobile: gros item */
  max-width:560px;
  border-radius:12px;
  overflow:hidden;
  background:var(--bg);
  box-shadow:0 2px 8px rgba(0,0,0,.10);
  scroll-snap-align:start;
}

/* Tablette */
@media (min-width:600px){
  .wpz-trailer-card.carousel-film-card{ flex:0 0 calc(100% / 1.8); }
}

/* Desktop */
@media (min-width:1024px){
  .wpz-trailer-card.carousel-film-card{ flex:0 0 calc(100% / 2.8); }
}

/* =============================================
   Thumbnail 16/9 (lite)
   ============================================= */
.wpz-trailer-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#0f0f10;
  overflow:hidden;
}

/* Image */
.wpz-trailer-thumb{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(1.05) contrast(1.02);
}

/* =====================================
   Bouton PLAY — version compacte premium
   ===================================== */

.wpz-trailer-play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  padding:0;
  cursor:pointer;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.08),
    rgba(0,0,0,.30)
  );
}

/* Cercle */
.wpz-trailer-play-ic{
  width:52px;                     /* ✅ plus petit */
  height:52px;
  border-radius:50%;
  background:rgba(255,255,255,.82); /* blanc légèrement transparent */
  box-shadow:0 6px 18px rgba(0,0,0,.30);
  position:relative;
  transition:transform .15s ease, background .15s ease;
}

/* Triangle */
.wpz-trailer-play-ic::before{
  content:"";
  position:absolute;
  left:21px;
  top:15px;
  width:0;
  height:0;
  border-left:14px solid #e53935;  /* ✅ triangle rouge */
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
}

/* Hover subtil */
.wpz-trailer-card:hover .wpz-trailer-play-ic{
  transform:scale(1.06);
  background:rgba(255,255,255,.92);
}

/* Mobile encore plus compact */
@media (max-width:680px){
  .wpz-trailer-play-ic{
    width:46px;
    height:46px;
  }
  .wpz-trailer-play-ic::before{
    left:18px;
    top:13px;
    border-left-width:12px;
    border-top-width:9px;
    border-bottom-width:9px;
  }
}

/* Iframe quand la modale lit la vidéo (sécurité si jamais) */
.wpz-trailer-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* =============================================
   Titre + flèche (lien fiche)
   ============================================= */
.wpz-trailer-head{
  display:block;
  text-decoration:none;
  color:inherit;
}

.wpz-trailer-title-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
}

.wpz-trailer-title{
  flex:1;
  font-weight:600;
  font-size:.95rem;
  line-height:1.25;
  color:var(--text);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.wpz-trailer-go{
  flex:0 0 auto;
  width:30px;
  height:30px;
  border-radius:var(--radius);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(192,57,43,.10);
  border:1px solid rgba(192,57,43,.18);
  color:var(--primary);
  font-weight:900;
  line-height:1;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}

.wpz-trailer-head:hover .wpz-trailer-go{
  transform:translateX(2px);
  background:rgba(192,57,43,.14);
  border-color:rgba(192,57,43,.28);
}

/* Mobile compact */
@media (max-width:480px){
  .wpz-trailer-title{ font-size:.92rem; }
}

/* =============================================
   MODALE (titre sous la vidéo à gauche + X rouge)
   ============================================= */
html.wpz-modal-lock{ overflow:hidden; }

.wpz-trailer-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:99999;
}
.wpz-trailer-modal.is-open{ display:block; }

.wpz-trailer-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
}

.wpz-trailer-modal__panel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(980px, calc(100vw - 28px));
  background:#0f0f10;
  border-radius:14px;
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  overflow:hidden;
}

/* X rouge (en haut à droite) */
.wpz-trailer-modal__close{
  position:absolute;
  right:10px;
  top:8px;
  width:40px;
  height:40px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.20);
  color:#ff3b30;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  z-index:3;
}
.wpz-trailer-modal__close:hover{
  background:rgba(255,59,48,.12);
  border-color:rgba(255,59,48,.20);
}

/* Vidéo */
.wpz-trailer-modal__frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
}
.wpz-trailer-modal__frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* Meta sous vidéo */
.wpz-trailer-modal__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px 14px;
  border-top:1px solid rgba(255,255,255,.08);
}

.wpz-trailer-modal__title{
  color:#fff;
  font-size:1rem;
  font-weight:650;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.wpz-trailer-modal__link{
  color:#fff;
  text-decoration:none;
  font-size:.92rem;
  opacity:.85;
  border:1px solid rgba(255,255,255,.12);
  padding:6px 10px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.06);
}
.wpz-trailer-modal__link:hover{
  opacity:1;
  background:rgba(255,255,255,.10);
}

@media (max-width:680px){
  .wpz-trailer-play-ic{ width:62px; height:62px; }
  .wpz-trailer-play-ic::before{
    left:26px;
    top:18px;
    border-left-width:20px;
    border-top-width:13px;
    border-bottom-width:13px;
  }
  .wpz-trailer-modal__title{ font-size:.95rem; }
  .wpz-trailer-modal__link{ font-size:.88rem; }
}

/* =========================================================
   FIX 1) Ligne titre + chevron ">" (rouge) bien à droite
   (utilise .wpz-trailer-title-row + .wpz-trailer-go)
   ========================================================= */

.wpz-trailer-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.wpz-trailer-title{
  flex:1 1 auto;
  min-width:0;                 /* indispensable pour l’ellipsis/line-clamp en flex */
}

/* =====================================
   Chevron lien fiche — version grise
   ===================================== */

.wpz-trailer-go{
  flex:0 0 auto;
  margin-left:auto;               /* toujours à droite */
  width:30px;
  height:30px;
  border-radius:5px;              /* ✅ radius demandé */
  display:inline-flex;
  align-items:center;
  justify-content:center;

  background:#f4f4f4;             /* gris très clair */
  border:1px solid #e2e2e2;       /* effet "brodé" */
  color:#6f6f6f;                  /* flèche grise */

  font-weight:700;
  line-height:1;
  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease,
    color .15s ease;
}



/* Hover : léger, élégant */
.wpz-trailer-head:hover .wpz-trailer-go{
  transform:translateX(2px);
  background:#ededed;
  border-color:#d6d6d6;
  color:#444;
}

/* =========================================================
   FIX 2) MODALE : titre à gauche / "Voir la fiche" à droite
   sur une seule ligne
   ========================================================= */

.wpz-trailer-modal__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.wpz-trailer-modal__title{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Lien à droite */
.wpz-trailer-modal__link{
  flex:0 0 auto;
  margin-left:auto;
  white-space:nowrap;
}

/* Option : rouge discret sur le lien (si tu veux rester cohérent avec le X) */
.wpz-trailer-modal__link{
  border-color:rgba(255,255,255,.12);
}
.wpz-trailer-modal__link:hover{
  border-color:rgba(255,59,48,.25);
}





/* =========================================================
   HERO — Badge cinéma style "Allociné"
   - Plateforme : aucun texte (géré en PHP)
   ========================================================= */

/* Badge cinéma (jaune + texte noir + plus grand) */
.wpz-hero-kind-badge.is-cinema.is-allocine{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.42rem .70rem;
  border-radius:var(--radius);
  background:#FFD400; /* jaune allociné */
  color:var(--text);         /* texte noir */
  font-weight:800;
  letter-spacing:.2px;
  text-transform:uppercase;
  font-size:.92rem;
  line-height:1;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}

/* Icône cinéma devant le texte */
.wpz-hero-kind-badge.is-cinema.is-allocine .wpz-hero-kind-ic{
  width:18px;
  height:18px;
  display:block;
  object-fit:contain;
  flex:0 0 auto;
}

/* Optionnel : rendre les logos plateformes un peu plus lisibles */
.wpz-hero-platform img{
  height:22px;
  width:auto;
  display:block;
}

/* =========================================================
   HERO — FORÇAGE BADGE CINÉ (jaune + texte noir)
   ========================================================= */

/* ultra spécifique + !important => gagne contre l'existant */
.hero-slider .hero-overlay .wpz-hero-topline .wpz-hero-kind-badge.is-cinema.is-allocine{
  display:inline-flex !important;
  align-items:center !important;
  gap:.45rem !important;
  padding:.45rem .75rem !important;
  border-radius:10px !important;
  background:#FFD400 !important; /* jaune allociné */
  color:#111 !important;         /* texte noir */
  font-weight:900 !important;
  letter-spacing:.2px !important;
  text-transform:uppercase !important;
  font-size:.92rem !important;
  line-height:1 !important;
  box-shadow:0 6px 18px rgba(0,0,0,.18) !important;
}

/* icône devant le texte */
.hero-slider .hero-overlay .wpz-hero-topline .wpz-hero-kind-badge.is-cinema.is-allocine .wpz-hero-kind-ic{
  width:18px !important;
  height:18px !important;
  display:block !important;
  object-fit:contain !important;
  flex:0 0 auto !important;
  filter:none !important;
}

/* Badge cinéma "Allociné" */
.hero-slider .wpz-hero-kind-badge.is-cinema.is-allocine{
  display:inline-flex;
  align-items:center;
  gap:10px;                 /* remplace le margin-right inline */
  padding:.48rem .8rem;
  border-radius:999px;
  background:#FFD400 !important;
  color:#111 !important;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.25px;
  line-height:1;
  box-shadow:0 8px 22px rgba(0,0,0,.22);
  border:1px solid var(--border);
}

.hero-slider .wpz-hero-kind-badge.is-cinema.is-allocine .film-hero-cinema-ico{
  width:18px;
  height:18px;
  flex:0 0 auto;
  display:block;
  color:currentColor; /* noir via le badge */
}

.hero-slider .wpz-hero-kind-badge.is-cinema.is-allocine .wpz-hero-kind-txt{
  font-size:.92rem;
}


/* ============================================
   🎬 Head de section (titre + "Voir tout")
   ============================================ */

.films-block__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:0.6rem;
  margin-top:2rem;
}

/* Titre (déjà existant, on ne le casse pas) */
.films-block__title{
  margin:0;
  line-height:1.2;
}

/* Lien "Voir tout" */
.films-block__seeall{
  font-size:0.9rem;
  font-weight:500;
color: var(--text-muted);
  text-decoration:none;
  white-space:nowrap;
  position:relative;
  padding-right:0.9em;
  transition:color .2s ease, opacity .2s ease;
}

/* Petite flèche discrète */
.films-block__seeall::after{
  content:"›";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  font-size:1.1em;
  transition:transform .2s ease;
}

/* Hover */
.films-block__seeall:hover{
  opacity:0.85;
}

.films-block__seeall:hover::after{
  transform:translate(2px, -50%);
}

/* Focus clavier (accessibilité) */
.films-block__seeall:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
  border-radius:3px;
}

/* ============================================
   📱 Mobile
   ============================================ */

@media (max-width:640px){
  .films-block__head{
    gap:0.5rem;
  }

  .films-block__seeall{
    font-size:0.85rem;
  }
}











/* =============================================
   🎬 TYPO MENU — alignée avec le logo Flixeo
   ============================================= */

.site-header nav,
.site-header .menu,
.site-header .menu a,
.site-header .menu-item a{
  font-family: var(--font-brand) !important;
  font-weight: 500;              /* équilibre logo / lisibilité */
  letter-spacing: .04em;         /* touche cinéma / premium */
  text-transform: uppercase;     /* optionnel mais très Netflix-like */
  font-size: .6rem;             /* propre, net, moderne */
}

@media (max-width:1024px){
  .site-header .menu a{
    font-weight: 600;
    letter-spacing: .02em;
    font-size: .95rem;
  }
}


/* =========================================================
   ✅ SINGLE ACTEUR — Breadcrumb sous le header + padding
   (ne touche pas aux autres pages)
   ========================================================= */

/* La hauteur du header : utilise ta variable si elle existe, sinon fallback 64px */
body.single-acteur{
  --wpz-header-h: var(--header-height, 64px);
}

/* Sur la page acteur : le breadcrumb n'est PAS collé en haut */
body.single-acteur .breadcrumb-wrap{

  top: var(--wpz-header-h) !important;  /* ✅ sous le header */
  z-index: 9998 !important;
}

/* Un peu d’air au-dessus/dedans */
body.single-acteur .breadcrumb{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  height: auto !important;             /* laisse respirer */
  min-height: 44px;                    /* garde une hauteur mini propre */
}

/* Bonus : évite qu'il se colle visuellement au hero (petit liseré) */
body.single-acteur .breadcrumb-wrap{
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}











/* =========================================================
   WPZ — BLOCS GUTENBERG : VIGNETTES V3 (PRODUCTION SAFE)
   - 1 seule version (supprime les doublons/contradictions)
   - Mobile : swipe horizontal NATIF (sans toucher au JS)
   - Zéro overflow horizontal (empêche le blog de se décaler hors écran)
   - Scope strict : uniquement le bloc Gutenberg V3
   Dépendances HTML :
   .wpz-block-vignettes
     .carousel-wrapper.wpz-v3-carousel[data-wpz-carousel="1"]
       .wpz-v3-viewport
         .films-carousel.wpz-v3-track
           .wpz-v3-item
   ========================================================= */

/* =========================================================
   (A) GARDE-FOU ANTI OVERFLOW GLOBAL — ultra safe
   (corrige le “contenu blog hors écran” même si un enfant déborde)
   Si tu ne veux pas de global : commente ces 2 lignes.
   ========================================================= */
html, body { overflow-x: clip; }
@supports not (overflow: clip){ html, body { overflow-x: hidden; } }

/* =========================================================
   (B) BASE BLOC
   ========================================================= */
.wpz-block-vignettes{
  width:100%;
  max-width:100%;
  /* important : le bloc ne doit jamais agrandir le document */
  overflow-x: clip;
}
@supports not (overflow: clip){
  .wpz-block-vignettes{ overflow-x:hidden; }
}

/* Head */
.wpz-block-vignettes__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px;
  min-width:0;
}
.wpz-block-vignettes__head > *{ min-width:0; }

/* =========================================================
   (C) CAROUSEL — STRUCTURE
   ========================================================= */
.wpz-block-vignettes.wpz-block-vignettes--carousel .carousel-wrapper{
  position:relative;
  width:100%;
  max-width:100%;
  /* barrière anti “page qui s’élargit” */
  overflow:hidden;
}

/* viewport d’isolation : barrière anti scrollWidth */
.wpz-block-vignettes.wpz-block-vignettes--carousel .wpz-v3-viewport{
  width:100%;
  max-width:100%;
  overflow:hidden;
  min-width:0;
}

/* =========================================================
   (D) TRACK — DOIT SCROLLER ICI (compat JS : films-carousel)
   ========================================================= */
.wpz-block-vignettes.wpz-block-vignettes--carousel .films-carousel.wpz-v3-track{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:stretch;
  gap:14px;

  /* scroll horizontal natif */
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch;

  /* ne doit jamais dépasser */
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  min-width:0;

  /* padding UX */
  padding:6px 12px 12px;
  margin:0;

  /* gesture mobile (clé) */
  touch-action: pan-x !important;
  -ms-touch-action: pan-x !important;
  overscroll-behavior-x: contain;

  /* on évite le “mandatory” mobile (souvent ressenti comme bloqué) */
  scroll-snap-type: x proximity;

  scrollbar-width:none;
}
.wpz-block-vignettes.wpz-block-vignettes--carousel .films-carousel.wpz-v3-track::-webkit-scrollbar{
  display:none;
}

/* Anti largeur fantôme (texte / children) */
.wpz-block-vignettes.wpz-block-vignettes--carousel .films-carousel.wpz-v3-track,
.wpz-block-vignettes.wpz-block-vignettes--carousel .films-carousel.wpz-v3-track > *{
  min-width:0;
}

/* =========================================================
   (E) ITEM — DIMENSIONS STABLES
   ========================================================= */
.wpz-block-vignettes.wpz-block-vignettes--carousel .wpz-v3-item{
  flex:0 0 auto;
  width:clamp(150px, 44vw, 240px);
  max-width:85vw;
  min-width:0;

  display:flex;
  align-items:stretch;

  /* neutre */
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
  margin:0;

  /* si tu veux du snap “propre” sur desktop, OK en start */
  scroll-snap-align:start;
}

/* carte racine (a/article/film-card/actor-card/post-card) */
.wpz-block-vignettes.wpz-block-vignettes--carousel .wpz-v3-item > a,
.wpz-block-vignettes.wpz-block-vignettes--carousel .wpz-v3-item > article,
.wpz-block-vignettes.wpz-block-vignettes--carousel .wpz-v3-item > .film-card,
.wpz-block-vignettes.wpz-block-vignettes--carousel .wpz-v3-item > .actor-card,
.wpz-block-vignettes.wpz-block-vignettes--carousel .wpz-v3-item > .post-card{
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  min-height:0;
}

/* médias : neutralise toute règle “hero-like” */
.wpz-block-vignettes.wpz-block-vignettes--carousel .wpz-v3-item img,
.wpz-block-vignettes.wpz-block-vignettes--carousel .wpz-v3-item picture,
.wpz-block-vignettes.wpz-block-vignettes--carousel .wpz-v3-item video{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;

  position:static !important;
  inset:auto !important;
  transform:none !important;

  object-fit:cover;
}

/* =========================================================
   (F) FIX “PARENT QUI DÉSACTIVE LES GESTURES” — scoped
   Si un CSS global met touch-action:none quelque part, ceci le neutralise
   sans toucher au reste du site.
   ========================================================= */
.wpz-block-vignettes.wpz-block-vignettes--carousel { touch-action: auto; }
.wpz-block-vignettes.wpz-block-vignettes--carousel .wpz-v3-viewport{ touch-action: auto; }
.wpz-block-vignettes.wpz-block-vignettes--carousel .films-carousel.wpz-v3-track{
  touch-action: pan-x !important;
}

/* =========================================================
   (G) FLÈCHES (desktop) + mobile hide
   ========================================================= */
.wpz-block-vignettes.wpz-block-vignettes--carousel .carousel-arrow{
  z-index:5;
}
@media (max-width:768px){
  .wpz-block-vignettes.wpz-block-vignettes--carousel .carousel-arrow{
    display:none !important;
  }
}

/* =========================================================
   (H) HOMOGÉNÉISATION HAUTEURS — optionnel mais safe
   ========================================================= */
.wpz-block-vignettes.wpz-block-vignettes--carousel .wpz-v3-item{
  align-items:stretch;
}

/* clamp titres (safe : si ça matche, ça s’applique, sinon aucun effet) */
.wpz-block-vignettes .film-card__title,
.wpz-block-vignettes .actor-card__title,
.wpz-block-vignettes .post-card__title,
.wpz-block-vignettes .card-title,
.wpz-block-vignettes h3,
.wpz-block-vignettes h4{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

/* clamp sous-texte */
.wpz-block-vignettes .film-card__meta,
.wpz-block-vignettes .actor-card__meta,
.wpz-block-vignettes .post-card__excerpt,
.wpz-block-vignettes .card-meta,
.wpz-block-vignettes .card-excerpt{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}

/* =========================================================
   (I) GRID
   ========================================================= */
.wpz-block-vignettes.wpz-block-vignettes--grid .wpz-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:14px;
  width:100%;
  max-width:100%;
}
.wpz-block-vignettes.wpz-block-vignettes--grid .wpz-grid > *{
  min-width:0;
  max-width:100%;
}


/* =========================================================
   WPZ — BLOCS GUTENBERG : VIGNETTES V3 — FIX MOBILE DEFINITIF
   - Compatible avec TON HTML :
     .wpz-block-vignettes
       .carousel-wrapper.wpz-v3-carousel[data-wpz-carousel="1"]
         .wpz-v3-viewport
           .films-carousel.wpz-v3-track
             .wpz-v3-item
   - Ne touche PAS au JS
   - Corrige :
     (1) scroll horizontal bloqué sur mobile
     (2) contenu du blog qui part hors écran
   ========================================================= */


/* ---------------------------------------------------------
   0) Ceinture anti “page qui s’élargit”
   (déjà présent chez toi globalement, mais on sécurise ici
    au plus proche du bloc, sans impacter le reste)
--------------------------------------------------------- */
.wpz-article-body,
.wpz-article-content,
.wpz-article-content .entry-content{
  max-width: 100%;
  min-width: 0;
}

.wpz-article-content .entry-content .wpz-block-vignettes{
  max-width: 100%;
  min-width: 0;
  overflow-x: clip; /* empêche le décalage horizontal du document */
}
@supports not (overflow: clip){
  .wpz-article-content .entry-content .wpz-block-vignettes{ overflow-x: hidden; }
}

/* IMPORTANT : si un enfant force une largeur (image, card, etc.) */
.wpz-article-content .entry-content .wpz-block-vignettes *{
  max-width: 100%;
}


/* ---------------------------------------------------------
   1) Base bloc
--------------------------------------------------------- */
.wpz-block-vignettes{
  width: 100%;
  box-sizing: border-box;
}

/* Head */
.wpz-block-vignettes__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px;
  min-width:0;
}
.wpz-block-vignettes__head > *{ min-width:0; }


/* ---------------------------------------------------------
   2) CAROUSEL : wrappers (barrières anti overflow)
--------------------------------------------------------- */
.wpz-block-vignettes.wpz-block-vignettes--carousel .carousel-wrapper.wpz-v3-carousel{
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;       /* le track scroll, pas la page */
  box-sizing: border-box;

  /* isolation : évite que des styles externes fassent “grossir” le layout */
  contain: layout paint;
}

/* viewport */
.wpz-block-vignettes.wpz-block-vignettes--carousel .wpz-v3-viewport{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}


/* ---------------------------------------------------------
   3) TRACK : c’est LUI qui doit scroller (et capter le swipe)
   Problème classique : un JS “drag” ou des styles globaux
   empêchent le pan-x. Ici on force proprement.
--------------------------------------------------------- */
.wpz-block-vignettes.wpz-block-vignettes--carousel .films-carousel.wpz-v3-track{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: 14px;

  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;

  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;

  padding: 6px 12px 12px;
  margin: 0;

  /* ✅ clé mobile : autoriser le swipe horizontal */
  touch-action: pan-x !important;
  -ms-touch-action: pan-x !important;

  /* évite les “rebonds” qui peuvent donner l’impression de blocage */
  overscroll-behavior-x: contain;

  /* scroll-snap : sur mobile, mandatory peut donner “bloqué” selon devices */
  scroll-snap-type: x proximity;

  scrollbar-width: none;
}
.wpz-block-vignettes.wpz-block-vignettes--carousel .films-carousel.wpz-v3-track::-webkit-scrollbar{
  display: none;
}

/* Neutralise les contraintes globales .films-carousel (si elles entrent en conflit) */
.wpz-block-vignettes.wpz-block-vignettes--carousel .films-carousel.wpz-v3-track{
  height: auto !important;
  scroll-behavior: auto; /* le JS gère déjà desktop ; sur mobile, naturel */
}

/* Anti “largeur fantôme” due à flex + enfants */
.wpz-block-vignettes.wpz-block-vignettes--carousel .films-carousel.wpz-v3-track,
.wpz-block-vignettes.wpz-block-vignettes--carousel .films-carousel.wpz-v3-track > *{
  min-width: 0;
}


/* ---------------------------------------------------------
   4) ITEM : largeur stable + aucune expansion du document
--------------------------------------------------------- */
.wpz-block-vignettes.wpz-block-vignettes--carousel .wpz-v3-item{
  flex: 0 0 auto;
  width: clamp(150px, 44vw, 240px);
  max-width: 85vw;

  min-width: 0;
  box-sizing: border-box;

  display: flex;
  align-items: stretch;

  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;

  scroll-snap-align: start;
}

/* Carte racine : prend toute la largeur, pas plus */
.wpz-block-vignettes.wpz-block-vignettes--carousel .wpz-v3-item > a,
.wpz-block-vignettes.wpz-block-vignettes--carousel .wpz-v3-item > article,
.wpz-block-vignettes.wpz-block-vignettes--carousel .wpz-v3-item > .film-card,
.wpz-block-vignettes.wpz-block-vignettes--carousel .wpz-v3-item > .actor-card,
.wpz-block-vignettes.wpz-block-vignettes--carousel .wpz-v3-item > .post-card{
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
}

/* Médias : empêche un style global type “hero” (position absolute etc.) */
.wpz-block-vignettes.wpz-block-vignettes--carousel .wpz-v3-item img,
.wpz-block-vignettes.wpz-block-vignettes--carousel .wpz-v3-item picture,
.wpz-block-vignettes.wpz-block-vignettes--carousel .wpz-v3-item video{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;

  position: static !important;
  inset: auto !important;
  transform: none !important;

  object-fit: cover;
}


/* ---------------------------------------------------------
   5) Flèches : desktop OK / mobile hidden (comme chez toi)
--------------------------------------------------------- */
.wpz-block-vignettes.wpz-block-vignettes--carousel .carousel-arrow{
  z-index: 5;
}
@media (max-width: 768px){
  .wpz-block-vignettes.wpz-block-vignettes--carousel .carousel-arrow{
    display: none !important;
  }
}


/* ---------------------------------------------------------
   6) GRID : inchangé (anti overflow)
--------------------------------------------------------- */
.wpz-block-vignettes.wpz-block-vignettes--grid .wpz-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.wpz-block-vignettes.wpz-block-vignettes--grid .wpz-grid > *{
  min-width: 0;
  max-width: 100%;
}


/* ---------------------------------------------------------
   7) Option “anti-blocage ultime” : uniquement mobile
   Certains scripts de drag (ou CSS globaux) mettent parfois
   user-select / pointer capture qui rend le swipe bizarre.
   On n’empêche pas le clic, mais on rend le pan-x prioritaire.
--------------------------------------------------------- */
@media (max-width: 1024px){
  .wpz-block-vignettes.wpz-block-vignettes--carousel .films-carousel.wpz-v3-track{
    /* priorité gesture */
    touch-action: pan-x !important;
  }
}
/* =========================================================
   WPZ — FIX FINAL TOUCH
   Objectif :
   - Swipe horizontal OK sur le carousel
   - Scroll vertical de la page TOUJOURS possible
   - Sans toucher au JS
   ========================================================= */

/* Autorise X ET Y (le navigateur décide selon l’intention) */
.wpz-block-vignettes.wpz-block-vignettes--carousel .films-carousel.wpz-v3-track{
  touch-action: pan-x pan-y !important;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}




/* Priorité absolue : si hidden -> jamais visible pour cacher le popup Création de topic avec le plugins wpz-forum */
/*.wpz-forum-modal[hidden]{ display:none !important; }*/









/* ✅ CSS À METTRE DANS TON FICHIER GLOBAL (PAS EN <style> INLINE)
   Scope ultra strict : uniquement .film-card.wpz-film-card
   IMPORTANT : je ne touche pas à .film-thumb--relative (sinon ça casse d'autres vignettes)
*/
.film-card.wpz-film-card .film-thumb--relative{
  position: relative; /* si déjà le cas chez toi, tu peux supprimer cette ligne */
}

.film-card.wpz-film-card .wpz-badge-age{
  position: absolute;
  right: 10px;
  bottom: 54px; /* au-dessus de .plateformes-icons — ajuste si besoin */
  z-index: 6;

  padding: 6px 8px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;

  background: rgba(0,0,0,.72);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@media (max-width: 768px){
  .film-card.wpz-film-card .wpz-badge-age{
    right: 8px;
    bottom: 10px;
  }
}