html {
    overflow-x: hidden;
}
/* Style global pour le body */
body {
    margin: 0; /* Marge autour du contenu */
    font-family: 'Poppins', sans-serif; /* Police par défaut du site */
    min-height: 100vh; /* Hauteur minimale pour remplir toute la fenêtre */
}

/* Les images prennent 100% de la largeur disponible */
img {
    max-width: 100%;
}

/* Réinitialisation des sections pour éviter les conflits visuels */
section {
    clear: both;
}

/* Style des articles */
article {
    padding: 10px; /* Espace interne autour du contenu */
}

/* Titres d'articles */
article h1 {
    text-align: center;
    font-size: 30px;
}
article h2 {
    text-align: center;
    font-size: 25px;
}

/* Style des iframes (notamment pour les vidéos) */
iframe, .blackfond img {
    width: 100%; /* Largeur maximale */
    max-width: 660px; /* Largeur maximale limitée */
    aspect-ratio: 560 / 315; /* Ratio pour les vidéos YouTube */
    border-radius: 15px;
}

/* Classe pour centrer le contenu */
.center {
    text-align: center;
}

/* Arrière-plan noir */
.black {
    background-color: black;
}
.white {
    color: white;
}

/* Media query pour les écrans plus larges */
@media screen and (min-width:600px) {
    article {
        margin: 0 5%; /* Ajout de marges latérales */
    }
    article > img {
        max-width: 40%; /* Limite la largeur des images */
        margin: 0 50%; /* Centre l'image horizontalement */
        translate: -50%; /* Ajuste le positionnement */
    }
    article > .slider {
        max-width: 40%;
        margin: auto;
    }
}

/* Section d'accueil */
.accueil {
    background-color: rgb(118, 0, 0); /* Couleur de fond bordeaux */
    padding: 20px 0; /* Espacement vertical */
    border-radius: 20px;
}

/* Bordure noire autour de l'accueil */
.accueil .bordure_noir {
    background-color: black;
    border: double 15px white; /* Bordure blanche double */
    border-radius: 20px; /*arrondis Boridure*/
    padding: 10px; /* Espacement interne */

}

/* Texte d'accueil */
.accueil-text {
    background-color: white; /* Fond blanc */
    border-radius: 20px;
    margin: 30px 0; /* Espacement vertical */
    text-align: center; /* Centrage du texte */
    padding: 0 10px; /* Espacement horizontal interne */
}

/* Première ligne du texte d'accueil avec une police différente */
.accueil .accueil-text:first-child {
    font-weight: 700;
    /* font-family: Elephant, Impact; */
}

/* Ajustements pour écrans larges */
@media screen and (min-width:600px) {
    .accueil {
        margin-top: 20px;
        padding: 30px;
        margin: 5px;
    }
    .accueil .bordure_noir {
        padding: 20px;
        display: grid; /* Mise en grille */
        grid-template-areas: ". img" ". img";
        gap: 25px 25px;
        grid-template-rows: 1fr 9fr;
    }
    .accueil-img {
        grid-area: img;
        justify-self: center;
        align-self: center;
    }
    .accueil-text {
        margin: 0px;
    }
}

/* Style général des sliders */
.slider {
    position: relative;
    display: grid;
    grid-template-areas: "slide";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-items: stretch;
    align-items: stretch;
}

/* Style des diapositives des sliders */
.slider .slide {
    grid-area: slide;
    opacity: 0; /* Caché par défaut */
    transition: opacity 0.5s ease-in-out; /* Transition en douceur */
    align-self: center;
}
.slider .slide.active {
    opacity: 1; /* Visible si actif */
}

/* Flèches de navigation des sliders */
.slider-arrow {
    display: flex;
    position: absolute;
    width: 30px;
    height: 30px;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5); /* Transparence noire */
    cursor: pointer;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 30px; /* Taille de la flèche */
    user-select: none; /* Désactive la sélection de texte */
}
.slider-arrow-left {
    left: 0;
}
.slider-arrow-right {
    right: 0;
}

/* Conteneur principal */
.sectionvid {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 20px;
    padding-left: 10px;
    flex-wrap: wrap;
    padding-right: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Vidéo avec le fond noir */
.blackfond {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Vidéo prend toute la largeur disponible */
    max-width: 600px; /* Limite la largeur maximale */
    height: auto; /* Ajuste automatiquement la hauteur */
    background-color: rgb(118, 0, 0); /* Fond rouge foncé */
    border: 10px double white; /* Bordure blanche double */
    outline: 5px solid black; /* Contour noir */
    border-radius: 30px; /* Coins arrondis */
    padding: 20px;
}

/* Vidéo */
.video {
    width: 100%; /* La vidéo occupe tout l'espace disponible dans le conteneur noir */
    max-width: 600px; /* Largeur maximale de la vidéo */
    height: 300px; /* Hauteur de la vidéo */
    border-radius: 10px; /* Coins arrondis pour la vidéo */
}

/* Conteneur des réseaux sociaux et du bouton contact */
.reseaux-container {
    display: flex;
    flex-direction: column; /* Réseaux sociaux et bouton en colonne */
    align-items: center; /* Centre les éléments horizontalement */
    justify-content: center; /* Centre les éléments verticalement */
    gap: 10px; /* Réduction de l'espacement entre les icônes et le bouton */
}

/* Média pour petits écrans */
@media screen and (max-width: 600px) {
    .content-wrapper {
        flex-direction: column; /* Passe en disposition verticale */
    }

    .reseaux-container {
        margin-top: 20px; /* Espacement entre la vidéo et les réseaux sociaux */
    }

    .video {
        height: 200px; /* Ajuste la hauteur de la vidéo */
    }
}


/* Section avis client */
.red {
    margin: 0 5px;
    background-color: #7b1417;
    border-radius: 10px;
}

.googleavis {
    
    padding-top: 15px;
    word-spacing: 4px;
    text-align: center;
    font-size: 25px;
    text-underline-offset: 8px;
    color: white; 
    text-decoration: underline 2px;
}

#reviews-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.review {
    background: white;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 300px;
    max-height: 222px;
    overflow: auto;
}
@media screen and (min-width:600px) {
    .review {
        border: 1px solid #ddd;
        border-radius: 8px;
    } 
}

.review h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.stars {
    color: gold;
}
.stars img {
    height: 40px;
    margin-bottom: 20px;
}

.review p {
    font-size: 14px;
    color: #555;
}

.center-flex{
    display: flex;
    justify-content: center; /* Centre le texte horizontalement */
    text-align: center; /* Centre le texte horizontalement */
    align-items: center; /* Centre le texte verticalement */
    padding : 20px;
    flex-direction: column;
}

#google-rating {
    font-size: 1.5rem;
    color: #ff9900; /* Couleur dorée pour la note */
    margin-top: 20px;
}

#google-rating h2 {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

#reviews .review {
    margin-bottom: 20px;
}

.buttongoogle {
    display: flex; /* Utilisation de flexbox pour centrer le contenu */
    position: relative; /* Position relative pour gérer les éléments absolument positionnés */
    width: 450px; /* Largeur du bouton */
    min-height: 45px; /* Hauteur minimale du bouton */
    border: 5px solid black; /* Bordure noire */
    border-radius: 8px;
    word-spacing: 4px;
    font-size: 1.3rem; /* Taille de la police */
    font-weight: 500; /* Poids de la police en gras */
    color: white; /* Couleur du texte du bouton */
    background: rgb(38, 111, 207); /* Fond blanc pour le bouton */
    justify-content: center; /* Centre le texte horizontalement */
    text-align: center; /* Centre le texte horizontalement */
    align-items: center; /* Centre le texte verticalement */
    overflow: hidden; /* Empêche le débordement du contenu */
    z-index: 0; /* Assure que le bouton soit en dessous des éléments positionnés avec un index plus élevé */
    text-decoration: none;
    padding: 0px 10px;
    max-width: 90%;
}

.buttongoogle::before {
    content: ''; /* Aucun contenu textuel, mais un pseudo-élément de fond */
    position: absolute; /* Position absolue par rapport au parent (le bouton) */
    bottom: 75px; /* Position initiale en bas du bouton */
    left: 0; /* Aligne à gauche */
    width: 100%; /* Largeur complète du bouton */
    height: 100%; /* Hauteur complète du bouton */
    background: rgba(7, 28, 56, 0.366); /* Fond noir pour l'effet avant */
    border-radius: 0% 0% 50% 50%; /* Arrondir le bas du pseudo-élément */
    z-index: -1; /* Place le pseudo-élément derrière le contenu du bouton */
    transition: all 2s; /* Animation de transition pour un effet fluide */
}

.buttongoogle:hover::before {
    bottom: 0px; /* Déplace le pseudo-élément vers le bas du bouton lors du survol */
    border-radius: 0px; /* Enlève l'arrondi du bas lors du survol */
}
.buttongoogle img {
    max-height: 22px;
    margin-right: 12px;
}

/* Style des clients "Nous ont fait confiance" */
.fontslidelogo, .fontslidelogo::after,  .fontslidelogo::before {
    content: " - - - ";
    text-align: center;
    font-weight: bold;
    font-size: 25px;
    color:  rgb(110, 3, 3); /* Rouge vif */
    border: rgb(110, 3, 3);
}

/* Conteneur du carrousel */
.Slider-client {
    overflow: hidden; /* Masque les éléments qui dépassent du conteneur */
    width: 100%; /* Largeur maximale du carrousel */
    height: 120px; /* Ajuste la hauteur selon la taille des logos */
    position: relative; /* Nécessaire pour positionner les éléments */
    background: transparent;
}

/* Contenu du carrousel */
.marquee-content {
    display: flex; /* Aligne les logos horizontalement */
    position: absolute; /* Position absolue pour contrôler le mouvement */
    width: 100%; /* Largeur du conteneur */
    height: 100%; /* Hauteur du conteneur */
    animation: fade-slide 20s linear infinite; /* Animation continue et lente */
}

/* Logos dans le carrousel */
.marquee-content img {
    height: 100px; /* Taille des logos */
    margin: 0 40px; /* Espacement entre les logos */
    opacity: 1; /* Par défaut, les logos sont visibles */
    transition: opacity 1s ease-out; /* Transition pour l'opacité */
}

/* Animation pour faire défiler les logos */
@keyframes fade-slide {
    0% {
        transform: translateX(100%); /* Départ hors de l'écran à droite */
    }
    20% {
        opacity: 1; /* Visible */
        transform: translateX(0); /* Arrivée au centre */
    }
    80% {
        opacity: 1; /* Toujours visible */
        transform: translateX(0); /* Reste au centre */
    }
    100% {
        opacity: 0; /* Disparition progressive */
        transform: translateX(-100%); /* Sortie à gauche */
    }
}

/* Pour la duplication des images */
.marquee-content.duplicate {
    transform: translateX(100%); /* Décale le duplicat à droite */
    animation: fade-slide 20s linear infinite; /* Même animation pour les images dupliquées */
}














/* Formulaire de contact */
#contact {
    background-image: url(/Image/contact_background.jpg);
    padding: 20px 15px;
    border-top: 15px solid black;
    border-bottom: 15px solid black;
    background-color: black;
}
form {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    padding: 30px 10px;
    border-radius: 15px;
    box-shadow: 0px 10px 50px -10px #d6d6d6a3; /* Ombre autour */
}
form h3 {
    font-size: 2em;
    text-align: center;
    color: rgb(118, 0, 0); /* Couleur principale */
    grid-area: h3;
    margin: 0;
}
form h6 {
    font-size: 1em;
    text-align: center;
    color: rgb(118, 0, 0);
    grid-area: h6;
    margin: 0;
}
form input, form textarea {
    margin: 15px 0;
    padding: 10px;
    border: none;
    outline: none;
    border-bottom: 2px solid #e4e4ec; /* Ligne de séparation */
    transition: all 0.2s;
}
form textarea {
    resize: none; /* Empêche le redimensionnement */
    grid-area: text;
}

/* Bouton de soumission */
form input[type="submit"] {
    width: 192px;
    height: 50px;
    border-radius: 8px;
    background-color: #b14c4c;
    color: white;
    font-weight: bold;
    font-size: 1.2em;
    transition: 0.2s;
    grid-area: submit;
    justify-self: center;
}
form input[type="submit"]:hover {
    transform: translateY(5px);
}
form .rgpd {
    grid-area: rgpd;
}

/* Media query pour écrans larges */
@media screen and (min-width:600px) {
    #contact {
        padding: 100px 15px;
    }
    form {
        max-width: 700px;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "h6 h6"
            "h3 h3"
            ". ."
            ". ."
            ". ."
            "text text"
            "rgpd rgpd"
            "submit submit";
        grid-column-gap: 50px;
    }
}

/*Galerie Photo Magie et Ballons*/

.h1photo {
    text-align: center;
    margin: 20px 0;
    color: #333;
  }

  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    padding: 20px;
    max-width: 1200px;
    margin: auto;
  }

  .gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .gallery-item:hover img {
    transform: scale(1.1);
  }

  .gallery-item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .gallery-item:hover .overlay {
    opacity: 1;
  }

  .overlay p {
    font-size: 18px;
    text-align: center;
  }