.img-projet{
    width: 100%;
    height: 400px;
    background-image: url(../img/Prog/n-1148820-scaled.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.descr-all > h1 {
    text-align: center;
    color: white;
}

.text-projet > h2 {
    text-align: center;
    color: white;
}

.text-projet ul{
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.text-projet ul li {
    padding: 10px;
}

.img-projet h1{
    font-size: 60px;
    color: #2efc5a;
    opacity: 0.7;
}

.text-projet li,p{
    font-size: 19px;
}

#perso > p {
    padding: 5px;
    text-align: justify;
}

.text-projet{
    flex-basis: 900px;
    text-align: justify;
}

main{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 120px;
}

p, li, h1{
    color: white;
}

/* Couleur pour les liens dans le texte */

p a {
    color: gray;
}

#img_mach_learning {
    display: flex;
    justify-content: center;
    gap: 20px;
}

#img_mach_learning output{
    width: 30px;
    color: #52ac58;
    writing-mode: vertical-rl;
    text-align: center;
}

#img_mach_learning img, #img-nettoyage{
    width: 700px;
    height: 500px;
}

.link-projet{
    display: flex;
    justify-content: space-around;
}

.link-projet div a{
    font-size: 20px;
    text-decoration: dashed;
    color: white;
}

.link-projet div a:hover{
    text-decoration: underline;
}

.link-projet #link-class, #link-sys{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 5px;
    border: 4px solid #419290;
    border-radius: 20px;
}

.link-projet img, #link-sys img{
    height: 80px;
}

#link-sys, #link-class{
    width: 300px;
    height: 100px;
}

/* ==== AJOUT POUR LE BLOC MEGA-SAE ==== */

.mega-description {
    text-align: justify;
    color: white;
    font-size: 19px;
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
}


#megaSAE {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}


#sae-net > div{
    display: flex;
    justify-content: center;
}

#sae-net img {
    max-width: 700px;
}

#sae-net{
    max-width: 90%;
}


#img-mega-sae {
    max-width: 300px;
    height: auto;
}

/* Pour que le paragraphe en dessous soit bien espacé */
.text-projet p {
    margin-top: 1rem;
    text-align: justify;
}

@media screen and (max-width: 1200px) {

    #img_mach_learning img, #img-nettoyage{
        width: 500px !important;
        height: 350px;
    }

    .descr-all{
        display: flex;
        gap: 50px;
        flex-direction: column;
    }

    section{
        justify-content: center;
    }

    #mega, #sae-net {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #megaSAE {
        flex-direction: column;
        align-items: center;
    }

    #sae-net img {
        max-width: 40%;
        height: 100px;
    }

    #img-mega-sae {
        max-width: 80%;
    }

    .text-projet {
        width: 90%;
        flex-basis: auto;
    }

}

@media screen and (min-width: 1200px) {

    .descr-all{
        display: flex;
        gap: 80px;
        flex-direction: column;
    }

    #perso, #class-java{
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    #mega .text-proje, #sae-net .text-projet {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
    }

    #perso {
        gap: 10%;
        justify-content: center;
        margin: 0px 0px 50px 0px;
    }

}