/* ============================= */
/*          VARIABLES            */
/* ============================= */
:root {
    --sidebar_right_Width: 70vw;
    --sidebar_left_Width: 40vw;
    --topbar_right_Width: 70vw;
    --topbar_left_Width: 40vw;
    --topBarHeight: 8vh;
    /* Hauteur de la topbar principale */
}



/* ============================= */
/*            MOBILE             */
/* ============================= */
@media (max-width: 768px) {

    /* ----------------------------- */
    /*        LAYOUT MOBILE          */
    /* ----------------------------- */
    /* nécessaire pour générer un flou au glissement des sidebar et topbar */
    /* état normal : pas de flou */
    .main_content {
        transition: filter 0.3s ease, opacity 0.3s ease;
    }

    /* quand un panneau est ouvert */
    .main_content.blurred {
        filter: blur(2px) brightness(0.85);
        /* flou + légère obscurité */
        pointer-events: none;
        /* empêche les clics sur le contenu derrière */
    }


    /* ----------------------------- */
    /*       SIDE BARS MOBILE        */
    /* ----------------------------- */
    .sidebar_left,
    .sidebar_right {
        position: fixed;

        /* Décollage du haut de l'écran sous la topbar */
        top: calc(0.3vh + 0.2vh + var(--topBarHeight) * 2);
        bottom: auto;

        /* Hauteur flexible */
        min-height: 30vh;
        max-height: 95vh;
        overflow-y: auto;

        /* Style du panneau */
        border-radius: 2vw;
        background: white;
        box-shadow: 0 0 4vw rgba(0, 0, 0, 0.2);

        z-index: 1000;
        transition: transform 0.3s ease;

        opacity: 0.97;
        /* 0 = invisible, 1 = opaque */
    }

    /* ----- Sidebar gauche ----- */
    .sidebar_left {
        left: 2vw;
        transform: translateX(calc(-100% - 2vw));
        /* état FERMÉ */
        width: var(--sidebar_left_Width);
    }

    /* ----- Sidebar droite ----- */
    .sidebar_right {
        right: 2vw;
        transform: translateX(calc(100% + 2vw));
        /* état FERMÉ */
        width: var(--sidebar_right_Width);
    }

    /* ----------------------------- */
    /*       TOP BARS MOBILE         */
    /* ----------------------------- */


    .topbar_left,
    .topbar_right {
        position: fixed;
        background: #725a4f;
        top: calc(0.3vh + var(--topBarHeight));
        bottom: auto;
        height: var(--topBarHeight);
        overflow-y: auto;
        border-radius: 2vw;
        box-shadow: 0 0 4vw rgba(0, 0, 0, 0.2);
        z-index: 1000;
        transition: transform 0.3s ease;
        opacity: 0.97;
        /* 0 = invisible, 1 = opaque */
    }

    /* ----- Topbar gauche ----- */
    .topbar_left {
        left: 2vw;
        transform: translateX(calc(-100% - 2vw));
        /* état FERMÉ */
        width: var(--topbar_left_Width);
    }

    /* ----- Topbar droite ----- */
    .topbar_right {
        right: 2vw;
        transform: translateX(calc(100% + 2vw));
        /* état FERMÉ */
        width: var(--topbar_right_Width);
    }

    /* ----- État ouvert via classe 'open' ----- */
    .sidebar_left.open,
    .sidebar_right.open,
    .topbar_left.open,
    .topbar_right.open {
        transform: translateX(0);
    }

    /* ============================= */
    /*     TOPBAR CENTER MOBILE   */
    /* ============================= */

    /* on fait apparaitre les fléches aux extrémités de topbar_center */
    /* Les flèches (conteneurs) */
    .topbar_arrow_left,
    .topbar_arrow_right {
        flex: 0 0 auto;
        /* largeur flexible selon contenu ou padding */
        height: var(--topBarHeight);
        /* hauteur = topBarHeight */
        display: flex;
        align-items: center;
        /* centre verticalement le contenu */
        justify-content: center;
        /* centre horizontalement le contenu */
        padding: 1vh 1vw;
        /* padding relatif à l’écran */
        box-sizing: border-box;
        /* inclut le padding dans la hauteur */
        overflow: hidden;
        /* empêche l’image de dépasser */
    }

    /* Les images des flèches */
    .topbar_arrow_right img,
    .topbar_arrow_left img {
        max-height: calc(100% - 1 * 2 * 1vh);
        /* hauteur de la div - padding vertical */
        width: auto;
        /* garde les proportions */
        height: auto;
        /* garde les proportions */
        display: block;
        /* supprime l’espace blanc sous l’image */
    }


    /* On supprime toute contrainte héritée du desktop */
    .topbar_center {
        display: flex;
        flex-direction: row;
        width: 100vw;
        /* on force à prendre toute la largeur */
    }

    /* On supprime la zone gauche (logo) */
    .topbar_center_left {
        display: none !important;
        flex: 0 !important;
        width: 0 !important;
    }

    /* Zone droite = prend toute la largeur */
    .topbar_center_right {
        flex: 1 1 auto !important;
        width: 100% !important;
        height: 100%;
        max-width: 100% !important;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;

        gap: 1vw;

        overflow-x: auto;
        /* scroll horizontal si trop de div */
        overflow-y: hidden;
        white-space: nowrap;
        flex-wrap: nowrap;
        /* pas de retour à la ligne */

        -webkit-overflow-scrolling: touch;
    }

    /* Chaque enfant doit garder sa largeur normale */
    .topbar_center_right>* {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* ----------------------------- */
    /*     MENU HORIZONTAL MOBILE    */
    /* ----------------------------- */
    .topbar_center_right .menu_horizontal {
        flex: 1 1 auto;
        /* peut s’étendre pour remplir l’espace */
        height: 100%;
        /* prend toute la hauteur du parent */
        display: flex;
        flex-direction: column;
        /* contenu vertical (titre + dropdown) */
        justify-content: center;
        /* centrer verticalement le h1 */
        min-width: max-content;
        /* s'assure que le contenu ne se coupe pas */
        align-items: center;
        /* centrer horizontalement */
    }


    /* ----------------------------- */
    /*        FOOTER MOBILE          */
    /* ----------------------------- */
    /* nécessaire pour générer un flou au glissement des sidebar et topbar */
    /* état normal : pas de flou */
    .footer {
        transition: filter 0.3s ease, opacity 0.3s ease;
    }

    /* quand un panneau est ouvert */
    .footer.blurred {
        filter: blur(2px) brightness(0.85);
        /* flou + légère obscurité */
        pointer-events: none;
        /* empêche les clics sur le contenu derrière */
    }
}