/* =========================================================
   NAVBAR BOOTSTRAP
   DESKTOP : SOUS-MENU AU SURVOL
   MOBILE  : SOUS-MENU AU CLIC
   ========================================================= */


/* =========================================================
   LOGO / NAVBAR
   ========================================================= */

.navbar-brand {
    font-size: 41px !important;
    font-weight: 700;
}


/* =========================================================
   LIENS PRINCIPAUX
   ========================================================= */

.navbar .navbar-nav .nav-link {

    color: #113f7a !important;

    font-size: 18px !important;

    font-weight: 600;

    transition: color 0.2s ease;
}


/* HOVER DES LIENS PRINCIPAUX */

.navbar .navbar-nav .nav-link:hover {

    color: #e8c44c !important;

}
/* =========================================================
   PAGE ACTIVE
   ========================================================= */

.navbar .navbar-nav .nav-link.active {
    color: #e8c44c !important;
}


/* =========================================================
   SOUS-MENU - PAGE ACTIVE
   ========================================================= */

.navbar .dropdown-item.active {
    color: #e8c44c !important;
    background-color: #f5f7fa;
}

.navbar .dropdown-item.active::before {
    transform: scaleY(1);
}

.navbar .dropdown-item.active i {
    color: #e8c44c;
}

/* =========================================================
   DROPDOWN
   STYLE GENERAL
   ========================================================= */

.navbar .dropdown-menu {

    min-width: 220px;

    padding: 8px 0;

    margin: 0;

    background-color: #ffffff;

    border: none;

    border-radius: 8px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);

}


/* =========================================================
   LIENS DU SOUS-MENU
   ========================================================= */

.navbar .dropdown-item {

    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

    padding: 10px 20px;

    color: #333333;

    font-size: 15px;

    font-weight: 500;

    background-color: transparent;

    border-radius: 0;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        padding-left 0.2s ease;

}


/* =========================================================
   ICÔNE DU SOUS-MENU
   ========================================================= */

.navbar .dropdown-item i {

    flex: 0 0 20px;

    width: 20px;

    margin-right: 8px;

    font-size: 18px;

    line-height: 1;

    text-align: center;

    transition: transform 0.2s ease;

}


/* =========================================================
   BARRE JAUNE À GAUCHE
   ========================================================= */

.navbar .dropdown-item::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 3px;

    height: 100%;

    background-color: #e8c44c;

    transform: scaleY(0);

    transform-origin: center;

    transition: transform 0.2s ease;

}


/* =========================================================
   HOVER DES ITEMS DU SOUS-MENU
   DESKTOP
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    .navbar .dropdown-item:hover {

        color: #e8c44c;

        background-color: #f5f7fa;

        padding-left: 25px;

    }


    .navbar .dropdown-item:hover::before {

        transform: scaleY(1);

    }


    .navbar .dropdown-item:hover i {

        transform: translateX(3px);

    }

}


/* =========================================================
   FLÈCHE DU MENU SERVICES
   ========================================================= */

.navbar .dropdown-toggle::after {

    transition: transform 0.25s ease;

}


/* Flèche tournée lorsque Bootstrap considère le menu ouvert */

.navbar .dropdown-toggle[aria-expanded="true"]::after {

    transform: rotate(180deg);

}


/* =========================================================
   =========================================================
   DESKTOP
   ≥ 992px
   SOUS-MENU AU SURVOL
   =========================================================
   ========================================================= */

@media (min-width: 992px) {


    /* -----------------------------------------
       POSITION DU DROPDOWN
       ----------------------------------------- */

    .navbar .nav-item.dropdown {

        position: relative;

    }


    /* -----------------------------------------
       SOUS-MENU CACHÉ
       ----------------------------------------- */

    .navbar .nav-item.dropdown > .dropdown-menu {

        display: block;

        position: absolute;

        top: 100%;

        left: 0;

        margin-top: 0;

        opacity: 0;

        visibility: hidden;

        transform: translateY(-10px);

        pointer-events: none;

        transition:
            opacity 0.25s ease,
            transform 0.25s ease,
            visibility 0.25s ease;

    }


    /* -----------------------------------------
       SOUS-MENU AU SURVOL
       ----------------------------------------- */

    .navbar .nav-item.dropdown:hover > .dropdown-menu {

        opacity: 1;

        visibility: visible;

        transform: translateY(0);

        pointer-events: auto;

    }


    /* -----------------------------------------
       FLÈCHE SERVICES AU SURVOL
       ----------------------------------------- */

    .navbar .nav-item.dropdown:hover
    > .dropdown-toggle::after {

        transform: rotate(180deg);

    }

}


/* =========================================================
   =========================================================
   MOBILE
   < 992px
   SOUS-MENU AU CLIC
   =========================================================
   ========================================================= */

@media (max-width: 991.98px) {


    /* -----------------------------------------
       SECTIONS
       ----------------------------------------- */

    section {

        padding-top: 40px;

        padding-bottom: 40px;

    }


    .py-5 {

        padding-top: 0 !important;

    }


    h3.titre-bloc1 {

        text-align: center;

    }


    .bg-light {

        background-color: #FFFFFF !important;

    }


    /* -----------------------------------------
       NAVBAR
       ----------------------------------------- */

    .navbar {

        padding-bottom: 20px;

    }


    /* -----------------------------------------
       SOUS-MENU MOBILE
       ----------------------------------------- */

    .navbar .dropdown-menu {

        position: static !important;

        width: 100%;

        min-width: 100%;

        margin: 4px 0 8px 0;

        padding: 0;

        background-color: transparent;

        border: none;

        border-radius: 0;

        box-shadow: none;

        /* Bootstrap utilise .show */

        opacity: 0;

        visibility: hidden;

        transform: translateY(-6px);

        pointer-events: none;

        transition:
            opacity 0.25s ease,
            transform 0.25s ease,
            visibility 0.25s ease;

    }


    /* -----------------------------------------
       SOUS-MENU MOBILE OUVERT
       ----------------------------------------- */

    .navbar .dropdown-menu.show {

        opacity: 1;

        visibility: visible;

        transform: translateY(0);

        pointer-events: auto;

    }


    /* -----------------------------------------
       LIENS DU SOUS-MENU MOBILE
       ----------------------------------------- */

    .navbar .dropdown-item {

        display: flex;

        align-items: center;

        width: 100%;

        padding: 11px 15px;

        color: #333333;

        font-size: 15px;

        font-weight: 500;

        background-color: transparent;

        border-radius: 4px;

        transition:
            color 0.2s ease,
            background-color 0.2s ease,
            padding-left 0.2s ease;

    }


    /* -----------------------------------------
       PAS DE BARRE JAUNE SUR MOBILE
       ----------------------------------------- */

    .navbar .dropdown-item::before {

        display: none;

    }


    /* -----------------------------------------
       ICÔNES MOBILE
       ----------------------------------------- */

    .navbar .dropdown-item i {

        flex: 0 0 20px;

        width: 20px;

        margin-right: 8px;

        font-size: 18px;

    }


    /* -----------------------------------------
       APPUI / FOCUS MOBILE
       ----------------------------------------- */

    .navbar .dropdown-item:active,
    .navbar .dropdown-item:focus {

        color: #e8c44c;

        background-color: #f5f7f5;

        padding-left: 20px;

        outline: none;

    }


    /* -----------------------------------------
       SERVICES MOBILE
       ----------------------------------------- */

    .navbar .dropdown-toggle {

        display: flex;

        align-items: center;

        justify-content: space-between;

    }


    /* -----------------------------------------
       FLÈCHE MOBILE
       ----------------------------------------- */

    .navbar .dropdown-toggle::after {

        margin-left: auto;

        transition: transform 0.25s ease;

    }


    .navbar .dropdown-toggle[aria-expanded="true"]::after {

        transform: rotate(180deg);

    }

}


/* =========================================================
   =========================================================
   PETITS TÉLÉPHONES
   < 576px
   =========================================================
   ========================================================= */

@media (max-width: 575.98px) {


    .navbar .dropdown-menu {

        padding-left: 12px;

        border-left: 2px solid #e8c44c;

    }


    .navbar .dropdown-item {

        padding: 10px 12px;

        font-size: 17px;

    }

}