/* =========================================================
   ZRTST — SHOW PAGE (scopé)
   Build: 2025-09-04 00:05 UTC
   Dépend de /styles.css pour la base (grille, boutons, etc.)
   ========================================================= */

/* ------------------ Empilement propre ------------------ */
.show-page .page-content{ position:relative; z-index:2 }
.show-page .show-hero-fixed{ z-index:0; pointer-events:none }
.show-page .section-sep{ position:relative; z-index:3 }
.show-page .site-footer{ position:relative; z-index:4 }

/* ------------------ HERO vidéo ------------------ */
.show-page .show-hero-wrap{ height: calc(100vh - var(--header)); position: relative; z-index:1; }
.show-page .show-video-layer{ position:absolute; inset:0; overflow:hidden }
.show-page .show-video-layer video,
.show-page .show-video-layer iframe{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: filter .5s ease;
}
.show-page .video-placeholder{ position:absolute; inset:0 }
.show-page .show-hero-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(110% 80% at 50% 20%, transparent 0 55%, rgba(0,0,0,.48) 70%, rgba(0,0,0,.78) 100%),
    linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0) 40%);
  transition: opacity .35s ease;
}
/* Dim + blur après scroll (~40%) */
.show-page.hero-dim .show-hero-scrim{ opacity: .94; }
.show-page.hero-dim .show-video-layer video,
.show-page.hero-dim .show-video-layer iframe{ filter: blur(3px) brightness(.74); }

.show-page .show-hero-overlay{
  position:relative; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding: 10vh 6vw 6vh; text-align:center; z-index:2;
}
.show-page .show-title{ max-width:92vw }

/* ------------------ CTA “Réserver” premium ------------------ */
.show-page .btn-reserve{
  background: linear-gradient(180deg, #f0d49a, #c9a86a 56%, #a78452 100%);
  color:#2a1f1a; border:1px solid rgba(167,132,82,.85);
  box-shadow:0 14px 34px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.4);
  position:relative; overflow:hidden; padding:.85em 1.25em;
}
.show-page .btn-reserve::after{
  content:""; position:absolute; left:-30%; top:0; height:100%; width:30%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
  transform:skewX(-18deg); opacity:0;
}
.show-page .btn-reserve:hover::after{ animation: show_shine .7s ease forwards }
@keyframes show_shine{ to{ transform: translateX(220%) skewX(-18deg); opacity:.55 } }

/* ------------------ Bouton SON (centré sous les cartes) ------------------ */
.show-page .sound-toggle{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.55em .95em; border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  background: transparent; color:#fff;
  font-size:.95rem; line-height:1;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
  backdrop-filter:saturate(120%) blur(3px);
  cursor: pointer;
  transition: background .25s ease, box-shadow .25s ease;
}
.show-page .sound-toggle:hover{
  background: rgba(20,20,20,.65);
  box-shadow:0 10px 22px rgba(0,0,0,.28);
}

/* Position “SOUS les cartes du hero”, au centre */
.show-page .sound-toggle--below{
  position:absolute;
  left:50%; transform:translateX(-50%);
  bottom: calc(clamp(24px, 10vh, 96px) - 56px);
  z-index:4;
}

/* --- HALO SVG autour du bouton son (sync avec JS: pathLength=100) --- */
.show-page #heroSound .snd-wrap{
  position: relative;            /* ancre du halo */
  display: inline-flex; align-items: center; gap: .55rem;
}
.show-page #heroSound .halo{
  position: absolute; inset: -5px;
  width: calc(100% + 10px); height: calc(100% + 10px);
  pointer-events: none; overflow: visible;
}
.show-page #heroSound .halo path{
  fill: none;
  stroke: var(--gold, #d9b36e);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  /* dash en % du pathLength (=100) pour rester responsive */
  stroke-dasharray: var(--dash, 14) calc(100 - var(--dash, 14));
  stroke-dashoffset: 0;
  opacity: .80;
  filter: drop-shadow(0 0 4px rgba(217,179,110,.45));
  animation: zrt_halo_orbit 8s linear infinite;
}
.show-page #heroSound:hover .halo path{ opacity:.92; }
@keyframes zrt_halo_orbit{ to { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce){
  .show-page #heroSound .halo path{ animation:none; opacity:.35; }
}

/* ------------------ Mini actus (cartes sous le hero) ------------------ */
.show-page .show-actus{
  display:flex; flex-wrap:nowrap; gap:12px; margin-top:16px; align-items:center; overflow:visible
}
.show-page .show-actus .glass-card{ min-width:240px; position:relative; z-index:3 }

/* ------------------ VIDÉOS (vignettes) ------------------ */
.show-page .trailers-grid{ display:grid; gap:16px; grid-template-columns:repeat(3,1fr) }
@media (max-width:900px){ .show-page .trailers-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .show-page .trailers-grid{ grid-template-columns:1fr } }

.show-page .video-thumb-card{
  display:block; position:relative; border-radius:8px; overflow:hidden;
  border:1px solid rgba(201,168,106,.18); background:#141416;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.show-page .video-thumb-card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.35); border-color:var(--gold) }
.show-page .video-thumb-card img{ width:100%; height:auto; display:block; aspect-ratio:16/9 }

/* Overlay “verre” — sombre (hover + actif) */
.show-page .video-thumb-card .play-btn{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(6px) saturate(120%);
  background: linear-gradient(180deg, rgba(10,10,10,.35), rgba(10,10,10,.66));
  opacity: 0; transition: opacity .25s ease;
}
.show-page .video-thumb-card:hover .play-btn,
.show-page .video-thumb-card.is-playing .play-btn{ opacity: 1; }
.show-page .video-thumb-card .play-btn::after{
  content:""; width:0; height:0;
  border-left: 16px solid currentColor;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}

/* Pastille “En cours” — haut-droite */
.show-page .video-thumb-card .thumb-flag{
  position:absolute; top:.5rem; right:.5rem;
  padding:.25rem .55rem; font-size:.75rem; line-height:1; border-radius:999px;
  color:#111; background: var(--gold, #d9b36e);
  box-shadow:0 2px 8px rgba(0,0,0,.2); pointer-events:none; z-index:2;
}

/* Tag & légende en flux */
.show-page .video-thumb-card strong{
  display:inline-block; margin:.5rem .5rem 0;
  background: rgba(0,0,0,.06);
  padding:.2rem .5rem; border-radius:4px;
}
.show-page .v-caption{
  display:block; margin:.25rem .5rem .35rem;
  color:#e9e1d3; font-size:.92rem; text-align:center;
}

/* Section head Vidéos + Reset aligné au titre */
.section-head--videos{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
#heroResetInline[hidden]{ display:none }
#heroResetInline{
  padding:.35rem .7rem; border-radius:999px;
  border:1px solid var(--gold, #d9b36e);
  background: transparent; color: var(--gold, #d9b36e);
  font-size:.92rem; line-height:1; cursor:pointer;
}
#heroResetInline:hover{ background: rgba(20,20,20,.5); }

/* ------------------ TICKER PRESSE ------------------ */
.show-page .section-press .section-head{ margin-bottom:14px; }

.show-page .press-ticker{
  position: relative;
  overflow: hidden;
  margin: 12px 0 36px;
  padding: 18px 0;
  border-top:    1px solid rgba(201,168,106,.25);
  border-bottom: 1px solid rgba(201,168,106,.25);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.show-page .press-track{
  display: flex;
  gap: 28px;
  will-change: transform;
  animation: showTicker 40s linear infinite;
}
@keyframes showTicker{ from{ transform: translateX(0)} to{ transform: translateX(-50%)} }

.show-page .press-item{
  flex: 0 0 auto;
  min-width: 260px; max-width: 360px;
  text-decoration: none;
  color: var(--ink);
  background: rgba(20,20,24,.65);
  border: 1px solid rgba(201,168,106,.22);
  border-radius: 8px;
  padding: 14px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.show-page .press-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  border-color: var(--gold);
}
.show-page .press-item.has-image{
  padding:0; display:flex; align-items:center; justify-content:center;
}
.show-page .press-item.has-image img{
  display:block; width:100%; height:100%; object-fit:cover; max-height:150px;
}
.show-page .press-text{ display:flex; flex-direction:column; gap:4px }
.show-page .press-title{
  font-size:1rem; font-weight:700; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.show-page .press-source{
  font-size:.84rem; color:var(--muted); line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ------------------ MODAL PRESSE (magazine) ------------------ */
.show-page .press-modal{
  position:fixed; inset:0; background:rgba(0,0,0,.86);
  display:none; align-items:center; justify-content:center; z-index:12000;
}
.show-page .press-modal[aria-hidden="false"]{ display:flex }
.show-page .press-modal-card{
  position:relative;
  width:min(1000px, 94vw); max-height:min(92vh, 1080px);
  background:linear-gradient(180deg, rgba(25,18,14,.98), rgba(22,16,12,.98));
  border:1px solid rgba(255,215,0,.35); border-radius:14px; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  display:grid; grid-template-columns:minmax(420px, 1fr) 1fr;
}
.show-page .press-modal-header{
  grid-column: 1 / -1;
  display:flex; align-items:center; gap:12px; padding:16px; border-bottom:1px solid rgba(255,215,0,.22)
}
.show-page .press-modal-header img{ height:42px; width:auto; border-radius:6px; border:1px solid rgba(255,255,255,.18) }
.show-page .press-modal-title{
  font-family:"Playfair Display", serif; font-size: clamp(1.2rem, .9rem + 1vw, 1.8rem);
  margin:0; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.35)
}
.show-page .press-modal-body{ grid-column: 1 / -1; padding:16px; color:#e9e2d5; font-size:1.02rem; line-height:1.6 }
.show-page .pm-article{ display:grid; grid-template-columns:minmax(420px, 1fr) 1fr; gap:18px; align-items:start; }
.show-page .pm-media img{ width:100%; height:100%; object-fit:cover; border-radius:10px; min-height:320px }
.show-page .pm-badges .pill{
  display:inline-block; padding:.25rem .55rem; border-radius:999px;
  background: var(--gold, #d9b36e); color:#111; font-weight:700; font-size:.78rem;
}
.show-page .pm-lead{ margin:.5rem 0 0; color:#e9e2d5; font-size:1.05rem; line-height:1.6 }
.show-page .press-modal-actions{
  grid-column: 1 / -1; display:flex; gap:10px; justify-content:flex-end; padding:0 16px 16px;
}

/* X “Fermer” en haut (SVG), sans cadre */
.show-page .press-close{
  position:absolute; top:10px; right:10px;
  width:34px; height:34px; border-radius:999px;
  display:grid; place-items:center;
  border:none; background:transparent;
  color:#fff; line-height:1; cursor:pointer;
}
.show-page .press-close:hover{ color: var(--gold, #d9b36e); }

/* ------------------ GALERIE + LIGHTBOX ------------------ */
.show-page .gallery-grid{ display:grid; gap:12px; grid-template-columns:repeat(3,1fr) }
@media (max-width:900px){ .show-page .gallery-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .show-page .gallery-grid{ grid-template-columns:1fr } }

.show-page .gallery-grid .gitem{ display:block; border-radius:10px; overflow:hidden; border:1px solid rgba(201,168,106,.18) }
.show-page .gallery-grid img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .35s ease }
.show-page .gallery-grid .gitem:hover img{ transform: scale(1.04) }

.show-page .lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.86);
  display:none; align-items:center; justify-content:center; z-index:20000;
}
.show-page .lightbox.open{ display:flex }
.show-page .lightbox-img{
  max-width:90vw; max-height:84vh; border-radius:10px;
  border:1px solid rgba(201,168,106,.35); box-shadow:0 20px 60px rgba(0,0,0,.6)
}
/* Neutraliser .btn global et forcer la croix visible */
.show-page .lightbox .lightbox-close.btn{
  all: unset !important;
  position:fixed !important; top:14px !important; right:14px !important;
  width:38px !important; height:38px !important; border-radius:999px !important;
  display:grid !important; place-items:center !important;
  background: rgba(0,0,0,.74) !important; color:#fff !important;
  border:1px solid rgba(255,255,255,.35) !important;
  font-size:22px !important; font-weight:800 !important; line-height:1 !important;
  z-index:20001 !important;
}

/* ------------------ TÉMOIGNAGES — texte seul + slider ------------------ */
/* Scope strict au bloc #quotes pour éviter tout conflit global */
.show-page #quotes .carousel.modern{
  position: relative;
  overflow: hidden;
  padding: 10px 0;
}
/* Piste : flex horizontale, animée via transform */
.show-page #quotes .carousel.modern .c-track{
  display: flex !important;
  width: auto !important;      /* la piste grandit à la mesure JS */
  gap: 0 !important;           /* 0 pour centrage identique entre slides */
  transition: transform .9s cubic-bezier(.2,.8,.2,1) !important;
  will-change: transform;
}
/* Slide = 100% de la “fenêtre” */
.show-page #quotes .carousel.modern .c-item{
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  padding: 28px 16px !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}
.show-page #quotes .carousel.modern .c-item blockquote{
  font-family: "Caveat","Playfair Display",Georgia,serif;
  font-weight: 600;
  font-size: clamp(28px, 4.2vw, 54px);
  line-height: 1.15;
  margin: 0 0 .4rem;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.25);
  max-width: 70ch;
}
.show-page #quotes .carousel.modern .c-item figcaption{
  color: var(--gold, #d9b36e);
  font-size: clamp(.95rem, .8rem + .25vw, 1.05rem);
}

/* Flèches superposées */
.show-page #quotes .carousel.modern .c-btn{
  position:absolute;
  top:50%; transform:translateY(-50%);
  z-index: 2;
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(201,168,106,.35);
  background:rgba(0,0,0,.35); color:var(--ink);
  font-size:22px; display:grid; place-items:center;
}
.show-page #quotes .carousel.modern .c-btn:hover{ border-color:var(--gold); color:var(--gold) }
.show-page #quotes .carousel.modern .c-btn.prev{ left:6px }
.show-page #quotes .carousel.modern .c-btn.next{ right:6px }

/* Accessibilité : si “réduire les animations”, on coupe la transition */
@media (prefers-reduced-motion: reduce){
  .show-page #quotes .carousel.modern .c-track{ transition: none !important; }
}

/* ------------------ CTA billets ------------------ */
.show-page .show-cta-tickets .btn-reserve{ margin-top:8px }

/* ===== [2025-09-04 21:10] #quotes — fix centrage stable ===== */
.show-page #quotes .carousel.modern{
  display:block;                /* sort du flex global .carousel de styles.css */
  position:relative;
  overflow:hidden;
  padding:10px 0;
}

.show-page #quotes .carousel.modern .c-track{
  display:flex;                 /* piste horizontale */
  gap:0;                        /* aucun espace entre slides */
  width:auto;                   /* laisse le JS calculer/translater en px */
  transition: transform .9s cubic-bezier(.2,.8,.2,1);
  /* IMPORTANT: pas de transform ici → le JS le met en inline */
}

.show-page #quotes .carousel.modern .c-item{
  flex:0 0 100%;                /* 1 slide = 100% du viewport de la piste */
  width:100%;
  min-width:100%;
  margin:0;
  padding:28px 16px;
  box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  background:none; border:none; border-radius:0;
}

/* Neutralise le margin par défaut de <figure> */
.show-page #quotes figure.c-item{ margin:0; }

/* Flèches superposées (ne prennent pas de place) */
.show-page #quotes .carousel.modern .c-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:2; width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(201,168,106,.35); background:rgba(0,0,0,.35);
  display:grid; place-items:center;
}
.show-page #quotes .carousel.modern .c-btn.prev{ left:6px }
.show-page #quotes .carousel.modern .c-btn.next{ right:6px }
.show-page #quotes .carousel.modern .c-btn:hover{ border-color:var(--gold); color:var(--gold) }