/* =====================================================
   CASQUE VIRTUEL - MENU PC
   ===================================================== */

@media (min-width: 992px) {

    /*
     * Casque Virtuel est actuellement le 5e élément
     * du menu principal.
     */

    .sp-megamenu-parent > li:nth-child(5),
    .sp-megamenu-parent > li:has(> a[href="/casque-virtuel"]) {

        display: list-item !important;

        flex: 0 0 auto !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        flex-basis: auto !important;

        visibility: visible !important;
        opacity: 1 !important;

        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;

        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;

        overflow: visible !important;

        clip: auto !important;
        clip-path: none !important;

        transform: none !important;

        pointer-events: auto !important;
    }


    .sp-megamenu-parent > li:nth-child(5) > a,
    .sp-megamenu-parent > li:has(> a[href="/casque-virtuel"]) > a {

        display: flex !important;

        align-items: center !important;

        visibility: visible !important;
        opacity: 1 !important;

        flex: 0 0 auto !important;

        width: auto !important;
        min-width: max-content !important;
        max-width: none !important;

        height: auto !important;

        padding-left: 15px !important;
        padding-right: 15px !important;

        font-size: inherit !important;

        white-space: nowrap !important;

        position: relative !important;
        left: auto !important;
        right: auto !important;

        clip: auto !important;
        clip-path: none !important;

        transform: none !important;

        pointer-events: auto !important;
    }
}


/* =====================================================
   CASQUE VIRTUEL - MOBILE
   Suppression du point bleu
   ===================================================== */

@media (max-width: 991.98px) {

    .offcanvas-menu li.item-255 {
        list-style: none !important;
        background: none !important;
        background-image: none !important;
    }

    .offcanvas-menu li.item-255::before,
    .offcanvas-menu li.item-255::after,
    .offcanvas-menu li.item-255 > a::before,
    .offcanvas-menu li.item-255 > a::after {
        content: none !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .offcanvas-menu li.item-255 .sp-menu-badge,
    .offcanvas-menu li.item-255 .menu-badge,
    .offcanvas-menu li.item-255 .badge {
        display: none !important;
    }
}



/* ==================================================
   SUPPRESSION DEFINITIVE POINT CASQUE VIRTUEL MOBILE
   ================================================== */

@media (max-width: 991.98px) {

    .offcanvas-menu li.item-255,
    .offcanvas-menu li:has(> a[href="/casque-virtuel"]) {
        list-style: none !important;
        list-style-type: none !important;
    }

    .offcanvas-menu li.item-255::marker,
    .offcanvas-menu li:has(> a[href="/casque-virtuel"])::marker {
        content: "" !important;
        font-size: 0 !important;
    }

    .offcanvas-menu li.item-255::before,
    .offcanvas-menu li.item-255::after,
    .offcanvas-menu li.item-255 > a::before,
    .offcanvas-menu li.item-255 > a::after {
        content: none !important;
        display: none !important;
    }
}

/* === SERVICE-INFORMATIC : MENU RESPONSIVE 2 LIGNES - DEBUT === */

/*
 * Entre 992 px et 1450 px :
 *
 * - le texte de chaque menu reste entier
 * - les éléments du menu peuvent passer sur une deuxième ligne
 * - le header augmente automatiquement en hauteur
 *
 * Exemple :
 *
 * Formation à distance
 *
 * reste entier au lieu de devenir :
 *
 * Formation à
 * distance
 */

@media (min-width: 992px) and (max-width: 1450px) {

    /* ======================================================
       HEADER
       ====================================================== */

    #sp-header {
        height: auto !important;
        min-height: 105px !important;
    }

    #sp-header .container,
    #sp-header .container-fluid,
    #sp-header .container-inner,
    #sp-header .row {
        height: auto !important;
        min-height: 105px !important;
    }

    #sp-header .row {
        align-items: center !important;
    }


    /* ======================================================
       COLONNE CONTENANT LE MENU
       ====================================================== */

    #sp-menu {
        height: auto !important;
        min-height: 105px !important;

        min-width: 0 !important;

        display: flex !important;
        align-items: center !important;
    }


    #sp-menu .sp-column {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
    }


    #sp-menu .menu-with-offcanvas {
        width: 100% !important;
        min-width: 0 !important;

        flex: 1 1 auto !important;
    }


    /* ======================================================
       WRAPPER DU MENU
       ====================================================== */

    #sp-menu .sp-megamenu-wrapper {
        width: 100% !important;
        min-width: 0 !important;

        flex: 1 1 100% !important;
    }


    /* ======================================================
       MENU PRINCIPAL

       IMPORTANT :
       La classe Bootstrap "d-lg-block" essaye normalement
       de forcer display:block.

       Ici on la surcharge volontairement pour transformer
       réellement le menu en FLEX.
       ====================================================== */

    #sp-header .sp-megamenu-parent,
    #sp-menu .sp-megamenu-parent {

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: wrap !important;

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

        width: 100% !important;
        max-width: none !important;

        height: auto !important;

        margin: 0 !important;
        padding: 6px 0 !important;

        column-gap: 2px !important;
        row-gap: 0 !important;
    }


    /* ======================================================
       CHAQUE ELEMENT DU MENU RESTE ENTIER
       ====================================================== */

    #sp-header .sp-megamenu-parent > li,
    #sp-menu .sp-megamenu-parent > li {

        display: block !important;

        float: none !important;

        flex: 0 0 auto !important;

        width: auto !important;

        min-width: max-content !important;
        max-width: none !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* ======================================================
       TEXTE DES BOUTONS

       INTERDIT :
           Formation à
           distance

       AUTORISE :
           Formation à distance
       ====================================================== */

    #sp-header .sp-megamenu-parent > li > a,
    #sp-header .sp-megamenu-parent > li > span,
    #sp-menu .sp-megamenu-parent > li > a,
    #sp-menu .sp-megamenu-parent > li > span {

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

        width: auto !important;

        min-width: max-content !important;
        max-width: none !important;

        height: 44px !important;
        min-height: 44px !important;

        line-height: 44px !important;

        padding-left: 9px !important;
        padding-right: 9px !important;

        white-space: nowrap !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }


    /* ======================================================
       PETITE FLECHE DES SOUS-MENUS
       ====================================================== */

    #sp-header .sp-megamenu-parent > li > a .menu-toggler,
    #sp-menu .sp-megamenu-parent > li > a .menu-toggler {

        flex: 0 0 auto !important;
    }


    /* ======================================================
       SOUS-MENUS
       On ne change pas leur fonctionnement.
       ====================================================== */

    #sp-header .sp-megamenu-parent .sp-dropdown,
    #sp-menu .sp-megamenu-parent .sp-dropdown {

        white-space: normal !important;
    }

}

/* === SERVICE-INFORMATIC : MENU RESPONSIVE 2 LIGNES - FIN === */