header{
    font-size: 8px;
    padding: 0 20px;
    gap: 10px;
    height: 10%;
}

.left,
.right {
    display: flex;
    gap: 10px;
}

/*________________CONTENT BOX________________*/
.content {
    height: 70vh; /* Hauteur de la boîte */
}
/*________________CAROUSEL________________*/
.reponsivecarousel{
    padding-bottom: 50px;
    padding-top: 50px;
    margin-top: 50px;
    margin-bottom: 50px;
}

/*________________PAGE WORK________________*/
/*passage à une colone*/
#project-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;

}

/*________________PAGES PROJECTS________________*/

    .project {
        display: flex;
        flex-direction: column; /* Empile le texte et les images verticalement */
    }

    .projectinfo {
        width: 100%; /* Prend toute la largeur */
        padding: 15px; /* Espacement intérieur */
    }

    .projectgallery {
        width: 100%; /* Prend toute la largeur */
        height: auto; /* Ajuste la hauteur des images */
    }

    .projectimage {
        width: 100%; /* Prend toute la largeur */
        margin-bottom: 15px; /* Espacement entre les images */
    }

    .horizontal-images {
        flex-direction: column; /* Aligne les images verticalement */
        gap: 15px; /* Espacement entre les images */
    }

    .carrouselprojects {
        height: 300px; /* Ajuste la hauteur du carrousel */
    }

/*________________PAGE PLAYGROUND________________*/
/*passage à deux colones*/
#messgalery {
    columns: 2;
}

/*________________PAGE ABOUT________________*/
.about {
        flex-direction: column; /* Empile les éléments verticalement */
    }
    
    .aboutinfo {
        width: 100%; /* Prend toute la largeur en mobile */
        gap: 15px;   /* Espacement augmenté pour la version mobile */
    }

    .abouttext {
        width: 100%; /* Prend toute la largeur en mobile */
        gap: 15px;   /* Espacement augmenté pour la version mobile */
    }

    .aboutlinks {
        width: 100%; /* Garde toute la largeur */
        flex-direction: column; /* Assure l'alignement vertical des liens */
    }

    .contact,
    .details {
        flex-direction: column; /* Aligne les éléments en colonne */
        padding: 15px;          /* Augmenter l'espace autour */
        gap: 10px;              /* Espacement entre les éléments */
    }

    .contact p,
    .details p {
        width: 100%; /* Prend toute la largeur */
        margin-right: 0; /* Supprime l'espacement sur la droite */
    }

    .link-container {
        flex-direction: column; /* Aligne les liens en colonne */
    }

    .aboutlinks a {
        margin-top: 10px; /* Espacement vertical entre les liens */
    }

    .credits {
        font-size: 12px;  /* Augmenter la taille du texte des crédits */
    }

    .aboutimage {
        height: 30vh;           /* Réduit la hauteur de l'image en mobile */
    }

    .aboutimage img {
        max-width: 70%;         /* L'image occupe plus d'espace en mobile */
        max-height: 70%;        /* L'image occupe plus d'espace en mobile */
    }
}

footer *{
    font-size: 8px;
    height: 15%;
}