@charset "utf-8";
/* ===================================================== */
/* STYLE-INDEX-GALERIES.CSS — page d'accueil, section 2   */
/* « Les Galeries » : carrousel de 4 vignettes carrées    */
/* (Asie, Afrique, Europe, Amérique), même principe que   */
/* le carrousel des témoignages.                          */
/* Chargé APRÈS style-index.css et style-index-mobile.css */
/* (d'où certains !important : ces deux fichiers forcent  */
/* déjà tailles de titres, images et fonds en !important).*/
/* Ne touche NI aux chevrons (position), NI au GSAP.      */
/* ===================================================== */

:root {
    /* côté d'une vignette : suit la hauteur ET la largeur de l'écran */
    --gal-cote: clamp(200px, min(38vh, 23vw), 420px);
    --gal-ecart: clamp(60px, 7vw, 120px);  /* espace entre deux vignettes */
    --gal-zoom: 1.28;                       /* agrandissement de la vignette centrale */
    --gal-duree: 900ms;                     /* durée d'un déplacement */
}

/* =============================== */
/* FOND DE LA SECTION              */
/* Même vert sombre que les pages  */
/* À propos et Carnets (le        */
/* sélecteur renforcé passe devant */
/* les fonds mobile / tablette).   */
/* =============================== */

html body section#s2 {
    background: linear-gradient(120deg, #1f2b26 0%, #2f4038 45%, #4f6158 100%) !important;
}

/* Chevrons de la section 2 : version blanche (fond sombre).
   Seule la couleur change : position et animation inchangées. */
#s2 .next-arrow .chevron-dark  { display: none !important; }
#s2 .next-arrow .chevron-light { display: block !important; }

/* =============================== */
/* BLOC « LES GALERIES »           */
/* =============================== */

#s2 .inner {
    padding: 0 !important;           /* le carrousel occupe toute la largeur */
}

.galeries {
    width: 100%;
    box-sizing: border-box;
    /* place du menu en haut, place du chevron en bas */
    padding: 60px 0 90px 0;
    text-align: center;
}

#s2 .gal-titre {
    margin: 0 0 clamp(16px, 4vh, 44px) 0 !important;
    font-size: clamp(38px, 4.2vw, 60px) !important;
    font-weight: 200 !important;
    letter-spacing: 0.06em !important;
    line-height: 1.2 !important;
    text-align: center !important;
    color: #fff !important;
}

/* Fenêtre : 3 vignettes visibles (la centrale et ses 2 voisines) */
.gal-fenetre {
    position: relative;
    width: calc(3 * var(--gal-cote) + 2 * var(--gal-ecart));
    max-width: 100%;
    /* marge haute et basse : place pour l'agrandissement et l'ombre */
    padding: calc(var(--gal-cote) * (var(--gal-zoom) - 1) / 2 + 56px) 0;
    margin: -48px auto;
    overflow: hidden;
}

/* Piste : toutes les vignettes côte à côte, déplacées en bloc */
.gal-piste {
    display: flex;
    align-items: center;
    gap: var(--gal-ecart);
    will-change: transform;
}

.gal-piste.anime {
    transition: transform var(--gal-duree) cubic-bezier(.45, .05, .25, 1);
}

/* Vignette */
.gal-carte {
    position: relative;
    flex: 0 0 var(--gal-cote);
    width: var(--gal-cote);
    height: var(--gal-haut, var(--gal-cote));   /* carré, sauf mobile (bandeau vertical) */
    overflow: hidden;
    display: block;
    opacity: 0.55;
    transform: scale(1);
    transition: transform var(--gal-duree) ease, opacity var(--gal-duree) ease,
                box-shadow var(--gal-duree) ease;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Image recadrée pour remplir tout le carré
   (sélecteur renforcé : style-index-mobile.css force les images de #s2) */
#s2 .inner .gal-carte img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: cover !important;
    pointer-events: none;
}

/* Vignette du centre : agrandie, au premier plan */
.gal-carte.active {
    z-index: 2;
    opacity: 1;
    transform: scale(var(--gal-zoom));
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4);
}

/* Titre en surimpression sur la vignette centrale */
.gal-legende {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    background: rgba(18, 26, 22, 0.42);
    color: #fff;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.gal-legende small {
    font-size: 12px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

.gal-legende span {
    font-size: clamp(26px, 2.6vw, 40px);
    font-weight: 200;
    letter-spacing: 0.08em;
}

/* Le titre apparaît quand la vignette est arrivée au centre et
   agrandie (léger délai, le temps du zoom), et s'efface dès qu'elle
   repart. */
.gal-carte.active .gal-legende {
    opacity: 1;
    transition: opacity 0.6s ease 0.55s;
}

/* Écran tactile (pas de survol) : le titre de la vignette centrale
   est toujours affiché, dans un bandeau bas pour laisser voir l'image */
@media (hover: none) {
    .gal-carte.active .gal-legende {
        opacity: 1;
        top: auto;
        height: 34%;
        background: linear-gradient(to bottom, rgba(18, 26, 22, 0) 0%, rgba(18, 26, 22, 0.7) 100%);
        justify-content: flex-end;
        padding-bottom: 14px;
    }
    .gal-legende small { display: none; }
    .gal-legende span  { font-size: 26px; }
}

.gal-carte:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

/* =============================== */
/* REPÈRES (petits rectangles)     */
/* =============================== */

.gal-reperes {
    position: relative;
    z-index: 3;                  /* au-dessus de la marge de la fenêtre */
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: clamp(18px, 3.2vh, 36px);
}

.gal-repere {
    width: 26px;
    height: 5px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: background 0.3s ease, width 0.3s ease;
}

/* Repère de la galerie affichée : rectangle évidé, plus long */
.gal-repere.active {
    width: 38px;
    background: transparent;
    border-color: #fff;
}

.gal-repere:hover {
    background: rgba(255, 255, 255, 0.55);
}

.gal-repere:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* =============================== */
/* TABLETTE (769 – 1024 px)        */
/* =============================== */

@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --gal-cote: clamp(180px, min(32vh, 29vw), 300px);
        --gal-ecart: 4vw;
        --gal-zoom: 1.12;
    }
}

/* =============================== */
/* MOBILE (≤ 768 px)               */
/* Vignettes larges, toutes de la  */
/* même taille : celle du centre   */
/* est en couleur, les autres en   */
/* noir et blanc ; des voisines on */
/* ne voit qu'une fine bande.      */
/* =============================== */

@media (max-width: 768px) {
    :root {
        /* UNE seule vignette à l'écran : presque toute la largeur (88 %),
           hauteur 1,3 fois la largeur (limitée à 56 % de la hauteur de
           l'écran) ; l'écart de 12 % place les voisines hors de l'écran ;
           pas d'agrandissement */
        --gal-cote: min(88vw, 460px);
        --gal-haut: min(calc(var(--gal-cote) * 1.3), 56svh);
        --gal-ecart: 12vw;
        --gal-zoom: 1;
    }
    .galeries {
        padding: 50px 0 110px 0;     /* chevron mobile plus haut (bottom: 55px) */
    }
    #s2 .gal-titre {
        font-size: 32px !important;
        margin-bottom: 18px !important;
        color: rgba(0, 0, 0, 0.8) !important;
    }
    .gal-fenetre {
        width: 100%;
        touch-action: pan-y;         /* glisser horizontal = changer de galerie */
        padding: 0;                  /* ni agrandissement, ni ombre : pas de marge */
        margin: 0 auto;
    }

    /* Toutes les vignettes pleines, même taille, sans ombre ;
       noir et blanc hors du centre, couleur au centre */
    .gal-carte,
    .gal-carte.active {
        opacity: 1;
        transform: none;
        box-shadow: none;
    }
    #s2 .inner .gal-carte img {
        filter: grayscale(100%);
        transition: filter 0.8s ease;
    }
    #s2 .inner .gal-carte.active img {
        filter: none;
    }

    /* Titre en surimpression, dans un bandeau dégradé en bas de la
       vignette centrale */
    .gal-carte .gal-legende,
    .gal-carte.active .gal-legende {
        inset: auto 0 0 0;
        height: 26%;
        padding: 0 0 14px 0;
        background: linear-gradient(to bottom, rgba(18, 26, 22, 0) 0%, rgba(18, 26, 22, 0.7) 100%);
        justify-content: flex-end;
    }
    .gal-legende small { display: none; }
    .gal-legende span  { font-size: 26px; }
    /* Une seule vignette à l'écran : son titre est affiché d'emblée,
       sur toutes les vignettes, sans effet d'apparition */
    .gal-carte .gal-legende,
    .gal-carte.active .gal-legende {
        opacity: 1;
        transition: none;
    }

    /* Pas de repères sur mobile (on glisse du doigt) */
    .gal-reperes { display: none; }

    /* FOND IMAGE (comme la section 1) : bg-mobile-2.jpg, avec le même
       zoom lent (18 s, jusqu'à 125 %), relancé à chaque arrivée sur la
       section (classe s2-zoom posée par scripts/index-galeries.js).
       L'aquarelle est claire : menu, titre et chevron repassent en
       sombre (--fond-clair: 1 est lu par le script du menu). */
    html body section#s2 {
        background: #eeede6 !important;      /* couleur du papier, en attendant l'image */
        --fond-clair: 1;
    }
    html body section#s2::before {
        background: url("../images/bg-mobile-2.jpg") center / cover no-repeat !important;
        transform: scale(1);
        transform-origin: center center;
        will-change: transform;
    }
    html body section#s2.s2-zoom::before {
        animation: s2ZoomFond 18s ease-in-out forwards;
    }
    /* Léger voile clair sur le bas de l'image (montagnes bleues),
       au-dessus du fond mais sous le contenu */
    html body section#s2::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(to bottom,
                    rgba(238, 237, 230, 0) 55%,
                    rgba(238, 237, 230, 0.6) 78%,
                    rgba(238, 237, 230, 0.75) 100%);
    }
    /* Chevron sombre (seule la couleur change : position inchangée) */
    html body #s2 .next-arrow .chevron-dark  { display: block !important; }
    html body #s2 .next-arrow .chevron-light { display: none !important; }
}

/* =============================== */
/* ORDINATEUR (≥ 1025 px) : FOND   */
/* CLAIR (essai) — image           */
/* bg-galeries.jpg ; menu, titre,  */
/* repères et chevron en sombre.   */
/* La tablette garde le vert sombre.*/
/* =============================== */

@media (min-width: 1025px) {
    html body section#s2 {
        background: #ecebe7 url("../images/bg-galeries.jpg") center / cover no-repeat !important;
        --fond-clair: 1;              /* lu par le script du menu : menu sombre */
    }
    #s2 .gal-titre {
        color: rgba(0, 0, 0, 0.8) !important;
    }
    /* Vignettes voisines un peu plus présentes sur le fond clair */
    .gal-carte { opacity: 0.75; }
    .gal-carte.active { opacity: 1; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22); }
    /* Repères sombres */
    .gal-repere {
        border-color: rgba(0, 0, 0, 0.55);
        background: rgba(0, 0, 0, 0.55);
    }
    .gal-repere.active {
        background: transparent;
        border-color: rgba(0, 0, 0, 0.7);
    }
    .gal-repere:hover { background: rgba(0, 0, 0, 0.3); }
    .gal-repere:focus-visible { outline-color: #333; }
    /* Chevron sombre (seule la couleur change : position inchangée) */
    html body #s2 .next-arrow .chevron-dark  { display: block !important; }
    html body #s2 .next-arrow .chevron-light { display: none !important; }
}

@keyframes s2ZoomFond {
    from { transform: scale(1); }
    to   { transform: scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
    html body section#s2.s2-zoom::before { animation: none; }
}

/* Petits téléphones peu hauts (iPhone SE…) : vignettes un peu moins
   hautes, pour garder de l'air au-dessus du chevron */
@media (max-width: 768px) and (max-height: 620px) {
    :root {
        --gal-haut: min(calc(var(--gal-cote) * 1.3), 50svh);
    }
    #s2 .gal-titre { font-size: 30px !important; }
}

/* =============================== */
/* MENU EN BLANC SUR LA SECTION 2  */
/* Le menu de l'accueil est écrit  */
/* en sombre (lisible sur les      */
/* aquarelles claires). Quand la   */
/* section 2, sombre, passe sous   */
/* le menu, scripts/index-galeries */
/* .js pose la classe « menu-clair »*/
/* sur <html> : le texte du menu   */
/* passe en blanc, puis redevient  */
/* sombre sur les autres sections. */
/* =============================== */

#header-desktop.theme-home #logo-desktop a,
#logo-mobile-v2 a {
    transition: color 0.4s ease;
}
#burger-mobile-v2 span {
    transition: background 0.4s ease, transform 0.3s ease;
}

html.menu-clair #header-desktop.theme-home #logo-desktop a,
html.menu-clair #header-desktop.theme-home #menu-desktop > a,
html.menu-clair #header-desktop.theme-home #menu-desktop > div > a,
html.menu-clair #header-mobile-v2.theme-home #logo-mobile-v2 a {
    color: rgba(255, 255, 255, 0.9);
}

html.menu-clair #header-mobile-v2.theme-home #burger-mobile-v2 span {
    background: rgba(255, 255, 255, 0.9);
}

/* Mouvements réduits */
@media (prefers-reduced-motion: reduce) {
    .gal-piste.anime, .gal-carte { transition-duration: 1ms; }
}