/* ============================================================
   ENTETE OUVERTE CHILL ROOM
   Retire la grande carte et agrandit fortement le logo
   ============================================================ */

/* Retire complètement l'apparence de grande carte */
body.chillroom-portal-ready
.chillroom-portal-header {
    position: relative !important;

    width: min(980px, 96vw) !important;

    margin:
        -8px
        auto
        22px !important;

    padding:
        4px
        20px
        12px !important;

    border: none !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    overflow: visible !important;
}

/* Retire la ligne lumineuse de l'ancienne carte */
body.chillroom-portal-ready
.chillroom-portal-header::before {
    display: none !important;
    content: none !important;
}

/* Badge flottant indépendant */
body.chillroom-portal-ready
.chillroom-portal-badge {
    position: relative !important;
    z-index: 5 !important;

    margin:
        0
        auto
        4px !important;

    padding:
        6px
        14px !important;

    background:
        rgba(23, 18, 67, 0.64) !important;

    border:
        1px solid
        rgba(144, 127, 255, 0.53) !important;

    box-shadow:
        0 0 14px rgba(86, 104, 255, 0.29),
        0 0 24px rgba(34, 200, 255, 0.12) !important;

    backdrop-filter:
        blur(9px) !important;

    -webkit-backdrop-filter:
        blur(9px) !important;
}

/* Zone du logo beaucoup plus haute */
body.chillroom-portal-ready
.chillroom-portal-title {
    position: relative !important;
    z-index: 4 !important;

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

    width: 100% !important;
    min-height: 155px !important;

    margin:
        -6px
        auto
        -5px !important;

    padding: 0 !important;

    overflow: visible !important;
}

/*
   Le PNG semble contenir une grande marge transparente.
   Le scale compense cette marge sans modifier le fichier.
*/
body.chillroom-portal-ready
.chillroom-header-logo-image {
    display: block !important;

    width: min(96%, 660px) !important;
    max-width: 660px !important;
    height: auto !important;
    max-height: none !important;

    margin: 0 auto !important;
    padding: 0 !important;

    object-fit: contain !important;

    transform:
        translate3d(0, 0, 0)
        scale(2.15) !important;

    transform-origin:
        center center !important;

    filter:
        drop-shadow(
            0 0 10px
            rgba(255, 255, 255, 0.25)
        )
        drop-shadow(
            0 0 21px
            rgba(124, 82, 255, 0.48)
        )
        drop-shadow(
            0 0 32px
            rgba(35, 185, 255, 0.25)
        ) !important;

    transition:
        transform 0.22s ease,
        filter 0.22s ease !important;

    pointer-events: none !important;
    user-select: none !important;
}

/* Léger mouvement au survol de la zone d'en-tête */
body.chillroom-portal-ready
.chillroom-portal-header:hover
.chillroom-header-logo-image {
    transform:
        translate3d(0, -2px, 0)
        scale(2.20) !important;

    filter:
        drop-shadow(
            0 0 13px
            rgba(255, 255, 255, 0.32)
        )
        drop-shadow(
            0 0 27px
            rgba(139, 91, 255, 0.58)
        )
        drop-shadow(
            0 0 40px
            rgba(39, 194, 255, 0.31)
        ) !important;
}

/* Sous-titre directement sur le décor */
body.chillroom-portal-ready
.chillroom-portal-description {
    position: relative !important;
    z-index: 6 !important;

    max-width: 620px !important;

    margin:
        0
        auto !important;

    padding:
        7px
        18px !important;

    color:
        rgba(238, 234, 255, 0.88) !important;

    background:
        rgba(10, 8, 34, 0.28) !important;

    border-radius:
        999px !important;

    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.82),
        0 0 12px rgba(93, 92, 255, 0.28) !important;

    backdrop-filter:
        blur(5px) !important;

    -webkit-backdrop-filter:
        blur(5px) !important;
}

/* Rapproche légèrement les cartes de l'en-tête */
body.chillroom-portal-ready
.chillroom-app-grid {
    margin-top:
        0 !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
    body.chillroom-portal-ready
    .chillroom-portal-title {
        min-height: 135px !important;
    }

    body.chillroom-portal-ready
    .chillroom-header-logo-image {
        width: min(96%, 580px) !important;
        max-width: 580px !important;

        transform:
            translate3d(0, 0, 0)
            scale(1.95) !important;
    }

    body.chillroom-portal-ready
    .chillroom-portal-header:hover
    .chillroom-header-logo-image {
        transform:
            translate3d(0, -2px, 0)
            scale(2) !important;
    }
}

@media (max-width: 600px) {
    body.chillroom-portal-ready
    .chillroom-portal-header {
        margin-top: 0 !important;
        margin-bottom: 18px !important;

        padding:
            3px
            10px
            8px !important;
    }

    body.chillroom-portal-ready
    .chillroom-portal-title {
        min-height: 112px !important;

        margin:
            -4px
            auto
            -3px !important;
    }

    body.chillroom-portal-ready
    .chillroom-header-logo-image {
        width: min(98%, 420px) !important;
        max-width: 420px !important;

        transform:
            translate3d(0, 0, 0)
            scale(1.72) !important;
    }

    body.chillroom-portal-ready
    .chillroom-portal-header:hover
    .chillroom-header-logo-image {
        transform:
            translate3d(0, -1px, 0)
            scale(1.76) !important;
    }

    body.chillroom-portal-ready
    .chillroom-portal-description {
        max-width:
            calc(100vw - 42px) !important;

        padding:
            6px
            13px !important;

        font-size:
            12px !important;
    }
}