/*GENERAL*/
.logo-text {
    position: absolute;
    top: 0;
}
h1 {
    padding-top: 120px;
    font-size: clamp(14px,8vw,70px);
    margin-bottom: 0;
    margin-left: 10%;
    text-align: left;
}
h2 {
    font-size: clamp(15px,6vw,45px);
    z-index: 3;
}
h3 {
    -moz-text-size-adjust: 100%;
    margin-bottom: 0;
}
h4 {
    -moz-text-size-adjust: 80%;
    margin: 0;
}
.description {
    font-size: clamp(10px,2vw,30px);
    margin-left: 10%;
    text-align: left;
    margin-right: 10%;
}
body {
    text-align: center;
    margin: 0;
    color: white;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.icon {
    width: 40px;
    height: 40px;
}
.icon:hover {opacity: 0.6;}
.button:hover {background: #320047;}

/*HEADER*/
.f {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -331px;
}
.logo {
    z-index: 3;
    position: absolute;
    width: 560px;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 40px;
}
.degrade {
    z-index: 2;
    position: relative;
    margin-top: 180px;
    padding-bottom: 10px;
    width: 100%;
    background: linear-gradient(#000030, #640065);
}

/*FONDS*/
.bleu {background: #000030;}
.bleu2 {background: #320047;}
.violet {background: #640065;}
.noir {
    background: black;
    width: 100%;
}


/*EDITION*/
.photos {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    margin-left: 5%;
    margin-right: 5%;
}
.photo {
    height: 200px;
    margin: 10px;
}

/*FOOTER*/
a {
    color: white;
    text-decoration: none;
}
.contact {
    background: #000033;
    margin-right: 5%;
    margin-left: 5%;
}
.logoF {width: 15%;}
.e {
    display: flex;
    float: left;
}
.s {
    margin-left: 5px;
    margin-top: auto;
    margin-bottom: auto;
}
.fa {float: right;}
.unabled:hover {opacity: 1;}

/*RESPONSIVE*/
@media only screen and (max-width: 1200px) {
    .icon {
        width: 30px;
        height: 30px;
    }
    .groupe:hover,.groupe2:hover {
        width: 80%;
    }
    .groupe3:hover {
        width: 40%;
    }
    .groupes {
        height: 600px;
    }
    .illustration {
        top: 1150px;
    }
    .i4 {
        margin-top: 0;
    }
}
@media only screen and (max-width: 700px) {
    .f {
        width: 350px;
        margin-bottom: 0;
    }
    .logo {
        width: 280px;
        top: 25px;
    }
    .degrade {margin-top: -95px;}
}

@media only screen and (max-width: 800px) {
    .photo {
        height: 100px;
        margin: 7px;
    }
    .groupes {
        flex-direction: column;
        height: fit-content;
        /*height: 800px;*/
    }
    .groupes3 {
        flex-direction: column;
        height: fit-content;
    }
    .illustration, .illustration2, .i4 {
        visibility: hidden;
        top: 0;
    }
    /*.groupe2 {position: relative}*/
    .groupe {
        /*position: relative;*/
        margin-bottom: 20px;
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
    .groupe2 {
        position: relative;
    }
    .groupes2 {
        height: fit-content;
        position: relative;
        padding-bottom: 0;
    }
}
@media only screen and (max-width: 600px) {
    .button {
        padding: 3px;
        border: 3px solid #000030;
    }
}
@media only screen and (max-width: 350px) {
    .photo {
        height: 50px;
        margin: 4px;
    }
    .f {
        width: 250px;
        margin-bottom: 0;
    }
    .logo {
        width: 200px;
        top: 10px;
    }
    .degrade {
        top: 10px;
    }
}

/*ANIMATION*/
.reveal {
    position: relative;
    transform: translateY(50px);
    opacity: 0;
    transition: 1s all ease;
}
.reveal.active {
    transform: translateY(0);
    opacity: 1;
}
@keyframes appears {
    from {opacity: 0;}
    to {opacity: 1;}
}