/* ==========================================================================
   MCTV – HERO : slider + lecteur vidéo
   Chargé APRÈS style.css. Tout est préfixé .kl-hero / .kl-vp.
   Réglages rapides : --hero-ratio (forme du rectangle), --hero-radius, --kl-video-fit (cover | contain)
   ========================================================================== */

.kl-hero {
    --hero-ratio: 16 / 9;                 /* forme rectangle du slider ET de la vidéo */
    --hero-radius: 20px;
    --hero-gap: clamp(12px, 1.6vw, 24px);
    --hero-accent: var(--orange, #ff3c00);
    --hero-ease: cubic-bezier(.65, 0, .25, 1);
    --kl-video-fit: contain;              /* contain = vidéo entière ; cover = remplit en rognant */
    margin: 0 0 clamp(18px, 2.4vw, 34px);
    padding: 0 clamp(6px, 1vw, 14px);
}

/* deux colonnes égales : mêmes largeurs => même hauteur pour deux rectangles 16:9 */
.kl-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--hero-gap);
    align-items: start;
}
.kl-hero__grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 980px; margin: 0 auto; }

/* ---------------------------------- SLIDER (défilement continu) ---------------------------------- */
.kl-hero__slider-wrap {
    position: relative; min-width: 0;
    aspect-ratio: var(--hero-ratio);
}
.kl-hero__slider { position: absolute; inset: 0; }
.kl-hero__slider .splide__track,
.kl-hero__slider .splide__list { height: 100%; }

/* chaque slide = un rectangle complet au ratio du hero (l'image est vue en entier) */
.kl-hero__slide {
    position: relative;
    height: 100%;
    aspect-ratio: var(--hero-ratio);
    border-radius: var(--hero-radius);
    overflow: hidden;
    background: #0b0f1a;
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .6);
}
.kl-hero__slide::after {                  /* fin liseré lumineux */
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09);
}

.kl-hero__link { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; }

.kl-hero__img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .9s var(--hero-ease);
}
.kl-hero__link:hover .kl-hero__img { transform: scale(1.04); }

.kl-hero__shade {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(6, 9, 18, .35) 0%, rgba(6, 9, 18, 0) 35%);
}

.kl-hero__play {
    position: absolute; top: 50%; left: 50%;
    width: clamp(52px, 5vw, 72px); aspect-ratio: 1; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--hero-accent);
    box-shadow: 0 10px 30px -6px rgba(255, 60, 0, .65);
    transform: translate(-50%, -50%);
    transition: transform .45s var(--hero-ease);
}
.kl-hero__play img { width: 38%; height: auto; display: block; }
.kl-hero__play::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid var(--hero-accent); opacity: 0;
}
.kl-hero__link:hover .kl-hero__play,
.kl-hero__link:focus-visible .kl-hero__play { transform: translate(-50%, -50%) scale(1.12); }
.kl-hero__link:hover .kl-hero__play::after { animation: kl-hero-ping 1.2s ease-out infinite; }
.kl-hero__link:focus-visible { outline: 3px solid var(--hero-accent); outline-offset: -3px; }
@keyframes kl-hero-ping { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }

/* ---------------------------------- LECTEUR VIDÉO ---------------------------------- */
.kl-hero__video { position: relative; min-width: 0; aspect-ratio: var(--hero-ratio); }

.kl-vp {
    position: absolute; inset: 0;
    border-radius: var(--hero-radius); overflow: hidden; isolation: isolate;
    background: radial-gradient(120% 120% at 20% 10%, #1b2a4a 0%, #070a12 70%);
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255, 255, 255, .08);
    color: #fff;
}
.kl-vp::after {                           /* voile sous les contrôles */
    content: ""; position: absolute; inset: auto 0 0 0; height: 45%; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, rgba(5, 7, 13, .78), rgba(5, 7, 13, 0));
    opacity: 0; transition: opacity .35s;
}
.kl-vp:hover::after, .kl-vp:focus-within::after, .kl-vp:not(.is-playing)::after { opacity: 1; }

.kl-vp__video {
    position: absolute; inset: 0; width: 100%; height: 100%; display: block;
    object-fit: var(--kl-video-fit, cover); cursor: pointer; background: transparent;
}
.kl-vp:fullscreen .kl-vp__video { object-fit: contain; background: #000; }
.kl-vp:-webkit-full-screen .kl-vp__video { object-fit: contain; background: #000; }
.kl-vp:fullscreen { border-radius: 0; }

/* gros bouton central (visible en pause) */
.kl-vp__big {
    position: absolute; z-index: 2; top: 50%; left: 50%;
    width: clamp(60px, 6vw, 82px); aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0;
    display: grid; place-items: center; color: #fff; cursor: pointer;
    background: var(--hero-accent, #ff3c00);
    box-shadow: 0 12px 34px -8px rgba(255, 60, 0, .7);
    transform: translate(-50%, -50%) scale(.85); opacity: 0; pointer-events: none;
    transition: transform .4s var(--hero-ease), opacity .3s;
}
.kl-vp__big svg { width: 42%; height: 42%; margin-left: 4%; }
.kl-vp:not(.is-playing) .kl-vp__big { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.kl-vp:not(.is-playing) .kl-vp__big:hover { transform: translate(-50%, -50%) scale(1.1); }

/* pastille « activer le son » */
.kl-vp__sound {
    position: absolute; z-index: 3; top: 12px; left: 12px;
    display: none; align-items: center; gap: 8px;
    padding: 8px 14px 8px 11px; border: 0; border-radius: 999px; cursor: pointer;
    font: 600 .76rem/1 'Poppins', sans-serif; color: #fff;
    background: rgba(8, 12, 22, .58); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
    transition: background .3s, transform .3s var(--hero-ease);
}
.kl-vp__sound svg { width: 18px; height: 18px; flex: none; }
.kl-vp.is-muted.is-playing .kl-vp__sound { display: inline-flex; animation: kl-vp-pop .6s var(--hero-ease) both; }
.kl-vp__sound:hover { background: var(--hero-accent); transform: scale(1.04); }
@keyframes kl-vp-pop { from { opacity: 0; transform: translateY(-6px) scale(.92); } to { opacity: 1; transform: none; } }

/* barre de contrôles */
.kl-vp__bar {
    position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; gap: 8px; padding: 10px 12px 12px;
    transition: opacity .3s, transform .3s var(--hero-ease);
}
.kl-vp.is-playing:not(:hover):not(:focus-within) .kl-vp__bar { opacity: 0; transform: translateY(8px); pointer-events: none; }

.kl-vp__btn {
    flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
    display: grid; place-items: center; color: #fff; cursor: pointer; background: transparent;
    transition: background .25s, transform .25s var(--hero-ease);
}
.kl-vp__btn:hover { background: rgba(255, 255, 255, .18); }
.kl-vp__btn:focus-visible, .kl-vp__sound:focus-visible, .kl-vp__big:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.kl-vp__btn svg { width: 20px; height: 20px; }
.kl-vp .i-pause, .kl-vp .i-mute { display: none; }
.kl-vp.is-playing .i-play { display: none; }
.kl-vp.is-playing .i-pause { display: block; }
.kl-vp.is-muted .i-vol { display: none; }
.kl-vp.is-muted .i-mute { display: block; }

.kl-vp__time { flex: none; min-width: 2.6em; font: 500 .74rem/1 'Poppins', sans-serif; font-variant-numeric: tabular-nums; opacity: .9; }

/* curseur de lecture */
.kl-vp__seek {
    --p: 0%;
    -webkit-appearance: none; appearance: none;
    flex: 1; min-width: 0; height: 20px; margin: 0; background: transparent; cursor: pointer;
}
.kl-vp__seek::-webkit-slider-runnable-track {
    height: 4px; border-radius: 4px;
    background: linear-gradient(90deg, var(--hero-accent, #ff3c00) var(--p), rgba(255, 255, 255, .3) var(--p));
}
.kl-vp__seek::-webkit-slider-thumb {
    -webkit-appearance: none; width: 13px; height: 13px; margin-top: -4.5px; border-radius: 50%;
    background: #fff; border: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
    transition: transform .2s;
}
.kl-vp__seek:hover::-webkit-slider-thumb { transform: scale(1.25); }
.kl-vp__seek::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .3); }
.kl-vp__seek::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--hero-accent, #ff3c00); }
.kl-vp__seek::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.kl-vp__seek:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }

/* fine ligne de progression quand les contrôles sont masqués */
.kl-vp__line {
    position: absolute; z-index: 2; left: 0; bottom: 0; height: 3px; width: var(--p, 0%);
    background: var(--hero-accent, #ff3c00); transition: opacity .3s; pointer-events: none;
}
.kl-vp:hover .kl-vp__line, .kl-vp:focus-within .kl-vp__line, .kl-vp:not(.is-playing) .kl-vp__line { opacity: 0; }

/* écrans tactiles : pas de survol → contrôles toujours là, discrets */
@media (hover: none) {
    .kl-vp.is-playing:not(:hover):not(:focus-within) .kl-vp__bar { opacity: 1; transform: none; pointer-events: auto; }
    .kl-vp::after, .kl-vp.is-playing::after { opacity: 1; }
    .kl-vp__line { display: none; }
}

/* ---------------------------------- RESPONSIVE ---------------------------------- */
@media (max-width: 991.98px) {            /* tablette / mobile : slider puis vidéo en dessous, chacun en 16:9 */
    .kl-hero { --hero-radius: 16px; }
    .kl-hero__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    .kl-hero { padding: 0 6px; }
    .kl-vp__bar { padding: 8px 8px 10px; gap: 4px; }
    .kl-vp__sound { top: 10px; left: 10px; padding: 7px 12px 7px 9px; }
}

@media (prefers-reduced-motion: reduce) {
    .kl-hero *, .kl-hero *::before, .kl-hero *::after { transition-duration: .01ms !important; animation: none !important; }
    }