/* -----------------------------actus------------------------------------------------------ */
.container_actus{
    display: flex;
    flex-direction: row;
}
.actu_slide{
    display: grid;
    align-content: space-around;
    grid-auto-columns: auto;
    grid-template-rows: 47% 47%;
    grid-auto-flow: column;
    overflow-y: hidden;
    min-width: 90%;
    background-color: var(--gris1);
}
.lien_actus{
    margin-left: 8%;
    width: fit-content;
}
.item_actus{
    width: 400px;
    display: flex;
    flex-direction: row;
    margin-bottom: 30px;
    margin-right: 20px;
}
.item_actus:hover{
    background-color: white;
    box-shadow: 10px 10px 10px rgb(0 0 0 / 10%);
    transition: 0.6s ease;
}
.date_actus{
    display: flex;
    font-family: var(--typo1);
    font-size: calc(36 * var(--res));
    font-weight: bolder;
    color: var(--jaune);
    align-self: center;
    text-align: center;
    writing-mode: vertical-rl;
    text-orientation: sideways;
    height: 27%;
    justify-content: flex-end;
    margin-bottom: 2vmin;
}
.visuel_actus{
    width: 70%;
}
.clip_actu{
    overflow: hidden;
    position: relative;
    height: 20vh;
    min-width: 100%;
    margin-bottom: 10px;
    display: flow-root;
}
.visuel_actus img{
    width: 100%;
}
.texte_actus{
    text-align: justify;
    font-family: var(--typo2);
    color: var(--gris3);
    overflow: hidden;
    max-height: 8.5vh;
}
.lien_catalogue{
    width: 25%;
    display: block;
    text-align: center;
    padding: 1vw;
}
.bouton_actus{
    background-color: var(--bleu);
    color: white;
    font-family: var(--typo1);
    font-size: calc(25*var(--res));
    box-shadow: var(--ombre2);
}
.bouton_actus:hover{
    background-color: var(--jaune);
    border-radius: 10px;
}
/* -----------------------------formations------------------------------------------------------ */
.formation{
    margin-top: var(--margesectiontop);
}
.container_formation{
    display: flex;
}
.sample_formation{
    display: flex;
    flex-direction: row;
    width: 90%;
    min-height: 80vh;
    position: relative;
    box-shadow: var(--ombre2);
    background:  linear-gradient(
        to right,
        #F5F5F5 0%,
        #F5F5F5 100%
    );
}
.liste_niveau{
    width: 30%;
    height: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly; 
}
.lien_niveau{
    width: 80%;
}
.niveau{
    width: 100%;
    background-color: var(--jaune);
    color: #fff;
    font-family: var(--typo1);
    font-size: calc(25 * var(--res));
    text-align: center;
    box-shadow: var(--ombre2);
}
.niveau:hover{
    background-color: var(--bleu);
    border-radius: 10px;
    /* transition: 0.6s ease; */
}
.visuel_thematique{
    display: flex;
    flex-direction: column;
    width: 65%;
    position: relative;
}
.visuel_formation{
    width: 100%;
}
.visuel_formation img{
    width: 100%;
    position: absolute;
    top: -11%;
    right: -8%;
    z-index: 5;
    box-shadow: var(--ombre2);
}
.thematique {
    position: absolute;
    left: 8%;
    top: 81%;
    width: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 15px;
    z-index: 10;
    box-shadow: var(--ombre2);
}
.thematique:hover{
    transform: scale(1.01);
    transition: 1s ease;
}
.lien_thematique{
    width: 25%;
}
.item_thematique{
    display: flex;
    justify-content: center;
    box-shadow: var(--ombre2);
    background-color: var(--bleu);
    font-family:  var(--typo1);
    color: white;
    font-size: calc(20 * var(--res));
    text-align: center;
    padding: 10px;
    margin: 2%;
}
.item_thematique:hover{
    background-color: var(--jaune);
    border-radius: 10px;
}
@media only screen and (max-width: 840px){
    .sample_formation{
        flex-direction: column;
        align-items: center;
    }
    .liste_niveau{
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        height: fit-content;
        width: 90%;
    }
    .lien_niveau{
        width: 24%;
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 30px;
    }
    .visuel_thematique{
        width: 90%;
        align-items: center;
    }
    .thematique{
        position: initial;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        padding: 15px;
        z-index: 10;
        box-shadow: 10px 10px 10px rgb(0 0 0 / 10%);
        align-items: center;
    }
    .lien_thematique{
        width: 45%;
    }
    .item_thematique{
       margin-top: 20px;
       padding: 0.5vw 1vw;
       margin: 5px;
       justify-content: center;
       font-size: 15px;
    }
    .visuel_formation img{
        position: initial;
    }
}
@media only screen and (max-width: 500px){
    .thematique{
        flex-direction: column;
    }
    .lien_thematique{
        width: 84%;
    }
}
/* ----------------------------------------------------------------campus connecté------------------------------ */
.campus_connecte{
    margin-top: var(--margesectiontop);
}
.container_connecte{
    display: flex;
    flex-direction: row;
    position: relative;
}
.sample_connecte{
    display: flex;
    flex-direction: row;
    background-color: var(--gris1);
    box-shadow: var(--ombre2);
}
.visuel_connecte{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.visuel_connecte img{
    width: 100%;
}
.texte_connecte{
    width: 50%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}
.texte_connecte h3{
    font-family: var(--typo2);
    color: var(--gris3);
    width: 60%;
    text-align: justify;
    line-height: var(--hauteurligne);
    margin-bottom: 20px;
}
.texte_connecte p{
    width: 60%;
    font-family: var(--typo2);
    color: var(--gris3);
    text-align: justify;
    line-height: var(--hauteurligne);
}
.lien_connecte{
    /* width: calc(250 * var(--res));  */
    margin: 10vh;
}

@media only screen and (max-width: 1200px){
    .texte_connecte h3{
        width: 100%;
    }
    .texte_connecte p{
        width: 100%;
    }
}
@media only screen and (max-width: 840px){
    .sample_connecte{
        flex-direction: column-reverse;
    }
    .visuel_connecte{
        width: 100%;
        flex-direction: column-reverse;
    }
    .texte_connecte{
        width: 100%;
    }
    .lien_connecte{
        margin: 3vh;
    }
}

/* -------------------------------------vie étudiante---------------------- */
.vie_etudiante{
    margin-top: var(--margesectiontop);
    margin-bottom: 10vh;
}
.container_vie_etudiante{
    display: flex;
    flex-direction: row;
    position: relative;
}
.sample_oeuf{
    display: flex;
    flex-direction: row;
    background:  linear-gradient(
        to right,
        white 0%,
        white 10%,
        #F5F5F5 10%,
        #F5F5F5 100%
    );
    box-shadow: var(--ombre2);
    min-height: 70vh;
}
.visuel_oeuf{
    width: 50%;
    position: relative;
}
.visuel_oeuf img{
    width: 70%;
    position: absolute;
    top: 8%;
}
.texte_oeuf{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    position: relative;
    align-items: flex-start;
}
.logo_oeuf{
    width: 50%;
}
.logo_oeuf img{
    width: 40%;
    position: absolute;
    right: -5%;
    top: -10%;
    transform: rotate(20deg);
}
.megaphone{
    width: 40%;
    align-self: center;
}
.megaphone img{
    width: 40%;
    transform: rotate(343deg);
}
.pitch_oeuf{
    width: 60%;
}
.pitch_oeuf p{
    font-family: var(--typo2);
    color: var(--gris3);
    line-height: var(--hauteurligne);
    text-align: justify;
}

@media only screen and (max-width: 1100px){
    .sample_oeuf{
        min-height: 50vh;
    }
}
@media only screen and (max-width: 840px){
    .sample_oeuf{
        flex-direction: column;
        background: none;
        background-color: var(--gris1);
    }
    .visuel_oeuf{
        width: 100%;
    }
    .visuel_oeuf img{
        position: relative;
        top: 0;
        width: 100%;
    }
    .texte_oeuf{
        width: 100%;
        align-items: center;
    }
    .logo_oeuf img{
        right: 5%;
        top: -21%;
    }
    .pitch_oeuf{
        width: 90%;
        margin: 20px;
    }
}
/* ----------------------------------------Le campus------------------------ */
.campus{
    margin-top: var(--margesectiontop);
    display: flex;
}
.container_campus{
    display: flex;
    flex-direction: column;
    width: 75%;
}
.sample_campus{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.campus_galerie{
    width: 25%;
    display: flex;
    flex-direction: column;
    background-color: white;
    z-index: 10;
    justify-content: center;
}
.campus_galerie img{
    width: 100%;
    margin-bottom: 10px;
}
.campus_texte{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background-color: var(--gris1);
    box-shadow: var(--ombre2);
}
.visuel_campus{
    width: 75%;
}
.visuel_campus img{
    width: 100%;
}
.pitch_campus{
    width: 75%;
}
.pitch_campus p{
    font-family: var(--typo2);
    color: var(--gris3);
    line-height: var(--hauteurligne);
    text-align: justify;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-right: 30px;
}
@media only screen and (max-width: 840px){
    .campus{
        flex-direction: column-reverse;
    }
    .container_campus{
        width: 100%;
    }
    .campus_galerie{
        flex-direction: row;
        justify-content: space-evenly;
        width: 100%;
    }
    .campus_galerie img{
        width: 30%;
    }
    .campus_texte{
        align-items: center;
    }
    .campus_texte p{
        margin-right: 0;
    }
    .visuel_campus{
        width: 95%;
    }
    .pitch_campus{
        width: 95%;
    }
}
/* ----------------------------carte interactive--------------------------- */
.carte_interactive{
    margin-top: var(--margesectiontop);
    display: flex;
    flex-direction: row;
   
}
.container_carte{
    display: flex;
    flex-direction: column;
    width: 50%;
    position: relative;
}
.sample_interactive{
    display: flex;
    flex-direction: row;
    height: 100%;
}
.plan{
    width: 40%;
}
.plan img{
    width: 100%;
    box-shadow: var(--ombre2);
}
.boutons_plan{
    display: flex;
    flex-direction: column;
    width: 75%;
    justify-content: center;
    align-items: center;
}
.lien_carte{
    margin: 1vw;
}


@media only screen and (max-width: 900px){
    .carte_interactive{
        flex-direction: column;
    }
    .container_carte{
        width: 100%;
    }
    .plan{
        width: 90%;
        align-self: flex-end;
    }
    .boutons_plan{
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
    }
    .lien_carte{
        width: 45%;
    }
}
/* ------------------------------------------découverte de Foix------------------ */
.decouverte{
    margin-top: var(--margesectiontop);
    position: relative;
}
.container_decouverte{
    display: flex;
    flex-direction: row;
    position: relative;
}
.sample_decouverte{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: var(--gris1);
    box-shadow: var(--ombre2);
}
.pitch_decouverte{
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 5vw;
}
.pitch_decouverte p{
    font-family: var(--typo2);
    color: var(--gris3);
    line-height: var(--hauteurligne);
    text-align: justify;
    width: 50%;
}
.lien_decouverte{
    margin-top: 5vw;
}

.visuel_decouverte{
    width: 30%;
}
.visuel_decouverte img{
    width: 100%;
}
.galerie_decouverte{
    position: absolute;
    top: 80%;
    left: 5%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 1vw;
    width: 80%;
    background-color: #fff;
    box-shadow: var(--ombre2);
}
.clip_galerie{
    width: 30%;
    max-height: 12.5vw;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.galerie_decouverte img{
    width: 100%;
}
@media only screen and (max-width: 1080px){
    .pitch_decouverte p{
        width: 80%;
    }
    .pitch_decouverte{
        padding-top: 2vw;
    }
    .lien_decouverte{
        margin-top: 2vw;
    }
}
@media only screen and (max-width: 840px){
    .sample_decouverte{
        flex-direction: column-reverse;
    }
    .visuel_decouverte{
        width: 100%;
    }
    .pitch_decouverte{
        width: 100%;
    }
    .pitch_decouverte p{
        width: 95%;
    }
    .galerie_decouverte{
        position: relative;
        width: 100%;
        left: 0;
    }
    .lien_decouverte{
        margin-bottom: 1vw;
    }
    
}
@media only screen and (max-width: 499px){
    .clip_galerie{
        max-height: 19.5vmin;
    }
}
/* --------------------------------transport-------------------------- */

.transport{
    margin-top: calc(1vh + var(--margesectiontop));
 }
 .container_transport{
     display: flex;
     flex-direction: row;
 }
 .sample_transport{
     display: flex;
     flex-direction: row;
     box-shadow: var(--ombre2);
 }
 .carte_transport{
     width: 50%;
     z-index: 10;
 }
 .carte_transport iframe{
     width: 100%;
 }
 .texte_transport{
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: flex-end;
    justify-content: space-around;
    width: 50%;
    background-color: var(--gris1);
 }
 .texte_transport p{
     width: 75%;
     font-family: var(--typo2);
     color: var(--gris3);
     line-height: var(--hauteurligne);
     text-align: justify;
 }

@media screen and (max-width: 840px){
    .sample_transport{
        flex-direction: column;
    }
    .carte_transport{
        width: 100%;
    }
    .texte_transport{
        width: 100%;
    }
    .texte_transport p{
        margin: 2vw 0;
        width: 95%;
    }
}

p, h2, h3, img, a{
    z-index: 10;
}
.grosselettre{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    font-family: var(--typo1);
    font-size: 20vw;
    color: white;
    z-index: 0;
    opacity: 0.5;
}
.grosselettregris{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--typo1);
    font-size: 20vw;
    color: var(--gris1);
    z-index: 0;
    opacity: 0.5;
}
@media screen and (max-width: 840px){
    .grosselettre{
        display: none;
    }
    .grosselettregris{
        display: none;
    }
}