/* === 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:13%;
}

#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%;
}

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

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

#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/FOND\ DISCIPLINES2.svg");
    background-size:cover;
    height:2880px;
    margin-top:11%;
    position:relative;
    z-index:2;
}

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

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

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

#colonnePrincipale>div{
    display:flex;
    align-items:center;
    flex-direction:column;
    width:30%;
}

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

#colonnePrincipale>div>#RIFAP{
    margin-top:93%;
}

#colonnePrincipale>div>#INITIATEUR{
    margin-top:20%;
}

#colonnePrincipale>div>#NITROX{
    margin-top:10%;
}

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


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

#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));
 }


/* ==== LIEUX DE PLONGEES ==== */

/* == TEXTE == */
#lieuxDePlongee{
    margin-left:7%;
    margin-bottom:10%;
    
}

#lieuxDePlongee>div{
    float:left;
}

#lieuxDePlongee>div.vide{
    clear:both;
    width:100%;
    height:15px;
}

#textelieux{
    width:33%;
    
}

#textelieux>p{
    margin-left:1%;
    padding-top:5%;
    clear:both;
}

#textelieux>h2{
    float:right;
}

#textelieux a{
    color: black;
    text-decoration:none;
    padding-top:0px;
    float:none;
    
}

/* == LIENS == */

#textelieux a:hover {
    /* text-decoration: underline; */
    border-bottom: 2px solid rgb(var(--relaxationGreen));
}

#textelieux a:visited {
    color: rgb(var(--glabeGreen));
}

#textelieux a:link {
    color: rgb(var(--glabeGreen));
}


/* == PHOTOS == */



div.photoetp {
    width:60%;
    display:flex;
    flex-direction:row;
    
    
    margin-right:5%;
    justify-content:space-evenly;
}

div.photoetp >span {
    flex: 0 1 230px;
    margin: 0 30px 0 30px;
}

div.photoetp > p {
    flex: 1 1 230px;
    margin: 0 30px 0 30px;
}

div.photoetp >p {
    align-self: center;
    text-align: justify;
}

div.photoetp >p span {
    display: block;
    text-align: right;
}

div.photoetp > span img{
    border-top-right-radius: 114px;
    border-top-left-radius: 114px;
    box-shadow: 10px 10px 12px rgba(0, 0, 0, 0.25);
}

div.photoetp > span h2{
    color: white;
    position: relative;
    top: -45px;
    margin: 0 0 0 10px;
}

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


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


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

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

}



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

@media only screen AND (max-width: 1030px) {

    #horaires{
        width:90%;
    }
    #fondrectangle{
        height:70px;
    }

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

    #navtest{
        margin-top:50px;
    }

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

    #bapteme{
        margin-top:30%;
    }

    #plongeePro{
        margin-top:-150%;
    }    
    
    
    /* ==== BOUTON RIFAP ET AUTRES / MOBILE ==== */
    #colonnePrincipale>#colonneG, #colonnePrincipale>#colonneD{
        position:absolute;
        order:2;
    }

    #colonneG>div, #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%;
        z-index:3;
    }

    #colonneG{
        top:0;
    }

    #colonneD{
        top:0;
    }

    #colonnePrincipale>div>#RIFAP{
        margin-top:900px;
        margin-right:-110%;
    }

    #colonnePrincipale>div>#PE40{
        margin-right:-110%;
    }

    #colonnePrincipale>div>#INITIATEUR{
        float:left;
        margin-left:-90%;
        position:absolute;
    }

    #colonnePrincipale>div>#NITROX{
        margin-right:-110%;
    }

    #colonnePrincipale>div>#INITIATEUR>p{
        
        padding-top:70px;
    }


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


    #colonneG>#INITIATEUR>h2{
        float:right;
    }

   

    #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;
    }


    div.photoetp >span {
        flex: 0 1 230px;
        margin: 0 10px 0 10px;
    }
}




@media only screen AND (max-width: 900px) {
    #textelieux{
        width:70%;
        margin-bottom:7%;
    }

    #textelieux>h2{
        float:none;
    }

    div.photoetp{
        clear:both;
        float:none;
        width:87%;
        margin:auto;
        flex-wrap:wrap;
    }
}




/* ====== 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%;
        
    }
}


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

    #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;
    }
}

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

    
}

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

    #Niveaux{
         padding-bottom:30%;
     }

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

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

    #navtest li:nth-child(2){
        clear:both;
        margin-right:19%;
        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{
        width:90%;
    }
}