/*
telephone -> @media (max-width: 600px)
tablette  -> @media (min-width: 601px) and (max-width: 1024px)
pc        -> @media (min-width: 1025px)
*/

/* responsive titre et police size et taille police de la nav */

@media (max-width: 600px) {
    .titre {
        font-size: 25px;
        margin: 60px 0 40px 30px;
    }
    .titrep, .titremainProjet {
        font-size: 25px;
        margin: 40px 20px 20px 40px;
    }
    .lien p{
        font-weight: normal;
        font-size: 15px;
    }
}

@media (min-width: 601px) and (max-width: 1024px) {
    .titre {
        font-size: 30px;
        margin: 70px 0 50px 60px;
    }

    .titrep, .titremainProjet {
        font-size: 20px;
        margin: 60px 30px 25px 60px;
    }

}

/* responsive nav de la page principale */
@media screen and (max-width: 789px) {
    nav {
        flex-direction: column;
        align-items: center;

    }
    nav ul {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        padding: 10px 0;
        font-size: 15px;
    }
}

/* responsive premiere page dans la section about me */
@media screen and (max-width: 600px) {
    .aboutme {
        flex-direction: column-reverse;
        text-align: center;
    }
    .tete {
        width: 250px;
        height: 250px;
    }
    .desciptionMoi p {
        font-size: 13px;
    }
}

/*responsive sur les listes de techs*/
@media (max-width: 600px) {
    .technologies {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 10px;
    }

    .imgtech {
        height: 50px;
        width: 50px;
    }
}

@media (min-width: 601px) and (max-width: 1024px) {
    .technologies {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
    }
}

/* responsive dans les images projets */
@media (max-width: 600px) {
    .containProjets {
        grid-template-columns: 1fr; /* une colonne */
        gap: 20px;
        margin: 40px auto;
    }

    .projetBox {
        max-width: 90%;
        height: 160px;
    }
}
@media (min-width: 601px) and (max-width: 1024px) {
    .containProjets {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 25px;
    }

    .projetBox {
        max-width: 250px;
        height: 170px;
    }
}

/* responsive premiere section (presentation) */
@media screen and (max-width: 1350px) {
    .presentationP {
        display: flex;
    }

    .descriptionP .boxD {
        max-width: 550px;
    }

    .imgPresentation {
        height: 400px;
        width: 600px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 1025px) {
    .presentationP {
        display: flex;
        flex-direction: column;
    }

    .descriptionP .boxD {
        max-width: 450px;
    }

    .imgPresentation {
        height: 350px;
        width: 550px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 600px) {
    .titrep {
        font-size: 22px;
        margin: 30px 0;
        text-align: center;
    }
    .presentationP {
        display: flex;
        flex-direction: column;
    }

    .descriptionP .boxD {
        max-width: 270px;
        font-size: 14px;
    }
    .imgPresentation {
        height: 200px;
        width: 320px;
    }
    .logiciel {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .logiciel div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

/* responsive suite section (fonc, gain) */

@media (min-width: 601px) and (max-width: 1024px){
    .feature-section {
        margin-bottom: 180px;
    }
    .feature-content {
        flex-direction: column-reverse;
    }
    .feature-content ul {
        text-align: center;
        font-size: 0.95rem;
        padding-left: 0;
    }
    .slider-container {
        max-width: 350px;
    }
    .slider-1 img {
        width: 350px;
        height: 250px;
    }
}

@media (max-width: 600px) {
    .feature-section {
        margin-bottom: 180px;
    }
    .feature-content {
        flex-direction: column-reverse;
    }
    .feature-content ul {
        font-size: 0.9rem;
    }
    .slider-container {
        max-width: 300px;
        margin: 0;
    }
    .slider-1 img {
        width: 300px;
        height: 200px;
    }
    .feature-content ul li {
        font-size: 13px;
        font-weight: normal;
    }
}


/* responsive du footer */
@media screen and (max-width: 600px) {
    .footer {
        flex-direction: column;
        text-align: center;
    }
    .logof {
        margin: 30px;
    }
}