/* ===========================================
   SCENE 2 (sv2) — FILE: scene-2.css (FULL)
   Remplace tout ton CSS actuel par ce fichier.
   =========================================== */

/* ---- base scene ---- */
.sv2{
    background:#070A12;
}
/* wrapper scene */
.sv2-wrap{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    isolation:isolate;            /* ✅ stacking context global */
    z-index:1;
}

/* ---- steps layers ---- */
.sv2-step{
    position:absolute;
    inset:0;
    opacity:0;
    pointer-events:none;
}

/* ordre des calques (2D) */
.sv2-step--stair{ z-index:10; }
.sv2-step--drop { z-index:20; }
.sv2-blob       { z-index:30; }       /* mets 5 si tu veux blob derrière le ring */

/* ===========================================
   STEP 1 — 3 bands fullscreen
   =========================================== */
.sv2-step--stair{
    display:flex;
    flex-direction:column;
}

/* les bandes */
.sv2-step--stair .sv2-rect{
    position:relative !important;
    inset:auto !important;

    width:100%;
    height:33.333%;
    margin:0;
    padding:0;

    border:0;
    border-radius:0;
    box-shadow:none;
    backdrop-filter:none;

    display:flex;
    align-items:center;
    overflow:hidden;
}

/* teintes */
.sv2-step--stair .sv2-rect--top{ background:rgba(76,195,189,.16); }
.sv2-step--stair .sv2-rect--mid{ background:rgba(255,152,106,.16); }
.sv2-step--stair .sv2-rect--bot{ background:rgba(146,72,122,.16); }

/* contenu */
.sv2-rect__inner{
    width:min(720px, calc(100% - 48px));
    padding:clamp(18px, 4vw, 56px);
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.t1{ align-items:flex-start; }
.t2{ align-items:center; }
.t3{ align-items:flex-end; }

.sv2-rect--top{ justify-content:flex-start; }
.sv2-rect--top .sv2-rect__inner{ text-align:left; transform:translateX(14px); }

.sv2-rect--mid{ justify-content:center; }
.sv2-rect--mid .sv2-rect__inner{ text-align:center; transform:translateY(-6px); }

.sv2-rect--bot{ justify-content:flex-end; }
.sv2-rect--bot .sv2-rect__inner{ text-align:right; transform:translateX(-14px); }

/* typo */
.sv2-rect__kicker{
    font-size:12px;
    letter-spacing:.18em;
    text-transform:uppercase;
    opacity:.72;
    margin-bottom:10px;
    font-weight:700;
    display:inline-flex;
    align-items:center;
    gap:10px;
}
.sv2-rect__kicker::before{
    content:"";
    width:9px;
    height:9px;
    border-radius:999px;
    background:rgba(255,255,255,.85);
    opacity:.55;
}

.sv2-rect__title{
    font-weight:950;
    letter-spacing:-0.035em;
    margin:0 0 12px;
    font-size:clamp(28px, 3.8vw, 56px);
    background:linear-gradient(90deg, rgba(255,255,255,.96), rgba(255,255,255,.70));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-shadow:0 18px 70px rgba(0,0,0,.45);
}

.sv2-rect__sub{
    opacity:.80;
    line-height:1.65;
    font-size:clamp(14px, 1.15vw, 16px);
    max-width:62ch;
}

/* gradients titre par bande */
.sv2-rect--top .sv2-rect__title{
    background:linear-gradient(90deg, rgba(76,195,189,.98), rgba(255,255,255,.92));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.sv2-rect--mid .sv2-rect__title{
    background:linear-gradient(90deg, rgba(255,152,106,.98), rgba(255,255,255,.92));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.sv2-rect--bot .sv2-rect__title{
    background:linear-gradient(90deg, rgba(146,72,122,.98), rgba(255,255,255,.92));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

/* dot kicker par bande */
.sv2-rect--top .sv2-rect__kicker::before{ background:rgba(76,195,189,.95); opacity:.85; }
.sv2-rect--mid .sv2-rect__kicker::before{ background:rgba(255,152,106,.95); opacity:.85; }
.sv2-rect--bot .sv2-rect__kicker::before{ background:rgba(146,72,122,.95); opacity:.85; }

@media (max-width:720px){
    .sv2-rect__title{ font-size:clamp(24px, 7.2vw, 42px); }
    .sv2-rect__sub{ max-width:44ch; }
}

/* ===========================================
   BLOB transition
   =========================================== */
.sv2-blob{
    position:absolute;
    top:-18vmax;
    right:-18vmax;
    width:34vmax;
    height:34vmax;
    border-radius:999px;
    transform:scale(0);
    opacity:0;
    pointer-events:none;

    background:radial-gradient(circle at 30% 30%,
    rgba(255,255,255,.18),
    rgba(255,152,106,.22) 35%,
    rgba(76,195,189,.18) 70%,
    rgba(146,72,122,.14) 100%
    );
    filter:blur(0px);
}


/* ===== Ring title ===== */
.sv2ringTitle{
    position: absolute;
    top: clamp(48px, 6vh, 96px);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 40;              /* au-dessus du ring */
    pointer-events: none;
    max-width: 900px;
    padding: 0 24px;
}

.sv2ringTitle__kicker{
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .6;
    margin-bottom: 12px;
}

.sv2ringTitle__title{
    margin: 0 0 10px;
    font-size: clamp(32px, 4.6vw, 64px);
    font-weight: 980;
    letter-spacing: -0.035em;

    background: linear-gradient(
            90deg,
            rgba(255,255,255,.98),
            rgba(255,152,106,.92),
            rgba(76,195,189,.92)
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    text-shadow: 0 24px 80px rgba(0,0,0,.45);
}

.sv2ringTitle__sub{
    margin: 0;
    font-size: clamp(14px, 1.4vw, 18px);
    line-height: 1.5;
    opacity: .7;
}


/* ===========================================
   STEP 2 — ring / carousel 3D
   =========================================== */
.sv2-step--drop{
    pointer-events:auto;          /* Draggable */
    display:grid;
    place-items:center;
}

/* RingWrap = zone 3D */
.sv2ringWrap{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:grid;
    place-items:center;

    isolation:isolate;            /* ✅ stacking local */
    transform-style:preserve-3d;
    perspective:1200px;
    perspective-origin:50% 50%;

    z-index:25;                   /* au-dessus du step2 */
}

/* glow derrière */
.sv2ringWrap::before{
    content:"";
    position:absolute;
    inset:-22%;
    border-radius:999px;
    pointer-events:none;
    z-index:0;

    background:radial-gradient(circle at 30% 30%,
    rgba(255,255,255,.18),
    rgba(255,152,106,.22) 35%,
    rgba(76,195,189,.18) 70%,
    rgba(146,72,122,.14) 100%
    );
    filter: blur(6px); /* au lieu de 14px */
    opacity:.95;
}

/* vignette derrière panels */
.sv2ringVignette{
    position:absolute;
    inset:-80px -160px;
    pointer-events:none;
    z-index:1;

    background:
            radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.05), rgba(0,0,0,0) 70%);

    opacity:.35;
}

/* hint */
.sv2ringHint{
    position:absolute;
    z-index:4;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
    font-size:12px;
    font-weight:850;
    letter-spacing:.12em;
    opacity:.35;
    text-transform:uppercase;
    pointer-events:none;
}

/* drag layer */
.sv2ringDragger{
    position:absolute;
    inset:0;
    z-index:3;
    cursor:grab;
    background:transparent;
}
.sv2ringDragger:active{ cursor:grabbing; }

/* ✅ pivot central du ring (comme l’exemple GSAP) */
.sv2ring{
    position:absolute;
    left:50%;
    top:50%;
    width:0;
    height:0;
    transform-style:preserve-3d;
    will-change:transform;
    z-index:2;
}

/* panels */
.sv2panel{
    position:absolute;
    left:50%;
    top:50%;
    width:clamp(220px, 28vw, 360px);
    height:clamp(170px, 20vw, 230px);
    border-radius:18px;
    overflow:hidden;
    backface-visibility:hidden;

    /* ✅ glass plus simple */
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 20px 60px rgba(0,0,0,.45);

    color:rgba(255,255,255,.92);
    padding:16px 16px 14px;

    display:grid;
    grid-template-rows:auto auto 1fr auto;
    gap:8px;

    will-change:transform;
}

/* ✅ supprime l’overlay “filtre sur filtre” */
.sv2panel::after{
    content:none;
}


/* accents */
.sv2panel::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.95;
    background:
            radial-gradient(120% 120% at 15% 10%, rgba(76,195,189,.24), rgba(0,0,0,0) 55%),
            radial-gradient(120% 120% at 85% 90%, rgba(255,152,106,.18), rgba(0,0,0,0) 55%),
            linear-gradient(180deg, rgba(7,10,18,.25), rgba(7,10,18,.88));
}

.sv2panel[data-accent="orange"]::after{
    background:
            radial-gradient(120% 120% at 15% 10%, rgba(255,152,106,.22), rgba(0,0,0,0) 55%),
            radial-gradient(120% 120% at 85% 90%, rgba(76,195,189,.16), rgba(0,0,0,0) 55%),
            linear-gradient(180deg, rgba(7,10,18,.25), rgba(7,10,18,.88));
}

.sv2panel > *{ position:relative; z-index:2; }

.sv2panel__kicker{
    font-size:11px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
    opacity:.8;
}

.sv2panel__title{
    margin:0;
    font-size:18px;
    font-weight:950;
    letter-spacing:-0.02em;
}

.sv2panel__text{
    margin:0;
    opacity:.82;
    font-size:13px;
    line-height:1.4;
    max-width:34ch;
}

.sv2panel__meta{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:10px;
    opacity:.85;
    font-size:12px;
}
.sv2panel__meta b{ font-weight:950; opacity:.95; }

/* note (si tu l’utilises) */
.sv2-topNote{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:min(220px, 28vh);
    width:min(1100px, calc(100vw - 112px));
    padding-left:18px;
    z-index:40;
    pointer-events:none;
    opacity:0;
}

@media (max-width:720px){
    .sv2ringTitle{
        top: clamp(120px, 16vh, 150px);
        max-width: min(340px, calc(100% - 32px));
        padding: 0 16px;
    }

    .sv2ringTitle__title{
        font-size: clamp(24px, 10vw, 42px);
        line-height: 0.98;
    }

    .sv2ringTitle__sub{
        max-width: 30ch;
        margin: 0 auto;
        font-size: 13px;
    }

    .sv2ringWrap{
        inset: clamp(320px, 44vh, 400px) 0 88px;
        height: auto;
    }

    .sv2ringHint{
        bottom: 18px;
    }

    .sv2panel{
        width: 220px;
        height: 168px;
        padding: 14px 14px 12px;
    }

    .sv2panel__title{
        font-size: 16px;
    }

    .sv2panel__text{
        font-size: 12px;
        line-height: 1.35;
    }
}

@media (max-width:420px){
    .sv2ringTitle{
        top: clamp(112px, 15.5vh, 140px);
    }

    .sv2ringWrap{
        inset: clamp(360px, 44vh, 400px) 0 88px;
    }
}

/* ===== Bigger cards on large screens ===== */
@media (min-width: 1200px){
    .sv2panel{
        width:  clamp(300px, 26vw, 480px);
        height: clamp(220px, 18vw, 320px);
        padding: 20px 20px 18px;
        border-radius: 20px;
    }
    .sv2panel__kicker{ font-size: 12px; }
    .sv2panel__title { font-size: 22px; }
    .sv2panel__text  { font-size: 15px; line-height: 1.5; }
    .sv2panel__meta  { font-size: 13px; }
}

@media (min-width: 1600px){
    .sv2panel{
        width:  clamp(340px, 22vw, 520px);
        height: clamp(240px, 16vw, 360px);
    }
    .sv2panel__kicker{ font-size: 13px; }
    .sv2panel__title { font-size: 24px; }
    .sv2panel__text  { font-size: 16px; }
    .sv2panel__meta  { font-size: 14px; }
}