/***************************
**   TABLE DES MATIERES   **
****************************
**                        **
** 1. DIMENSIONS          **
** 2. POSITIONNEMENT      **
** 3. MARGES              **
** 4. FONTS               **
** 5. BACKGROUND          **
** 6. LIST                **
** 7. SHADOW              **
** 8. BORDER              **
** 9. RESPONSIVITE        **
** 10. TRANSITION          **
** 11. ANIMATION          **
**                        **
***************************/


/***************************
**     1.DIMENSIONS       **
***************************/

.btn-navigation {
    width: 3.25em;
    height: 2.25em;
}

.btn-navigation .barre {
    width: 30px;
    height: 3px;
}

.navigation-burger {
    height: 100%;
}

.ombre{
    height: 100%;
    width: 100%;
}

/***************************
**    2.POSITIONNEMENT    **
***************************/

.btn-navigation {
    position: fixed;
        right: 40px;
        top: 37px;
    
    z-index: 200;
}

.btn-navigation .barre {
    position: relative;
        left: .7em;
        top: .5em;
}

.navigation-burger {
    position: fixed;
        right: 0;
        top: 0;
    
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    
    z-index: 150;
}

.navigation-burger.isOpen{
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
}

.navigation-burger ul {
    position: absolute;
        top: 50%;
    
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-left{
    transform: translateX(-20%);
}

.ombre{
    position: fixed;
        top: 0;
        left: 0;
    
    z-index: -10;
}

.ombre-on{
    z-index: 101;
}

/***************************
**        3.MARGES        **
***************************/

.navigation-burger {
    padding: 0 10px;
}

.navigation-burger ul {
    padding: 0;
}

.navigation-burger ul a {
    margin: 20px 0;
}

.navigation-burger ul a li {
    padding: .5em 0 .5em .1em;
}

.btn-navigation .barre {
    margin-top: 3px;
}

/***************************
**        4.FONTS         **
***************************/

.btn-navigation {
    cursor: pointer;
}

.navigation-burger ul a li {
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 20px;
    letter-spacing: .15em;
    font-weight: 800;
}

.navigation-burger ul a li:hover {
    color: #ff6e66;
    font-size: 1.9em;
}

.ombre-on{
    cursor: pointer;
}

/***************************
**      5.BACKGROUND      **
***************************/

.btn-navigation {
    background-color: transparent;
}

.btn-navigation:hover{
    background-color: rgba(255, 110, 102, 0.4);
}

.btn-navigation .barre {
    background-color: rgba(25,25,25,.95);
}

.btn-navigation .barre.isWhite{
    background: #fff;
}

.navigation-burger {
    background-image: linear-gradient(to right top, #8c8c8c, #69737c, #3d5e62, #224838, #222e07);
}

.navigation-burger ul, .navigation-burger ul li{
    background: transparent;
}

.content-left{
    background: rgba(25,25,25,.8); 
}

.ombre-on{
    background: rgba(25,25,25,.5); 
}

.all-content {
    content: none;
}

/***************************
**         6.LIST         **
***************************/

ol, ul {
    list-style: none;
}

/***************************
**        7.SHADOW        **
***************************/

.navigation-burger ul a:hover {
    box-shadow: -4px 0 0px #ff6e66;
}

.navigation-burger ul a li:hover {
    text-shadow: inset 6px 6px 6px #ff6e66;
}

/***************************
**        8.BORDER        **
***************************/

.btn-navigation {
    border-radius: 5px;
}

.btn-navigation:hover{
    border-radius: 12px;
}

/***************************
**     9.RESPONSIVITE     **
***************************/

/*Rendre le contenu visible selon la taille
* Sans bootstrap
*/
/*
@media (min-width: 46em) {
    .btn-navigation{display: none;}
    .navigation-burger{display: none;}
    .navigation-fixe{display: flex;}
}

@media (max-width: 46em){
    .btn-navigation{display: block;}
    .navigation-burger{display: flex;}
    .navigation-fixe{display: none;}
}*/

.navigation-burger{
    overflow-x: hidden;
    overflow-y: auto;
}


/***************************
**     10.TRANSITION      **
***************************/

.btn-navigation {
    transition: all 1.2s ease-out;
}

.btn-navigation .barre {
    transition: all .4s ease-out;
    -webkit-transition: all .4s ease-out;
}

.navigation-burger {
    transition: transform .6s ease-out;
    -webkit-transition: transform .6s ease-out;
}

.navigation-burger ul a {
    transition: all .2s ease-out;
}

.navigation-burger ul a li {
    transition: all .2s ease-out;
}

.all-content {
    transition: all 1s;
}

.ombre{
    transition: all 1.5s;
}

/**************************
**     11.ANIMATION      **
**************************/

.btn-navigation{
    opacity: 0;
    animation: slide-left 1.5s .3s cubic-bezier(0,0,0,1.2) forwards;
}
@keyframes slide-left{
    0%{
        transform: translateX(100%);
        opacity: .2;
    }
    100%{
        transform: none;
        opacity: 1;
    }
}

/*Barre du menu burger*/
/*Classe rajouté avec le JS*/
.b-a1, .b-a2, .b-a3{
    margin-left: 15%;
    width: 33% !important;
}

.b-a1{
    transform-origin: left;
    transform: rotateZ(45deg);
}

.b-a3{
    transform-origin: left;
    transform: rotateZ(-45deg);
}

.b-a2{
    opacity: 0;
}

/***************************
****************************
***************************/