/* CSS pour le design responsive */

/* Styles généraux pour mobiles - à ajouter à votre CSS existant */
@media screen and (max-width: 768px) {
    /* Ajustement du carousel pour vue mobile */
    .carousel-container {
        height: 90vh; /* Réduction de la hauteur */
        min-height: 90vh;
    }
    
    .carousel-slide {
        height: 100%; /* Réajustement de la hauteur des slides */
        background-position: center center;
        transition: opacity 0.3s ease-in-outnone;

    }
    
    /* Ajustement du contenu du carousel */
    .carousel-content {
        width: 90%;
        top: 45%; /* Légèrement plus haut pour équilibrer la composition */
    }
    
    .site-title {
        font-size: 2.5rem; /* Titre plus petit mais encore visible */
        margin-bottom: 1.5rem;
        margin-top: 1.5rem;
    }
    
    /* Réorganisation des boutons de catégorie */
    .category-buttons {
        gap: 1.5rem;
        margin-top: 20vh;
        flex-direction: column; /* Disposition verticale des boutons */
    }
    
    .category-button {
        padding: 0.8rem 2rem;
        font-size: 1.1rem; /* Légèrement plus grand pour faciliter le toucher */
        width: 65%;
        margin: 0 auto; /* Centre les boutons */
    }
    
    /* Points de navigation agrandis */
    .carousel-dots {
        bottom: 25px;
        gap: 15px;
    }
    
    .dot {
        width: 14px;
        height: 14px;
    }
    
    .dot.active {
        width: 16px;
        height: 16px;
    }

    .titre-hero {
    font-size: 55px;
    letter-spacing: 0.02em;
    }

    .navbar.menu-open,
    .navbar-accueil.menu-open,
    .navbar-erreur.menu-open,
    .navbar-classic.menu-open {
        background-image: none;
        background: white; /* Fond opaque blanc, écrase les gradients ou transparences */
        box-shadow: none;  /* Supprime l'ombre */
        /* Rend la bordure inférieure invisible tout en conservant sa hauteur pour la mise en page */
        /* Si le fond du mobile-nav est blanc, ceci le rendra continu. */
        border-bottom-color: transparent; 
    }

    .navbar {
        padding: 15px 20px;
        z-index: 1001;
    }

    .navbar-classic {
        z-index: 1002;
        background-color: rgb(255, 255, 255);
    }

    .navbar-accueil {
        border-bottom: 1px solid #eee;
        background-color: rgb(255, 255, 255, 1);
        box-shadow: 0 5px 115px rgba(0, 0, 0, 0.15);
        z-index: 1002;
    }

    .navbar-accueil.scrolled {
        background-color: rgb(255, 255, 255);
        box-shadow: none;
        z-index: 1002;
    }
    
    .nav-links li {
        margin: 0 10px;
    }

    .language-selector {
        position: absolute;
        top: 200px;
        left: 70%;
    }

    .language-popup {
        position: absolute;
        top: 100%;
        right: 0;
        overflow: hidden;
        z-index: 9999;
    }
    
    .gallery {
        width: 95%;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 15px;
        margin: 30px auto;
        padding-top: 80px;
    }
    
    .gallery-item {
        border-width: 10px;
    }

    .footer {
        flex-direction: column-reverse;
        text-align: center;
        gap: 15px;
        padding: 30px 20px;
        padding-top: 90px;
        height: auto;
        min-height: 200px;
        z-index: 1;
    }
    
    .footer-right {
        justify-content: center;
    }

    .footer-left {
        justify-content: center;
    }

    .footer-left, .footer-right {
        width: 100%;
    }

    .error-code {
        font-size: 120px;
    }
    
    .error-message {
        font-size: 30px;
    }
    
    .error-image {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        margin-top: 20px;
        text-align: center;
    }

    .error-image img {
        right: -10%;
        top: 30%;
        object-position: right;
    }
    
    .error-container {
        justify-content: right;
    }

    .error-content {
        position: absolute;
        right: 0;
        top: 40%;
    }

    .nav-links, .language-icon, .nav-links-scroll {
        display: none; /* Hide desktop nav on mobile */
    }

    .hamburger {
        display: flex; /* Show hamburger on mobile */
    }

    .gallery-section {
        height: auto; /* Laisse la section grandir selon le contenu */
        overflow: visible; /* Autorise le défilement */
        min-height: auto;
        padding-bottom: 3rem; /* Tu peux ajuster pour plus d'espace */
    }


    .gallery-section::before {
        background-image: url('Images/News.webp');
        filter: none;
        transition: none !important;
        transform: none;
    }

    .gallery-container {
        display: none;
    }

    .nav-button, .dots-container, .gallery-link {
        display: none; /* Hide desktop nav on mobile */
    }

    .main-title {
        font-size: 45px;
        margin-top: 2rem;
        margin-bottom: 6rem;
        color: #3C3C3C;
        opacity: 0.8;
    }

    .mobile-gallery {
        display: block;
        width: 100%;
        padding: 0 1rem; /* Espace sur les côtés */
        overflow: visible;
        box-sizing: border-box;
        z-index: 100;
    }

    .mobile-gallery a {
        display: block; /* Important pour que le lien prenne toute la largeur */
        margin-bottom: 2rem; /* Espace entre les photos */
        text-decoration: none;
        z-index: 100;
    }

    .mobile-gallery a img {
        display: block;
        width: 100%;
        height: auto;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        opacity: 1;
        z-index: 100;
    }

    .image-du-bas {
        box-shadow: 0 15px 33px rgba(0,0,0,0.25) !important;
    }

    .contact-container {
        padding: 100px 20px 60px;
    }

    .contact-title {
        font-size: 36px;
        letter-spacing: 0.05em;
    }

    .contact-subtitle {
        font-size: 14px;
    }

    .contact-form {
        padding: 25px 15px;
    }
}

@media (max-width: 1200px) {
    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 15px;
        margin: 30px auto;
    }
}

@media (max-width: 480px) {
    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
        width: 100%;
        padding: 70px 10px;
        margin: 20px auto;
    }
    
    .gallery-item {
        border-width: 8px;
    }

    .nav-links {
        font-size: 14px;
    }

    .nav-links li {
        margin: 0 8px;
    }

}

/* Support de swipe pour le carousel */
.carousel-container {
    touch-action: pan-y pinch-zoom;
}

/* Animation pour le swipe */
@keyframes slideLeft {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

@keyframes slideRight {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

/* Classes pour les transitions de swipe */
.slide-left {
    animation: slideLeft 0.3s forwards;
}

.slide-right {
    animation: slideRight 0.3s forwards;
}

.mobile-language-icon {
    position: absolute;
    bottom: 150px;
    right: 13%;
    cursor: pointer;
}