/*GENERAL*/
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-haut {
    z-index: 2;
    position: relative;
    margin-top: 180px;
    padding-bottom: 10px;
    width: 100%;
    background: linear-gradient(#000030, #640065);
}
.degrade-bas {
    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%;
}

/*PROGRAMME*/
.illustration {
    z-index: 1;
    position: absolute;
    width: 100%;
    top: 1250px;
    left: 0;
}
.illustration2 {
    z-index: 1;
    position: absolute;
    width: 60%;
    left: 20%;
    top: 2050px;
}
.i4 {
    /*position: absolute;*/
    margin-top: 40px;
    width: 40%;
    margin-left: auto;
    margin-right: auto;
}
.groupe {
    z-index: 3;
    width: 20%;
    align-self: start;
    border: solid 10px #320047;
    background: #320047;
}
.groupe:hover .groupe2:hover {
    border: solid 10px #640065;
    background: #640065;
}
.groupe2 {
    z-index: 2;
    width: 40%;
    margin-right: auto;
    margin-left: auto;
}
.groupe3 {
    width: 26%;
    border: solid 10px #320047;
    background: #320047;
}
.groupe:hover {width: 60%;}
.groupe2:hover {width: 50%;}
/*.groupe3:hover {width: 30%;}*/
.groupeIMG {
    width: 100%;
}
.d {
    text-align: justify;
    font-size: clamp(5px,2vw,18px);
    margin: 20px;
}
.anim {
    animation-duration: 5s;
    animation-name: appears;
}
.gF {
    position: absolute;
    top: 10px;
    right: 10px;
}
.gF2 {
    position: absolute;
    top: 10px;
    right: 10px;
}
.groupes {
    height: 500px;
    display: flex;
    justify-content: space-around;
    margin-left: 5%;
    margin-right: 5%;
}
.groupes2 {
    /*height: fit-content;*/
    padding-bottom: 450px;
    margin-left: 0;
    margin-right: 0;
}
.groupes3 {
    display: flex;
    justify-content: space-around;
    margin-left: 20%;
    margin-right: 20%;
    height: 500px;
}
.button {
    z-index: 5;
    background: #640065;
    color: white;
    border: solid 5px #000030;
    position: fixed;
    font-size: clamp(6px,2vw,20px);
    padding: 10px;
    top: 5%;
    right: 5%;
    border-radius: 10px;
    width: 10%;
}
.button2 {
    background: #640065;
    font-size: clamp(6px,8vw,20px);
    color: white;
    border: solid 5px #000030;
    padding: 10px;
    border-radius: 10px;
    margin-right: auto;
    margin-left: auto;
    width: 20%;
}

/*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-haut {margin-top: -95px;}
}

@media only screen and (max-width: 800px) {
    .groupes {
        flex-direction: column;
        height: fit-content;
        /*height: 800px;*/
    }
    .groupes3 {
        flex-direction: column;
        height: fit-content;
        /*height: 800px;*/
    }
    .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) {
    .f {
        width: 250px;
        margin-bottom: 0;
    }
    .logo {
        width: 200px;
        top: 10px;
    }
    .degrade-haut {
        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;}
}