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

/* Variables globales */
:root {
    --primary-color: #000;
    --secondary-color: #333;
    --background-color: #fff;
    --text-color: #000;
}

/* Style général */
body {
    font-family: 'Arial', sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
}

/* Header */
header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background-color: black; /* Couleur par défaut */
    padding: 20px;
    transition: all 0.3s ease;
}

/* Classe spéciale pour la page d'accueil avec carousel */
header.over-carousel {
    background-color: transparent;
    box-shadow: none;
}

/* Gradient subtil pour améliorer la lisibilité du texte */
header.over-carousel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(to bottom, 
        rgba(0,0,0,0.5) 0%,
        rgba(0,0,0,0.3) 50%,
        rgba(0,0,0,0) 100%);
    pointer-events: none;
}

header.over-carousel .brand h1,
header.over-carousel .main-nav a {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.main-content {
    padding-top: calc(60px + 40px); /* Hauteur du header + marge */
}

.home-page .main-content {
    padding-top: 0; /* Pas de padding pour la page d'accueil */
}

.brand h1 {
    font-size: 2em;
    color: #fff;
    letter-spacing: 2px;
}

.header-scrolled {
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.header-scrolled .brand h1 {
    font-size: 1.5em;
}

/* Ajouter une transition douce */
header, .brand h1 {
    transition: all 0.3s ease;
}



/* Navigation */
.main-nav ul {
    display: flex;
    justify-content: flex-end; /* Change de center à flex-end pour aligner à droite */
    list-style: none;
    padding-right: 20px; /* Ajoute un peu d'espace à droite */
}

.main-nav a {
    color: #fff; /* Texte toujours noir */
    text-decoration: none;
    padding: 10px 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

/* Option : changer le fond au survol */
.main-nav a:hover {
    background: rgba(0, 0, 0, 0.1);
}


/* Carousel */
.carousel {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    margin-top: 0;
}

.carousel-slide {
    position: relative; 
    width: 100%;
    height: 100%;
    display: none;
}

.carousel-slide.active {
    display: block; /* Seule la slide active est affichée */
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Style amélioré pour les boutons */
.carousel-prev,
.carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.carousel-prev i,
.carousel-next i {
    font-size: 24px;
}

.carousel-prev:hover,
.carousel-next:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: translateY(-50%) scale(1.1);
}

.carousel-prev {
    left: 20px;
}

.carousel-next {
    right: 20px;
}

/* Sections */
.section {
    padding: 80px 0;
}

/* Style pour la section "À propos" */
.section#about {
    padding: 4rem 0; /* Ajoute un espace en haut et en bas de la section */
    background: #f9f9f9; /* Définit un fond de couleur clair */
}

/* Style pour le conteneur de la section "À propos" */
.section#about .container {
    max-width: 1200px; /* Limite la largeur maximale du conteneur */
    margin: 0 auto; /* Centre le conteneur horizontalement */
    padding: 0 2rem; /* Ajoute un espace interne à gauche et à droite */
}

/* Style pour le contenu de la section "À propos" */
.section#about .about-content {
    display: flex; /* Utilise Flexbox pour aligner les éléments côte à côte */
    align-items: center; /* Aligne verticalement les éléments au centre */
    gap: 2rem; /* Ajoute un espace entre les éléments */
}

/* Style pour l'image de la section "À propos" */
.section#about .about-content img {
    max-width: 400px; /* Limite la largeur maximale de l'image */
    height: auto; /* Conserve les proportions de l'image */
    border-radius: 8px; /* Arrondit les coins de l'image */
}

/* Style pour le texte de la section "À propos" */
.section#about .about-text {
    flex: 1; /* Permet au texte de prendre l'espace restant */
}

/* Style pour le titre de la section "À propos" */
.section#about .about-text h2 {
    font-size: 2rem; /* Définit la taille du titre */
    margin-bottom: 1rem; /* Ajoute un espace en dessous du titre */
    color: #333; /* Définit la couleur du titre */
}

/* Style pour le paragraphe de la section "À propos" */
.section#about .about-text p {
    font-size: 1.2rem; /* Définit la taille du texte */
    color: #666; /* Définit la couleur du texte */
    line-height: 1.6; /* Ajoute un espacement entre les lignes de texte */
}

/* Footer */
footer {
    background: #000;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

.gallery-item-inner {
    position: relative;
    width: 100%;
    padding-bottom: 75%; /* Ratio 4:3 */
    overflow: hidden;
}

/* Placeholder animation */
.gallery-item-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Optimisation pour mobile */
@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 10px;
        padding: 10px;
    }

    .modal-content {
        max-width: 95%;
    }
}

.gallery-container {
    width: 100%;
    overflow-x: hidden;
}

.gallery-container:active {
    cursor: grabbing;
}

.gallery {
    display: flex;
    transition: transform 0.3s ease;
}

.video-gallery {
    display: flex;
    transition: transform 0.3s ease;
}

.video-container {
    flex: 0 0 auto; /* Empêche les éléments de rétrécir ou de grandir */
    width: 300px;   /* Largeur fixe des vignettes (ajuste selon tes besoins) */
    height: 200px;  /* Hauteur fixe des vignettes (ajuste selon tes besoins) */
    position: relative; /* Nécessaire pour le positionnement absolu de l'overlay */
}

.video-thumbnail-wrapper {
    position: relative; /* Nécessaire pour le positionnement de l'overlay */
    width: 100%;
    height: 100%;
    cursor: pointer; /* Indique que l'élément est cliquable */
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Important pour que l'image/video remplisse le conteneur */
    display: block;
}

.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* Masqué par défaut */
    transition: opacity 0.3s ease; /* Animation au survol */
}

.video-thumbnail-wrapper:hover .play-overlay {
    opacity: 1; /* Affiché au survol */
}

.play-overlay i {
    font-size: 50px; /* Taille de l'icône (ajuste selon tes besoins) */
    color: white;
}

.gallery-item {
    flex: 0 0 auto;
    width: 300px;
    height: 200px;
    object-fit: cover;
    margin-right: 10px;
    cursor: pointer;
    background: #f0f0f0;
    position: relative;
}

.gallery-item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 4px solid #ddd;
    border-top-color: #999;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.fullscreen-overlay {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
}

.fullscreen-content {
    max-width: 90%;
    max-height: 90%;
    margin: auto;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 99999;
}

.close-btn:hover,
.close-btn:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.gallery-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 10; /* Pour qu'ils soient au-dessus des vidéos */
    font-size: 24px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.nav-button.prev {
    left: 10px;
}

.nav-button.next {
    right: 10px;
}

.nav-button:hover {
    opacity: 1;
}

.fullscreen-prev,
.fullscreen-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10010;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.fullscreen-prev:hover,
.fullscreen-next:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: translateY(-50%) scale(1.1);
}

.fullscreen-prev { 
    left: 20px; 
}

.fullscreen-next { 
    right: 20px; 
}

/* Media queries pour rendre la section À propos responsive */
@media (max-width: 992px) {
    .section#about .about-content img {
        max-width: 300px; /* Image plus petite sur tablette */
    }
    
    .section#about .about-text h2 {
        font-size: 1.8rem;
    }
    
    .section#about .about-text p {
        font-size: 1.1rem;
    }
}

/* Cacher le bouton burger sur desktop */
@media (min-width: 769px) {
    .mobile-menu-toggle {
        display: none;
    }
}

/* Navigation mobile */
@media (max-width: 768px) {
    .nav-button {
        display: none;
    }
    
    header {
        padding: 10px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1100; /* Valeur élevée pour être au-dessus du carousel */
    }
    
    /* Ajouter un gradient pour améliorer la lisibilité */
    header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        pointer-events: none;
        z-index: -1; /* En dessous du contenu du header */
    }
    
    .brand h1 {
        font-size: 1.5em;
        text-align: left;
        margin-bottom: 10px;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.8); /* Ombre pour meilleure lisibilité */
        color: white;
    }
    
    /* Menu burger */
    .mobile-menu-toggle {
        display: block;
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 1.5em;
        cursor: pointer;
        color: white;
        z-index: 1101; /* Au-dessus de tout */
        text-shadow: 2px 2px 4px rgba(0,0,0,0.8); /* Ombre pour meilleure lisibilité */
    }
    
    /* Menu plein écran */
    .main-nav {
        display: none; /* Caché par défaut */
        position: fixed; /* Position fixe pour couvrir tout l'écran */
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh; /* Hauteur totale de l'écran */
        background-color: rgba(0, 0, 0, 0.8); /* Fond noir semi-transparent */
        z-index: 1090; /* Juste sous le header */
        overflow-y: auto; /* Permettre le défilement si besoin */
    }
    
    .main-nav.active {
        display: flex; /* Affiche comme flexbox quand actif */
        justify-content: center;
        align-items: center;
    }
    
    .main-nav ul {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 0;
    }
    
    .main-nav ul li {
        margin: 15px 0; /* Espace entre les éléments */
        width: 100%;
        text-align: center;
    }
    
    .main-nav a {
        color: white;
        font-size: 1.5em; /* Plus grand sur mobile */
        text-shadow: 1px 1px 2px rgba(0,0,0,0.8); /* Ombre pour meilleure lisibilité */
        display: block;
        padding: 15px 20px;
        font-weight: bold;
        letter-spacing: 2px; /* Espacement des lettres */
    }
    
    /* Effet de survol pour les liens du menu */
    .main-nav a:hover {
        background-color: rgba(255, 255, 255, 0.1); /* Légère surbrillance au survol */
    }

    /* Carousel - pleine hauteur et commence en haut */
    .carousel {
        position: relative;
        height: 100vh; /* Hauteur totale de l'écran */
        margin-top: 0; /* Pas de marge en haut */
        z-index: 1000; /* Sous le header et le menu */
        top: 0;
    }
    
    .carousel-slide {
        height: 100%; /* Slide pleine hauteur */
    }
    
    .carousel-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Image couvre tout l'espace */
    }
    
    /* Assurer que le contenu principal commence après le carrousel */
    .main-content {
        margin-top: 0;
        position: relative;
        z-index: 1001; /* Au-dessus du carousel */
        padding-top: 60px;
    }
    
    /* Éliminer tout espace supplémentaire */
    body, html {
        margin: 0;
        padding: 0;
        overflow-x: hidden; /* Empêcher le défilement horizontal */
    }
    
    /* Ajuster les boutons de navigation du carousel */
    .carousel-prev,
    .carousel-next {
        z-index: 1050; /* Au-dessus du carousel mais sous le header */
    }

    .gallery {
        display: flex;
        flex-wrap: nowrap; /* Important pour le défilement horizontal */
        overflow-x: auto;   /* Permet le défilement horizontal */
        gap: 10px;         /* Espace entre les vidéos */
        -webkit-overflow-scrolling: touch; /* Améliore le défilement sur mobile */
    }
    
    .video-gallery {
        display: flex;
        flex-wrap: nowrap; /* Important pour le défilement horizontal */
        overflow-x: auto;   /* Permet le défilement horizontal */
        gap: 10px;         /* Espace entre les vidéos */
        -webkit-overflow-scrolling: touch; /* Améliore le défilement sur mobile */
    }

    .fullscreen-prev,
    .fullscreen-next {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .section#about .about-content {
        flex-direction: column; /* Passe en colonne sur mobile */
        text-align: center;
    }
    
    .section#about .about-content img {
        max-width: 100%; /* Image pleine largeur */
        margin-bottom: 2rem; /* Espace sous l'image */
    }
    
    .section#about .about-text h2 {
        font-size: 1.6rem;
    }
    
    .section#about .about-text p {
        font-size: 1rem;
    }
    
    .section#about {
        padding: 3rem 0; /* Moins d'espace vertical sur mobile */
    }
}

@media (max-width: 480px) {
    .section#about .about-text h2 {
        font-size: 1.4rem;
    }
    
    .section#about .container {
        padding: 0 1rem; /* Moins de padding horizontal sur très petits écrans */
    }
}