* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    max-width: 1200px; /* Définis la taille maximale du conteneur */
    margin: 0 auto; /* Centrer le conteneur sur la page */
    padding: 20px; /* Ajoute un peu d'espace intérieur */
}

body {
    font-family: Arial, sans-serif;
    background-color: #000;
    color: #E1E1E1;
    text-align: left; /* Aligne le texte général à gauche */
}

header {
    position: sticky;
    top: 0; /* Garde le header collé en haut de la page */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    z-index: 1000; /* Assure que le header reste au-dessus des autres éléments */
    background-color: rgba(0, 0, 0, 1); /* Fond semi-transparent */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Ombre pour un effet de profondeur */
}

.lang-switch {
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 16px;
  z-index: 1000;
}

.lang-switch a {
  color: #FF4C00;
  text-decoration: none;
  margin: 10px 10px;
}

.lang-switch a:hover {
  text-decoration: underline;
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo {
    width: 50px; /* Ajuste la taille du logo */
    height: auto;
    margin-right: 10px;
}

header p {
    color: #FF4C00;
    font-size: 18px;
    font-weight: bold;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 30px; /* Augmentation de l'espacement */
}

nav a {
    color: #FF4C00;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px; /* Ajustement de la taille de la police */
    transition: color 0.3s ease; /* Transition douce pour les effets de survol */
}

nav a:hover {
    color: #FF9A00; /* Couleur lors du survol */
}

.scroll-to-contact {
    display: inline-block;
    background-color: #FF6E00; /* Couleur du bouton */
    color: #000; /* Couleur du texte */
    padding: 15px 30px; /* Augmente l'espacement interne du bouton */
    border-radius: 50px; /* Coins arrondis au maximum */
    text-decoration: none; /* Supprime le soulignement */
    font-size: 18px; /* Augmente la taille du texte */
    transition: background-color 0.3s ease; /* Transition douce pour le survol */
    margin-left: auto; /* Ajoute de l'espace à gauche pour pousser à droite */
    display: block; /* Le bouton occupera la largeur disponible */
    width: fit-content; /* Le bouton s'ajustera à son contenu */
    text-align: center; /* Centrer le texte dans le bouton */
}

.scroll-to-contact:hover {
    background-color: #FF9A00; /* Couleur lors du survol */
}

.btn-read-more{
    display: inline-block;
    background-color: #FF6E00; /* Couleur du bouton */
    color: #000; /* Couleur du texte */
    padding: 15px 30px; /* Augmente l'espacement interne du bouton */
    border-radius: 50px; /* Coins arrondis au maximum */
    text-decoration: none; /* Supprime le soulignement */
    font-size: 18px; /* Augmente la taille du texte */
    transition: background-color 0.3s ease; /* Transition douce pour le survol */
    margin: auto; /* centrer */
    display: block; /* Le bouton occupera la largeur disponible */
    width: fit-content; /* Le bouton s'ajustera à son contenu */
    text-align: center; /* Centrer le texte dans le bouton */
}

.btn-read-more:hover {
    background-color: #FF6E00; /* Couleur lors du survol */
}

.section {
	scroll-margin-top: 100px; /* Décale l'ancre de 100px vers le bas */
}

section {
    padding: 40px;
    text-align: center;
}
#carousel {
    margin-bottom: -40px;
}

section h1 {
    color: #E1E1E1;
    text-align: center; /* Alignement centré pour h1 */
    font-size: 36px; /* Ajuste la taille selon tes préférences */
}

section h2 {
    color: #FF4C00;
    text-align: left; /* Alignement à gauche pour tous les autres h2 */
    margin-top: 48px; /* Grand espace avant le titre h2 */
    margin-bottom: 16px; /* Petit espace après le titre h2 */
}
.service-item h2 {
    text-align: left; /* Alignement centré pour les h2 dans la partie services */
}

section h3 {
    text-align: left;
    margin-left: 0;
}

section ul {
    list-style-position: outside; /* Place les puces à l'extérieur du texte */
    padding-left: 20px; /* Retrait à gauche pour la puce */
    margin-left: 20px; /* Retrait supplémentaire pour le texte */
    text-align: left; /* Aligne le texte de la liste à gauche */
}

section ul li {
    margin-bottom: 10px; /* Espacement entre chaque élément de liste */
}

section p {
    text-align: left; /* Alignement à gauche pour tous les paragraphes dans les sections */
    margin-bottom: 30px; /* Ajoute un espacement en bas des paragraphes */
}
#services_descr {
    display: flex;
    flex-direction: column;
    transition: height 0.3s ease;
}

.tab-content {
    display: none; /* Masque les blocs par défaut */
}

.tab-content.show {
    display: block; /* Affiche le bloc actif */
}

.masonry_big {
    display: grid;
    grid-template-columns: repeat(auto-fill, 200px);
    gap: 10px;
    justify-content: center; /* Centre les images horizontalement */
    margin: 0 auto;
    max-width: 1200px; /* Définit une largeur maximale pour le centrage */
}

.masonry_big img {
    width: 200px;
    height: 200px;
    object-fit: cover; /* Ajuste l'image sans déformation */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}


.masonry_small {
    display: grid;
    grid-template-columns: repeat(auto-fill, 175px);
    gap: 10px;
    justify-content: center; /* Centre les images horizontalement */
    margin: 0 auto;
    max-width: 800px; /* Définit une largeur maximale pour le centrage */
}

.masonry_small img {
    width: 175px;
    height: 175px;
    object-fit: cover; /* Ajuste l'image sans déformation */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Trois colonnes de largeur égale */
    gap: 20px; /* Espacement entre les colonnes */
    margin-top: 20px; /* Marge au-dessus de la grille */
}

.service-item {
    background-color: #222; /* Fond de chaque service */
    border-radius: 10px; /* Coins arrondis */
    padding: 20px; /* Espacement intérieur */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Ombre */
}

/* Styles responsive */
/* Menu normal (visible par défaut) */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 20px;
}

/* Bouton burger (masqué par défaut) */
.burger-menu {
    display: none;
    font-size: 24px;
    background: none;
    border: none;
    color: #E1E1E1;
    cursor: pointer;
}

/* Responsive : masquage du menu normal et affichage du menu burger */
@media (max-width: 900px) {
    .nav-menu {
        display: none; /* Masque le menu normal sur mobile */
    }

    .burger-menu {
        display: block; /* Affiche le bouton burger sur mobile */
    }

    /* Menu burger ouvert */
    .nav-menu.show {
        display: flex;
        flex-direction: column;
        background-color: #333; /* Fond du menu burger */
        position: absolute;
        top: 60px; /* Ajuste la position sous le header */
        right: 10px;
        width: 200px;
        padding: 10px;
        border-radius: 8px;
    }

    .nav-menu li {
        margin: 10px 0; /* Espace entre les liens dans le menu burger */
    }
    
    .services-grid {
        display: flex;
        flex-direction: column; /* Aligne les éléments en colonne */
        gap: 20px; /* Espace entre les blocs */
    }

    .service-item {
        width: 100%; /* Prend toute la largeur disponible */
    }
    
    .contact-columns {
        display: flex;
        flex-direction: column-reverse; /* Place les données de contact en premier */
        gap: 20px; /* Espace entre les éléments */
    }

    .contact-card {
        width: 100%; /* Prend toute la largeur disponible */
    }
    .map-container {
        display: none; /* Masque la carte Google Maps sur les petits écrans */
    }
}

#contact {
    text-align: center;
}

.contact-columns {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    justify-content: center; /* Centre les colonnes dans la section */
}

.map-container iframe {
    flex: 7;
    height: 400px;
    border-radius: 8px;
}

.contact-card {
    flex:3;
    display: flex;
    justify-content: center; /* Centre horizontalement le bloc contact-card-content */
    align-items: center;     /* Centre verticalement le bloc contact-card-content */
    background-color: #222;
    padding: 20px;
    height: 400px;
    border-radius: 16px;
    color: #333;
    
}
.contact-card-content h2{
    margin-bottom:26px;
    margin-top:-9px;
}
.contact-card-content p {
    display: flex;
    align-items: flex-start;
    margin: 16px 0;
    font-size: 16px;
    color: #E1E1E1;
}

.contact-card-content i {
    margin-right: 16px;
    font-size: 16px;
    color: #FF4C00;
}

.contact-card a {
    color: #E1E1E1; /* Couleur par défaut des liens */
    text-decoration: none; /* Retire le soulignement */
}

.contact-card a:hover {
    color: #FF6e00; /* Couleur des liens au survol */
}


footer {
    text-align: center;
    padding: 20px;
    background-color: #000;
    color: #E1E1E1;
}

footer a {
    color: #FF4C00;
    text-decoration: none;
}

/* ********************************* */
/* partie dédiée au carousel d'image */
/* ********************************* */
/* Swiper */
.swiper-container {
    width: 100%; /* Le carrousel prend toute la largeur du conteneur principal */
    max-width: 100%; /* Assure qu'il ne dépasse pas la largeur du conteneur principal */
    height: 400px; /* Hauteur fixe (tu peux ajuster selon tes besoins) */
    margin: auto; /* Centre le carrousel à l'intérieur du conteneur principal */
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajuste l'image pour couvrir tout l'espace disponible */
    border-radius: 10px; /* Arrondit les coins des images */
}

/* Masque la pop-up par défaut */
/* Styles de la pop-up */
.popup {
    display: none; /* Masqué par défaut */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup-content {
    background-color: #222;
    color: #E1E1E1;
    padding: 20px;
    width: 80%;
    max-width: 500px;
    border-radius: 8px;
    border: 3px solid #FF6e00;
    max-height: 80vh; /* Limite la hauteur à 80% de la hauteur de la fenêtre */
    overflow-y: auto; /* Ajoute le défilement vertical si le contenu dépasse la hauteur */
    
    position: relative;
    text-align: left;
    font-size:14px;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
    color: #FF4C00;
}