/* Importer la police Roboto depuis Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
    font-family: serif;
    color:#f4da46; /* Couleur dorée */
    background-color: #000; /* Fond noir */
    margin: 0;
    padding: 0;
    line-height: 1.6;
}
.hero {
    display: flex;
    justify-content: center;  /* Centre horizontalement */
    
    background-color: #060606; /* Couleur de fond pour le header */
}
.headerlogo {
    width: 200px; /* Vous pouvez ajuster cette valeur selon la taille désirée */
    height: auto; /* Cela permet de conserver les proportions de l'image */

}

/* Style du conteneur de slider */
.diaporama {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #0a0a0a; /* Couleur de fond de la section */
}

.slideshow {
    border: 1px solid #f4da46;
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 400px;
    margin: auto;
    overflow: hidden;
}

.slides {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.slides.active {
    opacity: 1;
}

.sectionphrasedaccroche {
    background-color: #0a0909; /* Couleur de fond */
    padding: 40px 20px; /* Espace autour du contenu */
    padding-left: 100px; /* Espace supplémentaire à gauche */
    padding-right: 100px; /* Espace supplémentaire à droite */
    text-align: center; /* Centrer le texte */
    font-family: "Josefin Sans", sans-serif;/* Police moderne et lisible */
}

.phrasedaccroche p {
    font-size: 25px; /* Taille de texte */
    line-height: 1.6; /* Espacement entre les lignes */
    color: #feffff; /* Couleur de texte */
    font-family: "Josefin Sans", sans-serif;
    margin: 0 auto; /* Centre le paragraphe */
    padding: 10px 0; /* Espacement vertical interne */
    text-align: justify;
}
.phrasedaccroche b {

    color: #f2b42f;
}
@media (max-width: 768px) {
    .slideshow {
        height: 20vh; /* Laisse la hauteur s’adapter automatiquement */
    }
    .diaporama{
        height: 30vh; 
    }
}

@media screen and (max-width: 768px) {
    .sectionphrasedaccroche {
        padding-left: 20px; /* Réduit l'espace à gauche sur mobile */
        padding-right: 20px; /* Réduit l'espace à droite sur mobile */
    }
    .phrasedaccroche p {
        font-size: 16px; /* Taille de texte plus petite sur mobile */
        padding: 20px; /* Espacement vertical plus large */
    }
}

/* Style par défaut pour les écrans larges */
section#about {
    display: flex;
    flex-wrap: wrap;
    background-color: #fafaf7; 
    align-items: stretch;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colonnes égales */
    grid-auto-rows: auto; /* Ajustement automatique de la hauteur selon le contenu */
    gap: 10px; /* Espacement entre les éléments */
}

/* Chaque grid-item aura une hauteur minimale pour éviter qu'elles ne soient trop petites */
.grid-item {
    position: relative;
    overflow: hidden; /* Cache tout débordement du contenu */
    min-height: 200px; /* Hauteur minimale pour chaque élément */
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Remplit l'élément tout en gardant les proportions */
    border-radius: 10px;
}

a.image-link {
    position: relative;
    display: block; /* Assure que le lien prend tout l'espace de l'image */
    width: 100%;
    height: 100%;
}

/* Ajustement pour les éléments large et wide */
.grid-item.large {
    grid-column: 1 / span 2; /* Occupe les deux premières colonnes */
    grid-row: 1 / span 2; /* Occupe deux lignes */
    min-height: 400px; /* Hauteur minimale plus grande pour les éléments larges */
}

.grid-item.wide {
    grid-column: 3 / span 2; /* Occupe les colonnes 3 et 4 */
    grid-row: 2 / span 1; /* Occupe une ligne */
    min-height: 300px; /* Hauteur minimale ajustée pour wide */
}

.grid-item.small {
    min-height: 200px; /* Assure une hauteur minimale pour les petits éléments */
}

/* Texte overlay et transitions */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    text-align: center;  
    padding: 10px;
    box-sizing: border-box;
    pointer-events: none; /* Empêche les interactions quand l'overlay est invisible */
}

.grid-item:hover .overlay {
    opacity: 1;
    pointer-events: none; /* Garde l'image cliquable même lorsque l'overlay est visible */
}

.overlay h2 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    font-family: "Poppins", sans-serif;
    max-width: 90%;
    word-wrap: break-word;
    opacity: 1; /* Toujours visible */
    transition: opacity 0.3s ease; /* Transition douce si on veut la modifier */
}

.overlay span {
    font-size: 12px;
    padding: 0 20px;
    word-wrap: break-word;
    opacity: 0; /* Caché par défaut */
    transition: opacity 0.3s ease; /* Transition douce pour apparaître au survol */
}
.grid-item:hover .overlay span {
    opacity: 1;
}

@media (max-width: 768px) {
    .overlay h2 {
        font-size: 16px;
    }

    .overlay span {
        font-size: 10px;
    }
}


/* Responsivité : Adaptation pour les tablettes */
@media (max-width: 1024px) {
    .image-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur tablettes */
    }

    .grid-item.large {
        grid-column: 1 / span 2; /* Occupe 2 colonnes sur tablettes */
        grid-row: auto;
        min-height: 300px; /* Réduit la hauteur pour les écrans plus petits */
    }

    .grid-item.wide {
        grid-column: 1 / span 2; /* Occupe les 2 colonnes */
        grid-row: auto;
        min-height: 250px; /* Ajuste la hauteur */
    }
}

/* Responsivité : Adaptation pour les petits écrans (smartphones) */
@media (max-width: 768px) {
    .image-grid {
        grid-template-columns: 1fr; /* 1 seule colonne sur petits écrans */
    }

    .grid-item {
        grid-column: 1 / -1; /* Chaque élément occupe toute la largeur */
        grid-row: auto;
        min-height: 200px; /* Ajuste la hauteur pour les petits écrans */
    }

    .grid-item img {
        height: auto; /* Ajuste la hauteur des images en fonction de la largeur */
    }

    .overlay h2, .overlay span {
        font-size: 14px; /* Réduit légèrement la taille du texte sur petits écrans */
    }
}


section {
    padding: 60px 20px;
}



form input, form textarea {
    width: 100%;
    padding: 15px;
    margin: 10px 0;
    border: none;
    border-radius: 5px;
    background-color: #333;
    color:  #f4da46;
}

/* Styles pour la section de contact */
#contact {
    padding: 20px;
    background-color: #070707;
    
    padding: 40px;
    border-radius: 8px;
    max-width: 600px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  
}
.contact-container {
    display: flex;
    width: 100%;
    max-width: 1200px; /* Ajustez selon vos besoins */
}


#contact h2 {
    text-align: center;
    color: #ebba35;
}

#contact p {
    font-size: 16px;
    color: #ebba35;
    text-align: center;
}

#contact form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#contact label {
    font-weight: bold;
}

#contact input, #contact textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
}

#contact button {
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

#contact button:hover {
    background-color: #0056b3;
}

.contact-info {
    margin-top: 20px;
}

.contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.contact-logo {
    width: 30px;
    height: 30px;
    margin-right: 10px; /* Espace entre le logo et le texte */
}

.contact-item p {
    margin: 0;
    font-size: 16px;
}

.social-media {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    text-align: center;
   
}

.social-media a {
    display: inline-block;
    margin: 0 10px;
}

.social-media img {
    vertical-align: middle;
    transition: transform 0.3s ease;
}
button {
    background-color:  #f4da46;
    color: #000;
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color:  #f4da46;
}


.social-media img:hover {
    transform: scale(1.1);
}

section#contact .logocontact {
    position: absolute;
    left: 4px;  
    max-width: 100%;  /* L'image ne dépassera pas la largeur du conteneur */
    height: auto;     /* Maintient les proportions de l'image */
    display: flex;             /* Positionne le logo à gauche avec un petit espace */  
              
}


.logocontact img {
    max-width: 100%;
    height: auto;
}

.div-contact {
    max-width: 600px;         /* Limite la largeur du formulaire */
    text-align: center;       /* Centre le texte à l'intérieur du formulaire */
}

.div-contact form {
    display: flex;
    flex-direction: column;   /* Aligne les éléments du formulaire verticalement */
    gap: 10px;                /* Ajoute de l'espace entre les éléments du formulaire */
}
.container-contact {
    display: flex;
    align-items: center;  /* Aligne verticalement le logo et le contenu */
    justify-content: flex-start;  /* Assure que le contenu est à gauche */
    padding: 20px;
    flex-wrap: wrap;  /* Permet au contenu de s'empiler sur les petits écrans */
}



section#contact .container-contact p{
    color:#f4da46; /* Couleur dorée */    
}

section#contact .container-contact h2{
    color:#f4da46; /* Couleur dorée */    
}
form label[for="name"] {
    color: #afacac; /* Couleur pour "Nom" */
}

form label[for="email"] {
    color: #afacac; /* Couleur pour "Email" */
}

form label[for="message"] {
    color: #afacac; /* Couleur pour "Message" */
}
@media (max-width: 768px) {
    section#contact .logocontact {
        position: relative; /* Retire le positionnement absolu sur mobile */
        left: 0; /* Réinitialise la position */
        margin-bottom: 20px; /* Ajoute un espace entre le logo et le formulaire */
        text-align: center; /* Centre le logo */
    }

    .logocontact img {
        width: 120px;  /* Réduit la taille sur mobile */
        height: auto;  /* Garde les proportions */
        max-height: 120px; /* Limite la hauteur si nécessaire */
    }

    .div-contact {
        margin-top: 20px; /* Assure qu'il y ait un espace suffisant en dessous du logo */
    }
}



.footer {
    border-top: 3px solid #3498db; /* Bordure en haut avec la couleur bleue */
    padding: 20px; /* Espace intérieur du footer */
    background-color: #0e0e0e; /* Couleur de fond du footer */
    text-align: center; /* Centrer le texte */
    color:  #f4da46;
}

.footer p{
    font-family: 'Bookman', 'URW Bookman L', serif;
    font-size: 1.2rem;   
}