/* ------------------------------------------------------
   LA UNE TV — STYLES FRONT-END (VERSION OPTIMISÉE)
------------------------------------------------------ */

/* =============================== */
/*   VARIABLES GLOBALES            */
/* =============================== */

:root {
  --brand:#2563eb;
  --radius:16px;
  --shadow:rgba(0,0,0,.15);

  --glassT:rgba(255,255,255,.66);
  --glassB:rgba(255,255,255,.38);

  --replays-brand:#2563eb;
  --replays-radius:16px;
  --replays-shadow:rgba(0,0,0,.2);
}

@media (prefers-color-scheme: dark){
  :root{
    --glassT:rgba(255,255,255,.06);
    --glassB:rgba(255,255,255,.02);
    --shadow:rgba(0,0,0,.30);
  }
}

/* ===================================================== */
/*   SECTION : LA MINUTE DE RICARDO (PORTRAIT VIDEO)     */
/* ===================================================== */

.yt-wall{
  max-width:1280px;
  margin:56px auto;
  padding:0 20px;
}

.yt-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
  flex-wrap:wrap;
  color:#FFF;
}

.yt-head h2{
  margin:0;
  font-size:clamp(24px,3.4vw,26px);
  font-weight:400;
  letter-spacing:-2px;
}

.yt-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* CTA BUTTONS */
.cta-btn{
  display:inline-block;
  font-weight:700;
  font-size:.95rem;
  padding:8px 14px;
  border-radius:999px;
  background:#2563eb;
  color:#fff!important;
  text-decoration:none;
  transition:.18s;
  box-shadow:0 6px 16px rgba(37,99,235,.35);
}
.cta-btn:hover{
  transform:translateY(-1px);
  background:#1e4ed8;
  box-shadow:0 10px 24px rgba(37,99,235,.45);
}

.cta-btn--ghost{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.25);
}

/* GRID */
.yt-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(12,1fr);
  position:relative;
}

@media (min-width:901px){
  .yt-grid{grid-template-columns:repeat(5,1fr);}
  .yt-card{grid-column:span 1;}
}
@media (max-width:900px){ .yt-card{grid-column:span 3;} }
@media (max-width:600px){ .yt-card{grid-column:span 6;} }
@media (max-width:420px){ .yt-card{grid-column:span 12;} }

/* ===================================================== */
/* VIDEO CARD (VERSION SANS .yt-thumb)                   */
/* ===================================================== */

.yt-card{
  position:relative;
  display:flex;
  flex-direction:column;
  aspect-ratio:9/16;
  border-radius:var(--radius);
  overflow:hidden;
  background:linear-gradient(180deg,var(--glassT),var(--glassB));
  border:1px solid rgba(120,120,120,.18);
  box-shadow:0 8px 26px var(--shadow);
  cursor:pointer;
  opacity:0;
  animation:fadeIn .6s forwards;
}

@keyframes fadeIn{to{opacity:1;}}

/* MINIATURE */
.yt-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .25s ease;
}

.yt-card:hover .yt-img{
  transform:scale(1.05);
}

/* PLAY OVERLAY */
.yt-overlay-play{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    pointer-events:none;
}

.yt-overlay-play svg{
    width:42px;
    height:42px;
    fill:white;
    opacity:.85;
    filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));
}

/* TITLE */
.yt-title{
  margin:0;
  padding:8px 10px 12px;
  font-weight:600;
  font-size:clamp(14px,1.4vw,16px);
  color:#fff;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ===================================================== */
/* INLINE PLAYER — ANTI FLASH NOIR                       */
/* ===================================================== */

.yt-inline-player {
    position: relative;
    width: 100%;
    aspect-ratio: 9/16;
    border-radius: var(--radius);
    overflow: hidden;
    background: #0000 !important;
}

/* cache jusqu’à chargement */
.yt-inline-player iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--radius);
    opacity: 0;
    transition: opacity .18s ease-in;
    display:block;
}

/* visible une fois chargé */
.yt-inline-player iframe.loaded {
    opacity: 1;
}

/* Mini fullscreen btn */
.yt-inline-fs-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: .2s;
}
.yt-inline-fs-btn:hover {
  background: rgba(0,0,0,0.7);
}
.yt-inline-fs-btn svg {
  width: 18px;
  height: 18px;
  fill: white;
}

/* ===================================================== */
/* FULLSCREEN MODAL                                      */
/* ===================================================== */

.yt-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  z-index: 99999;
}
.yt-modal.hidden {
  display: none !important;
}

.yt-modal-content {
  position: relative;
}

.yt-modal-content iframe {
  width: 90vw;
  height: calc(90vw * .5625);
  max-height: 90vh;
  border: 0;
  border-radius: 12px;
}

/* CLOSE BUTTON */
.yt-close {
  position: absolute;
  top: 18px;
  right: 24px;
  font-size: 44px;
  cursor: pointer;
  font-weight: 300;
  color: #fff;
  line-height: 1;
  z-index: 999;
}

/* REDUCE BUTTON */
.yt-modal-reduce-btn {
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 46px;
  height: 46px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  cursor: pointer;
  display:flex;
  justify-content:center;
  align-items:center;
  backdrop-filter: blur(4px);
  transition: .2s;
}
.yt-modal-reduce-btn:hover {
  background: rgba(0,0,0,0.7);
}
.yt-modal-reduce-btn svg {
  width: 22px;
  height: 22px;
  fill: white;
}

/* ===================================================== */
/* REPLAYS (16/9)                                         */
/* ===================================================== */

.replays-wall{
  max-width:1280px;
  margin:20px auto;
  padding:0 20px;
}

.replays-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
  flex-wrap:wrap;
  color:#fff;
}

.replays-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.replays-btn{
  display:inline-block;
  font-weight:700;
  font-size:.95rem;
  padding:8px 14px;
  border-radius:999px;
  background:var(--replays-brand);
  color:#fff!important;
  text-decoration:none;
  transition:.18s;
  box-shadow:0 6px 16px rgba(37,99,235,.35);
}
.replays-btn:hover{
  transform:translateY(-1px);
  background:#1e4ed8;
  box-shadow:0 10px 24px rgba(37,99,235,.45);
}

.replays-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(12,1fr);
}

@media (min-width:901px){ .replays-card{grid-column:span 3;} }
@media (max-width:900px){ .replays-card{grid-column:span 6;} }
@media (max-width:560px){ .replays-card{grid-column:span 12;} }

.replays-card{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:var(--replays-radius);
  overflow:hidden;
  background:#030115;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 26px var(--replays-shadow);
}

.replays-thumb{
  position:relative;
  aspect-ratio:16/9;
  width:100%;
  background:#0f1826;
  cursor:pointer;
  overflow:hidden;
}

.replays-thumb::before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:62px;
  height:62px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(6px);
}

.replays-img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.replays-title{
  margin:0;
  padding:10px 12px 14px;
  font-weight:600;
  color:#fff;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.replays-iframe{
  aspect-ratio:16/9;
  width:100%;
  border:0;
  display:block;
}

/* 🔥 Supprime toutes les animations / transitions Elementor sur nos vidéos */
.yt-card,
.yt-card * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* 🔥 Empêche Elementor d’injecter un fond ou un overlay */
.elementor .yt-card,
.elementor .yt-thumb {
    background: transparent !important;
}

/* 🔥 Fix : empêcher Elementor de forcer des hauteurs */
.elementor .yt-card {
    height: auto !important;
    min-height: auto !important;
}


/* ===================================================== */
/* ANIMATIONS                                             */
/* ===================================================== */

@keyframes ytspin { to { transform: rotate(360deg);} }