/* ___ PARTIE GROUPE ___ */

/* FOND */

#PARTIEGROUPE{
    background: linear-gradient(0.75turn,#3A85EA, #56A4CD);
    height:50%;
}
#fondVague1{
    position:absolute;
    top:0px;
    width:100%;
    z-index:0;
    pointer-events: none;
}



#fondVague1 path{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    min-height:400px;
    pointer-events: none;
   
}

#photoplongee{
    position:absolute;
    z-index:3;
    left:0;
    width:100%;
    top:0;
    pointer-events: none;
}

/* textes groupes */
#legroupe{
    position:absolute;
    z-index:1;
    margin-left:5%;
    margin-top:5%;
}

#texteclub{
    width : 45%;
    padding-top:0%;
    text-align: justify;
}



/* BULLES */
#groupe2{
    margin-top:34%;
    
}

#bulles{
    margin-left:4%;
}


#logo{
    margin-left:5%;
    margin-top:6%;
    float:left;
    width:20%;
}

#txtlogo{
    float:left;
    margin-left:10%;
    width : 60%;
    margin-top:10%;
    text-align: justify;
}


.vide{
    clear: both;
    display:block;
    height:5px;
}


/* PARTIE VIDEO */
#partvideo{
    margin-left:5%;
    margin-top:8%;
}

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

#lienvideo{
    padding-top:3%;
    float:left;
    width:30%;
}

#lienvideo p{
    display:block;
    margin-left:7%;  
}

#lienvideo a{
    color: rgba(var(--indigoDye));
    margin-left:2%;
}

#lienvideo a:visited{
    color: rgba(var(--Mulberry));
    margin-left:2%;
}

#lienvideo p:first-of-type{
    margin-top:10%;  
}

#lienvideo p:last-of-type{
    margin-bottom:10%;  
}

table
{
    border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
    margin-left:7%;
    margin-bottom:10%; 
    width:60%;
}
td
{
    text-align:center;
    border: 1px solid black;
    padding:5px;
}

/* PARTIE EQUIPEMENT*/

#EQUIPEMENT{
    height:50%;
    width:100%;
}

#titreequipement{
    clear:both;
    margin-bottom:10%;
    margin-left:5%;
}

#fondequipement{
    margin-top:-20%;
    margin-bottom:60%;
    z-index:0;
}

#vague2{
    position:absolute;
    width:100%;
    left:0;
    z-index:1;
}

#vague3{
    position:absolute;
    display:none;
}

#algues{
    position:absolute;
    width:100%;
    right:0;
    z-index:3;
    margin-top:-7.3%;
    pointer-events:none;
}

#photopiscine{
    position:absolute;
    z-index:3;
    right:0;
    width:100%;
    pointer-events: none;
}

#photopiscine1{
    position:absolute;
    z-index:0;
    left:0;
    width:100%;
    pointer-events: none;
}


/* CONTENU EQUIPEMENTS */
#partieequipement{
    position:absolute;
    z-index:5;
    width:80%;
    left: 0;
    right: 0;
    margin: auto;
}


#content{
    clear:both;
    display:block;
    width:100%;
}
#lapiscine{
    width:45%;
    float:right;
    text-align:justify;
    margin-top:-27%;
}

#leBulo{
    width:45%;
    text-align:justify;

    margin-top:-5%;
}

#leBulo p, #lapiscine p{
    width:90%;
    
    color:black;
    background-color:rgba(255,255,255,0.95);
    box-shadow: 17px 19px 84px 0px rgba(0, 0, 0, 0.25);
    padding:10% 30px 10% 30px;
    border-radius:15px;
}

#leBulo h2{
    float:right;
}

#leBulo p{
    float:right;
    
}







/* L'EQUIPE */
#Equipe{
    clear:both;
    display:block;
    margin-top:700px;
    margin-bottom:15%;
}

#titreequipe{
    margin-left:19%;
}

#iconsequipe{
	margin-top: 5%;
	margin:auto;
	display: flex;
    align-items:center;
	width: 70%;
	flex-direction: column;
	flex-wrap: nowrap;
	max-height: 60%;
}

#iconsequipe>div{
	width: 60%;
	height: 15%;
	margin-bottom: 5%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
    justify-content: center;
}

#lead>div{
    background-color:rgba(var(--SN1));
}

#membres>div, #membresspe>div{
    background-color:rgba(var(--Mulberry));
}

#iconsequipe>div>div{
	width: 18vh;
	height: 18vh;
	border-radius: 50%;
	margin-right: 3%;
	margin-top: 5%;
    display:flex;
    align-items: center;
	justify-content:center;
}

/*.troislignes{
    margin-top:2vh;
    margin-bottom:5vh;
}*/
.titrelong{
    font-size: 2.3vh;
}

#iconsequipe>div>div>p{
	font-size: 2.5vh;
	color: white;
    text-align: center;
}

#titrereponsables{
    margin-left:-2%;
}

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

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

    #fondVague2{
        display:none;
    }
    
    #photobateau{
        float:right;
        border-radius:20px;
        width:35%;
        margin-right:10%;
        margin-top:-23%;
        background-image:url("../images/index/BULO.jpg");
        background-size: cover;
        box-shadow: 17px 19px 84px 0px rgba(0, 0, 0, 0.25);
    }
    
    #photobateau h2{
        margin-top:50%;
        bottom:0;
        margin-left:75%;
        margin-right:3%;
        float:right;
        color:white;
    }

}



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

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

    table {
        width: 100%;
    }

    /* ========= FOND VAGUE ============ */
    #fondVague2{
        position:absolute;
        top:0px;
        width:100%;
        z-index:0;
        pointer-events: none;
        margin-top:-40%;
    }
    
    #fondVague1{
        display:none;
    }

    /* ========= MENU ET NAV ============ */
    #legroupe{
        margin:auto;
        width:80%;
        margin-left:10%;
        margin-top:3%;

    }

    #groupe2{
        margin-top:73%;
    }

    #bulles{
        position:absolute;
        z-index:10;
        margin-top:7%;
    }

    #photoplongee{
        display:none;
    }
    
    #logo{
        float:right;
        margin-right:10%;
        
    }

    #texteclub{
        width:100%;
        
    }

    #txtlogo{
        clear:both;
        margin-left:10%;
        width : 80%;
        margin-top:7%;
        margin-bottom:7%;
    }
    
    #video{
        height: calc(80vw/2);
        margin-top:7%;
        margin-left:10%;
        width:80%;
        margin-right:3%;
        margin-bottom:10%;
    }
    
    #lienvideo{
        padding-top:4%;
        width:70%;
        margin-bottom:10%;
    }
    
    #lienvideo p{
        display:block;
        margin-left:7%;  
    }
    
    #lienvideo a{
        margin-left:2%;
    }
 
    #photopiscine{
        display:none;
    }


    /*=== EQUIPEMENT ===*/
    #EQUIPEMENT{
        height:50%;
        width:100%;
    }
    
    #titreequipement{
        clear:both;
        margin-bottom:10%;
        margin-left:5%;
    }
    
    #fondequipement{
        margin-top:-17%;
        margin-bottom:60%;
        z-index:0;
    }
    
    #vague2{
        position:absolute;
        width:100%;
        left:0;
        z-index:1;
    }
    
    #algues{
        position:absolute;
        width:100%;
        right:0;
        z-index:3;
        margin-top:-7.3%;
        pointer-events:none;
    }

    /* CONTENU EQUIPEMENT */
    #vague3{
        display:block;
        position:absolute;
        width:100%;
        left:0;
        z-index:1;
    }
    
    #vague2{
        position:absolute;
        display:none;
    }

    #algues{
        display:none;
    }

    #partieequipement{
        width:95%;
        left: 0;
        right: 0;
        margin: auto;
        position:relative;
    }

    #content{
        width:100%;
        display:flex;
        flex-direction:column;
        justify-content: center;
        align-items:center;
    }

    #leBulo h2{
        float:left;
    }

    #leBulo p, #lapiscine p{
        width:100%;
    }

    #lapiscine p{
        margin-bottom:17%;
    }

    #lapiscine h2{
        float:right;
        margin-top:-10%;
    }

    .texteclub{
        width : 100%;
        padding-top:3%;
    }

    #lapiscine{
        width:70%;
        text-align:justify;
    }
    
    #leBulo{
        width:70%;
        text-align:justify;
    }

    #photobateau{
        margin:auto;
        border-radius:20px;
        width:70%;
        background-image:url("../images/index/BULO.jpg");
        background-size: cover;
        box-shadow: 17px 19px 84px 0px rgba(0, 0, 0, 0.25);
    }
    
    #photobateau h2{
        margin-top:50%;
        bottom:0;
        margin-left:75%;
        margin-right:3%;
        float:right;
        color:white;
    }



    /* VIDEO */
    #video{
        
        margin-left:10%;
        margin-right:auto;
    }


    /* EQUIPE */
    #iconsequipe>div{
        width: 100%;

    }
    #Equipe{
        clear:both;
        display:block;
        margin-top:15%;
        margin-bottom:15%;
        position:relative;
        z-index:10;
    }

    #titreequipe{
        margin-left:5%;
    }
}

    /* == LIENS == */

    #txtlogo a{
        color: black;
        text-decoration:none;
        padding-top:0px;
        float:none;        
    }
    
    #txtlogo a:hover {
        /* text-decoration: underline; */
        border-bottom: 2px solid rgb(var(--relaxationGreen));
    }

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

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


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

@media only screen AND (max-width: 1030px) AND (min-width: 550px) {
    #fondVague2{
        margin-top:-65%;
    }

    #groupe2{
        margin-top:50%;
    }

}

@media only screen AND (max-width: 1030px) AND (min-width: 650px) {
    #fondVague2{
        margin-top:-75%;
    }

}

@media only screen AND (min-width: 1030px) AND (max-width: 1400px) {
    table{
        display:none;
    }

}

@media only screen AND (max-width: 416px){
    #iconsequipe>div>div{
        width: 15vh;
        height: 15vh;
    }

    #iconsequipe>div>div>p{
        font-size: 2.3vh;
    }

}

@media only screen AND (max-width: 400px){
    #fondVague2{
        margin-top:-5%;
        
    }
    #groupe2{
        margin-top:105%;
    }

}