/* -----------------------------------------
   OPTIMISATION : Respect des préférences utilisateur
----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    /* On arrête toutes les animations de feuilles si l'utilisateur le demande */
    .leaf, .animated-background {
        animation: none !important;
        opacity: 0 !important;
        display: none !important;
    }
    
    /* On enlève le flou qui est très lourd pour le GPU sur les vieux mobiles */
    nav.sticky {
        backdrop-filter: none !important;
        background: rgba(255, 255, 255, 1) !important; /* On passe sur un fond opaque simple */
    }
}

/* Défilement fluide et décalage pour le menu fixe */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem; 
}

:root {
    --pico-primary: #2e7d32;
    --pico-primary-hover: #1b5e20;
}

/* Mise en évidence du bouton Contact dans le menu */
nav.sticky .nav-links a.nav-contact-btn {
    background-color: var(--pico-primary);
    color: white;
    border-radius: 20px; /* Bords arrondis pour le faire ressortir */
    padding: 0.5rem 1.2rem;
    margin-left: 0.5rem;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(46, 125, 50, 0.2);
}

nav.sticky .nav-links a.nav-contact-btn:hover {
    background-color: var(--pico-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(46, 125, 50, 0.3);
}

/* -----------------------------------------
   ANIMATION DE FOND (FEUILLES & VENT)
----------------------------------------- */
.animated-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: linear-gradient(135deg, #fdfbf7 0%, #e8f5e9 100%);
    overflow: hidden;
    pointer-events: none; 
}

/* Forme de base de la feuille */
.leaf {
    position: absolute;
    width: 45px; 
    height: 45px;
    top: -10%; 
    opacity: 0;
}

.leaf img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Teintes de vert pour coloriser vos SVG noirs (Filtres CSS) */
.color-1 img { filter: invert(41%) sepia(100%) saturate(350%) hue-rotate(70deg) brightness(90%) contrast(90%); }
.color-2 img { filter: invert(60%) sepia(80%) saturate(300%) hue-rotate(50deg) brightness(95%) contrast(90%); }
.color-3 img { filter: invert(30%) sepia(100%) saturate(400%) hue-rotate(90deg) brightness(85%) contrast(100%); }


/* -----------------------------------------
   ANIMATIONS DES FEUILLES (CHUTE & VENT)
----------------------------------------- */

/* Chute avec de grandes ondulations fluides */
/* Chute avec ondulations fluides, puis approche verticale stabilisée */
@keyframes fallAndRest {
    0% { 
        top: -10%; 
        transform: translateX(0px) rotate(0deg); 
        opacity: 0; 
        animation-timing-function: ease-out; 
    }
    10% { opacity: 0.8; }
    35% { 
        transform: translateX(calc(var(--sway-x) * 1.2)) rotate(120deg); 
        animation-timing-function: ease-in-out;
    }
    65% { 
        transform: translateX(calc(var(--sway-x) * -0.8)) rotate(240deg); 
        animation-timing-function: ease-in-out;
    }
    85% { 
        /* Fin des ondulations : la feuille s'aligne sur sa position finale */
        transform: translateX(var(--sway-x)) rotate(var(--rest-rotate)); 
    }
    100% { 
        top: var(--rest-top); 
        /* On maintient exactement la même translation et rotation qu'à 85% */
        /* Résultat : seul le "top" continue de changer, la chute devient purement verticale */
        transform: translateX(var(--sway-x)) rotate(var(--rest-rotate)); 
        opacity: 0.8; 
    }
}

/* Effet de brassage pour les feuilles EN VOL pendant le vent */
.leaf.buffeting img {
    animation: buffet 3.5s ease-in-out;
}

@keyframes buffet {
    0% { transform: translateX(0px) rotate(0deg); }
    50% { transform: translateX(120px) rotate(45deg); } 
    100% { transform: translateX(0px) rotate(0deg); } 
}

/* Grand envol pour les feuilles au sol lors d'un coup de vent */
.leaf.blowing {
    animation: blowAway 3.5s forwards cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes blowAway {
    0% { 
        top: var(--rest-top);
        transform: translateX(var(--sway-x)) rotate(var(--rest-rotate));
        opacity: 0.8; 
    }
    100% { 
        top: calc(100vh - 400px); 
        transform: translateX(120vw) rotate(1080deg); 
        opacity: 0; 
    }
}



/* -----------------------------------------
   STYLES DU SITE
----------------------------------------- */
nav.sticky {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(5px);
    z-index: 99;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.hero {
    padding: 4rem 1rem;
    text-align: center;
    background-color: rgba(232, 245, 233, 0.85);
    border-radius: var(--pico-border-radius);
    margin-top: 1rem;
    margin-bottom: 2rem;
    color: #1b5e20;
}

section {
    padding: 3rem 2rem;
    margin-bottom: 1rem;
    border-radius: var(--pico-border-radius);
    border: 1px solid transparent;
    background-color: rgba(255, 255, 255, 0.75);
}

section:nth-of-type(even) {
    background-color: rgba(248, 249, 250, 0.8);
    border: 1px solid var(--pico-muted-border-color);
}

@keyframes highlight-target {
    0% { background-color: transparent; transform: scale(1); }
    20% { background-color: #d4edda; transform: scale(1.01); box-shadow: 0 4px 15px rgba(46, 125, 50, 0.15); }
    100% { background-color: inherit; transform: scale(1); box-shadow: none; }
}
section:target {
    animation: highlight-target 1.5s ease-out;
}

.certibiocide {
    background-color: #fff3cd;
    color: #856404;
    padding: 0.5rem;
    border-radius: 5px;
    display: inline-block;
    font-weight: bold;
}

/* ----- CENTRAGE & ADAPTATION DES IMAGES ----- */

.single-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 1.5rem 0;
}

.single-image-container img {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 400px; 
    border-radius: var(--pico-border-radius);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    object-fit: contain;
    transition: transform 0.3s ease;
}

.single-image-container img:hover {
    transform: scale(1.02);
    cursor: zoom-in;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-auto-rows: 150px;
    gap: 1rem;
    margin-top: 2rem;
    grid-auto-flow: dense;
}

.gallery-grid a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--pico-border-radius);
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-grid a.large-item {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-grid a:hover {
    transform: scale(1.03);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    cursor: zoom-in;
    z-index: 2;
    position: relative;
}

.gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ----- Mode Mobile : Galerie en "Swipe" Horizontal ----- */
@media (max-width: 768px) {
    .gallery-grid {
        /* On remplace la grille verticale par une ligne horizontale */
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        
        /* Magnétisme pour s'arrêter pile sur une image (Scroll Snap) */
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        
        gap: 1rem;
        padding-bottom: 1.5rem; /* Laisse de la place sous les images */
        
        /* Personnalisation fine de la barre de défilement (Firefox) */
        scrollbar-width: thin;
        scrollbar-color: var(--pico-primary) transparent;
    }

    /* Personnalisation de la barre de défilement (Chrome/Safari/Edge) */
    .gallery-grid::-webkit-scrollbar {
        height: 6px;
    }
    .gallery-grid::-webkit-scrollbar-thumb {
        background-color: var(--pico-primary);
        border-radius: 10px;
    }

    .gallery-grid a {
        /* Chaque image prend 80% de l'écran, la suivante dépasse donc de 20% */
        flex: 0 0 80%; 
        height: 250px; /* Hauteur fixe et raisonnable pour ne pas envahir l'écran */
        scroll-snap-align: center; /* L'image s'aimante toujours au centre */
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .gallery-grid a.large-item {
        /* On annule la taille spéciale des grandes images pour un carrousel uniforme */
        grid-column: auto;
        grid-row: auto;
    }
}

.contact-info {
    text-align: center;
    font-size: 1.1rem;
    background-color: rgba(232, 245, 233, 0.9);
    padding: 2rem;
    border-radius: var(--pico-border-radius);
    max-width: 600px;
    margin: 0 auto;
}

/* ==========================================
   BARRE DE NAVIGATION & MENU MOBILE
========================================== */
nav.sticky {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 99;
    border-bottom: 2px solid var(--pico-primary);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 0rem 2rem;
    
    /* Forcer l'alignement pour contrôler parfaitement les marges et éviter les conflits */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
}

/* Retire les comportements par défaut de Pico sur les listes du menu */
nav.sticky ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

/* ==========================================
   STYLE DU LOGO IMAGE
========================================== */
nav.sticky .nav-logo a {
    display: flex;
    align-items: center;
    padding: 0;
    background: transparent; /* Empêche l'apparition d'un fond gris au clic sur certains navigateurs */
}

nav.sticky .nav-logo .site-logo {
    height: 70px; /* Hauteur maximale, à ajuster selon les proportions de l'image */
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

nav.sticky .nav-logo a:hover .site-logo {
    transform: scale(1.05); /* Léger effet de zoom au survol */
}

/* Style des liens sur ordinateur */
nav.sticky .nav-links {
    gap: 0.2rem;
}

nav.sticky .nav-links a {
    color: #444;
    font-weight: 500;
    padding: 0.5rem 0.8rem;
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
    white-space: nowrap; /* Empêche les boutons de s'écraser les uns sur les autres */
}

nav.sticky .nav-links a:hover {
    color: var(--pico-primary);
    background-color: rgba(46, 125, 50, 0.1);
    text-decoration: none;
}

/* --- Le bouton Hamburger (Caché sur ordi) --- */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    cursor: pointer;
    z-index: 100;
    margin-left: 1rem; /* Marge de sécurité pour ne pas coller au bord */
}

.menu-toggle .bar {
    height: 3px;
    width: 100%;
    background-color: var(--pico-primary);
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* --- Mode Mobile & Moyens Écrans --- */
/* Le point de bascule passe de 992px à 1150px pour s'adapter au nombre d'onglets */
@media (max-width: 1150px) {
    .menu-toggle {
        display: flex; 
    }

    nav.sticky .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        flex-direction: column;
        align-items: center;
        max-height: 0; 
        overflow: hidden;
        transition: max-height 0.4s ease-in-out;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        gap: 0;
    }

    nav.sticky .nav-links.active {
        max-height: 500px; 
    }

    nav.sticky .nav-links li {
        width: 100%;
        padding: 0;
    }

    nav.sticky .nav-links a {
        display: block;
        text-align: center;
        padding: 1.2rem;
        border-radius: 0;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }

    /* Animation de la croix */
    .menu-toggle.is-active .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    .menu-toggle.is-active .bar:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.is-active .bar:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }
}