@charset "UTF-8";

/* =============================================================================
   1. ANIMATIONS RESPONSIVE (TEXTE + IMAGES)
   ========================================================================== */

/* On force la transition sur .text-area pour voir le titre monter */
.item, .text-area {
    transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 1s ease-out !important;
    will-change: transform, opacity;
}

/* État Caché (Départ) */
.hidden-top { 
    opacity: 0 !important;
    transform: translate(calc(var(--x-dir) * 40px), -50px) rotate(calc(var(--x-dir) * -3deg)) !important;
}

.hidden-bottom { 
    opacity: 0 !important;
    transform: translate(calc(var(--x-dir) * 40px), 50px) rotate(calc(var(--x-dir) * 3deg)) !important;
}

/* État Visible (Arrivée) - LE PLUS IMPORTANT */
.is-visible {
    opacity: 1 !important; /* Force l'apparition du texte */
    transform: translate(0, 0) rotate(0deg) !important; /* Remet le texte à sa place */
}


/* =============================================================================
   2. RESPONSIVE GLOBAL (Max 1023px) - (TES REGLAGES SONT CONSERVÉS)
   ========================================================================== */

body { padding: 50px 20px; }
.grid { width: 100%; max-width: 100vw; }
.site-header { position: relative; padding: 0 0 50px 0; background: rgba(245, 246, 250, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.header-nav { gap: 10px; }
#info, #book { scroll-margin-top: 20px; }
.info-section { margin: 50px 0 50px; }


/* Structure stack : Texte au dessus, images dessous */
.mf-grid, .jo-grid, .destination-grid, .boutique-grid, .pinpin-grid, .gestes-grid, .maille-grid, .paris-grid, .ird-grid, .infuse-grid {
    display: flex;
    flex-direction: column;
    margin-bottom: 80px;
    align-items: center; /* Ajout pour centrer si tu utilises max-width */
}

.text-area { 
    width: 100%; 
    margin-bottom: 30px; 
    padding-right: 0;
    grid-column: auto !important; 
    grid-row: auto !important; 
    max-width: 600px;
}

.client-name { max-width: 100%; }
.title { font-size: 3.5rem; letter-spacing: -1px; }
.description { max-width: 100%; }

/* Reset des items pour qu'ils obéissent à la nouvelle grille */
.item {
    width: 100% !important;
    margin: 0 !important;
    z-index: 1; 
    position: relative; /* Important pour les z-index et overlap */
    box-shadow: none !important;
}

.item img, .item video {
    border-radius: var(--radius);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =============================================================================
   ZONE 1 : TABLETTE (801px à 1023px)
   Grille : 6 Colonnes (1fr chacune)
   ========================================================================== */
@media (min-width: 801px) and (max-width: 1023px) {

    main {
        max-width: 800px;
        padding: 0 20px;
        margin: 0 auto; /* Pour centrer le main */
    }
   
    .images-container {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr); /* 6 colonnes flexibles */
        grid-auto-rows: auto; /* Hauteur de ligne auto */
        gap: 10px;
        width: 100%;
    }

    /* --- MAILLE (3 items) --- */
    /* Ex: Col 1 à 4 (gauche), Row 1 à 2 (première ligne) */
    .maille-img-1 { grid-column: 1 / 4; grid-row: 1 / 2; height: 300px; }
    .maille-img-2 { grid-column: 4 / 7; grid-row: 1 / 2; height: 250px; align-self: flex-end;}
    .maille-img-3 { grid-column: 2 / 6; grid-row: 2 / 3; height: 350px; }

    /* --- BOUTIQUE (5 items) --- */
    .boutique-img-1 { grid-column: 3 / 5; grid-row: 1 / 2; height: 300px; align-self: flex-end; }
    .boutique-img-2 { grid-column: 5 / 7; grid-row: 1 / 2; height: 400px; }
    .boutique-img-3 { grid-column: 1 / 3; grid-row: 2 / 2; height: 450px; }
    .boutique-img-4 { grid-column: 1 / 3; grid-row: 1 / 1; height: 300px; align-self: flex-end; }
    .boutique-img-5 { grid-column: 3 / 7; grid-row: 2 / 3; height: 620px; }

    /* --- IRD (3 items) --- */
    .ird-img-1 { grid-column: 2 / 2; grid-row: 1 / 2; height: 350px; align-self: flex-end; }
    .ird-img-2 { grid-column: 3 / 6; grid-row: 1 / 2; height: 400px; }
    .ird-img-3 { grid-column: 1 / 7; grid-row: 2 / 3; height: 400px; }

    /* --- INFUSE (6 items) --- */
    .infuse-img-1 { grid-column: 2 / 4; grid-row: 1 / 2; height: 400px; }
    .infuse-img-2 { grid-column: 1 / 5; grid-row: 2 / 3; height: 280px; }
    .infuse-img-3 { grid-column: 4 / 6; grid-row: 1 / 1; height: 250px; align-self: flex-end; }
    .infuse-img-4 { grid-column: 3 / 5; grid-row: 3 / 4; height: 200px; margin-top: -120px !important; }
    .infuse-img-5 { grid-column: 5 / 7; grid-row: 2 / 3; height: 400px; }
    .infuse-img-6 { grid-column: 1 / 3; grid-row: 3 / 4; height: 400px; margin-top: -120px !important;  }

    /* --- MARCEL & FILS (6 items) --- */
    .mf-img-1 { grid-column: 2 / 4; grid-row: 1 / 2; height: 250px; }
    .mf-img-2 { grid-column: 4 / 6; grid-row: 1 / 2; height: 250px; }
    .mf-img-3 { grid-column: 1 / 2; grid-row: 1 / 2; height: 200px; align-self: flex-end; }
    .mf-img-4 { grid-column: 2 / 5; grid-row: 2 / 2; height: 250px; align-self: flex-end;  }
    .mf-img-5 { grid-column: 5 / 7; grid-row: 2 / 2; height: 350px; }
    .mf-img-6 { grid-column: 1 / 5; grid-row: 2 / 2; height: 90px; }

    /* --- JO 2024 (4 items) --- */
    .jo-img-1 { grid-column: 4 / 6; grid-row: 1 / 2; height: 350px; align-self: flex-end;  }
    .jo-img-2 { grid-column: 2 / 4; grid-row: 1 / 2; height: 440px; }
    .jo-img-3 { grid-column: 1 / 5; grid-row: 2 / 3; height: 350px; }
    .jo-img-4 { grid-column: 5 / 7; grid-row: 2 / 3; height: 440px; }

    /* --- DESTINATION (5 items) --- */
    .destination-img-1 { grid-column: 2 / 4; grid-row: 1 / 1; height: 350px; }
    .destination-img-2 { grid-column: 1 / 3; grid-row: 2 / 2; height: 350px; }
    .destination-img-3 { grid-column: 4 / 7; grid-row: 1 / 1; height: 350px; }
    .destination-img-4 { grid-column: 3 / 7; grid-row: 2 / 2; height: 350px; }
    .destination-img-5 { grid-column: 1 / 6; grid-row: 3 / 3; height: 130px; }

    /* --- PARIS (3 items) --- */
    .paris-img-1 { grid-column: 4 / 6; grid-row: 1 / 2; height: 400px; align-self: flex-end; }
    .paris-img-2 { grid-column: 2 / 4; grid-row: 1 / 1; height: 450px; }
    .paris-img-3 { grid-column: 1 / 5; grid-row: 2 / 3; height: 300px; left: 80px !important; }

    /* --- PINPIN (3 items) --- */
    .pinpin-img-1 { grid-column: 2 / 6; grid-row: 1 / 2; height: 350px; }
    .pinpin-img-2 { grid-column: 1 / 3; grid-row: 2 / 3; height: 100px; align-self: flex-start; }
    .pinpin-img-3 { grid-column: 3 / 7; grid-row: 2 / 3; height: 300px; }

    /* --- GESTES (6 items) --- */
    .gestes-img-1 { grid-column: 2 / 4; grid-row: 1 / 1; height: 100%;  }
    .gestes-img-2 { grid-column: 4 / 6; grid-row: 1 / 1; height: 350px; align-self: flex-end; }
    .gestes-img-3 { grid-column: 5 / 7; grid-row: 3 / 3; height: 220px; }
    .gestes-img-4 { grid-column: 1 / 3; grid-row: 2 / 2; height: 300px; }
    .gestes-img-5 { grid-column: 3 / 7; grid-row: 2 / 2; height: 300px; }
    .gestes-img-6 { grid-column: 1 / 5; grid-row: 3 / 3; height: 300px; }
}


/* =============================================================================
   ZONE 2 : MOBILE (0px à 800px)
   Grille : 4 Colonnes (1fr chacune)
   ========================================================================== */
@media (max-width: 800px) {

    main {
        max-width: 375px;
        padding: 0 20px;
        margin: 0 auto; /* Pour centrer le main */
    }

     .edito-puce { column-count: 1; }
     .info-section {margin: 50px 0 0;}

     /* Structure stack : Texte au dessus, images dessous */
    .mf-grid, .jo-grid, .destination-grid, .boutique-grid, .pinpin-grid, .gestes-grid, .maille-grid, .paris-grid, .ird-grid, .infuse-grid {
        margin: 0;
    }

    .images-container {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr); /* 4 colonnes flexibles */
        grid-auto-rows: auto;
        gap: 10px;
        width: 100%;
    }

    /* --- MAILLE (3 items) --- */
    .maille-img-1 { grid-column: 1 / 3; grid-row: 1 / 2; height: 120px; align-self: flex-end; }
    .maille-img-2 { grid-column: 3 / 5; grid-row: 1 / 2; height: 200px; }
    .maille-img-3 { grid-column: 1 / 5; grid-row: 2 / 3; height: 200px; }

    /* --- BOUTIQUE (5 items) --- */
    .boutique-img-1 { grid-column: 1 / 3; grid-row: 1 / 1; height: 200px; align-self: flex-end; }
    .boutique-img-2 { grid-column: 3 / 5; grid-row: 1 / 1; height: 300px;  }
    .boutique-img-3 { grid-column: 1 / 3; grid-row: 2 / 3; height: 300px; }
    .boutique-img-4 { grid-column: 3 / 5; grid-row: 2 / 3; height: 150px; }
    .boutique-img-5 { grid-column: 3 / 5; grid-row: 3 / 3; height: 200px; margin-top: -150px !important; }

    /* --- IRD (3 items) --- */
    .ird-img-1 { grid-column: 1 / 3; grid-row: 1 / 2; height: 250px; }
    .ird-img-2 { grid-column: 3 / 5; grid-row: 1 / 2; height: 210px; align-self: flex-end; }
    .ird-img-3 { grid-column: 1 / 5; grid-row: 2 / 3; height: 200px; }

    /* --- INFUSE (6 items) --- */
    .infuse-img-1 { grid-column: 1 / 3; grid-row: 1 / 2; height: 250px; }
    .infuse-img-2 { grid-column: 1 / 5; grid-row: 2 / 3; height: 175px; }
    .infuse-img-3 { grid-column: 3 / 5; grid-row: 1 / 1; height: 180px; align-self: flex-end; }
    .infuse-img-4 { grid-column: 1 / 3; grid-row: 3 / 3; height: 130px; }
    .infuse-img-5 { grid-column: 1 / 3; grid-row: 4 / 5; height: 220px; }
    .infuse-img-6 { grid-column: 3 / 5; grid-row: 3 / 5; height: 280px; }

    /* --- MARCEL & FILS (6 items) --- */
    .mf-img-1 { grid-column: 1 / 3; grid-row: 1 / 2; height: 200px; }
    .mf-img-2 { grid-column: 3 / 5; grid-row: 1 / 2; height: 180px; align-self: flex-end; }
    .mf-img-3 { grid-column: 3 / 5; grid-row: 3 / 3; height: 220px; }
    .mf-img-4 { grid-column: 1 / 5; grid-row: 2 / 3; height: 200px; }
    .mf-img-5 { grid-column: 1 / 3; grid-row: 3 / 3; height: 220px; }
    .mf-img-6 { grid-column: 1 / 4; grid-row: 4 / 5; height: 40px; }

    /* --- JO 2024 (4 items) --- */
    .jo-img-1 { grid-column: 1 / 3; grid-row: 1 / 2; height: 250px; align-self: flex-end; }
    .jo-img-2 { grid-column: 3 / 5; grid-row: 1 / 2; height: 290px; }
    .jo-img-3 { grid-column: 3 / 5; grid-row: 2 / 3; height: 250px; }
    .jo-img-4 { grid-column: 1 / 3; grid-row: 2 / 2; height: 290px; }

    /* --- DESTINATION (5 items) --- */
    .destination-img-1 { grid-column: 1 / 3; grid-row: 1 / 2; height: 220px; }
    .destination-img-2 { grid-column: 3 / 5; grid-row: 1 / 2; height: 180px; align-self: flex-end; }
    .destination-img-3 { grid-column: 1 / 4; grid-row: 4 / 4; height: 250px; }
    .destination-img-4 { grid-column: 1 / 5; grid-row: 2 / 2; height: 250px; }
    .destination-img-5 { grid-column: 1 / 4; grid-row: 3 / 4; height: 50px; }

    /* --- PARIS (3 items) --- */
    .paris-img-1 { grid-column: 1 / 3; grid-row: 1 / 1; height: 250px; align-self: flex-end; }
    .paris-img-2 { grid-column: 3 / 5; grid-row: 1 / 1; height: 300px; }
    .paris-img-3 { grid-column: 1 / 5; grid-row: 2 / 3; height: 200px; }

    /* --- PINPIN (3 items) --- */
    .pinpin-img-1 { grid-column: 1 / 5; grid-row: 1 / 2; height: 200px; }
    .pinpin-img-2 { grid-column: 1 / 3; grid-row: 2 / 3; height: 70px; align-self: flex-start; }
    .pinpin-img-3 { grid-column: 3 / 5; grid-row: 2 / 3; height: 120px; }

    /* --- GESTES (6 items) --- */
    .gestes-img-1 { grid-column: 1 / 3; grid-row: 1 / 2; height: 300px; }
    .gestes-img-2 { grid-column: 3 / 5; grid-row: 1 / 1; height: 250px; align-self: flex-end; }
    .gestes-img-3 { grid-column: 3 / 5; grid-row: 3 / 3; height: 200px; }
    .gestes-img-4 { grid-column: 1 / 3; grid-row: 3 / 4; height: 200px; }
    .gestes-img-5 { grid-column: 1 / 5; grid-row: 2 / 2; height: 200px; }
    .gestes-img-6 { grid-column: 2 / 5; grid-row: 4 / 5; height: 150px; }
}