/*
 * Header public Radio Sports — stabilisation desktop et mobile.
 *
 * Chargée après les feuilles historiques, cette couche limite volontairement
 * son périmètre au header partagé. Elle empêche les anciennes règles globales
 * appliquées aux images de déformer les boutons du player et du menu.
 */

body > .rs-skip-link {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 1000001 !important;
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    padding: 12px 16px !important;
    background: #fff !important;
    border: 3px solid #f90c9b !important;
    border-radius: 4px !important;
    color: #16062f !important;
    font: 800 16px/1.2 Arial, Helvetica, sans-serif !important;
    text-decoration: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate3d(0, -200%, 0) !important;
}

body > .rs-skip-link:focus,
body > .rs-skip-link:focus-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
    outline: 3px solid #16062f !important;
    outline-offset: 3px !important;
    transform: translate3d(0, 0, 0) !important;
}

body .header_bottom,
body #loginB,
body #logout {
    display: none !important;
}

html body #playtel {
    display: inline-grid !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 9px !important;
    place-items: center !important;
    border: 2px solid rgba(255, 255, 255, .9) !important;
    border-radius: 999px !important;
    background: #f90c9b !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .28) !important;
}

html body #playtel > img {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 22px !important;
    max-height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: invert(1) !important;
    object-fit: contain !important;
    transform: translateX(1px) !important;
}

html body .top_menu,
html body:not(.home):not(.blog) .top_menu {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    grid-column: 5 !important;
    grid-row: 1 !important;
    width: 44px !important;
    height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

html body .top_menu .t_menu {
    display: inline-grid !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 9px !important;
    place-items: center !important;
    background: #2f0475 !important;
    border: 1px solid rgba(255, 255, 255, .42) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

html body .top_menu .t_menu > img.close_menu_img {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 24px !important;
    max-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: invert(1) !important;
    object-fit: contain !important;
}

/*
 * Sur la home, le backdrop-filter historique transforme le bandeau en bloc
 * contenant pour le panneau fixed. Sans ce garde-fou, height: 100% correspond
 * à la hauteur du header (68/72 px) au lieu de la hauteur de la fenêtre.
 */
html body.home #bandeauhaut,
html body.blog #bandeauhaut {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

html body.home #menu.sidr,
html body.blog #menu.sidr {
    top: 0 !important;
    bottom: auto !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
}

@media screen and (max-width: 900px) {
    body.home,
    body.blog {
        padding-top: 72px !important;
    }

    body.admin-bar.home,
    body.admin-bar.blog {
        padding-top: 118px !important;
    }

    body .header_spacing,
    body.home .header_spacing,
    body.blog .header_spacing,
    body #bandeauhaut,
    body.home #bandeauhaut,
    body.blog #bandeauhaut {
        height: 72px !important;
        min-height: 72px !important;
    }

    html body #bandeauhaut > .container,
    html body.home #bandeauhaut > .container,
    html body.blog #bandeauhaut > .container,
    html body:not(.home):not(.blog) #bandeauhaut > .container {
        grid-template-columns: minmax(92px, 106px) 44px minmax(0, 1fr) 44px !important;
        grid-template-rows: 72px !important;
        width: calc(100% - 16px) !important;
        height: 72px !important;
        min-height: 72px !important;
        gap: 8px !important;
    }

    body .full_logo_cont {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    body .full_logo_cont .custom-logo {
        width: auto !important;
        max-width: 106px !important;
        height: auto !important;
        max-height: 60px !important;
    }

    html body #playtel {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    html body .top_menu,
    html body:not(.home):not(.blog) .top_menu {
        display: flex !important;
        grid-column: 4 !important;
        grid-row: 1 !important;
    }

    body.home .rs-home-transition__nav,
    body.blog .rs-home-transition__nav {
        display: none !important;
    }

    body .rs-home-transition {
        scroll-margin-top: 80px !important;
    }
}