/* Réinitialisation des styles par défaut */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Couleur de fond globale */
body {
    background-color: #efeedf;
    color: #000;
}

/* En-tête */
header {
    background-color: #efeedf;
    padding: 20px 0;
    height: 90px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

nav ul {
    list-style: none;
    text-align: absolute;
    margin-top: 15px;
}

nav ul li {
    display: inline;
    margin: 0 0px;
    margin-left: 40px;
}

nav ul li a {
    text-decoration: none;
    color: #000;
    font-family: "mostra-nuova", sans-serif;
    font-weight: 300;
    font-size: 30px;
}

/* Styles pour les liens sociaux dans le coin supérieur droit */
.social-links {
    position: absolute;
    top: 15px;
    right: 20px;
}

.social-links a {
    margin-left: 10px;
    text-decoration: none;
}

.social-links img {
    width: 50px;
    height: auto;
}




/* Css pour OCEANOLOGUE */

.containerBD {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

.image-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px; /* Espace entre la ligne d'images et l'image plus grande */
}

.grid-image {
    width: 400px; /* Taille fixe pour les trois premières images */
    height: auto; /* Hauteur automatique pour conserver les proportions */
}

.large-image-container {
    display: flex;
    justify-content: center;
}

.large-image {
    width: 700px; /* Taille plus grande pour l'image du poster */
    height: auto; /* Hauteur automatique pour conserver les proportions */
}

.projet-description {
    text-align: center;
    padding-top: 150px;
    max-width: 70%; /* La largeur du texte sera de 100% de la largeur de l'écran */
}

.projet-description h2 {
    font-family: "the-seasons", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 30px;
    margin-bottom: 20px;
    color: #000;
}

.projet-description p {
    font-size: 16px;
    font-family: "omnes-variable", sans-serif;
    font-variation-settings: "wdth" 100;
    font-style: normal;
    color: #000;
    line-height: 1.4;
    margin-bottom: 30px;
}

/* Styles pour le pied de page */
footer {
    background-image: url('../images/fond.png');
    color: #000;
    text-align: center;
    padding: 40px 0;
    background-size: 110%;
    background-repeat: no-repeat;
    background-position: center;
}

/* Style pour le contenu du pied de page */
.footer-content {
    max-width: 800px;
    margin: 0 auto;
    font-size: 25px;
    font-family: "mostra-nuova", sans-serif;
    font-weight: 300;
    font-style: normal;
}

/* Style pour les liens dans le pied de page */
.footer-content a {
    color: #b5a482;
    text-decoration: none;
}

/* Style pour les liens au survol */
.footer-content a:hover {
    text-decoration: underline;
}


/* CSS pour les gif de FF et le lien du jeu */
.gif-container {
    text-align: center; /* Centre les GIFs */
    margin-bottom: 20px; /* Ajoute un espace en bas de la section GIF */
}

.gif-image {
    width: 300px; /* Ajuste la largeur des GIFs */
    height: auto; /* Maintient le ratio original */
    margin: 0 10px; /* Ajoute un espace horizontal entre les GIFs */
}

.link-container {
    text-align: center; /* Centre le lien dans son conteneur */
    margin-top: 20px; /* Ajoute un espace au-dessus du conteneur */
    margin-bottom: 20px; /* Ajoute un espace en-dessous du conteneur */
}

.link-container a {
    display: inline-block; /* Permet de définir des marges et du padding */
    padding: 10px 20px; /* Ajoute du padding autour du texte du lien */
    font-family: "mostra-nuova", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 18px; /* Définit la taille de la police */
    color: #efeedf; /* Définit la couleur du texte */
    background-color: #b5a482; /* Définir la couleur de fond */
    border-radius: 5px; /* Ajoute des coins arrondis */
    transition: background-color 0.8s ease; /* Ajoute une transition douce pour le changement de couleur */
}

.link-container a:hover {
    background-color: rgba(26, 61, 90, 0.7);
    color: #efeedf; /* Garde la couleur du texte lors du survol */
}





/* CSS de la BD et de Zones Humides*/

.vitrine-images {
    text-align: center; /* Centre les images horizontalement */
    margin-top: 30px;
    margin-bottom: 30px;
}

.vitrine-images img {
    width: 500px; /* Remplacez 300px par la largeur souhaitée pour vos images */
    height: auto; /* Remplacez 500px par la hauteur souhaitée pour vos images */
    object-fit: cover; /* Optionnel : pour ajuster la taille de l'image tout en préservant son aspect ratio */
    margin: 10px;
    display: inline-block; /* Aligne les images verticalement */
}

.projet-vitrine h2 {
    font-family: "the-seasons", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 30px;
    margin-bottom: 20px; /* Marge en bas du titre */
    color: #000;;
    margin-bottom: 20px;
}

.projet-vitrine p {
    font-size: 16px;
    font-family: "omnes-variable", sans-serif;
    font-variation-settings: "wdth" 100;
    font-style: normal;
    color: #000;
    line-height: 1.4; /* Ajustez la valeur selon vos besoins */
    margin-top: 20px;
    max-width: 60%; /* La largeur du texte sera de 100% de la largeur de l'écran */
    margin: 0 auto; 
}

.projet-vitrine {
     text-align: center;
     margin-bottom: 40px;
     padding-top: 150px;
}





/* CSS Bande défilée */
.potager-images {
    text-align: center;
}

.potager-images h2 {
    text-align: center;
    font-size: 25px;
    font-family: "mostra-nuova", sans-serif;
    font-weight: 300;
    margin-bottom: 20px;
    margin-top: 60px;
}

.potager-images img {
    width: 500px; /* Remplacez 300px par la largeur souhaitée pour vos images */
    height: auto; /* Remplacez 500px par la hauteur souhaitée pour vos images */
    object-fit: cover; /* Optionnel : pour ajuster la taille de l'image tout en préservant son aspect ratio */
    margin: 10px;
    display: inline-block; /* Aligne les images verticalement */
    margin-bottom: 40px;
    padding-top: -60px;
}





/* Styles spécifiques à la page Gestatech et mil*/
.projet-gestatech h2 {
    font-family: "the-seasons", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 30px;
    margin-bottom: 10px; /* Marge en bas du titre */
    color: #000;;
    margin-bottom: 20px;
}

.projet-gestatech p {
    text-align: center; /* Centrer le texte horizontalement */
    font-size: 16px;
    font-family: "omnes-variable", sans-serif;
    font-variation-settings: "wdth" 100;
    font-style: normal;
    color: #000;
    line-height: 1.4; /* Ajustez la valeur selon vos besoins */
    padding-bottom: 15px;
    margin-top: 10px;
    max-width: 70%; /* Largeur maximale du paragraphe à 70% en format plein écran */
    margin: 0 auto; /* Centrer le paragraphe horizontalement */
}

.projet-gestatech a {
    display: inline-block; /* Permet de définir des marges et du padding */
    padding: 10px 20px; /* Ajoute du padding autour du texte du lien */
    font-family: "mostra-nuova", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 18px; /* Définit la taille de la police */
    color: #efeedf; /* Définit la couleur du texte */
    background-color: #b5a482; /* Définir la couleur de fond */
    border-radius: 5px; /* Ajoute des coins arrondis */
    transition: background-color 0.8s ease; /* Ajoute une transition douce pour le changement de couleur */
    margin-bottom: 20px; 
}

.projet-gestatech a:hover {
    background-color: rgba(26, 61, 90, 0.7);
    color: #efeedf; /* Garde la couleur du texte lors du survol */
}

.projet-gestatech {
     text-align: center;
     padding-top: 150px;
}

/* Style pour le conteneur parent */
.gestatech {
    display: flex;
    align-items: center; /* Alignement vertical au centre */
    justify-content: center; /* Alignement horizontal au centre */
}

/* Style pour le conteneur des vidéos et de l'image */
.video-gestatech {
    display: flex;
    align-items: center; /* Alignement vertical au centre */
    gap: 0; /* Suppression de l'espacement entre les vidéos et l'image */
    justify-content: center; /* Alignement horizontal au centre */
}

/* Style pour les vidéos et l'image */
video,
.media {
    flex: 1; /* Les vidéos et l'image s'étireront pour avoir la même hauteur */
    max-width: 400px; /* Les vidéos et l'image s'adapteront à la largeur du conteneur */
    height: auto; /* Conserve le rapport hauteur/largeur d'origine */
    margin: 10px;
}







/* CSS pour seulement la BD ami retrouvée */
.ami-images h2 {
    font-family: "mostra-nuova", sans-serif;
    font-weight: 300;
}

.ami-images {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 40px;
}

.ami-images img {
    width: 700px; /* Ajustez la largeur si nécessaire */
    height: auto; /* Maintien du ratio d'aspect */
    margin: 10px;
    display: inline-block;
}

.chara-images {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 40px;
}

.chara-images h2 {
    font-family: "mostra-nuova", sans-serif;
    font-weight: 300;
    margin-bottom: 20px;
}

.image-grid {
    display: flex;
    justify-content: center;
}

.image-container {
    display: flex;
    justify-content: center;
}

.image-container img {
    width: 500px; /* Ajustez la largeur si nécessaire */
    height: auto;
    max-width: 100%;
}




/* Style pour le RPG Sylvéria */

.projet-RPG {
    flex: 1; /* La description prendra autant d'espace que possible à droite */
    text-align: center; /* Alignez le texte de description à gauche */
    padding-top: 150px;
}

.projet-RPG h2 {
    font-family: "the-seasons", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 30px;
    margin-bottom: 20px; /* Marge en bas du titre */
    color: #000;;
}

.projet-RPG p {
    font-size: 16px;
    font-family: "omnes-variable", sans-serif;
    font-variation-settings: "wdth" 100;
    font-style: normal;
    color: #000;
    line-height: 1.4; /* Ajustez la valeur selon vos besoins */
    margin-bottom: 20px;
    max-width: 80%;
}
.projet-RPG a {
    color: #efc46c;
    font-family: "area-normal", sans-serif;
    font-weight: 100;
    font-style: normal;
    font-size: 17px;
    text-align: center;
}

.RPG-gif-container {
    text-align: center; /* Centre les GIFs */
    margin-bottom: 20px; /* Ajoute un espace en bas de la section GIF */
}

.RPG-gif-container img {
    width: 300px; /* Ajuste la largeur des GIFs */
    height: auto; /* Maintient le ratio original */
    margin: 0 10px; /* Ajoute un espace horizontal entre les GIFs */
}



.rectangleRPG img {
    width: auto;
    height: 85%;
    object-fit: cover;
}

.rectangleRPG {
    display: flex;
    position: relative;
    left: 20px;
    flex: 1;
    margin-left: 20px;
}

.verticalRPG {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
}

.verticalRPG img {
    width: 600px;
    height: auto;
    margin-bottom: 20px;
}

.containerBD {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.ileRPG {
    width: auto;
    height: 750px;
    object-fit: cover;
    margin-left: 20px;
}


.embed-content {
    max-width: 100%; /* S'assurer que la largeur maximale est de 100% */
    max-height: 100%; /* S'assurer que la hauteur maximale est de 100% */
    margin: 0 auto; /* Centrer horizontalement */
    overflow: hidden; /* Masquer le débordement */
}


#game-embed {
    width: 100%;
    height: 100%;
}




/* Media query pour les appareils mobiles */
/* Ajoutez ces règles pour les téléphones mobiles */
@media screen and (max-width: 768px) {
    header {
        padding: 10px 0;
        height: auto;
    }

    nav ul {
        text-align: center;
        margin-top: 10px;
    }

    nav ul li {
        display: block;
        margin: 10px 0;
    }

    .social-links {
        top: 10px;
        right: 10px;
    }

.intro {
    margin-top: 100px; 
}

    /* Conteneur principal */
    .containerBD, .projet-vitrine, .projet-RPG, .projet-gestatech {
        margin-bottom: 20px;
    }

    /* Images */
    .grid-image, .large-image, .vitrine-images img, .potager-images img, .image-container img {
        width: 100%;
        height: auto;
    }

    .large-image {
        width: 100%;
    }

    /* Description du projet */
    .projet-description, .projet-vitrine p, .projet-gestatech p, .projet-RPG p {
        max-width: 90%;
        margin: 0 auto;
        text-align: center;
    }

    .projet-description h2, .projet-vitrine h2, .projet-gestatech h2, .projet-RPG h2 {
        font-size: 24px;
        margin-top: 20px;
    }

    .projet-description p, .projet-vitrine p, .projet-gestatech p, .projet-RPG p {
        font-size: 14px;
    }

    /* Liens */
    .link-container a, .projet-gestatech a {
        padding: 10px 15px;
        font-size: 16px;
    }

    /* GIFs */
    .gif-image, .RPG-gif-container img {
        width: 100%;
        height: auto;
    }

    /* Images spécifiques */
    .ami-images img, .chara-images img, .verticalRPG img {
        width: 100%;
        height: auto;
    }

    /* Embed */
    .embed-content {
        width: 100%;
        height: auto;
    }

    #game-embed {
        width: 100%;
        height: auto;
    }
}
```