/* =========================================
   STORYTELLING V2 — SPLIT-SCREEN 3 PHASES
   Scroll-pinned · SVG animations · Glass cards
   ========================================= */

/* Reusable glass tokens — for light backgrounds across the site */
:root {
    --glass-bg-light:         rgba(255, 255, 255, 0.55);
    --glass-bg-light-subtle:  rgba(255, 255, 255, 0.35);
    --glass-border-light:     rgba(255, 255, 255, 0.80);
    --glass-blur-strong:      blur(20px) saturate(180%);
    --glass-blur-medium:      blur(16px) saturate(160%);
    --glass-shadow:           0 8px 32px rgba(31, 38, 135, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1);
    --glass-shadow-subtle:    0 8px 32px rgba(31, 38, 135, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --glass-accent:           #00b4d8;
    --glass-accent-deep:      #0077b6;
}

/* ── SECTION ── */
.story-section {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: #f3f3f4;
    transition: background-color 0.4s ease;
}

.story-pin-wrap {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Vignette — darker greyish edges to focus attention at center during storytelling */
.story-pin-wrap {
    --vig-opacity: 0;
}
.story-pin-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;   /* above phase content edges, below center cards which sit mid-screen */
    background: radial-gradient(ellipse 78% 74% at center,
        transparent 0%,
        transparent 48%,
        rgba(40, 50, 64, 0.08) 76%,
        rgba(34, 44, 58, 0.20) 100%);
    opacity: var(--vig-opacity, 0);
    transition: opacity 0.3s ease;
}

/* ── PHASES ── */
.story-phase {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    padding: 40px;
}

.story-phase:first-child {
    opacity: 1;
    pointer-events: auto;
}

/* ── SPLIT LAYOUT ── */
.story-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    will-change: transform, opacity;
}

.story-split--reverse {
    direction: rtl;
}
.story-split--reverse > * {
    direction: ltr;
}

/* ── VISUAL SIDE ── */
.story-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.story-svg {
    width: 100%;
    max-width: 340px;
    height: auto;
}

/* ── ORBITAL ANIMATION (Phase 2) ── */
.so-svg {
    width: 100%;
    max-width: 400px;
    height: auto;
}

.so-pillar {
    cursor: pointer;
}

/* Lottie inside pillar foreignObject */
.so-lottie {
    overflow: visible;
    /* no border-radius — was clipping Lottie content */
    shape-rendering: geometricPrecision;
}

.so-lottie svg {
    overflow: visible !important;
    display: block;
}

.so-pillar foreignObject {
    overflow: visible;
}

/* Hover: pillar grows + glow */
.so-pillar {
    cursor: default;
    transition: filter 0.3s ease;
}

.so-pillar.so-landed {
    cursor: pointer;
}

.so-pillar.so-landed {
    filter: drop-shadow(0 0 0 transparent);
    transition: filter 0.4s ease;
}

.so-pillar.so-landed:hover {
    filter: drop-shadow(0 0 16px var(--so-color, #0077b6));
}

/* Cleaner visual: hide all decorative elements — keep only animated icons + labels */
.so-arc,
.so-radial,
.so-orbit-ring,
.so-ripple,
.so-pillar-halo,
.so-pillar-bg,
.so-center-group {
    display: none !important;
}

/* Card highlight sync */
.story-pillar.so-card-active {
    border-color: rgba(0, 119, 182, 0.35);
    box-shadow: 0 0 20px rgba(0, 119, 182, 0.12), 0 6px 24px rgba(0, 40, 80, 0.08);
    transform: translateY(-2px);
    transition: all 0.4s cubic-bezier(.16, 1, .3, 1);
}

/* Subtle floating idle on placed pillars */
.so-pillar.so-floating {
    animation: so-float 4s ease-in-out infinite;
}

.so-pillar.so-floating:nth-child(odd) {
    animation-delay: -1s;
}

@keyframes so-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -3px; }
}

/* Colored halo behind each pillar — pulses softly once landed */
.so-pillar-halo {
    transform-origin: center;
    transform-box: fill-box;
    pointer-events: none;
}

.so-pillar.so-landed .so-pillar-halo {
    animation: so-halo-breathe 3.6s ease-in-out infinite;
}

.so-pillar.so-landed:nth-of-type(2n) .so-pillar-halo {
    animation-delay: -1.2s;
}

.so-pillar.so-landed:nth-of-type(3n) .so-pillar-halo {
    animation-delay: -2.4s;
}

@keyframes so-halo-breathe {
    0%, 100% { r: 44; opacity: 0.08; }
    50%      { r: 50; opacity: 0.20; }
}

.so-pillar.so-landed:hover .so-pillar-halo {
    opacity: 0.30;
    r: 52;
    transition: opacity 0.3s ease, r 0.3s ease;
}

/* Center halo pulse */
.so-center-halo.is-pulsing {
    animation: so-halo-pulse 2.5s ease-in-out infinite;
}

@keyframes so-halo-pulse {
    0%, 100% { r: 32; opacity: 0.3; }
    50%      { r: 38; opacity: 0.6; }
}

/* Accessibility: skip all animations */
@media (prefers-reduced-motion: reduce) {
    .so-center-halo.is-pulsing,
    .so-pillar.so-floating,
    .so-pillar.so-landed .so-pillar-halo {
        animation: none;
    }
}

/* ── CONTENT SIDE ── */
.story-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* ── EYEBROW ── */
.story-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #0077b6;
    margin-bottom: 20px;
    padding: 6px 18px;
    border-radius: 100px;
    background: rgba(0, 119, 182, 0.06);
    border: 1px solid rgba(0, 119, 182, 0.12);
}

/* ── HEADLINE ── */
.story-headline {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.15;
    color: #1a1a2e;
    margin-bottom: 20px;
    letter-spacing: -0.03em;
    text-align: left;
}

.story-headline em {
    font-style: normal;
    background: linear-gradient(135deg, #0077b6 0%, #00b4d8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── BODY TEXT ── */
.story-body {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    max-width: 480px;
    margin-bottom: 28px;
    text-align: left;
}

/* ── PILLAR CARDS (Phase 2 - compact) ── */
.story-pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    margin-top: 8px;
}

.story-pillar {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 119, 182, 0.08);
    border-radius: 16px;
    padding: 16px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.story-pillar:hover {
    border-color: rgba(0, 119, 182, 0.18);
    box-shadow: 0 6px 24px rgba(0, 40, 80, 0.08);
    transform: translateY(-2px);
}

.story-pillar-icon {
    width: 64px;
    height: 64px;
    min-width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: transparent;
    border: none;
}

/* Keep old Lucide icon rule for fallback (other pages may still use it) */
.story-pillar-icon i,
.story-pillar-icon > svg {
    width: 28px;
    height: 28px;
    color: var(--pc, #0077b6);
}

.story-pillar-lottie {
    width: 64px;
    height: 64px;
    pointer-events: none;
    display: block;
    /* Crisper SVG rendering */
    shape-rendering: geometricPrecision;
    image-rendering: -webkit-optimize-contrast;
}

.story-pillar-lottie svg {
    width: 100% !important;
    height: 100% !important;
    color: inherit;
    overflow: visible !important;
    display: block;
}

.story-pillar h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}

/* ── CTA BUTTON ── */
.story-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 14px 30px;
    background: linear-gradient(135deg, #0077b6 0%, #00b4d8 100%);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 14px;
    text-decoration: none;
    letter-spacing: 0.01em;
    box-shadow:
        0 4px 20px rgba(0, 119, 182, 0.25),
        0 1px 4px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: all 0.35s cubic-bezier(.16, 1, .3, 1);
}

.story-cta:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 32px rgba(0, 119, 182, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.story-cta i,
.story-cta svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.story-cta:hover i,
.story-cta:hover svg {
    transform: translateX(3px);
}

/* ── METRICS (Impact phase) — panneau de verre unifié ── */
.story-metrics {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    width: 100%;
    max-width: 420px;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.44));
    -webkit-backdrop-filter: blur(22px) saturate(180%);
            backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid var(--glass-border-light);
    box-shadow:
        0 18px 50px rgba(31, 38, 135, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Fine ligne cyan posée en haut du panneau */
.story-metrics::before {
    content: '';
    position: absolute;
    top: 0;
    left: 30%;
    right: 30%;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: linear-gradient(90deg, transparent, #00b4d8, transparent);
    opacity: 0.75;
    z-index: 2;
}

/* Chaque stat = une cellule du panneau, séparée par de fins traits */
.story-metric {
    position: relative;
    text-align: center;
    padding: 32px 16px 28px;
    transition: background 0.3s ease;
}
.story-metric:nth-child(odd) {
    border-right: 1px solid rgba(3, 4, 94, 0.08);
}
.story-metric:nth-child(1),
.story-metric:nth-child(2) {
    border-bottom: 1px solid rgba(3, 4, 94, 0.08);
}

.story-metric:hover {
    background: linear-gradient(160deg, rgba(0, 180, 216, 0.07), rgba(0, 180, 216, 0.02));
}

/* ── Icône thématique par carte ── */
.story-metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 auto 14px;
    border-radius: 13px;
    color: #0077b6;
    background: linear-gradient(135deg, rgba(0, 180, 216, 0.16), rgba(0, 119, 182, 0.07));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.story-metric-icon i,
.story-metric-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.1;
}
.story-metric:hover .story-metric-icon {
    color: #00b4d8;
    background: linear-gradient(135deg, rgba(0, 180, 216, 0.24), rgba(0, 119, 182, 0.12));
}

/* ── Staggered entrance — cards appear one by one ── */
.story-metrics.armed .story-metric {
    opacity: 0;
    transform: translateY(26px) scale(0.94);
}

.story-metrics.armed .story-metric.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.5s ease, transform 0.55s cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
    .story-metrics.armed .story-metric {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Number + suffix on one baseline */
.story-metric-val {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 1px;
    line-height: 1;
}

.story-metric-num {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.9rem, 3.6vw, 2.6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #0077b6 0%, #00b4d8 60%, #00d4ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.story-metric-suffix {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.95rem, 1.8vw, 1.25rem);
    font-weight: 800;
    color: #00b4d8;
    background: linear-gradient(135deg, #0077b6, #00b4d8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.story-metric-label {
    display: block;
    font-size: 0.8rem;
    color: #5b7186;
    margin-top: 8px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ── PROGRESS DOTS ── */
.story-progress {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 10;
}

.story-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    transition: all 0.5s cubic-bezier(.16, 1, .3, 1);
}

.story-dot.active {
    background: #0077b6;
    border-color: #0077b6;
    transform: scale(1.4);
    box-shadow: 0 0 0 5px rgba(0, 119, 182, 0.1), 0 0 10px rgba(0, 119, 182, 0.15);
}

/* ── ADVISOR ORBIT (Phase 1 visual) ── */
.st-orbit {
    position: relative;
    width: 420px;
    height: 440px;
}

/* SVG connection lines */
.st-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.st-line {
    transition: none;
}

/* Building — centered */
.st-building {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -55%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

/* Decorative ring */
.st-building-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 180, 216, 0.06) 0%, rgba(0, 119, 182, 0.03) 60%, transparent 70%);
    border: 1.5px solid rgba(0, 119, 182, 0.12);
    box-shadow:
        0 0 0 8px rgba(0, 119, 182, 0.04),
        0 0 0 16px rgba(0, 119, 182, 0.02),
        0 8px 32px rgba(3, 4, 94, 0.08);
    animation: st-ring-glow 3s ease-in-out infinite;
}

@keyframes st-ring-glow {
    0%, 100% {
        box-shadow:
            0 0 0 8px rgba(0, 119, 182, 0.04),
            0 0 0 16px rgba(0, 119, 182, 0.02),
            0 8px 32px rgba(3, 4, 94, 0.08);
        border-color: rgba(0, 119, 182, 0.12);
    }
    50% {
        box-shadow:
            0 0 0 10px rgba(0, 180, 216, 0.08),
            0 0 0 20px rgba(0, 180, 216, 0.04),
            0 0 40px rgba(0, 180, 216, 0.12),
            0 8px 32px rgba(3, 4, 94, 0.08);
        border-color: rgba(0, 180, 216, 0.25);
    }
}

.st-building-img {
    width: 165px;
    height: auto;
    display: block;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 4px 16px rgba(3, 4, 94, 0.12));
}

/* ── Advisor nodes — absolute orbit positions ── */
.st-advisor {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 4;
}

/* Positions: 5 nodes on a pentagon, center (210,210), r=170
   Line endpoints match icon centers (top + 43px = endpoint Y for 86px icons) */
.st-advisor--1 { left: 210px; top: -3px;  transform: translateX(-50%); }     /* top */
.st-advisor--2 { left: 372px; top: 115px; transform: translateX(-50%); }     /* top-right */
.st-advisor--3 { left: 310px; top: 305px; transform: translateX(-50%); }     /* bottom-right */
.st-advisor--4 { left: 110px; top: 305px; transform: translateX(-50%); }     /* bottom-left */
.st-advisor--5 { left: 48px;  top: 115px; transform: translateX(-50%); }     /* top-left */

/* Advisor icon wrapper */
.st-icon-wrap {
    width: 86px;
    height: 86px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo badge next to advisor icon */
.st-logo-badge {
    position: absolute;
    bottom: 8px;
    right: 4px;
    width: 24px;
    height: 24px;
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 2px 6px rgba(0, 119, 182, 0.25));
    /* initial state set by GSAP */
}

/* Advisor image inside the circle */
.st-icon-img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    background: #ffffff;
    border: 2px solid rgba(0, 119, 182, 0.25);
    box-shadow: 0 4px 16px rgba(0, 40, 80, 0.1);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* Shiny sweep effect on advisor icons */
.st-icon-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 70%
    );
    border-radius: 50%;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
}

.st-icon-wrap.is-shiny::before {
    animation: st-shiny-sweep 1.2s ease-in-out forwards;
}

@keyframes st-shiny-sweep {
    0%   { left: -75%; opacity: 0; }
    20%  { opacity: 1; }
    100% { left: 125%; opacity: 0; }
}

/* Glow highlight effect on appear */
.st-icon-wrap::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 180, 216, 0.3) 0%, transparent 70%);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.st-icon-wrap.is-glowing::after {
    animation: st-glow-pulse 1.8s ease-out forwards;
}

@keyframes st-glow-pulse {
    0%   { opacity: 0; transform: scale(0.8); }
    30%  { opacity: 1; transform: scale(1.3); }
    100% { opacity: 0; transform: scale(1.6); }
}

/* Advisors stay fixed after appearing — no idle animation */

/* Pulse traveling along lines — pseudo on the SVG container */
.st-orbit::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 180, 216, 0.6), transparent);
    z-index: 2;
    animation: st-center-ping 3s ease-out infinite;
    pointer-events: none;
    transform: translateY(-10%);
}

@keyframes st-center-ping {
    0%   { transform: translateY(-10%) scale(1); opacity: 0.7; }
    70%  { transform: translateY(-10%) scale(4); opacity: 0; }
    100% { transform: translateY(-10%) scale(4); opacity: 0; }
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .story-split {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
    }

    .story-split--reverse {
        direction: ltr;
    }

    .story-content {
        align-items: center;
    }

    .story-headline {
        text-align: center;
    }

    .story-body {
        text-align: center;
    }

    .story-visual {
        order: -1;
    }

    .st-orbit {
        width: 300px;
        height: 320px;
    }

    .st-building {
        width: 150px;
        height: 150px;
    }

    .st-building-img {
        width: 120px;
    }

    .st-icon-wrap {
        width: 48px;
        height: 48px;
    }

    .st-icon-img {
        width: 40px;
        height: 40px;
    }

    .st-logo-badge {
        width: 18px;
        height: 18px;
        bottom: 2px;
        right: 0px;
    }

    /* Scale positions for smaller container (300x320), 48px icons (center at top+24) */
    .st-advisor--1 { left: 150px; top: 5px; }
    .st-advisor--2 { left: 266px; top: 91px; }
    .st-advisor--3 { left: 221px; top: 229px; }
    .st-advisor--4 { left: 79px;  top: 229px; }
    .st-advisor--5 { left: 34px;  top: 91px; }

    .story-metrics {
        max-width: 300px;
        margin: 0 auto;
    }

    /* ── Un-pin on mobile: the two phases stack and flow naturally instead of being
       scroll-jacked into a 100vh pin (where the tall phase-1 content got clipped). ── */
    .story-pin-wrap {
        min-height: 0;
        display: block;
        overflow: visible;
    }
    .story-pin-wrap::after { display: none; }   /* drop the focus vignette */

    .story-phase {
        position: relative;
        inset: auto;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        padding: 56px 18px;
    }
    /* GSAP may have left inline transforms/opacity on the split if loaded wide then
       resized — neutralize so stacked phases always render fully. */
    .story-split,
    .story-split--reverse {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Step dots are meaningless without the pin */
    .story-progress { display: none; }
}

@media (max-width: 480px) {
    .story-pillars {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .story-metrics {
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }
    .story-metric {
        padding: 24px 10px 22px;
    }
    .story-metric-icon {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
    }

    .story-progress {
        right: 10px;
    }

    .story-headline {
        font-size: 1.5rem;
    }

    .story-body {
        font-size: 0.92rem;
    }
}

/* ============================================================
   PHASE 1 — VISION : Glassmorphism refonte
   Cohérent avec le widget Actualités du hero (fond clair)
   ============================================================ */

/* Phase-level positioning context for blobs / decorative bubbles */
.story-phase--vision {
    position: relative;
    isolation: isolate;
}

/* (Removed: cyan/blue blobs and dot grid overlay — kept design clean per user request) */
.story-phase--vision .story-split {
    position: relative;
}

/* ════════════════════════════════════════════════════════════
   VISION SKETCH — Drawing-reveal + glassmorphism overlay
   "L'illustration se dessine devant l'utilisateur"
   ════════════════════════════════════════════════════════════ */
.vision-sketch {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 5 / 4;
    margin: 0 auto;
    perspective: 1200px;
}

/* Frame is now just a clipping/rounding wrapper for the image — the outer
   .story-visual (parent) provides the actual glass-card visual. */
.vision-sketch__frame {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 18px;
    overflow: hidden;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Image starts behind a frosted-glass blur; clears progressively with scroll. */
.vision-sketch__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;          /* card now matches the 5:4 image ratio → fills with no crop */
    object-position: center center;
    /* Initial: heavily frosted (the JS scrub will animate filter to crisp) */
    filter: blur(18px) brightness(1.08) saturate(0.85);
    transform: scale(1.06);
    transition: none;
    will-change: filter, transform;
}

/* Frosted-glass overlay on top — adds the "vitre" tint, fades with scroll */
.vision-sketch__frost {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.28) 0%,
            rgba(255, 255, 255, 0.10) 40%,
            rgba(255, 255, 255, 0.18) 100%);
    border-radius: 22px;
    pointer-events: none;
    mix-blend-mode: screen;
    will-change: opacity;
}

/* Tip and glass overlay are no longer used — kept as no-ops for safety */
.vision-sketch__tip,
.vision-sketch__glass {
    display: none;
}

/* Sheen — moving diagonal highlight that sweeps once after the drawing */
.vision-sketch__sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        transparent 30%,
        rgba(255, 255, 255, 0.45) 50%,
        transparent 70%);
    transform: translateX(-110%);
    pointer-events: none;
    border-radius: 22px;
    opacity: 0;
    mix-blend-mode: screen;
    will-change: transform, opacity;
}

/* (Removed: inner ring shadow — was creating the "deuxième étage" feel) */

/* When the image has fully cleared (handled via JS adding .is-cleared), trigger the sheen once. */
.vision-sketch.is-cleared .vision-sketch__sheen {
    animation: sketchSheenSweep 1.4s ease-out forwards;
}

@keyframes sketchSheenSweep {
    0%   { transform: translateX(-110%); opacity: 0; }
    20%  { opacity: 0.85; }
    80%  { opacity: 0.55; }
    100% { transform: translateX(110%); opacity: 0; }
}

/* (Removed: cyan breathing glow loop — too aggressive per user feedback) */

/* Reduced motion: skip animations, just show the final state */
@media (prefers-reduced-motion: reduce) {
    .vision-sketch__img {
        opacity: 1;
        filter: none;
        transform: none;
    }
    .vision-sketch__sheen {
        display: none;
    }
}

/* ════════════════════════════════════════════════════════════
   PHASE 2 — PILLARS DECK
   Stack initial → 2×2 grid au scroll
   ════════════════════════════════════════════════════════════ */
.pillar-deck {
    position: relative;
    width: 100%;
    max-width: 520px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
    perspective: 1200px;
}

.pillar-card {
    --c: #0077b6;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 18px 16px;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
            backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.80);
    border-radius: 18px;
    box-shadow:
        0 8px 28px rgba(31, 38, 135, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    transform-origin: center center;
    will-change: transform, opacity;
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

.pillar-card--1 { --c: #0077b6; }
.pillar-card--2 { --c: #6c5ce7; }
.pillar-card--3 { --c: #f59e0b; }
.pillar-card--4 { --c: #0d9488; }

/* Top accent line in pillar color */
.pillar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: linear-gradient(90deg, transparent, var(--c), transparent);
    opacity: 0.65;
}

.pillar-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.70);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}

.pillar-lottie {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.pillar-card__name {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 4px 0 0;
    letter-spacing: -0.01em;
}

.pillar-card__desc {
    font-size: 0.82rem;
    line-height: 1.5;
    color: #4e6b80;
    margin: 0;
}

.pillar-card:hover {
    border-color: rgba(0, 119, 182, 0.40);
    box-shadow:
        0 14px 36px rgba(31, 38, 135, 0.14),
        0 0 0 1px rgba(0, 119, 182, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

@media (max-width: 1023px) {
    .pillar-deck {
        max-width: 460px;
    }
    .pillar-card {
        padding: 14px;
        border-radius: 16px;
    }
    .pillar-card__icon {
        width: 48px;
        height: 48px;
    }
    .pillar-card__name {
        font-size: 0.95rem;
    }
    .pillar-card__desc {
        font-size: 0.76rem;
    }
}

@media (max-width: 640px) {
    .pillar-deck {
        max-width: 100%;
        aspect-ratio: auto;
    }
    .pillar-card {
        backdrop-filter: blur(12px) saturate(150%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pillar-card {
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ─── COUCHE 2 : Glass card around .story-content ─── */
/* Force both cards (.story-visual and .story-content) to share the same row height */
.story-phase--proof .story-split {
    align-items: stretch;
}

/* Vision: both cards share the photo's 5:4 aspect ratio (same width & height) */
.story-phase--vision .story-split {
    align-items: center;
}

.story-phase--vision .story-content,
.story-phase--vision .story-visual {
    aspect-ratio: 5 / 4;
}

/* Compact text so it fits inside the 5:4 box (matching the photo) */
.story-phase--vision .story-content .story-headline {
    font-size: clamp(1.4rem, 2.6vw, 1.95rem);
    line-height: 1.12;
    margin-bottom: 14px;
}
.story-phase--vision .story-content .story-body {
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 0;
    max-width: 100%;
}
.story-phase--vision .story-content .story-eyebrow {
    margin-bottom: 14px;
}

.story-phase--vision .story-content,
.story-phase--proof .story-content {
    position: relative;
    z-index: 2;
    background: var(--glass-bg-light);
    -webkit-backdrop-filter: var(--glass-blur-strong);
            backdrop-filter: var(--glass-blur-strong);
    border: 1px solid var(--glass-border-light);
    border-radius: 24px;
    box-shadow: var(--glass-shadow);
    padding: 32px 36px;
    justify-content: center;     /* vertically center text inside the card */
    transform: translateZ(0);    /* GPU layer hint */
}

/* Reinforce the eyebrow badge as a glass pill (mostly already pill-shaped) */
.story-phase--vision .story-content .story-eyebrow,
.story-phase--proof .story-content .story-eyebrow {
    background: rgba(0, 180, 216, 0.10);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 180, 216, 0.22);
    color: var(--glass-accent-deep);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ─── COUCHE 3 : Glass container around .story-visual (illustration) ─── */
.story-phase--vision .story-visual {
    position: relative;
    z-index: 2;
    background: var(--glass-bg-light-subtle);
    -webkit-backdrop-filter: var(--glass-blur-medium);
            backdrop-filter: var(--glass-blur-medium);
    border: 1px solid var(--glass-border-light);     /* matches the right card */
    border-radius: 24px;                              /* matches the right card */
    box-shadow: var(--glass-shadow);                  /* matches the right card */
    padding: 0;                                       /* image fills the card edge-to-edge */
    overflow: hidden;
    transform: translateZ(0);
}

/* Sketch fills the card edge-to-edge (no padding) */
.story-phase--vision .vision-sketch {
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
    margin: 0;
}

.story-phase--vision .vision-sketch__frame {
    border-radius: 0;   /* outer .story-visual already clips at 24px radius */
}

/* Subtle inner highlight rim at top of containers */
.story-phase--vision .story-content,
.story-phase--vision .story-visual {
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}

/* (Removed: floating white decorative bubbles per user request) */
.story-phase--vision .vision-deco {
    display: none;
}

/* ─── COUCHE 5 : Carousel indicators (.story-dot) redesign ─── */
.story-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.50);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 119, 182, 0.20);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: all 0.25s cubic-bezier(.16, 1, .3, 1);
    cursor: pointer;
}

.story-dot:hover {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(0, 180, 216, 0.45);
}

.story-dot:focus-visible {
    outline: 2px solid var(--glass-accent);
    outline-offset: 3px;
}

.story-dot.active {
    width: 10px;
    height: 10px;
    background: rgba(0, 180, 216, 0.85);
    border-color: rgba(0, 180, 216, 0.95);
    transform: scale(1);
    box-shadow:
        0 0 12px rgba(0, 180, 216, 0.5),
        0 0 0 4px rgba(0, 180, 216, 0.12);
}

/* ─── Responsive ─── */
@media (max-width: 1023px) {
    .story-phase--vision .story-content,
    .story-phase--vision .story-visual {
        padding: 28px;
        border-radius: 22px;
    }
}

@media (max-width: 640px) {
    .story-phase--vision .story-content,
    .story-phase--vision .story-visual {
        padding: 24px;
        border-radius: 20px;
        -webkit-backdrop-filter: blur(12px) saturate(150%);
                backdrop-filter: blur(12px) saturate(150%);
    }
    .story-phase--vision::before,
    .story-phase--vision::after {
        opacity: 0.5;
    }
    .story-phase--vision .vision-deco {
        opacity: 0.55;
    }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
    .story-phase--vision::before,
    .story-phase--vision::after,
    .story-phase--vision .story-split::after,
    .story-phase--vision .vision-deco .vbubble {
        animation: none !important;
    }
}