body { 
            font-family: Arial, sans-serif; 
            text-align: center; 
            margin-top: 30px; 
            background-color: black; 
            color: white; 
            padding: 0 20px;
            display: flex;
            flex-direction: column;
            min-height: 90vh;
        }

        .logo {
            display: block;
            margin: 0 auto 20px auto; 
            max-width: 150px;         
            width: 100%;
            height: auto;
        }

        h1 { 
            color: #e0e0e0; 
            font-size: 3rem; 
            margin-top: 10px;
        }

/* Style des titres de sections (Galerie photo / Galerie vidéo) */
h3.section-title {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 32px;              
  font-weight: 700;              
  color: #c78e73;               
  text-align: center;           /* Aligne le titre parfaitement au centre */
  margin-top: 50px;             
  margin-bottom: 25px;          
  letter-spacing: -0.8px;       
}


        .image-container {
            position: relative;
            display: inline-block; 
            margin: 20px auto;
            max-width: 100%;      
            height: 65vh; /* Taille d'origine (parfaite pour mobile) */
            border-radius: 8px;
            overflow: hidden;
            background-color: transparent;
        }

        /* AJUSTEMENT SPÉCIFIQUE POUR LES GRANDS ÉCRANS (Navigateur standard) */
        @media (min-width: 992px) {
            .image-container {
                height: 75vh; /* Augmente la hauteur de la photo sur ordinateur */
            }
        }

        .image-container img { 
            display: block; 
            width: auto;           
            height: 100%; 
            margin: 0 auto; 
            object-fit: contain; 
            
            /* EFFET LUMINEUX */
            opacity: 0.85;          
            filter: brightness(0.85) contrast(1.1); 
        }


        .footer-social {
            margin-top: 40px;
            padding-bottom: 20px;
            display: flex;
            justify-content: center;
            gap: 40px; 
            flex-wrap: wrap; 
        }

        .social-link {
            display: inline-block;
            text-decoration: none;
            color: #ffffff;
            font-weight: 500;
            font-size: 1rem;
            transition: transform 0.3s ease, opacity 0.3s ease;
        }

        .social-link:hover {
            transform: scale(1.1); 
            opacity: 0.9;
        }

        .social-icon {
            width: 35px;
            height: 35px;
            display: block;
            margin: 0 auto 8px auto;
        }

        .tiktok-icon { fill: #ffffff; }
        .facebook-icon { fill: #1877F2; }
        .instagram-icon { fill: url(#insta-gradient); }
        .mail-icon { fill: #a0a0a0; transition: fill 0.3s ease; }
        .social-link:hover .mail-icon { fill: #ffffff; }

.lettre-logo {
    color: #c78e73; /* Teinte Or/Doré chic pour rappeler le logo */
}

/* Style du Bandeau Cookies Mis à jour */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #121212;
    border-top: 1px solid #333333;
    padding: 15px 20px;
    box-sizing: border-box;
    display: none; /* Géré dynamiquement par le JavaScript */
    justify-content: space-between;
    align-items: center;
    z-index: 9999;
    text-align: left;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
}

.cookie-btn {
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

/* Bouton Accepter (Blanc) */
.cookie-btn.btn-primary {
    background-color: #ffffff;
    color: #000000;
}
.cookie-btn.btn-primary:hover {
    background-color: #e0e0e0;
}

/* Bouton Refuser (Sombre/Gris) */
.cookie-btn.btn-secondary {
    background-color: #2a2a2a;
    color: #ffffff;
    border: 1px solid #444444;
}
.cookie-btn.btn-secondary:hover {
    background-color: #3a3a3a;
}

/* Version Mobile responsive */
@media (max-width: 768px) {
    .cookie-banner {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    .cookie-buttons {
        width: 100%;
        justify-content: center;
    }
}


/* Élargissement du conteneur général du site */
.container {
  max-width: 1100px;            /* Augmenté de 900px à 1100px pour ouvrir l'espace */
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

/* 2. LE CONTENEUR YOUTUBE (Strictement isolé) */
.video-container {
    width: 100%;
    max-width: 600px; /* Taille de la video sur la page */
    margin: 20px auto;
    padding: 0 15px; /* Évite que la vidéo touche les bords sur mobile */
    box-sizing: border-box;
}

/* On cible TRÈS précisément l'iframe dans son conteneur pour ne rien casser d'autre */
.video-container iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important; /* Force la proportion d'origine */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* ==========================================================================
   CONTENEUR DE LA PHOTO PRINCIPALE avec les liens des réseaux sociaux 
 ========================================================================== */

.hero-photo-container {
    position: relative;          /* Indispensable pour pouvoir superposer les liens */
    width: 100%;
    max-width: 500px;            /* Ajustez la largeur maximale selon la taille de votre photo */
    margin: 20px auto;           /* Centre la photo dans la page */
    border-radius: 12px;
    overflow: hidden;            /* Garde les angles arrondis propres */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* L'IMAGE RESTE FLUIDE */
.hero-image {
    width: 100%;
    height: auto;
    display: block;
}

/* LE BLOC DES LIENS SUR LE CÔTÉ GAUCHE */
.photo-overlay-links {
    position: absolute;          /* Superpose le bloc par-dessus la photo */
    top: 50%;                    /* Centre verticalement par rapport à la photo */
    left: 20px;                  /* Décale de 20px par rapport au bord gauche de la photo */
    transform: translateY(-50%); /* Ajustement parfait du centrage vertical */
    display: flex;
    flex-direction: column;      /* Aligne vos 4 liens en colonne verticale */
    gap: 15px;                   /* Espace entre chaque icône */
    z-index: 10;                 /* S'assure que les boutons restent au-dessus */
}

/* STYLE DES BOUTONS / ICÔNES */
.photo-overlay-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: rgba(255, 255, 255, 0.85); /* Fond blanc semi-transparent */
    border-radius: 50%;          
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Supprimé : color: #333; pour laisser le SVG prendre sa couleur */
}

/* Effet au survol des boutons */
.photo-overlay-links a:hover {
    background-color: #ffffff;   
    transform: scale(1.1);       
    /* Supprimé : color: #E60067; pour éviter de casser la couleur de chaque icône */
}
/* Ajuste la taille des logos SVG dans vos boutons */
.photo-overlay-links a svg {
    width: 22px;
    height: 22px;
}

.photo-overlay-links .social-icon {
    width: 24px;
    height: 24px;
    margin: 0; /* Annule le centrage avec texte du footer */
}

/* 1. Applique la couleur dorée de la charte à l'icône TikTok */
.photo-overlay-links .tiktok-icon {
    fill: #c78e73;
}

/* 2. Empêche l'icône TikTok de devenir blanche au survol (Optionnel si vous aviez une règle générale) */
.photo-overlay-links .social-link:hover .tiktok-icon {
    fill: #c78e73; /* Reste dorée au survol */
}

/* 3. Empêche l'icône Mail du haut de devenir blanche au survol */
.photo-overlay-links .social-link:hover .mail-icon {
    fill: #a0a0a0; /* Reste grise d'origine au survol */
}

/* ==========================================================================
   GALERIE PHOTO HORIZONTALE (SCROLL DE GAUCHE À DROITE)
   ========================================================================== */
/* ==========================================================================
   1. STRUCTURE COMMUNE
   ========================================================================== */
.scroll-gallery, .video-container {
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   2. GALERIE PHOTOS (Méthode inline-block + Effet Zoom)
   ========================================================================== */
.scroll-gallery {
    display: block !important;       /* On passe en bloc simple */
    white-space: nowrap !important;  /* LE SECRET POUR PC : Interdit ABSOLUMENT le retour à la ligne */
    overflow-x: auto !important;     /* Force l'apparition du scroll si ça dépasse */
    overflow-y: hidden !important;   /* Cache totalement le scroll vertical */
    padding: 20px 10px;              /* Un peu plus d'espace en haut/bas pour le zoom */
    width: 100%;
}

/* Style de la barre de défilement pour ordinateurs */
.scroll-gallery::-webkit-scrollbar {
    height: 10px;
    display: block !important;
}
.scroll-gallery::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}
.scroll-gallery::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

/* LES CONTENEURS DE PHOTOS (Alignés comme du texte sur une seule ligne) */
.gallery-item {
    display: inline-block !important; /* Aligne les blocs horizontalement sans Flexbox */
    vertical-align: top;
    width: 250px !important;
    margin-right: 15px;               /* Espace entre les photos */
    overflow: hidden;                 /* IMPORTANT : Coupe l'image pour que le zoom reste dans le cadre */
    border-radius: 8px;               /* Arrondit le bloc */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* LES IMAGES & L'EFFET DE ZOOM AU SURVOL */
.gallery-item img {
    width: 100%;
    height: 250px;
    object-fit: contain;
    display: block;
    /* Transition fluide : l'animation de zoom prendra 0.3 seconde */
    transition: transform 0.3s ease-in-out; 
}

/* Quand la souris passe sur la photo */
.gallery-item:hover img {
    transform: scale(1.1);            /* Agrandit la photo de 10% */
    cursor: pointer;                  /* Transforme le curseur en petite main */
}

        @media (max-width: 768px) {
            body { margin-top: 20px; }
            .logo { max-width: 100px; } 
            h1 { font-size: 2rem; }
            .social-icon { width: 30px; height: 30px; }
            .footer-social { gap: 25px; }
            .cookie-banner { flex-direction: column; text-align: center; gap: 15px; }
            .cookie-text { margin-right: 0; }
        }

/* ==========================================================================
   Pour les mentions légales du site
   ========================================================================== */

/* LE FOND SEMI-TRANSPARENT DE LA POP-UP */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fond sombre transparent */
    display: none;                         /* Masqué par défaut */
    justify-content: center;
    align-items: center;
    z-index: 9999;                         /* Reste au-dessus de tout le site */
    padding: 20px;
    box-sizing: border-box;
}

/* LA BOÎTE BLANCHE DE CONTENU */
.modal-box {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    max-width: 650px;
    width: 100%;
    max-height: 80vh;                      /* Empêche de dépasser de l'écran */
    overflow-y: auto;                      /* Active un scroll interne si le texte est long */
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    animation: fadeInModal 0.3s ease-in-out;
}

/* LE BOUTON FERMER (La croix de fermeture) */
.modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    transition: color 0.2s;
}
.modal-close:hover {
    color: #E60067;                        /* Devient rose MaMounia au survol */
}

/* PETIT STYLE INTÉRIEUR */
.modal-box h2 { color: #E60067; margin-top: 0; }
.modal-box h3 { color: #333; margin-top: 20px; font-size: 16px; }
.modal-box p { color: #555; font-size: 14px; line-height: 1.5; }

/* Animation d'ouverture fluide */
@keyframes fadeInModal {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}