/* ======================================================
   ALISIOS EXPERIENCES — gallery.css
   Page « Galerie » : immersion îles, en-tête, grille de
   vidéos, CTA de fin. Réutilise les tokens et patterns de
   style.css (cartes, boutons pilule, typographie).
   ====================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ======================================================
   IMMERSION ÎLES — zoom satellite -> vue de face -> hotspots
   Piloté au scroll par js/gallery.js (GSAP + ScrollTrigger,
   même pattern pin:true que #paysages/#experience sur
   index.html). Sans JS / prefers-reduced-motion : seule la
   vue satellite reste visible, statique (même convention que
   .hero__img--two/--three dans style.css).
   ====================================================== */
.iles-hero {
    position: relative;
}

.iles-hero__pin {
    position: relative;
    height: 100vh;
    height: 100svh;
    width: 100%;
    overflow: hidden;
    background: var(--noir);
}

.iles-hero__stage {
    position: absolute;
    inset: 0;
    margin: auto;
    overflow: hidden;
}

.iles-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center center;
    will-change: transform, opacity;
}

.iles-hero__img--face {
    opacity: 0;
}

.iles-hero__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(120% 90% at 50% 30%, transparent 35%, rgba(11, 11, 13, 0.5) 100%),
        linear-gradient(to bottom, rgba(11, 11, 13, 0.4) 0%, transparent 30%, transparent 70%, rgba(11, 11, 13, 0.65) 100%);
    pointer-events: none;
}

.iles-hero__intro {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 1.5rem;
}

.iles-hero__eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--dore-clair);
    margin-bottom: 1.6rem;
}

.iles-hero__title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2.6rem, 7vw, 5.5rem);
    line-height: 1.05;
    color: var(--blanc-casse);
}

.iles-hero__title em {
    font-style: italic;
    color: var(--dore-clair);
}

.iles-hero__hint {
    margin-top: 1.8rem;
    font-size: 0.9rem;
    color: rgba(244, 239, 230, 0.7);
}

.iles-hero__explore-hint {
    position: absolute;
    left: 50%;
    bottom: clamp(1.8rem, 5vh, 3rem);
    transform: translateX(-50%);
    z-index: 2;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--blanc-casse);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s var(--ease-doux);
    text-align: center;
    white-space: nowrap;
}

.iles-hero__explore-hint.is-active {
    opacity: 0.85;
}

.iles-hero__hotspots {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s var(--ease-doux);
}

.iles-hero__hotspots.is-active {
    opacity: 1;
    pointer-events: auto;
}

.iles-hero__hotspot {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    padding: 0.6rem;
    margin: -0.6rem;
    cursor: pointer;
}

.iles-hero__dot {
    display: block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--dore-clair);
    box-shadow: 0 0 0 0 rgba(231, 200, 120, 0.55);
    animation: ilesHotspotPulse 2.6s ease-out infinite;
}

@keyframes ilesHotspotPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(231, 200, 120, 0.55);
    }

    70% {
        box-shadow: 0 0 0 16px rgba(231, 200, 120, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(231, 200, 120, 0);
    }
}

.iles-hero__card {
    position: absolute;
    bottom: calc(100% + 16px);
    left: 50%;
    transform: translate(-50%, 8px);
    width: 290px;
    padding: 1.1rem 1.3rem;
    background: rgba(11, 11, 13, 0.92);
    border: 1px solid rgba(231, 200, 120, 0.35);
    border-radius: 4px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    text-align: left;
    transition: opacity 0.25s var(--ease-doux), transform 0.25s var(--ease-doux), visibility 0.25s;
}

.iles-hero__hotspot.is-align-left .iles-hero__card {
    left: 0;
    transform: translate(0, 8px);
}

.iles-hero__hotspot.is-align-right .iles-hero__card {
    left: auto;
    right: 0;
    transform: translate(0, 8px);
}

.iles-hero__hotspot.is-align-below .iles-hero__card {
    bottom: auto;
    top: calc(100% + 16px);
}

.iles-hero__hotspot:hover .iles-hero__card,
.iles-hero__hotspot:focus-within .iles-hero__card,
.iles-hero__hotspot.is-open .iles-hero__card {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.iles-hero__hotspot.is-align-left:hover .iles-hero__card,
.iles-hero__hotspot.is-align-left:focus-within .iles-hero__card,
.iles-hero__hotspot.is-align-left.is-open .iles-hero__card,
.iles-hero__hotspot.is-align-right:hover .iles-hero__card,
.iles-hero__hotspot.is-align-right:focus-within .iles-hero__card,
.iles-hero__hotspot.is-align-right.is-open .iles-hero__card {
    transform: translate(0, 0);
}

.iles-hero__card-name {
    display: block;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--dore-clair);
    margin-bottom: 0.5rem;
}

.iles-hero__card-tagline {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--blanc-casse);
    line-height: 1.35;
    margin-bottom: 0.5rem;
}

.iles-hero__card-stat {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--dore);
    opacity: 0.85;
    margin-bottom: 0.6rem;
}

.iles-hero__card-note {
    display: block;
    font-size: 0.8rem;
    line-height: 1.55;
    color: rgba(244, 239, 230, 0.7);
}

@media (max-width: 760px) {
    /* Les hotspots (points dorés pulsants) reposent sur un
       survol/tap peu fiable sur mobile et ne mènent plus nulle
       part (pages îles rendues non cliquables) — masqués sur
       mobile plutôt que de laisser un élément confus. */
    .iles-hero__hotspots {
        display: none;
    }

    .iles-hero__card {
        width: 230px;
        padding: 0.9rem 1rem;
        max-height: 60vh;
        overflow-y: auto;
    }

    /* Le long paragraphe descriptif rend la carte plus haute que
       l'écran (surtout pour les îles proches du haut de la carte,
       où la carte s'ouvre vers le bas avec peu de place) — masqué
       sur mobile, l'essentiel (nom, accroche, chiffres) tient dans
       une carte compacte qui ne recouvre plus toute la carte. */
    .iles-hero__card-note {
        display: none;
    }

    .iles-hero__explore-hint {
        white-space: normal;
        max-width: 80vw;
        font-size: 1rem;
    }
}

.gallery-head {
    padding: clamp(4rem, 12vh, 7rem) var(--gutter) clamp(3rem, 8vh, 5rem);
    text-align: center;
    background: var(--noir);
}

.gallery-head__inner {
    max-width: 760px;
    margin: 0 auto;
}

.gallery-head__lead {
    margin-top: 1.8rem;
    font-size: 1.02rem;
    line-height: 1.8;
    color: rgba(244, 239, 230, 0.75);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: 0 var(--gutter) clamp(5rem, 12vh, 8rem);
    background: var(--noir);
}

.gallery-item {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 6px;
    background: var(--noir-volcan);
    border: 1px solid rgba(244, 239, 230, 0.07);
}

.gallery-item__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s var(--ease-doux);
}

.gallery-item:hover .gallery-item__video {
    transform: scale(1.05);
}

.gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 11, 13, 0.75) 0%, transparent 55%);
    pointer-events: none;
}

.gallery-item__caption {
    position: absolute;
    left: 1.3rem;
    right: 1.3rem;
    bottom: 1.1rem;
    z-index: 2;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--blanc-casse);
}

.gallery-cta {
    padding: clamp(6rem, 16vh, 11rem) var(--gutter);
    text-align: center;
    background: var(--noir-volcan);
}

.gallery-cta__inner {
    max-width: 700px;
    margin: 0 auto;
}

.gallery-cta__inner .nicolas__cta {
    display: inline-block;
    margin-top: 2.2rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }
}