@charset "UTF-8";



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

.is-visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
}

.hidden-top { 
    opacity: 0 !important;
    transform: translate3d(calc(var(--x-dir) * 40px), -100px, 0) rotate(calc(var(--x-dir) * -6deg)) !important;
}

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

 

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

 

.grid { width: 100%; max-width: 100%; }
.site-header {padding: 30px; }
.header-nav { gap: 10px; }
#info, #book { scroll-margin-top: 100px; }

.hero-grid, .sous-hero { width: 100vw; max-width: none;  }
.text-content {
    /* Force le navigateur à privilégier le scroll vertical (pan-y) sur le texte */
    position: relative;
    z-index: 50; /* S'assure que le texte est bien au-dessus pour capter le doigt */

}




/* Structure stack : Texte au dessus, images dessous */

.sartine-grid, .sous-hero-grid {
    display: flex;
    flex-direction: column;
    max-width: 375px;
}


/* Tous les articles de projet (anciens ET nouveaux créés via admin) */
#book article {
    display: flex;
    flex-direction: column;
    margin-bottom: 80px;
    align-items: center;
}

.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 {
        width: 100%;
        max-width: none; /* On annule les 800px ! */
        padding: 0 0 50px 0; /* On enlève les marges latérales ici */
        margin: 0;
    }

    .sartine-grid, .sous-hero-grid{
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        padding: 0 80px;
    }

        #book {
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
        padding: 0 20px;
    }

    #book { scroll-margin-top: 120px; }
    .hero-grid, .sous-hero { 
        width: 100%; 
        max-width: none; 
    }
    .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; }

    /* --- AVIGNON (3 items) --- */
    .avignon-img-1 { grid-column: 1 / 4; grid-row: 1 / 2; height: 380px; }
    .avignon-img-2 { grid-column: 4 / 7; grid-row: 1 / 2; height: 260px; align-self: flex-end; }
    .avignon-img-3 { grid-column: 1 / 7; grid-row: 2 / 3; height: 300px; }
}

footer {padding: 30px;}


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

    html {
        scroll-snap-type: none !important;
    }



    
    #info,
    #sous-hero,
    #brief-process,
    #book,
    #contact {
        scroll-snap-align: none !important;
        scroll-snap-stop: normal !important;
    }


        .site-header {
        position: relative;
        /* On adapte les marges pour le mobile + la zone de l'heure */
        padding: 30px;
    }








     #book {
        scroll-margin-top: 30px;
    
    }

.site-header.over-hero .header-logo #poisson path { fill: var(--hero-color) !important; transition: fill 1s ease; }
.site-header.over-hero .header-logo #texte path { fill: var(--hero-responsive) !important; transition: fill 0.4s ease; }
.site-header.over-hero .header-logo:hover #poisson path { fill: var(--hero-responsive) !important; transition: fill 1s ease; }
.site-header.over-hero .header-logo:hover #texte path { fill: var(--hero-color) !important; transition: fill 1s ease; }


.hero-grid .title, .hero-grid .description {
    color: var(--hero-responsive);
    touch-action: pan-y;
}

#sous-hero .bg-image-sous-hero,
#brief-process .bg-image-sous-hero { display: none; }
#sous-hero,
#brief-process { background: var(--white); }
.sous-hero .title, .sous-hero .description { color: var(--hero-responsive); }
.sous-hero .info-skills { width: 100%; }
.sous-hero .edito-puce li { color: var(--hero-responsive); }

    .dots-separator-li circle {
    fill: var(--hero-responsive);
    opacity: 0.3; /* Ton opacité d'origine */
}



.site-header.over-hero .nav-item { color: var(--black); }
.site-header.over-hero .hover-underline::after { background-color: var(--black); }
.btn-brief { color: var(--hero-responsive) !important; }
.btn-brief img { filter: none !important; }
.btn-brief .hover-underline::after { background-color: var(--hero-responsive) !important; }

 /* --- RÉAFFICHAGE DES SÉPARATEURS PRINCIPAUX --- */
    .separator-main {
        display: flex !important; /* Le !important force le navigateur à oublier le "none" de la version bureau */
        margin: 60px auto;
    }

    .separator-main span {
        background-color: var(--black);
        opacity: 0.15;
    }


    main {
width: 100%;
z-index: 200;
gap: 60px;
    }

    /* Séparateur animé entre hero/sous-hero, sous-hero/brief, brief/book.
       Trait 1px × 300px, animé depuis son centre via le scroll du viewport. */
    .section-separator {
        display: block;
        width: 200px;
        height: 0.5px;
        background: var(--hero-responsive);
        margin: 0 auto;
        transform: scaleX(0);
        transform-origin: center center;
        animation: sectionSeparatorExpand linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 40%;
    }

    /* Fallback : si le navigateur ne supporte pas view(), trait visible en plein */
    @supports not (animation-timeline: view()) {
        .section-separator { transform: scaleX(1); }
    }

    /* Premier séparateur (sous le hero) : pas d'animation liée au scroll,
       il s'anime APRÈS le loader via body.loaded, laissant le temps aux
       textes du hero d'apparaître d'abord. */
    .section-separator--first {
        animation: none;
        transform: scaleX(0);
        transition: transform 1s ease-out 0.8s;
    }
    body.loaded .section-separator--first {
        transform: scaleX(1);
    }


    .hero-grid, .sous-hero {
        width: 100%; /* Fini le 100vw, 100% suffit maintenant ! */
        max-width: none;
        height: 100%;
        min-height: 100%;
        justify-content: flex-start;
        margin-bottom: 0;
    }

    .sous-hero{
    margin-bottom: 0;
    }

.sartine-grid, .sous-hero-grid {
padding: 0 20px;
        width: 100%;
        margin: 0 auto;
}


#book {
        width: 100%;
        max-width: 375px;
        margin: 0 auto; /* Pour le centrer si l'écran fait, par exemple, 428px (iPhone Max) */
        padding: 20px 20px 0 20px;
    }



    #book {padding-top: 20px;}

     .edito-puce { 
        grid-template-columns: 1fr; 
    }
     .hero-grid { max-width: none;  }
     .dots-separator-li.mask { display: flex; }
     .info-skills {max-width: 375px; padding: 0 20px; text-align: left;}
     .edito-puce li { max-width: 375px;  }
     .btn-brief { margin: 30px 0 0; align-self: flex-start; }
     


     /* Structure stack : Texte au dessus, images dessous */
    #book article {
        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: 100%; }
    .paris-img-3 { grid-column: 1 / 5; grid-row: 2 / 3; height: 100%; }

    /* --- 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; }

    /* --- AVIGNON (3 items) --- */
    .avignon-img-1 { grid-column: 1 / 3; grid-row: 1 / 2; height: 260px; }
    .avignon-img-2 { grid-column: 3 / 5; grid-row: 1 / 2; height: 200px; align-self: flex-end; }
    .avignon-img-3 { grid-column: 1 / 5; grid-row: 2 / 3; height: 220px; }

    footer {padding: 20px 20px calc(20px + env(safe-area-inset-bottom)) 20px; height: 300px;}


    /* ============================================================
       Ajustements mobile conservés (hors couleur de fond)
       ============================================================ */
    /* Masque le dots-separator entre brief et book (passage net) */
    .separator-main { display: none !important; }


    /* Les images de fond en z-index: 0 uniquement en mobile,
       et .hero-grid monte à z-index: 1 pour l'empilement local */
    .bg-image-hero, .bg-image-sous-hero { z-index: 0; }
    .hero-grid { z-index: 1; }

    /* Le texte (article) doit passer au-dessus des images de fond */
    .sartine-grid, .sous-hero-grid { position: relative; z-index: 1; }


}


/* =============================================================================
   OVERLAY "TOURNEZ LE TÉLÉPHONE" — activation en paysage
   Ce fichier ne charge qu'en ≤1023px (cf. <link media>), donc pas sur desktop.
   Conditions : paysage + hauteur ≤ 500px = smartphone en landscape.
   ========================================================================== */
@media (orientation: landscape) and (max-height: 500px) {
    #rotate-wrapper {
        position: fixed;
        inset: 0;
        background: var(--white);
        z-index: 1000000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    body { overflow: hidden !important; touch-action: none; }
}