@charset "utf-8";
/* CSS Document */

/**
 * Cette feuille de styles gère XXXXX
 */

/*
==================================================
    Table of Contents / Sommaire
==================================================
    #Mobile (Portrait)  // 320px
    #Mobile (Landscape) // 576px
    #Tablet (Portrait)  // 768px
    #Tablet (Landscape) // 992px
    #Computer           // 1200px+ > 1250 avec scrollbar 
*/

/*
==================================================
    Mobile (Portrait)   // 320px
==================================================
    Pas besoin de déclarer de média queries
*/
button#sidebarCollapse {
    position: fixed;
    z-index:1011;
    width:48px;
    height:48px;
    bottom:15px;
    left:15px;
    background: var(--focus-main);
    border-radius: 50%;
    border:0;
    text-transform: none;
}

button#sidebarCollapse:focus {
    box-shadow: none;
}
.wrapper {
    display: flex;
    align-items: stretch;
}

#sidebar {
    min-width: 100%;
    max-width: 100%;
    background: #FFF;
    height:100vh;
    z-index: 1010;
    position: fixed;
    overflow-y: auto;
    bottom: 0;
    padding-bottom: 3rem;
    padding-top: 1.5rem;
}

#sidebar.active {
    margin-left: -100%;
}

#sidebar ul.components > li > a {
    position:relative;
    float:left;
    width: 100%;
    display: block;
    padding: 0 2rem;
}

#sidebar ul.components > li > a span {
    border-top:1px solid var(--neutral-light);
    padding: 15px 0;
    width: 100%;
    display: inline-block;
    font-weight: 800;
    color:var(--color-main);
}

#sidebar ul.components > li > a:after {
    float:right;
    content: "\f105";
    border: 0 !important;
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    color:var(--neutral-light);
    position: absolute;
    right:2.5rem;
    top:1rem;
}

#sidebar ul.components > li > a[aria-expanded="true"]:after {
    content: "\f107";
}

a.dropdown-toggle + ul > strong {
    width: 100%;
    display: inline-block;
    padding: 0 2rem;
    margin-top: 1rem;
}

a.dropdown-toggle + ul > strong:first-child {
    margin-top: 0;
}

a.dropdown-toggle + ul > strong a {
    text-transform: uppercase;
    line-height: 1.4;
    font-size:.813rem;
    padding: .35rem 0;
    width: 100%;
    display: inline-block;
    color: var(--color-dark);
    border-bottom: 1px solid var(--color-main);
}

a.dropdown-toggle + ul li a {
    width: 100%;
    display: inline-block;
    font-size: .813rem;
    padding: .35rem 2rem;
    color: var(--neutral-main);
}

/**
 * BOUTON ORANGE EN BAS
 */
nav#sidebar .btn-outline-primary {
    letter-spacing: 2px;
}

/*
 * Overlay
 */
#sidebarOverlay {
    position: fixed;
    z-index: 1001;
    top:0;
    right:100%;;
    bottom:0;
    left:0;
    background: var(--color-dark);
    background: rgba(0,0,0,.8);
    opacity:.2;
}

#sidebarOverlay.active {
    right:0;
    opacity:1;
}


#sidebarClose {
    float: right;
    margin: 2rem;
    font-size: 2rem;
    line-height: 1;
}

/**
 * SCROLL BAR
 */
.mCSB_inside>.mCSB_container {
    margin-right: 0;
    padding-bottom: 3rem;
}

.mCSB_scrollTools .mCSB_draggerContainer {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.mCSB_scrollTools .mCSB_draggerRail {
    background-color:var(--neutral-light); 
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width:5px;
    background-color:var(--neutral-dark) !important; 
}

.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
    background-color:var(--neutral-dark) !important; 
    filter: "alpha(opacity=100)";
    -ms-filter: "alpha(opacity=100)";
}

/**
 * NAV SUBLOGO
 */
 .nav.subLogo button,
 .nav.subLogo a {
    border:0;
    background: transparent;
    font-weight:800;
    color:var(--neutral-main);
 }
 
  .nav.subLogo button.dropdown-toggle::after {
    display:none;
  }

 .nav.subLogo .dropdown-menu {
    border:0;
    background: var(--neutral-main);
    color:#FFF;
    padding: 10px !important;
    border-radius: 0 !important;
    opacity:.9;
    font-size:.813rem;
    margin-top:.35rem;
 }
 
 .nav.subLogo .dropdown-menu a {
    color:var(--color-main);
 }

/*
==================================================
    Mobile (Landscape)  // 576px
==================================================
*/
@media screen and (min-width: 576px) {


}/*/mediaquery*/


/*
==================================================
    Tablet (Portrait)   // 768px
==================================================
*/
@media screen and (min-width: 768px) {
a#sidebarCollapse {
    
}

#sidebarCollapse i {
    float: left;
    color:var(--focus-main);
    line-height: 2.8rem;
}

#sidebarCollapse span {
    float: left;
    color:var(--neutral-main);
    margin-left:15px;
}

    .daccueil #sidebarCollapse span {
        color:#FFF;
    }
    
    .daccueil #sidebarCollapse.fixed span {
        color:var(--neutral-main);
    }

#sidebar {
    bottom: auto;
    top: auto;
    right: auto;
    position: fixed;
    min-width: 320px;
    max-width: 320px;
    overflow-y: auto; 
    padding-top: 0;
}

/**
 * NAV SUBLOGO
 */
 .nav.subLogo button,
 .nav.subLogo a {
    padding-left: 15px;
    padding-right: 15px;
 }
 
.daccueil header:not(.OFF) .nav.subLogo .nav-item button,
.daccueil header:not(.OFF) .nav.subLogo .nav-item a {
    color:#FFF;
 }
 
 .daccueil header:not(.OFF) .logo {
    display:none !important;
 }
 
 .daccueil header:not(.OFF) .logo.blanc {
    display:block !important;
 }
 
 .nav.subLogo .dropdown-menu {
    margin-top:1rem;
    min-width: 30vw;
    max-width: 320px !important;
 }
 
    .nav.subLogo .dropdown-menu.show {
        display: -ms-flexbox!important;
        display: flex!important;
     }
 
 .nav.subLogo .dropdown-menu p {
    margin-bottom:0;
 }
 
  .nav.subLogo .dropdown-menu a {
    padding-right: 0;
    text-align: right;
 }
 


 


}/*/mediaquery*/


/*
==================================================
    Tablet (Landscape)  // 992px
==================================================
*/
@media screen and (min-width: 992px) {


}/*/mediaquery*/


/*
==================================================
    Computer    // 1200px+ > 1250 avec scrollbar 
==================================================
*/
@media screen and (min-width: 1200px) {

.nav.subLogo button:hover,
.nav.subLogo a:hover {
    color: var(--focus-main) !important;
    cursor:pointer;
 }
    
a.dropdown-toggle + ul > strong a:hover {
        color: var(--focus-main);
}
    
#sidebar ul.components > li > a:hover {
    background: var(--neutral-pastel);
}

a.dropdown-toggle + ul li a:hover {
    background: var(--neutral-pastel);
}
    
}/*/mediaquery*/