/* Style pour le menu de niveau 1 */
.skip-level-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    font-family: var(--mediachimie-font-titles);
    letter-spacing: var(--mediachimie-font-titles-letter-spacing);
    font-size: 24px;
}

/* Style du conteneur principal */
.skip-level-menu > li {
    position: static; /* Important: permet aux dropdowns de prendre toute la largeur */
    flex: 1; /* Les éléments se partagent équitablement la largeur */
}

.skip-level-menu .menu-item {
    position: relative;
    padding: 10px 0 0;
    text-align: center;
    width: 100%;
    height: 45px;
    border-top-right-radius: 40px;
}

.skip-level-menu .menu-item::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    z-index: -1;
    border-radius: 0;
}

/* Couleurs de fond personnalisées pour chaque élément */
.skip-level-menu .menu-item:nth-child(1) {
    background-color: var(--mediachimie-series-color);
}
.skip-level-menu .menu-item:nth-child(1)::after {
    background-color: var(--mediachimie-mediatheque-color);
}

.skip-level-menu .menu-item:nth-child(2) {
    background-color: var(--mediachimie-mediatheque-color);
}
.skip-level-menu .menu-item:nth-child(2)::after {
    background-color: var(--mediachimie-metiers-color) !important;
}

.skip-level-menu .menu-item:nth-child(3) {
    background-color: var(--mediachimie-metiers-color);
}
.skip-level-menu .menu-item:nth-child(3)::after {
    background-color: var(--mediachimie-enseignants-color);
}

.skip-level-menu .menu-item:nth-child(4) {
    background-color: var(--mediachimie-enseignants-color);
}
.skip-level-menu .menu-item:nth-child(4)::after {
    background-color: var(--mediachimie-colloques-color);
}

.skip-level-menu .menu-item:nth-child(5) {
    background-color: var(--mediachimie-colloques-color);
}
.skip-level-menu .menu-item:nth-child(5)::after {
    background-color: var(--mediachimie-color-white);
}

/* Style des liens de niveau 1 */
.skip-level-menu .menu-item a {
    display: flex;
    width: 100%;
    text-decoration: none;
    font-weight: 600;
    color: white; /* Texte en blanc */
    text-transform: uppercase; /* Texte en majuscules */
    justify-content: center;
    align-items: center;
}

/* Icônes pour les liens de niveau 1 */
.skip-level-menu .menu-item a:before {
    content: "";
    display: inline-block;
    width: 35px;
    height: 35px;
    margin-right: 5px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.skip-level-menu .menu-item:nth-child(1) a:before {
    background-image: url('../../images/pictos/series-ffffff.svg');
    background-position-y: 12px;
}

.skip-level-menu .menu-item:nth-child(2) a:before {
    background-image: url('../../images/pictos/mediatheque-ffffff.svg');
    background-position-y: 11px;
}

.skip-level-menu .menu-item:nth-child(3) a:before {
    background-image: url('../../images/pictos/metiers-ffffff.svg');
}

.skip-level-menu .menu-item:nth-child(4) a:before {
    background-image: url('../../images/pictos/enseignants-ffffff.svg');
    background-position-y: 6px;
}

.skip-level-menu .menu-item:nth-child(5) a:before {
    background-image: url('../../images/pictos/colloques-ffffff.svg');
    background-position-y: 3px;
}

/* SOLUTION ALTERNATIVE : Colonnes CSS améliorées */
.mega-dropdown {
    display: none;
    position: absolute;
    left: 0;
    width: 100%;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 100;
    padding: 0 20px 15px;
    box-sizing: border-box;

    /* Configuration des colonnes renforcée */
    column-count: 3;
    column-gap: 20px;
    column-fill: balance; /* Force l'équilibrage des colonnes */
    column-width: auto; /* Largeur automatique */

    /* Propriétés pour forcer la stabilité des colonnes */
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    -webkit-column-fill: balance;
    -moz-column-fill: balance;
}

/* Positionnement du dropdown */
.skip-level-menu-wrapper {
    position: relative;
}

.mega-dropdown a {
    color: var(--mediachimie-color-black);
}

/* Empêcher les éléments d'être coupés entre les colonnes - Version renforcée */
.dropdown-category {
    /* Propriétés principales */
    break-inside: avoid-column;
    page-break-inside: avoid;

    /* Propriétés WebKit (Chrome/Safari) */
    -webkit-column-break-inside: avoid;

    /* Propriétés display pour la stabilité */
    display: inline-block;
    width: 100%;
    vertical-align: top;

    /* Force un nouveau contexte de formatage */
    overflow: hidden;
}

/* Propriétés spécifiques pour Chrome/Edge */
@supports (-webkit-appearance: none) {
    .mega-dropdown {
        /* Forcer le rendu en 3 colonnes sur WebKit */
        -webkit-columns: 3;
        columns: 3;
        -webkit-column-break-inside: avoid;
        column-break-inside: avoid;
    }

    .dropdown-category {
        /* Renforcement pour WebKit */
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid-column;
        display: block;
        width: 100%;
    }
}

/* Suppression des puces sur les listes */
.mega-dropdown ul,
.level-3-items,
.level-4-items {
    list-style-type: none;
    margin: 0;
}

.mega-dropdown .dropdown-title {
    font-family: var(--mediachimie-font-titles), sans-serif;
    letter-spacing: var(--mediachimie-font-titles-letter-spacing);
    font-weight: 500;
    color: var(--mediachimie-color-black);
    font-optical-sizing: auto;
    font-size: 1.17em; /* Taille par défaut d'un h3 */
    margin-bottom: 0;
    margin-top: 10px;
    display: block;
    line-height: 1.2;
}

.mega-dropdown li {
    margin-left: 5px;
}

/* Suppression du soulignement sur les liens */
.mega-dropdown a,
.skip-level-menu a {
    text-decoration: none;
}

/* Rétablir l'indentation pour les listes imbriquées */
.level-4-items {
    padding-left: 20px;
}

.mega-dropdown.dropdown-1 {
    border: 6px solid var(--mediachimie-series-color);
}
.mega-dropdown.dropdown-2 {
    border: 6px solid var(--mediachimie-mediatheque-color);
}
.mega-dropdown.dropdown-3 {
    border: 6px solid var(--mediachimie-metiers-color);
}
.mega-dropdown.dropdown-4 {
    border: 6px solid var(--mediachimie-enseignants-color);
}
.mega-dropdown.dropdown-5 {
    border: 6px solid var(--mediachimie-colloques-color);
}