/* ==========================================================================
   Page détail média  —  [mt_video_detail]
   À coller dans : assets/css de ton thème (ou Additional CSS du Customizer).
   Réutilise les tokens du design system et les classes .vid-* déjà présentes.
   ========================================================================== */

.mt-vdetail{
  max-width: var(--mt-maxw, 1180px);
  margin: 0 auto;
  padding: clamp(24px, 5vw, 64px) 20px;
  color: var(--mt-ink, #f4f1ea);
}

.mt-vdetail-back{
  display:inline-block;
  margin-bottom: 22px;
  font: 600 .9rem/1 "Montserrat", sans-serif;
  letter-spacing:.04em;
  color: var(--mt-gold, #e5c068);
  text-decoration:none;
  opacity:.9;
}
.mt-vdetail-back:hover{ opacity:1; }

.mt-vdetail-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items:start;
}
@media (max-width: 860px){
  .mt-vdetail-grid{ grid-template-columns: 1fr; }
}

/* ---- média ---- */
.mt-vdetail-media{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--mt-line, rgba(229,192,104,.18));
  background:#0c0c0d;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.mt-vdetail-media img{ display:block; width:100%; height:auto; }
.mt-vdetail-badges{
  position:absolute; top:14px; left:14px; right:14px;
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.mt-vdetail .vid-new{
  background: var(--mt-gold, #e5c068); color:#1a1300;
  font:700 .72rem/1 "Montserrat",sans-serif; letter-spacing:.05em;
  padding:6px 10px; border-radius:999px; text-transform:uppercase;
}
.mt-vdetail .vid-tag{
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
  color:#fff; font:600 .74rem/1 "Montserrat",sans-serif;
  padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14);
}
.mt-vdetail .vid-tag.is-type{ background: var(--mt-blue, #1F2B8F); border-color: transparent; }

/* ---- corps ---- */
.mt-vdetail-body .eyebrow{
  color: var(--mt-gold, #e5c068);
  font:700 .78rem/1 "Montserrat",sans-serif; letter-spacing:.18em; text-transform:uppercase;
}
.mt-vdetail-body h1{
  font-family:"Abril Fatface", serif;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height:1.05; margin:.35em 0 .55em;
  color: var(--mt-ink, #f4f1ea);
}
.mt-vdetail-meta{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.mt-vdetail-meta span{
  font:600 .82rem/1 "Montserrat",sans-serif;
  color: var(--mt-ink, #f4f1ea); opacity:.78;
  padding:7px 12px; border:1px solid var(--mt-line, rgba(229,192,104,.18)); border-radius:10px;
}
.mt-vdetail-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.mt-vdetail-tags span,
.mt-vdetail-tags a{
  font:600 .78rem/1 "Montserrat",sans-serif;
  color: var(--mt-gold-soft, #cfa94e); text-decoration:none;
  padding:6px 11px; border:1px solid var(--mt-line, rgba(229,192,104,.18)); border-radius:999px;
}
.mt-vdetail-tags a{ transition:color .15s, border-color .15s; }
.mt-vdetail-tags a:hover{ color: var(--mt-gold,#e5c068); border-color: var(--mt-gold,#e5c068); }
.mt-vdetail-desc{
  font:400 1rem/1.7 "Montserrat",sans-serif;
  color: var(--mt-ink, #f4f1ea); opacity:.9; margin:0 0 16px; white-space:normal;
}
.mt-vdetail-desc.is-empty{ opacity:.55; font-style:italic; }
.mt-vdetail-hash{
  font:500 .85rem/1.6 "Montserrat",sans-serif;
  color: var(--mt-gold-soft, #cfa94e); opacity:.8; margin:0 0 22px;
}

/* ---- prix ---- */
.mt-vdetail-prices{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
.mt-vdetail .vid-price-box{
  flex:1 1 160px;
  background: rgba(255,255,255,.03);
  border:1px solid var(--mt-line, rgba(229,192,104,.18));
  border-radius:14px; padding:14px 16px;
  display:flex; flex-direction:column; gap:6px;
}
.mt-vdetail .vid-price-box .lbl{
  font:600 .74rem/1 "Montserrat",sans-serif; letter-spacing:.04em;
  color: var(--mt-ink,#f4f1ea); opacity:.7; text-transform:uppercase;
}
.mt-vdetail .vid-price-box .val{
  font-family:"Abril Fatface", serif; font-size:1.5rem; color: var(--mt-gold,#e5c068);
}
.mt-vdetail .vid-price-box .val small{ font-size:.8rem; opacity:.6; }

/* ---- CTA ---- */
.mt-vdetail-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.mt-vdetail .vid-cta-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 20px; border-radius:12px; text-decoration:none;
  font:700 .92rem/1 "Montserrat",sans-serif; letter-spacing:.02em;
  transition: transform .15s var(--mt-ease, ease), box-shadow .15s ease;
}
.mt-vdetail .vid-cta-btn img{ height:20px; width:auto; }
.mt-vdetail .vid-cta-vtc{ background: var(--mt-gold,#e5c068); color:#1a1300; }
.mt-vdetail .vid-cta-lf { background: var(--mt-blue,#1F2B8F); color:#fff; }
.mt-vdetail .vid-cta-btn:hover{ transform: translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.4); }

.mt-vdetail-note{
  font:500 .82rem/1.5 "Montserrat",sans-serif;
  color: var(--mt-ink,#f4f1ea); opacity:.6; margin:6px 0 0;
}

/* ---- États de chargement de la grille (page liste) ---- */
.vid-loading, .vid-error{
  text-align:center; padding:40px 0;
  font:500 .95rem/1.5 "Montserrat",sans-serif;
  color: var(--mt-ink,#f4f1ea); opacity:.7;
}
.vid-error{ color: var(--mt-gold-soft, #cfa94e); }

/* ==========================================================================
   Médias similaires (bas de page détail)
   ========================================================================== */
.mt-vdetail-related{
  max-width: var(--mt-maxw, 1180px);
  margin: clamp(40px, 6vw, 72px) auto 0;
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--mt-line, rgba(229,192,104,.18));
}
.mt-vdetail-related-title{
  font-family:"Abril Fatface", serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--mt-ink, #f4f1ea);
  margin: 0 0 22px;
}
.mt-vdetail-related-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 980px){ .mt-vdetail-related-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .mt-vdetail-related-grid{ grid-template-columns: 1fr; } }

.mt-vrel-card{
  display:block; text-decoration:none; color:inherit;
  border-radius:14px; overflow:hidden;
  border:1px solid var(--mt-line, rgba(229,192,104,.18));
  background:#0c0c0d;
  transition: transform .18s var(--mt-ease, ease), box-shadow .18s ease, border-color .18s ease;
}
.mt-vrel-card:hover{
  transform: translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  border-color: var(--mt-gold, #e5c068);
}
.mt-vrel-thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#111; }
.mt-vrel-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.mt-vrel-badges{ position:absolute; top:10px; left:10px; display:flex; gap:6px; flex-wrap:wrap; }
.mt-vrel-info{ padding:12px 14px 14px; }
.mt-vrel-info h3{
  font:600 .95rem/1.35 "Montserrat", sans-serif;
  color: var(--mt-ink, #f4f1ea); margin:0 0 6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.mt-vrel-price{
  font-family:"Abril Fatface", serif; font-size:1.1rem; color: var(--mt-gold, #e5c068);
}

/* ==========================================================================
   Lecteur teaser + galerie + lightbox + WhatsApp  (ajouts module vidéo)
   ========================================================================== */
.mt-vdetail-media video.mt-vplayer{ display:block; width:100%; height:auto; background:#000; }
.mt-vctrl{ position:absolute; bottom:14px; right:14px; display:flex; gap:8px; z-index:3; }
.mt-vbtn{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 12px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.55); backdrop-filter:blur(6px);
  color:#fff; font:600 .78rem/1 "Montserrat",sans-serif; transition:.2s;
}
.mt-vbtn:hover{ border-color:var(--mt-gold,#e5c068); color:var(--mt-gold,#e5c068); }
.mt-vbtn svg{ width:18px; height:18px; }
.mt-vsound .mt-slash{ transition:opacity .2s; }
.mt-vsound.on .mt-slash{ opacity:0; }
@media (max-width:520px){ .mt-vbtn span{ display:none; } .mt-vbtn{ padding:9px; } }

/* CTA WhatsApp */
.mt-vdetail .vid-cta-wa{ background:#25D366; color:#fff; }
.mt-vdetail .vid-cta-wa svg{ fill:#fff; width:20px; height:20px; }

/* Galerie (carrousel) */
.mt-vgal{
  position:relative; max-width:var(--mt-maxw,1180px);
  margin:clamp(28px,4vw,44px) auto 0; overflow:hidden;
  border-radius:16px; border:1px solid var(--mt-line,rgba(229,192,104,.18)); background:#0c0c0d;
}
.mt-vgal-track{ display:flex; transition:transform .45s var(--mt-ease,ease); }
.mt-vgal-slide{ min-width:100%; flex:none; }
.mt-vgal-slide img{ display:block; width:100%; height:auto; max-height:70vh; object-fit:contain; background:#000; }
.mt-vgal-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; cursor:pointer; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.5); color:#fff; transition:.2s;
}
.mt-vgal-arrow:hover{ background:var(--mt-gold,#e5c068); color:#1a1300; border-color:transparent; }
.mt-vgal-arrow svg{ width:20px; height:20px; }
.mt-vgal-prev{ left:12px; } .mt-vgal-next{ right:12px; }
.mt-vgal-dots{ position:absolute; bottom:12px; left:0; right:0; display:flex; gap:7px; justify-content:center; }
.mt-vgal-dots button{ width:8px; height:8px; border-radius:50%; border:0; background:rgba(255,255,255,.4); cursor:pointer; padding:0; transition:.2s; }
.mt-vgal-dots button.on{ background:var(--mt-gold,#e5c068); width:20px; border-radius:4px; }

/* Lightbox */
.mt-vlb{ position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.9); display:flex; align-items:center; justify-content:center; padding:20px; }
.mt-vlb[hidden]{ display:none; }
.mt-vlb img{ max-width:96vw; max-height:92vh; border-radius:8px; }
.mt-vlb-x{ position:absolute; top:16px; right:22px; background:none; border:0; color:#fff; font-size:2.2rem; line-height:1; cursor:pointer; }
/* ==========================================================================
   Bannière de la page détail  (titre + fil d'Ariane)
   ========================================================================== */
.mt-vbanner{ position:relative; overflow:hidden; padding: clamp(28px,5vw,62px) 20px;
  border-bottom:1px solid var(--mt-line, rgba(229,192,104,.18));
  background: var(--mt-grad, radial-gradient(ellipse at 50% 40%, #06131e 52%, #0b1f35 100%)); }
.mt-vbanner::after{ content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 0 160px 24px rgba(0,0,0,.5); }
.mt-vbanner-inner{ position:relative; z-index:2; max-width: var(--mt-maxw,1180px); margin:0 auto; }
.mt-vbc{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:14px;
  font:600 .82rem/1.4 "Montserrat",sans-serif; color: rgba(244,241,234,.6); }
.mt-vbc a{ color: var(--mt-gold,#e5c068); text-decoration:none; }
.mt-vbc a:hover{ text-decoration:underline; }
.mt-vbc span{ opacity:.6; }
.mt-vbc .cur{ color: rgba(244,241,234,.85); opacity:1; }
.mt-vbanner-eyebrow{ display:block; margin-bottom:10px; color: var(--mt-gold,#e5c068);
  font:700 .78rem/1 "Montserrat",sans-serif; letter-spacing:.18em; text-transform:uppercase; }
.mt-vbanner-title{ margin:0; font-family:"Abril Fatface",serif; font-weight:400;
  font-size: clamp(2rem,5vw,3.4rem); line-height:1.05; color: var(--mt-ink,#f4f1ea); }