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

/* En-tête */
header {
    background-color: #efeedf;
    padding: 20px 0;
    height: 90px;
    position: fixed; /* Ajoutez cette ligne */
    top: 0; /* Placez l'en-tête en haut de la fenêtre */
    left: 0; /* Placez l'en-tête à gauche de la fenêtre */
    right: 0; /* Placez l'en-tête à droite de la fenêtre */
    z-index: 100; /* Pour s'assurer que l'en-tête est au-dessus du contenu */
}

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-style: normal;
    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;
}

/* Section d'introduction */
.intro {
    text-align: center;
    background-color: #efeedf;
    padding: 50px 0;
    margin-top: 70px;
}

.intro h1 {
    font-family: "the-seasons", sans-serif;
    font-weight: 300;
    font-size: 50px;
    margin-bottom: 10px;

}

.intro p {
    font-size: 25px;
    color: #000;
    margin-top: 5px;
    font-family: "mostra-nuova", sans-serif;
    font-weight: 300;
    font-style: normal;
    line-height: 40px;
}

/* Section Portfolio */
.portfolio {
    background-color: #efeedf;
    padding: 40px 0;
}
 
.container_projet {
    display: flex; /* Aligner les projets horizontalement */
    flex-wrap: wrap; /* Permettre le retour à la ligne si l'espace est insuffisant */
    justify-content: center;
    margin-bottom: 20px;
    margin-top: -30px;
}

.container_projet .projet {
    width: 350px; /* Largeur de l'image carrée (300x300) */
    margin: 10px;
    position: relative;
}

.container_projet .projet .image_projet {
    width: 100%; /* Ajustez la largeur à 100% pour s'adapter à l'image carrée */
    height: 400px; /* Hauteur de l'image carrée (300x300) */
    position: relative;
}

.container_projet .projet .image_projet img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.container_projet .projet .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Assurez-vous que l'overlay s'étend sur toute la largeur de l'image */
    height: 100%; /* Assurez-vous que l'overlay s'étend sur toute la hauteur de l'image */
    background-color: #b5a482;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.container_projet .projet:hover .overlay {
    opacity: 0.8;
}

.container_projet .projet .overlay a {
    font-size: 20px;
    color: #fff;
    margin-top: 5px;
    font-family: "mostra-nuova", sans-serif;
    font-weight: 300;
    font-style: normal;
    text-decoration: none;
    line-height: 40px;
}

/* BOUTON retour en haut */
#scroll-to-top-button {
    display: none; /* Masquez le bouton au début */
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #efeedf;
    border: none;
    border-radius: 20px;
    padding: 15px 10px;
    cursor: pointer;
}

#scroll-to-top-button:hover {
    background-color: #b5a482;
    opacity: 0.8
}

#scroll-to-top-button {
    font-family: "mostra-nuova", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 20px;
    background-color: rgba(239, 238, 223, 0.5);
}


/* Styles spécifiques pour la section de contact du menu principal (index.html) */
.contact {
    background-image: url('../images/fond.png');
    background-position: center;
    background-size: 110%;
    text-align: center; /* Alignement du contenu au centre */
    padding: 20px 0; /* Espacement intérieur (haut/bas) */

}

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

.contact p {
    font-size: 25px; /* Taille de la police pour le paragraphe */
    margin-bottom: 25px; /* Marge en bas du paragraphe */
    font-family: "mostra-nuova", sans-serif;
    font-weight: 300;
    font-style: normal;
    color: #000;
}

.contact a {
    text-decoration: none; /* Pas de soulignement sur les liens */
    background-color: rgba(239, 238, 223, 0.5);
    color: #000; /* Couleur du texte des liens */
    padding: 10px 30px; /* Espacement intérieur des liens (haut/bas, gauche/droite) */
    border-radius: 20px; /* Coins arrondis */
    font-family: "mostra-nuova", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 20px; /* Taille de la police des liens */
    transition: background-color 0.3s; /* Transition de couleur de fond au survol */
}

.contact a:hover {
    background-color: #b5a482; /* Couleur de fond des liens au survol */
    opacity: 0.8
}

/* 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; 
    }

}