/* === PARTIE NAV === */

body, html {
    padding: 0 0 0 0;
    
}

#fondrectangle{
    height:90px;
    background-image:url("../images/FondRectangle.svg");
    background-position: top;
    background-size:cover;
    position:relative;
    z-index:0;
}

#fondnav2,#fondnav2 path{
    width:100%;
    margin-top:-0.4px;
}

#navtest{
    top:0;
    width:100%;
    position:absolute;
    margin-top:90px;
    z-index:1;
}

#navtest li{
    padding-top:3%;
    float:right;
    list-style: none;
    text-transform:uppercase;
    margin-right:3%;
}

#navtest li:first-of-type{
    margin-right:17%;
}

#navtest a{
    font-size: 18px;
    text-transform: uppercase;

    color: rgb(var(--coconut));
    text-decoration: none;

    border-bottom: 5px solid rgba(var(--coconut), 0);
    transition-duration: 0.1s;
    font-family: "JosefinSans-SemiBold";
    
}
#navtest a:hover {
    /* text-decoration: underline; */
    border-bottom: 4px solid rgb(var(--coconut));
 }

 #navtest a:visited {
    color: rgb(var(--coconut));
 }


/* ___ PARTIE PLONGEE ___ */

#laPlongee{
    margin-left:5%;
    margin-top:-5%;
}

#laPlongee>p{
    margin-left:1%;
    margin-top:2%;
    width:50%; 
}

#laPlongee li{
    width:50%;
}


/* ==== PARTIE DECO PLONGEE ==== */
#DECO{
    width:45%;
    position:absolute;
    right:-5%;
    margin-top:5%;
}

#plongeur{
    margin-left:-10%;
    width:90%;
}

#bulles{
    width:15%;
    margin-top:-15%;
    position:absolute;
    margin-left:20%;
    transform:scaleX(-1);
}

/* ==== NIVEAUX ==== */
#Niveaux{
    margin-top:13%;
    position:relative;
    z-index:5;
    margin-top:-1229px;
}

#Niveaux h1{
    margin-left:5%;
}

#fond{
    width:100%;
    background-repeat: no-repeat;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
    -moz-opacity:0.4;
    -khtml-opacity: 0.4;
    opacity: 0.4;
    background-image:url("../images/FONDDISCIPLINES3.svg");
    background-size:cover;
    height:1229px;
    margin-top:11%;
    position:relative;
    z-index:2;
    
}

#bapteme{
    left:0;
    margin-top:20%;
    position:absolute;
    z-index:4;
}


/* ==== Colonnes contenus niveaux ==== */

#colonnePrincipale{
    width:95%;
    margin:auto;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content: right;
    
}

#colonnePrincipale>div{
    display:flex;
    flex-direction:column;
    
}

#colonnePrincipale>div#colonneM{
    width:45%;
    margin-right:10%;
    margin-bottom:40%;
}


#colonneM>div{
    background-color:rgba(255,255,255,0.93);
    box-shadow: 17px 19px 84px 0px rgba(0, 0, 0, 0.25);
    padding:7%;
    border-radius:15px;
    margin-top:13%;
}



#colonneM>div#Photo1{
    width:95%;
    float:left;
    
    background-image:url("../images/NAP/8V1A0050.jpg");
    background-position:left;
    background-size:cover;
    height:380px;
}

#colonneM>div#Photo2{
    width:95%;
    float:left;
    margin-left:10%;
    margin-right:-10%;
    background-image:url("../images/NAP/8V1A0148.jpg");
    background-position:right;
    background-size:cover;
    height:400px;
}



#Photo1 h2, #Photo2 h2{
    margin-top:300px;
    bottom:0;
    margin-left:75%;
    margin-right:3%;
    float:right;
    color:white;
}

#EauLibre h2{
    margin-top:280px;
}


#colonneD>div>p, #colonneD>div>h2{
    color:rgb(var(--coconut));
}

#colonnePrincipale>div#colonneD>#NATURE{
    margin-top:100%;
}

#colonnePrincipale>div>div>a{
   text-decoration:none;
   padding-top:15px;
   float:right;
   border-bottom: 2px solid rgb(var(--coconut));
}

#colonnePrincipale>div>div>h2{
    padding-bottom:3%;
 }

#colonnePrincipale>div>div>a:hover{
    border-bottom: 2px solid rgb(var(--relaxationGreen));
 }



#horaires{
    width:60%;
    clear:both;
    margin-left:5%;
    margin-top:0%;
    margin-bottom:10%;
}


#calendar{
    height: calc(60vw/1.77);
    margin-top:3%;
    margin-left:5%;
    width:100%;
    margin-right:3%;
    margin-bottom:10%;
}


/* ====== ELEMENT EXCLUSIF PC ====== */

@media only screen AND (min-width: 1030px) {
    .croix{
        display:none;
    }
    

    #colonnePrincipale>div#colonneD{
        right:1%;
    }
}



/* ====== MOBILE ======*/

@media only screen AND (max-width: 1030px) {
    #fondrectangle{
        height:70px;
    }

    #navtest li:first-of-type{
        margin-right:14%;
    }

    #navtest{
        margin-top:50px;
    }

    #colonneM>div{
        margin-top:15%;
        margin-bottom:10%; 
    }

    #Niveaux>h1{
        margin-bottom:10%;
    }

    #bapteme{
        display:none;
    }

    #colonnePrincipale{
        width:90%;
        margin:auto;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:space-evenly;
    }
    
    #colonnePrincipale>div#colonneM{
        display:flex;
        align-items:center;
        flex-direction:column;
        width:90%;
        margin:auto;
    }


    #colonneM>div#Photo1{
        float:none;
        margin-left:0;
        margin-right:0;
        width:100%;
        background-position:right;
    }
    
    #colonneM>div#Photo2{
        float:none;
        margin-left:0;
        margin-right:0;
        width:100%;
        background-position:center;
    }


    #bapteme{
        margin-top:30%;
    }
 
    
    
    /* ==== BOUTON RIFAA ET AUTRES / MOBILE ==== */
#colonnePrincipale>#colonneD{
        position:absolute;
        order:2;
    }

    #colonneD>div{
        background-color:rgba(70, 140, 189,0.7);
        box-shadow: 17px 19px 84px 0px rgba(0, 0, 0, 0.25);
        padding:0% 30px 0% 30px;
        border-radius:40px;
        margin-top:13%;
        width:80%;
    }

    

    #colonnePrincipale>div#colonneD{
        top:0;
        margin:auto;
        width:90%;
    }

    #colonnePrincipale>div#colonneD>#NATURE{
        width:100%;
        position:relative;
        margin:auto;
        margin-right:-50%;
        margin-top:15%;
        
    }


    #colonneD>div>p{
        display:none;
    }

    

   

    #colonneM{
        order:1;
    }

    .fermer{   
        width:40px;
        float:right;
        padding-top:25px;
        
        position:absolute;
        top:0px;;
        right:20px;
    }

    .croix{
        
        padding-right:5px;
        width:100%;
        width:100%;
        color:white;
    }



    #horaires{
        width:90%;
        clear:both;
        padding-right:5%;
        margin-top:10%;
        
    }
    
    #calendar{
        height: calc(80vw/2.35);
        margin-top:3%;
        width:100%;
        margin:auto;
        margin-right:3%;
        margin-bottom:10%;
    }
}







/* ====== MEDIQ QUERIES ADAPTATION MOBILES ====== */


@media only screen AND (max-width: 800px) AND (min-width: 600px) {
    #bapteme{
        width:50%;
    }
    #plongeePro{
        width:50%;
    }

    #horaires{
        clear:both;
        padding-right:5%;
    }
    
    #calendar{
        height: calc(80vw/2.35);
        margin-top:3%;
        width:100%;
        margin:auto;
        margin-right:3%;
        margin-bottom:10%;
    }
}


@media only screen AND (max-width: 750px){
    #PLONGEUR{
        width:20%;
    }

    #Niveaux>h2{
        margin-bottom:10%;
    }

    #laPlongee>p,#laPlongee li,#textelieux{
        width:80%; 
    }

    #plongeur{
        width:120%;
    }

    #DECO{
        width:70%;
        margin-top:35%;
        right:-35%;
    }

    #fondDECO{
        position:absolute;
        width:100%;
        max-width:100%;
        height:100%;
        left:0;
        overflow-x:hidden;
    }
}

@media only screen AND (max-width: 600px){
    #bapteme{
        margin-top:60%;
        width:70%;
    }

    #plongeePro{
        margin-top:-230%;
        width:70%;
    }   

    #navtest li:nth-child(3)>a{
        display:none;
    }

    #horaires{
        margin-top:25%;
    }
}

@media only screen AND (max-width: 550px){ 
    #navtest li:nth-child(3){
        margin-right:8%;
    }

    #Niveaux{
        margin-top:-1150px;
    }
    
}

@media only screen AND (max-width: 500px){
    #laPlongee{
        margin-top:15%;
        
    }


    #navtest li:nth-child(2){
        margin-left:7%;
    }

    #navtest li:first-of-type{
        margin-right:15%;
        margin-top:2%;
    }

    #navtest li:nth-child(2){
        clear:both;
        margin-right:14%;
        margin-top:2%;
    }

    #navtest li:nth-child(2) a{
        color:rgba(var(--Mulberry));
    }

    #navtest li:nth-child(2) a:hover{
        border-bottom: 4px solid rgb(var(--Mulberry));
    }

    #navtest a:hover {
        /* text-decoration: underline; */
        border-bottom: 4px solid rgb(var(--coconut));
     }
    
     #navtest a:visited {
        color: rgb(var(--coconut));
     }

     
}

@media only screen AND (max-width: 400px){
    #colonnePrincipale>div#colonneM{
        width:90%;
    }

    #horaires{
        margin-top:35%;
    }
}