/* ============================================================================
   RADIO COUVIN — STYLES GÉNÉRAUX V4.2
   Auteur : Christophe Delire
   Objectif :
   - Layout desktop 16:9 / colonnes 9:16
   - Popup vote fullscreen
   - Admin panel glissant
   - Bouton admin toujours visible
   - Mobile Swipe 9:16
   Version : 4.2 (Production)
============================================================================ */


/* ============================================================================
   0. POPUP VOTE — FULLSCREEN + BLUR
============================================================================ */

#rcl-vote-popup {
    position: fixed !important;
    inset: 0;
    width: 100vw;
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    background: rgba(0,0,0,.65);
    backdrop-filter: blur(10px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity .28s ease-out !important;
    z-index: 2147483647 !important; /* tout en haut */
}

#rcl-vote-popup.visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

#rcl-vote-popup .rcl-vote-box {
    position: relative !important;
    z-index: 2147483647 !important;

    background: #0f0f0f !important;
    padding: 2rem !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    max-width: 420px !important;
    width: 90% !important;
    box-shadow: 0 10px 40px rgba(0,0,0,.45) !important;
    text-align: center;
}


/* ============================================================================
   1. ADMIN PANEL
   - Panneau coulissant
   - Bouton admin indépendant et toujours visible
============================================================================ */

/* Panneau */
#rcl-admin-panel {
    position: fixed;
    top: 0;
    right: -30vw;                 /* hors écran */
    width: 25vw;
    height: 100vh;

    background: #000;
    border-left: 2px solid #444;
    box-shadow: -4px 0 20px rgba(0,0,0,.4);
    padding: 2rem 1.5rem;

    transition: right .35s ease;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scroll-behavior: smooth;

    z-index: 99999999 !important;
}

#rcl-admin-panel.open {
    right: 0;
}

/* Scrollbar esthétique */
#rcl-admin-panel::-webkit-scrollbar {
    width: 6px;
}

#rcl-admin-panel::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
}

#rcl-admin-panel::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.25);
    border-radius: 10px;
}

#rcl-admin-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.4);
}

#rcl-admin-panel {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.25) rgba(255,255,255,0.05);
}


/* Bouton Admin — toujours visible, hors flux */

#rcl-admin-tab,
.rcl-global-admin-tab {
    position: fixed !important;
    top: 50%;
    right: 12px;

    transform: translateY(-50%);
    z-index: 999999999 !important;

    width: 46px;
    height: 46px;

    background: rgba(0,0,0,.65);
    backdrop-filter: blur(6px);

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 22px;
    color: #fff;
    cursor: pointer;

    transition: opacity .25s ease, transform .25s ease;
}

/* Ne jamais disparaître */
#rcl-admin-tab.hidden {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hover */
#rcl-admin-tab:hover {
    transform: translateY(-50%) scale(1.08);
}



/* ============================================================================
   2. CONTENEUR GLOBAL JUKEBOX
============================================================================ */

#radio-couvin-container {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background: #000;
}

body.rcl-live-mode #radio-couvin-container {
    background: transparent;
}


/* On évite que les colonnes masquent la modale */
.rcl-column,
.rcl-bottom-row,
#radio-couvin-container {
    overflow: visible !important;
    position: relative;
    z-index: 1;
}


/* ============================================================================
   3. LAYOUT DESKTOP (16:9 général)
============================================================================ */

.rcl-desktop .rcl-bottom-row {
    display: flex;
    flex-wrap: nowrap !important;
    gap: 3.5rem;
    width: 100%;
    max-width: 90vw;

    justify-content: center;
    align-items: stretch;
}

.rcl-bottom-row > * {
    flex: 1 1 0;
    min-width: 360px;
    max-width: 620px;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    background: #000;
    border-radius: 24px;
    overflow: hidden;
    color: #fff;

    padding-bottom: 1.8rem;
    transition: transform .35s ease;
}

.rcl-bottom-row > *:hover {
    transform: translateY(-4px);
}

@media (min-width: 1025px) {
    .rcl-desktop .rcl-bottom-row {
        height: calc(100vw * 9 / 16);
        min-height: 80vh;
        max-height: 92vh;
    }

    .rcl-bottom-row > * {
        height: 100% !important;
    }

    .rcl-third-column {
        height: 100% !important;
    }
}


/* ============================================================================
   4. COLONNE 3 — VERSION FIXE (pas de carrousel)
============================================================================ */

.rcl-third-column {
    position: relative;
    overflow: hidden;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    background-color: transparent !important;
}

/* On supprime explicitement toutes les versions carrousel */
.rcl-col3-carousel,
.rcl-col3-slide {
    display: none !important;
}


/* ============================================================================
   5. RESPONSIVE MOBILE — SWIPER 9:16
============================================================================ */

.rcl-swiper { display: none; }

@media (max-width: 1024px) {
    .rcl-desktop { display: none !important; }
    .rcl-swiper  { display: block !important; }

    #radio-couvin-container {
        padding: 1.5rem 1rem;
        background: #000;
    }

    .rcl-bottom-row {
        flex-direction: column !important;
        gap: 1.5rem !important;
        width: 100%;
        max-width: none;
        height: auto !important;
    }

    .rcl-bottom-row > * {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;

        border-radius: 18px !important;
        overflow: hidden !important;
        height: auto !important;
    }

    body.rcl-live-mode #radio-couvin-container {
        background: black;
    }
}

/* Désactivation totale du swiper en desktop */
@media (min-width: 1025px) {
    #rcl-mobile-swiper {
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;

        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
    }
}


/* ============================================================================
   6. HEADER GLOBAL
============================================================================ */

.rcl-top-title {
    width: 100%;
    text-align: center;
    margin-bottom: 1.8rem;
    padding-top: .5rem;
}

.rcl-top-title .rcl-logo-header {
    max-width: 520px;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 0 12px rgba(0,0,0,.55));
}

@media (max-width: 1024px) {
    .rcl-top-title .rcl-logo-header {
        max-width: 75vw;
    }
}


/* ============================================================================
   7. INTERACTIONS HEADER / POCHETTE — VOTE
============================================================================ */

/* On désactive les clics sur le header colonne 1 */
#rcl-extra-panel {
    pointer-events: none !important;
}

/* La pochette reste le seul vrai déclencheur cliquable en façade */
#rcl-cover,
#rcl-cover-wrapper,
.rcl-cover-wrapper {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 20 !important;
}
/* === FIX GLOBAL MODALE VOTE — VERSION PRODUCTION === */

/* La modale doit échapper à TOUT stacking-context */
#rcl-vote-popup {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    background: rgba(0,0,0,.70) !important;
    backdrop-filter: blur(14px) !important;

    z-index: 2147483647 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    overflow: visible !important;

    /* on casse les stacking-context créés par les parents */
    isolation: isolate !important;
}

/* activation */
#rcl-vote-popup.visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* boîte interne : priorité absolue */
#rcl-vote-popup .rcl-vote-box {
    position: relative !important;
    z-index: 2147483647 !important;
    background: #0f0f0f !important;
    padding: 2rem !important;
    border-radius: 18px !important;
    width: 90% !important;
    max-width: 420px !important;
}

/* === NEUTRALISATION des colonnes === */
.rcl-col1,
.rcl-col2,
.rcl-col3,
.rcl-column,
#radio-couvin-live,
#radio-couvin-container {
    position: relative !important;
    z-index: 1 !important;
    overflow: visible !important; /* important */
}

/* === STOP BLUR sur la colonne 2 pendant l’ouverture === */
#rcl-vote-popup.visible ~ #radio-couvin-container .rcl-col2,
#rcl-vote-popup.visible ~ .rcl-col2 {
    filter: none !important;
    backdrop-filter: none !important;
}
#rcl-vote-popup {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    background: rgba(0,0,0,.65) !important;
    backdrop-filter: blur(12px) !important;

    z-index: 2147483647 !important;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;

    isolation: isolate !important;
}
#rcl-vote-popup.visible {
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}
#rcl-col2 {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
    overflow: visible !important;
    position: relative;
    z-index: 1;
}
.rcl-column {
    flex-shrink: 0 !important;
}
#rcl-vote-popup {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483647 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

#rcl-vote-box {
    z-index: 2147483647 !important;
    position: relative !important;
}
/* Force la modale à flotter AU-DESSUS de tout */
#rcl-vote-popup {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    background: rgba(0,0,0,.55);
    backdrop-filter: blur(8px);

    z-index: 2147483647 !important;
    pointer-events: auto !important;
}

/* La boîte au centre */
.rcl-vote-box {
    position: relative !important;
    z-index: 2147483647 !important;

    background: #fff;
    padding: 40px;
    border-radius: 12px;
    text-align: center;

    box-shadow:
        0 10px 40px rgba(0,0,0,.35),
        0 0 20px rgba(0,0,0,.25) inset;

    max-width: 380px;
    width: 90%;
}
/* Neutralise UNIQUEMENT ce qui casse le fixed */
.rcl-column,
.rcl-column * {
    transform: none !important;
    filter: none !important;
}

/* ============================================================================
   RCL — MINI PLAYER NEON
============================================================================ */

.rcl-player-compact {
    display: flex;
    align-items: center;
    gap: 1.2rem;

    background: #090909;
    padding: 1rem 1.4rem;
    border-radius: 14px;

    box-shadow:
        0 0 12px rgba(0,255,255,0.12),
        0 0 22px rgba(0,255,255,0.08) inset;

    border: 1px solid rgba(0,255,255,0.18);
}

/* Pochette + glow */
.rcl-cover-wrapper img {
    width: 68px;
    height: 68px;
    border-radius: 10px;
    object-fit: cover;

    box-shadow:
        0 0 8px rgba(0,255,255,0.25),
        0 0 18px rgba(0,255,255,0.12);
}

/* Contenu droite */
.rcl-player-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

/* Label ON ECOUTE */
.rcl-label {
    font-size: .78rem;
    letter-spacing: 2px;
    color: #0ff;
    margin-bottom: .25rem;
    opacity: .85;

    text-shadow:
        0 0 6px rgba(0,255,255,0.45),
        0 0 10px rgba(0,255,255,0.25);
}

/* Titre + Artiste */
.rcl-track span {
    font-size: .95rem;
    font-weight: 500;
}

#rcl-title {
    color: #fff;
}

#rcl-artist {
    color: #0ff;
    text-shadow:
        0 0 6px rgba(0,255,255,0.4),
        0 0 12px rgba(0,255,255,0.2);
}

.rcl-sep {
    color: #555;
}

/* Boutons */
.rcl-controls {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .6rem;
}

.rcl-btn {
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(0,255,255,0.25);
    color: #fff;
    padding: .45rem .8rem;
    border-radius: 8px;
    cursor: pointer;

    transition: transform .15s ease, box-shadow .2s ease;
    text-shadow: 0 0 8px rgba(0,255,255,0.4);
}

.rcl-btn:hover {
    transform: scale(1.08);
    box-shadow:
        0 0 10px rgba(0,255,255,0.35),
        0 0 20px rgba(0,255,255,0.15);
}

/* Logo rond avec glow */
.rcl-logo-btn img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: contain;

    box-shadow:
        0 0 10px rgba(0,255,255,0.35),
        0 0 20px rgba(0,255,255,0.25),
        0 0 30px rgba(0,255,255,0.15);
}

/* ============================================================================
   RADIO COUVIN – DYNAMIC COLOR + GLOW + PULSE
   Auteur : Christophe Delire
   Version : 4.3 (Production)
   Objectif :
   - Utiliser la couleur dynamique de playlist (--rcl-color)
   - Uniformiser les néons du player
   - Animation pulse au changement de titre
============================================================================ */

/* Couleur dynamique globale */
:root {
    --rcl-color: #27f3d3; /* fallback */
}

/* ============================================================================
   1. PLAYER COMPACT — Glow dynamique
============================================================================ */

.rcl-player-compact {
    background: #000;
    border-radius: 18px;
    padding: 1.2rem 1.4rem;
    border: 1px solid rgba(255,255,255,.06);
    box-shadow:
        0 0 18px rgba(0,0,0,.45),
        0 0 24px var(--rcl-color);
    position: relative;
    overflow: hidden;
}

/* Couverture carrée 1:1 */
.rcl-cover-wrapper img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 14px;
    box-shadow: 0 0 14px rgba(0,0,0,.4);
}

/* Label ON ÉCOUTE */
.rcl-label {
    font-size: 11px;
    letter-spacing: .14rem;
    color: var(--rcl-color);
    margin-bottom: .25rem;
    text-shadow: 0 0 6px var(--rcl-color);
}

/* Texte titre + artiste */
#rcl-title,
#rcl-artist {
    color: #fff !important;
    text-shadow: 0 0 6px rgba(0,0,0,.65);
}

.rcl-sep {
    opacity: .4;
}

/* Actions */
.rcl-controls .rcl-btn {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: #111;
    border: 1px solid rgba(255,255,255,.10);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;

    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.rcl-controls .rcl-btn:hover {
    transform: translateY(-3px);
    border-color: var(--rcl-color);
    box-shadow:
        0 0 12px var(--rcl-color),
        0 0 22px rgba(0,0,0,.35) inset;
}

/* Logo button */
.rcl-logo-btn img {
    width: 38px;
    filter: drop-shadow(0 0 6px var(--rcl-color));
}

/* ============================================================================
   2. MODALE DE VOTE — Glow unifié
============================================================================ */

#rcl-vote-popup .rcl-vote-box {
    background: #0c0c0c;
    border: 1px solid var(--rcl-color);
    border-radius: 18px;
    padding: 2rem 2.2rem;
    width: 90%;
    max-width: 420px;

    box-shadow:
        0 0 28px rgba(0,0,0,.45),
        0 0 38px var(--rcl-color);
}

#rcl-vote-popup .rcl-vote-box h3 {
    color: #fff;
    text-shadow: 0 0 14px rgba(0,0,0,.45);
}

#rcl-vote-popup button {
    background: #111;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;
    padding: .45rem 1rem;
    margin: .25rem .35rem;

    transition: all .18s ease-out;
}

#rcl-vote-popup button:hover {
    border-color: var(--rcl-color);
    box-shadow:
        0 0 14px var(--rcl-color),
        0 0 18px rgba(0,0,0,.35) inset;
}

/* ============================================================================
   3. ANIMATION — Soft Pulse (au changement de titre)
============================================================================ */

@keyframes rcl-soft-pulse {
    0%   { box-shadow: 0 0 0px var(--rcl-color); }
    50%  { box-shadow: 0 0 32px var(--rcl-color); }
    100% { box-shadow: 0 0 0px var(--rcl-color); }
}

.rcl-pulse {
    animation: rcl-soft-pulse 1.4s ease-out;
}

/* === MODALE – Boîte centrale néon === */
.rcl-vote-box {
    background: rgba(10, 10, 10, 0.85) !important;
    backdrop-filter: blur(6px);
    border-radius: 20px;
    padding: 2.2rem 2rem !important;

    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow:
        0 0 18px rgba(178, 82, 255, .45),
        0 0 36px rgba(255, 0, 140, .20),
        inset 0 0 12px rgba(255,255,255,.04);

    color: #fff !important;
    text-align: center !important;
}

/* Titre */
.rcl-vote-box h3 {
    font-size: 1.45rem !important;
    font-weight: 600 !important;
    margin-bottom: 1.3rem !important;
    color: #eee !important;
    text-shadow: 0 0 8px rgba(255,0,140,.35);
}

/* Texte note */
.rcl-vote-note {
    margin-top: 1.4rem !important;
    font-size: .95rem !important;
    opacity: .85;
}
/* === BOUTONS DE VOTE === */
.rcl-vote-buttons button {
    background: #111 !important;
    color: #eee !important;

    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 12px !important;

    padding: .55rem 1.1rem !important;
    margin: 0 .35rem !important;

    font-size: 1rem !important;
    cursor: pointer;

    box-shadow:
        0 0 12px rgba(178, 82, 255, .35),
        inset 0 0 8px rgba(255,255,255,.06);

    transition: all .18s ease-out;
}

/* Hover */
.rcl-vote-buttons button:hover {
    background: rgba(255,0,140,.15) !important;
    border-color: rgba(255,0,140,.45) !important;
    box-shadow:
        0 0 18px rgba(255,0,180,.55),
        inset 0 0 10px rgba(255,255,255,.12);
    transform: scale(1.06);
}

/* Active */
.rcl-vote-buttons button:active {
    transform: scale(.95);
}
/* --- RESTORE COVER 1:1 --- */
.rcl-cover-wrapper {
    width: 110px;              /* taille ajustable selon ton layout */
    aspect-ratio: 1 / 1;       /* carré garanti */
    overflow: hidden;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
}

#rcl-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;         /* remplit sans déformation */
    display: block;
}
/* ============================================================================
   PLAYER RESPONSIVE — Garantit que TITRE + BOUTONS restent visibles
   Quelle que soit la hauteur d’écran
============================================================================ */

/* Base : toujours un layout vertical maîtrisé */
.rcl-player-compact {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Pochette toujours 1:1 mais réductible */
.rcl-cover-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 16px;
}

/* Image bien contenue */
#rcl-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==== HAUTEURS LIMITÉES ==== */

/* Écrans ≤ mille pixels de haut */
@media (max-height: 1000px) {
    .rcl-cover-wrapper {
        max-height: 55vh !important;
    }
}

/* ≤ neuf cents pixels */
@media (max-height: 900px) {
    .rcl-cover-wrapper {
        max-height: 48vh !important;
    }
    .rcl-player-right {
        margin-top: 1.2rem !important;
    }
}

/* ≤ huit cents pixels */
@media (max-height: 800px) {
    .rcl-cover-wrapper {
        max-height: 42vh !important;
    }
    .rcl-controls {
        margin-top: 1rem !important;
    }
}

/* ≤ sept cents pixels */
@media (max-height: 700px) {
    .rcl-cover-wrapper {
        max-height: 38vh !important;
    }
    .rcl-player-right {
        margin-top: .7rem !important;
    }
}

/* ≤ six cents pixels (cas extrêmes : petits laptops) */
@media (max-height: 600px) {
    .rcl-cover-wrapper {
        max-height: 32vh !important;
    }
    .rcl-controls button {
        transform: scale(.9);
    }
}
.rcl-col2 {
    transform: scale(.92);
    transform-origin: top center;
    max-height: 82vh;
    overflow: hidden;
    padding-bottom: 1rem;
}/* ============================================================================
   RCL — SECURITE D'AFFICHAGE DES BOUTONS (VERROU FINAL)
   Garantit que les boutons restent visibles quel que soit l’écran.
============================================================================ */

.rcl-col2 {
    transform: scale(.92) !important;
    transform-origin: top center !important;

    max-height: 82vh !important;
    overflow: visible !important;
    padding-bottom: 1.2rem !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* S’assure que la pochette ne dépasse plus la place disponible */
.rcl-cover-wrapper {
    max-height: 50vh !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
}

/* S’assure que le bloc texte + boutons reste dans l’écran */
.rcl-player-right {
    margin-top: 1rem !important;
}

.rcl-controls {
    margin-top: 1rem !important;
    display: flex;
    justify-content: center;
}
/* ============================================================================
   PATCH — Player Transparent (fond )
   Auteur : Christophe Delire
   Effet : Fond transparent pour col2 + player compact
============================================================================ */

/* Le container de la colonne PLAYER */
.rcl-col2 {
    background: transparent !important;
}

/* Le fond du mini-player (celui autour de la pochette) */
.rcl-player-compact {
    background: rgba(0,0,0,0) !important; /* transparent */
    box-shadow: none !important;          /* si tu veux supprimer le contour néon */
    border-color: transparent !important;
}

/* Si tu veux garder le NEON mais sans fond : */
.rcl-player-compact {
    background: transparent !important;
    box-shadow: 0 0 22px var(--rcl-color) !important;
    border: 1px solid rgba(255,255,255,.05) !important;
}/* ============================================================================
   PATCH — Colonne 2 totalement transparente
   Auteur : Christophe Delire
============================================================================ */

/* Colonne centrale */
.rcl-col2,
.rcl-column.rcl-col2,
.rcl-bottom-row > .rcl-col2 {
    background: transparent !important;
    backdrop-filter: none !important;
}

/* Si un parent force le fond noir */
.rcl-col2 * {
    background: transparent !important;
}

/* On neutralise les wrappers Divi qui imposent un fond */
#radio-couvin-container .rcl-col2,
#radio-couvin-live .rcl-col2 {
    background: transparent !important;
}

/* Empêche le "fondu noir" hérité */
.rcl-bottom-row > *:nth-child(2) {
    background: transparent !important;
}