/* ============================= */
/*      MENU PANEL GENERAL       */
/* ============================= */

#menu_panel {
    transition: transform 0.5s cubic-bezier(.77,0,.18,1);
    transform: translateX(0);
}

#menu_panel.closed {
    transform: translateX(-110%);
    pointer-events: none;
}


/* ============================= */
/*      MENU PANEL HEADER        */
/* ============================= */

#menu_panel_header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.2vw;
    padding: 0.3vh 0.3vw;
    background: #e0e0e0;
    color: #222;
    border-bottom: 1px solid #ccc;
    min-height: 48px;
    font-size: 1.1rem;
    font-weight: 600;
    height: 48px;
    box-sizing: border-box;
}

html.dark_mode #menu_panel_header {
    background: #564343;
}

.menu_panel_header>* {
    max-height: 100%;
    display: flex;
    align-items: center;
}

/* ============================= */
/*          VARIABLES            */
/* ============================= */
:root {}


/* ============================= */
/*          STRUCTURE            */
/* ============================= */

.menu_panel_content {
    position: fixed;
    /* reste collé à l'écran */
    top: 0;
    left: 0;
    height: 100vh;
    /* toute la hauteur */
    background: #ebe9e9;
    /* couleur provisoire */
    color: #fff;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    /* scroll si contenu trop long */
    z-index: 1000;
    /* au-dessus du contenu */
}

/* Mobile standard */
@media (max-width: 399px) {
    .menu_panel_content {
        width: 95vw;
        /* un quart de la largeur de l ecran */
    }
}

/* Mobile large / Phablet */
@media (min-width: 400px) and (max-width: 599px) {
    .menu_panel_content {
        width: 95vw;
        /* un quart de la largeur de l ecran */
    }
}

/* Tablette portrait */
@media (min-width: 600px) and (max-width: 899px) {
    .menu_panel_content {
        width: 95vw;
        /* un quart de la largeur de l ecran */
    }
}

/* Desktop */
@media (min-width: 1200px) {
    .menu_panel_content {}
}

/* Dark Mode automatique, changeable via bouton thème */
html.dark_mode .menu_panel_content {
    background: #564343;
}




/* ============================= */
/*  PANEL CLOSE     */
/* ============================= */

.menu_panel_close {
    background: none;
    border: none;
    padding: 0.35vh 0.35vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 4vh;
    /* carré parfait par défaut */
}

/* Mobile standard */
@media (max-width: 399px) {
    .menu_panel_close,
    .menu_panel_dark_mode_choice {
        height: 6vh;
        /* carré parfait sur mobile */
    }
}

/* Mobile large / Phablet */
@media (min-width: 400px) and (max-width: 599px) {
    .menu_panel_close,
    .menu_panel_dark_mode_choice {
        height: 6vh;
        /* carré parfait sur mobile */
    }
}

/* Tablette portrait */
@media (min-width: 600px) and (max-width: 899px) {
    .menu_panel_close,
    .menu_panel_dark_mode_choice {
        height: 6vh;
        /* carré parfait sur mobile */
    }
}

/* Desktop */
@media (min-width: 1200px) {
    .menu_panel_close,
    .menu_panel_dark_mode_choice {}
}

/* Dark Mode automatique, changeable via bouton thème */
html.dark_mode .menu_panel_close {
}

.menu_panel_close img {
    /* laisser l'image s'adapter sans dépasser le bouton (respecte le padding) */
    height: auto;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
    /* évite que l'image bloque le clic */
}

.menu_panel_dark_mode_choice {
    background: none;
    border: none;
    /* marge intérieure exprimée en `vh` (vertical) et `vw` (horizontal) */
    padding: 0.35vh 0.35vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    /* occupe toute la largeur du parent */
    height: 4vh;
    /* carré parfait par défaut */
    font-size: calc(var(--coef) * 45);
    overflow: hidden;
    max-width: 100%;
    max-height: 100%;
}

/* Empêche le contenu d'agrandir le bouton */
.menu_panel_dark_mode_choice>* {
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    flex-shrink: 1;
}

/* L'image à l'intérieur du bouton dark mode s'adapte à la taille du bouton */
.menu_panel_dark_mode_choice img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}


/* ============================= */
/*   MENU UNIVERSE SELECTION     */
/* ============================= */

#menu_universe_selection {
    padding: 1.2vh 2.5vw;
    gap: 1.2vw;
    font-size: 1.05rem;
    justify-content: flex-start;

        display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1vw;

    width: 100%;
    background: transparent;
    border: none;
    padding: 1vh 2vw;
    /* marge intérieure responsive */
    cursor: pointer;
    color: inherit;
    font-size: 1rem;
}

/* Mobile standard */
@media (max-width: 399px) {
    #menu_universe_selection {
                padding: 1vh 1.5vw;
        gap: 0.6vw;
        font-size: 0.95rem;
        justify-content: space-between;
    }
}

/* Mobile large / Phablet */
@media (min-width: 400px) and (max-width: 599px) {
    #menu_universe_selection {
                padding: 1vh 1.5vw;
        gap: 0.6vw;
        font-size: 0.95rem;
        justify-content: space-between;
    }
}

/* Tablette portrait */
@media (min-width: 600px) and (max-width: 899px) {
    #menu_universe_selection {
                padding: 1vh 1.5vw;
        gap: 0.6vw;
        font-size: 0.95rem;
        justify-content: space-between;
    }
}

/* Desktop */
@media (min-width: 1200px) {
    #menu_universe_selection {}
}

/* Dark Mode automatique, changeable via bouton thème */
html.dark_mode #menu_universe_selection {

}

/* Un seul padding et border-radius cohérent */
#menu_universe_selection .menu_universe_item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    padding: 0.5vh 1vw;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.04);
    color: #222;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Animation et sélection du menu_universe_selection */
#menu_universe_selection .menu_universe_item {
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
    border-radius: 8px;
    padding: 0.5vh 1vw;
    cursor: pointer;
}
#menu_universe_selection .menu_universe_item.selected {
    background: #704531;
  color: ;
    color: #fff;
    box-shadow: 0 2px 8px rgba(28,15,179,0.15);
}
#menu_universe_selection .menu_universe_item:not(.selected):hover {
    background: #ececec;
    color: #222;
}

/* Mobile standard */
@media (max-width: 399px) {
    #menu_universe_selection .menu_universe_item {
                padding: 0.5vh 0.8vw;
    }
}

/* Mobile large / Phablet */
@media (min-width: 400px) and (max-width: 599px) {
    #menu_universe_selection .menu_universe_item {
                padding: 0.5vh 0.8vw;
    }
}

/* Tablette portrait */
@media (min-width: 600px) and (max-width: 899px) {
    #menu_universe_selection .menu_universe_item {
                padding: 0.5vh 0.8vw;
    }
}

/* Desktop */
@media (min-width: 1200px) {
    #menu_universe_selection .menu_universe_item {}
}

/* Dark Mode automatique, changeable via bouton thème */
html.dark_mode #menu_universe_selection .menu_universe_item {
    color: #f2f1f1;
}



/* ============================= */
/*        EVENTS MENU           */
/* ============================= */

#menu_events {
}

/* ============================= */
/*        ITEMS MENU           */
/* ============================= */

#menu_items {

}



/* ============================= */
/*      CATEGORIES & ANNEES      */
/* ============================= */

details.vertical_menu_level_1 {
    margin-bottom: 0.7vh;
    background: #f7f7f7;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    padding: 0;
    overflow: hidden;
    transition: background 0.2s;
}

html.dark_mode details.vertical_menu_level_1 {
    background: #23234a;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

details.vertical_menu_level_1[open] {
    background: #ececec;
}

html.dark_mode details.vertical_menu_level_1[open] {
    background: #2c2c5a;
}

summary.vertical_menu_level_1_items, summary.vertical_menu_level_1_events {
    padding: 0.7vh 1vw;
    color: #222;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    list-style: none;
    border-bottom: 1px solid #e0e0e0;
    user-select: none;
    display: flex;
    align-items: center;
    transition: background 0.2s;
}

html.dark_mode summary.vertical_menu_level_1_items, html.dark_mode summary.vertical_menu_level_1_events {
    color: #f0f0f0;
    background: #2c2c5a;
    border-bottom: 1px solid #444;
}

details[open] summary.vertical_menu_level_1_items, details[open] summary.vertical_menu_level_1_events { 
    background: #ececec;
}

html.dark_mode details[open] summary.vertical_menu_level_1_items, html.dark_mode details[open] summary.vertical_menu_level_1_events {
    background: #2c2c5a;
}

summary.vertical_menu_level_1_items::-webkit-details-marker, summary.vertical_menu_level_1_events::-webkit-details-marker {
    display: none;
}


summary.vertical_menu_level_1_items::after, summary.vertical_menu_level_1_events::after {
    content: "";
    display: inline-block;
    margin-left: 0.7em;
    width: 20px;
    height: 20px;
    background-color: #000;
    -webkit-mask-image: url('/images/arrow_forward_ios_24dp_E3E3E3.svg');
    mask-image: url('/images/arrow_forward_ios_24dp_E3E3E3.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: transform 0.2s;
    transform: rotate(90deg);
}

html.dark_mode summary.vertical_menu_level_1_items::after, html.dark_mode summary.vertical_menu_level_1_events::after {
    background-color: #f0f0f0;
}

details[open] summary.vertical_menu_level_1_items::after, details[open] summary.vertical_menu_level_1_events::after {
    transform: rotate(270deg);
}

details ul {
    margin: 0;
    padding: 0.5vh 0 0.5vh 1.5vw;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4vh;
}


/* ============================= */
/*        ITEMS & EVENTS         */
/* ============================= */

li.vertical_menu_level_2_items, li.vertical_menu_level_2_events {
    color: #222;
    font-size: 0.97rem;
    padding: 0.3vh 0.5vw;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

html.dark_mode li.vertical_menu_level_2_items, html.dark_mode li.vertical_menu_level_2_events {
    color: #f0f0f0;
}

li.vertical_menu_level_2_items:hover, li.vertical_menu_level_2_events:hover {
    background: #e0e0e0;
}


html.dark_mode li.vertical_menu_level_2_items:hover, html.dark_mode li.vertical_menu_level_2_events:hover {
    background: #23234a;
}

/* Affiche uniquement le panel ouvert */
#menu_articles,
#menu_events {
    display: none;
}
#menu_articles.open,
#menu_events.open {
    display: block;
}

/* ============================= */
/*         INSPIRATIONS          */
/* ============================= */

/* laredoute :  https://www.laredoute.fr/alt/marques.aspx  */
/* ============================= */
/*  vertical_menu_level_1_items  */
/* ============================= */