/* ============================================================
   STORYTELLING — Thème Cinématique Éditorial
   Scoped sous .page-storytelling
   ============================================================ */

/* ============================================================
   VARIABLES & OVERRIDES
   ============================================================ */
.page-storytelling {
    background: #0a0a0a;
}

.page-storytelling,
.page-storytelling p,
.page-storytelling li,
.page-storytelling span,
.page-storytelling strong,
.page-storytelling em {
    color: #fff;
}

.page-storytelling a,
.page-storytelling button {
    color: #fff;
}


/* ============================================================
   THREE.JS CANVAS — TEST: commenté pour essai image statique
   ============================================================ */
/*
#three-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
*/

/* ============================================================
   HEADER — DARK GLASS
   ============================================================ */
.page-storytelling .main-header {
    background: rgba(10, 10, 10, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

@media (min-width: 1201px) {
    .page-storytelling .main-header:has(.has-mega-menu:hover) {
        background: rgba(15, 15, 15, 0.95);
    }
}

.page-storytelling .logo a {
    color: #fff;
}

/* Burger menu picto blanc sur mobile */
.page-storytelling .burger-menu span {
    background: #fff !important;
}

@media (max-width: 1200px) {

    /* Menu mobile Zdigital2 Accueil Sombre */
    .page-storytelling .main-nav ul li a {
        color: #fff !important;
    }

    .page-storytelling .mobile-toggle {
        color: #fff !important;
    }

    .page-storytelling .main-nav ul.mega-sublinks a {
        color: #e61c5d !important;
    }

    .page-storytelling .main-nav ul.mega-sublinks a:hover {
        color: #e61c5d !important;
    }
}

.page-storytelling .main-nav a {
    color: rgba(255, 255, 255, 0.75);
}

.page-storytelling .main-nav a:hover {
    color: #e61c5d;
    opacity: 1;
}

.page-storytelling .mega-title {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.page-storytelling .mega-sublinks a {
    color: #e61c5d;
}

.page-storytelling .mega-sublinks a:hover {
    color: #e61c5d;
}

.page-storytelling .menu-label {
    border-color: rgba(255, 255, 255, 0.25);
}

.page-storytelling .mega-visual {
    background: none;
}

.page-storytelling .cursor {
    background: #e61c5d;
}

body:has(.split-text-col:hover) .cursor {
    background: #ffffff !important;
}

.page-storytelling .cursor-follower {
    border-color: rgba(230, 28, 93, 0.4);
}

/* ============================================================
   SCROLL PROGRESS
   ============================================================ */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 100000;
    background: rgba(255, 255, 255, 0.05);
}

.scroll-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #e61c5d, #ed5340, #ff6b9d);
    box-shadow: 0 0 12px rgba(230, 28, 93, 0.5);
}

/* ============================================================
   SHARED IMAGE EFFECTS — "Living" Images
   ============================================================ */

/* --- Film Grain Overlay --- */
.hero-image::before,
.split-image::before,
.fullbleed-image::before,
.h-image::before,
.epilogue-bg::before {
    content: '';
    position: absolute;
    inset: -5%;
    width: 110%;
    height: 110%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.06;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 4;
    animation: grain-shift 0.4s steps(8) infinite;
}

@keyframes grain-shift {
    0% {
        transform: translate(0, 0);
    }

    20% {
        transform: translate(-2%, 3%);
    }

    40% {
        transform: translate(3%, -1%);
    }

    60% {
        transform: translate(-1%, -3%);
    }

    80% {
        transform: translate(2%, 2%);
    }

    100% {
        transform: translate(0, 0);
    }
}

/* --- Light Leak (warm cinematic flare) --- */
.hero-image::after,
.split-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            transparent 5%,
            rgba(230, 28, 93, 0.35) 40%,
            rgba(230, 28, 93, 0.2) 60%,
            transparent 95%);
    background-size: 200% 200%;
    animation: light-leak 7.5s ease-in-out infinite;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 5;
}

@keyframes light-leak {

    0%,
    100% {
        background-position: 0% 0%;
        opacity: 0.4;
        transform: scale(1.0) rotate(0deg);
    }

    33% {
        background-position: 100% 50%;
        opacity: 0.65;
        transform: scale(1.12) rotate(1deg);
    }

    66% {
        background-position: 50% 100%;
        opacity: 0.45;
        transform: scale(1.05) rotate(-1deg);
    }
}

/* --- Organic Breathing (all images) --- */
@keyframes organic-breathe {
    0% {
        transform: scale(1.03) rotate(0.2deg);
        filter: saturate(1.1) brightness(1.0);
    }

    25% {
        transform: scale(1.06) rotate(-0.15deg);
        filter: saturate(1.15) brightness(1.02);
    }

    50% {
        transform: scale(1.04) rotate(0.1deg);
        filter: saturate(1.05) brightness(0.98);
    }

    75% {
        transform: scale(1.07) rotate(-0.1deg);
        filter: saturate(1.2) brightness(1.01);
    }

    100% {
        transform: scale(1.03) rotate(0.2deg);
        filter: saturate(1.1) brightness(1.0);
    }
}

/* --- Chromatic Aberration (glitch-ready) --- */
@keyframes chromatic-pulse {

    0%,
    90%,
    100% {
        text-shadow: none;
        filter: none;
    }

    92% {
        filter: hue-rotate(15deg) saturate(1.4);
    }

    94% {
        filter: hue-rotate(-10deg) saturate(0.8);
    }

    96% {
        filter: hue-rotate(5deg) saturate(1.2);
    }
}

/* --- Scan Lines (tech images) --- */
.fullbleed-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.08) 2px,
            rgba(0, 0, 0, 0.08) 4px);
    pointer-events: none;
    z-index: 5;
    animation: scan-drift 4s linear infinite;
}

@keyframes scan-drift {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(4px);
    }
}

/* --- Pulsating Glow (tech images) --- */
.fullbleed-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    animation: tech-glow 8s ease-in-out infinite;
    z-index: 0;
}

@keyframes tech-glow {

    0%,
    100% {
        filter: brightness(0.7) saturate(1.2) contrast(1.1);
    }

    50% {
        filter: brightness(0.85) saturate(1.5) contrast(1.2);
    }
}

/* --- Glitch Flash (JS-triggered) --- */
.glitch-active {
    animation: glitch-frames 0.15s steps(2) 3 !important;
}

@keyframes glitch-frames {
    0% {
        clip-path: inset(10% 0 60% 0);
        filter: hue-rotate(90deg) saturate(3);
    }

    25% {
        clip-path: inset(50% 0 10% 0);
        filter: hue-rotate(-45deg) saturate(2);
    }

    50% {
        clip-path: inset(30% 0 40% 0);
        filter: hue-rotate(180deg) saturate(4);
    }

    75% {
        clip-path: inset(70% 0 5% 0);
        filter: hue-rotate(-90deg) saturate(1);
    }

    100% {
        clip-path: inset(0);
        filter: none;
    }
}

/* ============================================================
   BOKEH — Floating Light Particles
   ============================================================ */
.bokeh-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 6;
}

.bokeh-dot {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, transparent 70%);
    filter: blur(1px);
    animation: bokeh-float linear infinite;
}

@keyframes bokeh-float {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateY(-20vh) scale(1);
        opacity: 0;
    }
}

/* --- Lamp Organic Brilliance Particles --- */
.lamp-particle-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 6;
}

.lamp-particle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(230, 28, 93, 0.95) 0%, rgba(230, 28, 93, 0.35) 50%, transparent 80%);
    filter: blur(1.5px);
    opacity: 0;
    animation: lamp-glow-float 8s ease-out infinite;
}

@keyframes lamp-glow-float {
    0% {
        transform: translate(0, 0) scale(0.2);
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        transform: translate(var(--drift-x, 80px), var(--drift-y, -150px)) scale(1.6);
        opacity: 0;
    }
}

/* ============================================================
   CHAPTER STRUCTURE
   ============================================================ */
.storytelling-main {
    position: relative;
    z-index: 1;
}

.chapter {
    min-height: 100vh;
    display: flex;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* ============================================================
   HERO — Ouverture Cinématique
   ============================================================ */
.chapter-hero {
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
}

.hero-bg-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.hero-bg-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    will-change: transform;
}

.hero-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

/* Voile sombre pour faire ressortir le texte sur l'image de fond */
.chapter-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0.55;
    z-index: 1;
    pointer-events: none;
}

@keyframes dark-pulse-soft {

    0%,
    100% {
        opacity: 0.55;
    }

    35% {
        opacity: 0.4;
    }

    55% {
        opacity: 0.5;
    }

    80% {
        opacity: 0.4;
    }
}

/* Base commune pour les calques de lumière (images séparées superposées) */
.hero-light-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    mix-blend-mode: screen;
    z-index: 2;
    pointer-events: none;
}

/* Calque 2 : Bleu */
.hero-light-2 {
    background-image: url('../img/hero-light2.jpg');
    animation: light-pulse-2 6s ease-in-out infinite;
    /* Rythme calé sur 6 secondes avec décharge électrique */
}

/* Calque 3 : Troisième teinte */
.hero-light-3 {
    background-image: url('../img/hero-light3.jpg');
    animation: light-pulse-3 6.4s ease-in-out infinite;
    /* Rythme accéléré pour un effet de flux continu */
}

@keyframes light-pulse-2 {

    /* Phase de pulsation douce, sensuelle et très lumineuse (0% à 94%) */
    0% {
        opacity: 0.75;
        filter: blur(0px) brightness(1.7) saturate(1.8) contrast(1.2);
    }

    23% {
        opacity: 0.35;
        filter: blur(2px) brightness(1.1) saturate(1.3) contrast(1.0);
    }

    47% {
        opacity: 0.85;
        filter: blur(0px) brightness(1.9) saturate(2.0) contrast(1.3);
    }

    70% {
        opacity: 0.4;
        filter: blur(1px) brightness(1.25) saturate(1.4) contrast(1.1);
    }

    94% {
        opacity: 0.75;
        filter: blur(0px) brightness(1.7) saturate(1.8) contrast(1.2);
    }

    /* Décharge électrique ultra-rapide, nerveuse et hyper-brillante (94% à 98% -> durée de 0.24s) */
    94.8% {
        opacity: 0.85;
        filter: blur(0px) brightness(3.8) saturate(4.0) contrast(1.8) drop-shadow(0 0 10px rgba(0, 191, 255, 0.6));
    }

    95.6% {
        opacity: 0.15;
        filter: blur(3px) brightness(0.6) saturate(0.5) contrast(0.8);
    }

    96.4% {
        opacity: 0.80;
        filter: blur(0px) brightness(3.2) saturate(3.5) contrast(1.6) drop-shadow(0 0 8px rgba(0, 191, 255, 0.5));
    }

    97.2% {
        opacity: 0.15;
        filter: blur(4px) brightness(0.5) saturate(0.4) contrast(0.7);
    }

    /* Retour instantané au calme */
    98% {
        opacity: 0.75;
        filter: blur(1px) brightness(1.4) saturate(1.6) contrast(1.1);
    }

    100% {
        opacity: 0.75;
        filter: blur(0px) brightness(1.7) saturate(1.8) contrast(1.2);
    }
}

@keyframes light-pulse-3 {

    0%,
    100% {
        opacity: 0.35;
        filter: blur(2px) brightness(1.25) saturate(1.3);
    }

    30% {
        opacity: 0.85;
        filter: blur(0px) brightness(2.2) saturate(1.8) contrast(1.2);
    }

    65% {
        opacity: 0.2;
        filter: blur(4px) brightness(0.9) saturate(0.8);
    }

    85% {
        opacity: 0.75;
        filter: blur(0px) brightness(1.9) saturate(1.6) contrast(1.15);
    }
}



.hero-image-mask {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    /* Circle mask — starts small, JS expands */
    clip-path: circle(0% at 50% 50%);
}

.hero-image {
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    background-size: cover;
    background-position: center;
    animation: organic-breathe 20s ease-in-out infinite;
}

/* Color overlay that shifts */
.hero-image-mask::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(10, 10, 10, 0.2) 0%,
            transparent 40%,
            transparent 60%,
            rgba(10, 10, 10, 0.5) 100%);
    z-index: 6;
    pointer-events: none;
}

.hero-overlay-text {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 2rem;
}

.hero-eyebrow {
    font-family: var(--font-body);
    font-size: 1.3rem !important;
    line-height: 1.8rem !important;
    font-weight: 500;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 1) !important;
    margin-bottom: 2rem;
    opacity: 1 !important;
}

@media(max-width:1200px) {
    .hero-eyebrow {
        font-size: 0.8rem !important;
        line-height: 1.3rem !important;
    }
}

.hero-editorial {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 900;
    font-style: normal;
    letter-spacing: -4px;
    line-height: 0.95;
    color: #fff;

}

.reveal-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(50px) rotateX(20deg);
    transform-origin: bottom center;
}

.accent-word {
    color: #e61c5d;
    font-style: italic;
}

.hero-subtitle {
    display: block !important;
    font-size: 0.45em !important;
    font-weight: 300 !important;
    margin-top: 1rem !important;
    color: #ffffff !important;
    font-style: italic !important;
}

/* Scroll Cue */
.scroll-cue {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    opacity: 0;
    z-index: 10;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.scroll-cue:hover {
    transform: translateX(-50%) translateY(5px);
}

.scroll-cue span {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #ffffff;
    transition: color 0.3s ease;
}

.scroll-cue:hover span {
    color: #ffffff;
}

.scroll-cue-line {
    width: 1px;
    height: 50px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent);
    animation: scroll-pulse 2s ease-in-out infinite;
}

@keyframes scroll-pulse {

    0%,
    100% {
        opacity: 0.3;
        transform: scaleY(1);
    }

    50% {
        opacity: 1;
        transform: scaleY(1.4);
    }
}

/* ============================================================
   CHAPTER SPLIT — Photo + Texte
   ============================================================ */
.chapter-split {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

.split-image-col {
    flex: 0 0 55%;
    position: relative;
    overflow: hidden;
}

.split-image {
    position: absolute;
    inset: -15%;
    width: 130%;
    height: 130%;
    background-size: cover;
    background-position: center;
    animation: organic-breathe 25s ease-in-out infinite;
    will-change: transform;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.split-text-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6rem 5rem 6rem 5rem;
    position: relative;
    z-index: 2;
    background: #111111;
}

.split-text-col .glass-panel {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    box-shadow: none !important;
}

.split-text-col .editorial-title {
    color: #000000;
}

.split-text-col .editorial-text {
    color: #fff !important;
}

.split-text-col .editorial-text strong {
    color: #fff;
}

.split-text-col .editorial-text-sm {
    color: #666666;
}

.split-text-col .editorial-tags a {
    border: 1px solid #ffffff;
    color: #ffffff;
    opacity: 0.6;
}

.split-text-col .editorial-tags a:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
}

.chapter-label {
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 2rem;
    display: block;
}

.editorial-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 1;
    color: #fff;
    margin-bottom: 1.5rem;
}

.editorial-title em {
    color: #1ce6c2;
    font-style: italic;
}

.chapter-split .editorial-title em {
    color: #fff;
}

.editorial-line {
    width: 50px;
    height: 1px;
    background: linear-gradient(90deg, #1ce6c2, transparent);
    margin-bottom: 1.2rem;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
}

.editorial-text {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 300;
    line-height: 1.9;
    color: #fff !important;
    margin-bottom: 1rem;
}

.editorial-text strong {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

.editorial-text-sm {
    font-size: 0.9rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.35);
}

.editorial-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 2rem;
}

.editorial-tags a {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 0.45rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.35);
    transition: all 0.4s ease;
}

.editorial-tags a:hover {
    border-color: rgba(230, 28, 93, 0.4);
    color: #e61c5d;
    background: rgba(230, 28, 93, 0.06);
}

/* Reveal helpers */
.reveal-line {
    display: block;
    overflow: hidden;
}

.reveal-line-inner {
    display: block;
    transform: translateY(110%);
}

.reveal-up {
    opacity: 0;
    transform: translateY(40px);
}

/* ============================================================
   CHAPTER FULLBLEED — Photo Plein Écran + Glass Panel
   ============================================================ */
.chapter-fullbleed {
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.glass-panel {
    position: relative;
    z-index: 10;
    background: rgba(10, 10, 10, 0.45);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    padding: 4rem 4.5rem;
    max-width: 680px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

/* Glass panel variant — aligned right */
.chapter-fullbleed-alt {
    justify-content: flex-end;
    align-items: center;
    padding-right: 6%;
}

.glass-panel-right {
    margin-left: auto;
    margin-right: 0;
}

/* ============================================================
   CHAPTER HORIZONTAL — Gallery Pinnée
   ============================================================ */
.chapter-horizontal {
    min-height: auto;
    display: block;
    overflow: visible;
}

.horizontal-wrapper {
    position: relative;
    overflow: hidden;
    /* Height set by JS for pinning */
}

.horizontal-track {
    display: flex;
    gap: 0;
    height: 100vh;
    will-change: transform;
}

.h-panel {
    flex: 0 0 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.h-panel-text {
    flex-direction: column;
    padding: 4rem;
    text-align: center;
}

.h-panel-image {
    flex-direction: column;
    padding: 3rem;
}

.h-image {
    width: 75vw;
    max-width: 900px;
    height: 60vh;
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    /* Living image */
    animation: organic-breathe 18s ease-in-out infinite;
}

.h-image:hover {
    transform: scale(1.02);
}

.h-caption {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 2rem;
    text-align: center;
}

/* ============================================================
   CHAPTER EPILOGUE
   ============================================================ */
.chapter-epilogue {
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.epilogue-bg {
    position: absolute;
    inset: -20%;
    width: 140%;
    height: 140%;
    background-size: cover;
    background-position: center;
    filter: blur(50px) brightness(0.2) saturate(1.5);
    animation: epilogue-breathe 15s ease-in-out infinite;
    z-index: 0;
}

@keyframes epilogue-breathe {

    0%,
    100% {
        transform: scale(1);
        filter: blur(50px) brightness(0.2) saturate(1.5);
    }

    50% {
        transform: scale(1.05);
        filter: blur(60px) brightness(0.25) saturate(1.8);
    }
}

.epilogue-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 800px;
    padding: 2rem;
}

.epilogue-since {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 8px;
    text-transform: uppercase;
    color: #fff !important;
    margin-bottom: 2rem;
}

.epilogue-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 3rem;
}

.epilogue-title em.accent-word {
    color: #e61c5d;
    font-style: italic;

}

.cta-final {
    display: inline-block;
    margin-top: 1rem;
}

/* Btn override dark bg */
.page-storytelling .btn-primary {
    background: #e61c5d;
    color: #fff;
}

.page-storytelling .btn-primary:hover {
    background: #822f50;
    letter-spacing: 6px;
    box-shadow: 0 0 60px rgba(230, 28, 93, 0.5), 0 0 120px rgba(230, 28, 93, 0.2);
}

/* ============================================================
   FOOTER BLANC & UNIFORME
   ============================================================ */


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .chapter-split {
        position: relative;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .split-image-col {
        display: block !important;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        flex: none;
    }

    .split-text-col {
        position: relative;
        z-index: 10;
        width: 100%;
        padding: 0 !important;
        background: transparent !important;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        min-height: 100vh;
    }

    .split-text-col .glass-panel {
        background: rgba(10, 10, 10, 0.45) !important;
        backdrop-filter: blur(30px) !important;
        -webkit-backdrop-filter: blur(30px) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 24px !important;
        padding: 2rem 2rem !important;
        margin: 0 1rem !important;
        max-width: 680px !important;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4) !important;
        display: block !important;
    }

    .split-text-col .glass-panel .editorial-title {
        color: #ffffff !important;
    }

    .split-text-col .glass-panel .editorial-title em {
        color: #1ce6c2 !important;
    }



    .split-text-col .glass-panel .editorial-tags a {
        border: 1px solid rgba(255, 255, 255, 1) !important;
        color: rgba(255, 255, 255, 1) !important;
        background: transparent !important;
    }

    .split-text-col .glass-panel .editorial-tags a:hover {
        border-color: rgba(230, 28, 93, 0.4) !important;
        color: #e61c5d !important;
        background: rgba(230, 28, 93, 0.06) !important;
    }

    .glass-panel {
        padding: 2.5rem 2rem;
        margin: 0 1.5rem;
    }
}

@media (max-width: 768px) {

    .hero-editorial {
        font-size: clamp(2.2rem, 10vw, 4rem);
        letter-spacing: -1px;
    }

    .editorial-title {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .split-text-col {
        padding: 2.5rem 1.5rem;
    }

    .glass-panel {
        padding: 2rem 1.5rem;
        margin: 0 1rem;
        border-radius: 16px;
    }

    .h-image {
        width: 85vw;
        height: 50vh;
    }

    .chapter {
        padding: 0;
    }
}

/* ============================================================
   MOBILE EXTREME PERFORMANCE OVERRIDES (max-width: 1024px)
   Disables all heavy keyframe animations, GP-filters, repaints & GSAP starts
   ============================================================ */
@media (max-width: 1024px) {

    /* 1. Disable film grain, breathing, light leaks, and glows to achieve 120Hz native scroll */
    .hero-image,
    .h-image,
    .epilogue-bg {
        animation: none !important;
        transform: none !important;
        filter: none !important;
    }

    .split-image,
    .fullbleed-image {
        animation: none !important;
        filter: none !important;
    }

    /* Remove film grain overlay completely */
    .hero-image::before,
    .split-image::before,
    .fullbleed-image::before,
    .h-image::before,
    .epilogue-bg::before {
        display: none !important;
        animation: none !important;
    }

    /* Remove light leaks */
    .hero-image::after,
    .split-image::after {
        display: none !important;
        animation: none !important;
    }

    /* Remove scanlines */
    .fullbleed-image::after {
        display: none !important;
        animation: none !important;
    }

    /* Remove scroll cue heartbeat pulses */
    .scroll-cue-line {
        animation: none !important;
        opacity: 0.3 !important;
    }

    /* Hide scroll progress bar */
    .scroll-progress {
        display: none !important;
    }

    /* 2. Reset GSAP entry animation values so elements are visible immediately */
    .hero-image-mask {
        clip-path: none !important;
    }

    @keyframes fade-in-up-eyebrow {
        0% {
            opacity: 0;
            transform: translateY(15px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fade-in-up-word {
        0% {
            opacity: 0;
            transform: translateY(25px) rotateX(10deg);
        }

        100% {
            opacity: 1;
            transform: translateY(0) rotateX(0);
        }
    }

    .hero-eyebrow {
        opacity: 0;
        transform: translateY(15px);
        animation: fade-in-up-eyebrow 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        animation-delay: 0.2s;
    }

    .reveal-word:not(.hero-subtitle) {
        opacity: 0;
        transform: translateY(25px) rotateX(10deg);
    }

    .hero-editorial .reveal-word:nth-of-type(1) {
        animation: fade-in-up-word 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        animation-delay: 0.5s;
    }

    .hero-editorial .reveal-word:nth-of-type(2) {
        animation: fade-in-up-word 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        animation-delay: 0.8s;
    }

    /* Lock elements after the page load entrance animation completes to prevent them from replaying on scroll */
    .entrance-done .hero-eyebrow,
    .entrance-done .reveal-word:not(.hero-subtitle) {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    @keyframes fade-in-up-subtitle {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .hero-subtitle {
        opacity: 0;
        transform: translateY(20px);
        animation: fade-in-up-subtitle 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        animation-delay: 1.5s;
    }

    .reveal-line-inner {
        transform: none !important;
    }

    .reveal-up {
        opacity: 1 !important;
        transform: none !important;
    }



    .scroll-cue {
        display: none;
    }

    .editorial-line {
        opacity: 1 !important;
        transform: none !important;
        scaleX: 1 !important;
        width: 50px !important;
    }
}

@media (max-width: 1024px) {
    .hero-bg-slide {
        width: 400vw !important;
        height: 100vh !important;
    }

    .hero-bg-image,
    .hero-light-layer {
        width: 100% !important;
        height: 100% !important;
        background-size: cover !important;
        background-position: center center !important;
    }
}

/* ============================================================
   CONTAINER HORIZONTAL STORYTELLING MOBILE
   ============================================================ */

/* Desktop: display contents ensures the wrapper has no effect on layout or triggers */
.horizontal-storytelling-wrapper {
    display: contents;
}

/* Default state: hide mobile scroll cue on desktop */
.scroll-cue-mobile {
    display: none;
}

/* Mobile: layout side-by-side row of panels */
@media (max-width: 1024px) {
    .horizontal-storytelling-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 850vw !important;
        height: 100vh !important;
        overflow: hidden !important;
        will-change: transform;
        touch-action: pan-y !important;
        /* Allow vertical scroll / pull-to-refresh */
    }

    /* Force GPU layer promotion to prevent visual duplication and vibration glitches during horizontal scroll */
    .horizontal-storytelling-wrapper,
    .horizontal-storytelling-wrapper .chapter,
    .horizontal-storytelling-wrapper .glass-panel,
    .horizontal-storytelling-wrapper .epilogue-content,
    .horizontal-storytelling-wrapper .split-image,
    .horizontal-storytelling-wrapper .fullbleed-image {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform-style: preserve-3d;
    }

    /* Selective touch action by chapter: allow pull-to-refresh on Hero, block on others */
    .horizontal-storytelling-wrapper .chapter-hero,
    .horizontal-storytelling-wrapper .chapter-hero * {
        touch-action: pan-y !important;
    }

    .horizontal-storytelling-wrapper .chapter:not(.chapter-hero),
    .horizontal-storytelling-wrapper .chapter:not(.chapter-hero) * {
        touch-action: none !important;
    }

    .horizontal-storytelling-wrapper .chapter {
        flex: 0 0 150vw !important;
        width: 150vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        position: relative;
    }

    .horizontal-storytelling-wrapper .chapter-hero {
        flex: 0 0 300vw !important;
        width: 300vw !important;
        display: block !important;
        position: relative !important;
    }

    .hero-overlay-text {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100vw !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 10 !important;
        padding: 2rem !important;
        box-sizing: border-box !important;
        margin-top: -40px !important;
    }

    .chapter-split,
    .chapter-fullbleed {
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
    }

    /* Le Hero background prend toute la largeur de 300vw avec calques de lumiere synchronises */

    .hero-bg-image {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 400vw !important;
        height: 100% !important;
        background-size: cover !important;
        background-position: center center !important;
        will-change: transform;
    }

    .split-image-scaler,
    .fullbleed-image-scaler {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 200vw !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    .split-image,
    .fullbleed-image {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 310vw !important;
        height: 100% !important;
        background-size: cover !important;
        background-position: center center !important;
        will-change: transform;
    }

    /* Allow background slide elements to overflow for Hero cover only */
    .hero-bg-container {
        overflow: visible !important;
    }

    /* Prevent overflow/spilling of split columns to avoid covering neighboring panels */
    .split-image-col {
        overflow: hidden !important;
    }

    /* Centrer parfaitement les panneaux en verre dans les chapitres */
    .split-text-col,
    .chapter-fullbleed {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 150vw !important;
        /* Matches the chapter width */
    }

    .horizontal-storytelling-wrapper .chapter-epilogue {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 100vw !important;
        width: 100vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        position: relative;
    }

    .split-text-col .glass-panel,
    .chapter-fullbleed .glass-panel,
    .chapter-epilogue .epilogue-content {
        width: 90vw !important;
        max-width: 550px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        top: 10%
    }

    /* Scroll Cue Mobile */
    .scroll-cue-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.8rem;
        position: fixed;
        bottom: 3.5rem;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0.85;
        z-index: 100;
        pointer-events: none;
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .scroll-cue-mobile-text {
        font-family: 'Inter', sans-serif;
        font-size: 0.75rem;
        font-weight: 700;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 4px;
        color: rgba(255, 255, 255, 0.6);
    }

    .scroll-cue-mobile-arrow {
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: swipe-bounce 1.6s ease-in-out infinite;
    }

    @keyframes swipe-bounce {

        0%,
        100% {
            transform: translateX(-6px);
            opacity: 0.4;
        }

        50% {
            transform: translateX(6px);
            opacity: 1;
        }
    }

}

/* ============================================================
   FOOTER BACKGROUND OVERRIDE (Same dark gray as Chapter 4)
   ============================================================ */
.page-storytelling .main-footer {
    background: #0e0e0e !important;
}