/* ============================================================
   PV-CAROUSEL.CSS — Nouveau système de carrousel + flyout
   Approche : flyout UNIQUE (1 seul élément), positionné et
   rempli à l'ouverture, piloté par la position du curseur.
   Aucun conflit : le flyout est un frère direct du body, la
   décision open/close repose sur des rectangles (getBoundingClientRect)
   et un intervalle, jamais sur mouseenter/mouseleave des cartes.
   ============================================================ */

/* ---------- Rangée ---------- */
.pv-row {
    position: relative;
    margin-bottom: 0.35rem;
    padding: 4px 0 4px;
}
.pv-row-title {
    color: #fff !important;
    font-size: 1.3rem;
    font-weight: 700;
    padding: 0 3%;
    margin-bottom: 0.6rem;
    letter-spacing: -0.2px;
}

/* ---------- Carrousel ---------- */
.pv-carousel {
    position: relative;
    padding: 0 3%;
}
.pv-carousel-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0 10px;
}
.pv-carousel-viewport::-webkit-scrollbar { display: none; }
.pv-carousel-track {
    display: flex;
    gap: 14px;
}

/* Cartes */
.pv-card {
    position: relative;
    flex: 0 0 auto;
    width: 180px;
    aspect-ratio: 2/3;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    scroll-snap-align: start;
    background: #0A1420;
}
.pv-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s ease;
}
.pv-card .pv-card-title-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 30px 8px 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pv-card.pv-dimmed { opacity: 0.3; }

/* Responsive cartes */
@media (min-width: 1800px) { .pv-card { width: 210px; } }
@media (max-width: 1200px) { .pv-card { width: 165px; } }
@media (max-width: 900px)  { .pv-card { width: 150px; } }
@media (max-width: 600px)  { .pv-card { width: 46vw; } }

/* ---------- Flèches ---------- */
.kflix-row { position: relative; }
.pv-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(5,10,18,0.75);
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.15s ease;
    pointer-events: none;
}
.kflix-row:hover .pv-carousel-arrow,
.pv-carousel:hover .pv-carousel-arrow { opacity: 1; pointer-events: auto; }
.pv-carousel-arrow:hover { background: #E50914; border-color: #E50914; }
.pv-carousel-arrow.prev { left: 6px; }
.pv-carousel-arrow.next { right: 6px; }

/* ---------- FLYOUT (élément unique, ajouté au body) ---------- */
.pv-flyout {
    position: fixed;
    z-index: 6000;
    width: 340px;
    background: #14161C;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0,0,0,0.9);
    opacity: 0;
    transform: scale(0.5);
    will-change: transform, opacity, left, top;
    /* transition fluide pour l'apparition ET le déplacement (left/top) */
    transition:
        opacity 0.15s ease,
        transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
        left 0.2s ease,
        top 0.2s ease;
    pointer-events: none; /* on gère le hover par rect, pas par events */
}
.pv-flyout.pv-open {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
.pv-flyout.closing {
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.12s ease, transform 0.15s ease;
}

/* Contenu en fade-in différé pour l'effet "pop" */
.pv-flyout-media { opacity: 0; transition: opacity 0.2s ease 0.06s; }
.pv-flyout-detail { opacity: 0; transform: translateY(6px); transition: opacity 0.2s ease 0.1s, transform 0.2s ease 0.1s; }
.pv-flyout.pv-open .pv-flyout-media { opacity: 1; }
.pv-flyout.pv-open .pv-flyout-detail { opacity: 1; transform: translateY(0); }

.pv-flyout-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    overflow: hidden;
    cursor: pointer;
}
.pv-flyout-media img,
.pv-flyout-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pv-flyout-media img { transform: scale(1.02); transition: transform 0.4s ease, opacity 0.3s ease; }
.pv-flyout.pv-open .pv-flyout-media img { transform: scale(1.06); }
.pv-flyout-media video { display: none; opacity: 0; transition: opacity 0.35s ease; }
.pv-flyout.playing .pv-flyout-media video { display: block; opacity: 1; }
.pv-flyout.playing .pv-flyout-media img { opacity: 0.2; }
.pv-flyout-media:hover img { transform: scale(1.09); }
.pv-flyout-media::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 45%;
    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
    z-index: 1;
}
.pv-flyout-media::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,0.06), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}
.pv-flyout-media:hover::before { opacity: 1; }
.pv-flyout-title-overlay {
    position: absolute;
    bottom: 8px; left: 14px;
    z-index: 2;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
.pv-flyout-title-overlay i { margin-right: 5px; color: #46D369; }

.pv-flyout-detail {
    padding: 12px 16px 16px;
    text-align: left;
}
.pv-flyout-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pv-flyout-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: #8197A4;
    margin-bottom: 6px;
}
.pv-flyout-meta .match { color: #46D369; font-weight: 700; }
.pv-flyout-meta .age { border: 1px solid rgba(255,255,255,0.35); padding: 0 4px; border-radius: 2px; font-weight: 600; }
.pv-flyout-desc {
    font-size: 0.78rem;
    line-height: 1.42;
    color: rgba(255,255,255,0.82);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pv-flyout-actions { display: flex; gap: 6px; align-items: center; margin-top: 10px; }
.pv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 15px;
    border-radius: 4px;
    border: none;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    transition: all 0.2s ease;
    transform: translateY(0);
    position: relative;
    overflow: hidden;
}
.pv-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.25), transparent 60%);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.pv-btn:hover { transform: translateY(-1px); }
.pv-btn:hover::after { opacity: 1; }
.pv-btn:active { transform: translateY(0) scale(0.96); }
.pv-btn.play { background: #E50914; box-shadow: 0 2px 8px rgba(229,9,20,0.35); }
.pv-btn.play:hover { background: #ff1f2d; box-shadow: 0 4px 16px rgba(229,9,20,0.5); }
.pv-btn.info { background: rgba(255,255,255,0.12); }
.pv-btn.info:hover { background: rgba(255,255,255,0.22); }
.pv-btn.circle {
    width: 30px; height: 30px; padding: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.35);
    font-size: 0.8rem;
}
.pv-btn.circle:hover { background: rgba(255,255,255,0.28); border-color: #fff; transform: rotate(90deg); }

/* Masquer le flyout sur tactile */
@media (max-width: 900px), (hover: none) {
    .pv-flyout { display: none !important; }
    .pv-carousel-arrow { display: none; }
}