/* ══ Intro immersive — styles (préfixe ix-) ══ */

/* La barre de nav se cache pendant l'intro */
.navbar { transition: transform 600ms cubic-bezier(0.22,1,0.36,1), background 400ms, border-color 400ms; }
.navbar.ix-cache { transform: translateY(-105%); pointer-events: none; }

/* Les animations d'entrée du hero ne jouent qu'à l'arrivée (gérées au scroll) */
.hero-pill, .titre, .sous-titre, .hero-actions, .hero-note, .hero-stage-wrap { animation: none !important; }

/* ── Chapitres épinglés ── */
.ix-chap { position: relative; background: var(--fond); }
.ix-pin {
    position: sticky; top: 0; height: 100svh; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.ix-c1 { height: 230svh; }
.ix-c2 { height: 240svh; }
.ix-c3 { height: 250svh; }
.ix-c4 { height: 250svh; }
.ix-c5 { height: 300svh; }

/* ── Scènes photo ── */
.ix-bg { position: absolute; inset: -6%; will-change: transform; }
.ix-bg img { width: 100%; height: 100%; object-fit: cover; }
.ix-voile { position: absolute; inset: 0; pointer-events: none; }

/* C1 : iris d'ouverture */
.ix-iris {
    position: absolute; inset: 0; overflow: hidden; will-change: clip-path;
    clip-path: inset(calc(max(0%, (0.62 - var(--p1, 0)) / 0.62 * 46%)) calc(max(0%, (0.62 - var(--p1, 0)) / 0.62 * 40%)) round calc(max(0px, (0.62 - var(--p1, 0)) * 60px)));
}
.ix-c1 .ix-voile {
    background: radial-gradient(ellipse 72% 62% at 50% 45%, oklch(0.135 0.01 170 / 0.2) 0%, oklch(0.135 0.01 170 / 0.85) 100%);
}
.ix-opening {
    position: absolute; inset: 0; z-index: 12; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center; padding: 0 24px;
    background: var(--fond);
    opacity: calc(1 - var(--p1, 0) / 0.13); pointer-events: none;
}
.ix-opening-marque {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em;
    text-transform: uppercase; color: var(--vert); margin-bottom: 26px;
}
.ix-opening-titre {
    font-family: var(--serif); font-optical-sizing: auto;
    font-size: clamp(30px, 5vw, 60px); font-weight: 500; line-height: 1.1;
    letter-spacing: -0.015em; max-width: 780px; text-wrap: balance;
    background: linear-gradient(180deg, var(--blanc) 55%, oklch(0.72 0.012 170) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ix-fade {
    position: absolute; inset: 0; background: var(--fond); z-index: 11; pointer-events: none;
    opacity: calc((var(--pf, 0) - 0.88) / 0.12);
}

/* Légendes minimales */
.ix-cap {
    position: absolute; left: 50%; transform: translateX(-50%);
    text-align: center; z-index: 10; width: min(90vw, 720px); pointer-events: none;
}
.ix-cap.ix-haut { top: 13svh; }
.ix-cap.ix-bas { bottom: 12svh; }
.ix-t {
    font-family: var(--serif); font-optical-sizing: auto;
    font-size: clamp(24px, 3.8vw, 44px); font-weight: 500; line-height: 1.14;
    letter-spacing: -0.012em; text-wrap: balance;
    text-shadow: 0 2px 30px oklch(0.135 0.01 170 / 0.85);
}
.ix-s {
    font-size: 15px; color: var(--gris); line-height: 1.65;
    max-width: 440px; margin: 0 auto;
    text-shadow: 0 1px 16px oklch(0.135 0.01 170 / 0.9);
}
.ix-rev { opacity: 0; transform: translateY(22px); transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.ix-rev.on { opacity: 1; transform: translateY(0); }

/* C2 : le scan */
.ix-c2 .ix-bg { transform: scale(calc(1.04 + var(--p2, 0) * 0.16)); }
.ix-c2 .ix-voile { background: linear-gradient(180deg, oklch(0.135 0.01 170 / 0.55) 0%, oklch(0.135 0.01 170 / 0.3) 45%, oklch(0.135 0.01 170 / 0.92) 100%); }
.ix-qr {
    position: absolute; left: 50%; top: 55%;
    transform: translate(-50%, -50%) scale(calc(1 + var(--p2, 0) * 2.1));
    will-change: transform; z-index: 5;
    opacity: calc(1 - (var(--p2, 0) - 0.6) / 0.22);
}
.ix-qr-card {
    width: 124px; background: oklch(0.97 0.005 90); border-radius: 12px;
    padding: 12px 12px 9px; box-shadow: 0 24px 60px -16px oklch(0 0 0 / 0.75);
    display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.ix-qr-motif {
    width: 100%; aspect-ratio: 1; border-radius: 6px;
    background:
        conic-gradient(from 0deg at 24% 24%, #111 0 25%, transparent 0 100%),
        conic-gradient(from 180deg at 76% 76%, #111 0 25%, transparent 0 100%),
        repeating-linear-gradient(0deg, #111 0 6px, transparent 6px 12px),
        repeating-linear-gradient(90deg, #111 0 6px, #f5f5f2 6px 12px);
}
.ix-qr-txt { font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em; color: #333; text-transform: uppercase; text-align: center; line-height: 1.5; }
.ix-scan {
    position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%);
    width: min(46vw, 280px); aspect-ratio: 1; z-index: 6; pointer-events: none;
    opacity: calc((var(--p2, 0) - 0.3) / 0.1 - (var(--p2, 0) - 0.72) / 0.08);
}
.ix-scan i {
    position: absolute; width: 32px; height: 32px; border: 2.5px solid var(--vert);
    filter: drop-shadow(0 0 8px oklch(0.82 0.15 73 / 0.6));
}
.ix-scan i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.ix-scan i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.ix-scan i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.ix-scan i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.ix-scan-ligne {
    position: absolute; left: 6%; right: 6%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--vert), transparent);
    box-shadow: 0 0 14px oklch(0.82 0.15 73 / 0.8);
    top: calc(8% + var(--scan, 0) * 84%);
}
.ix-ok {
    position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%);
    z-index: 7; text-align: center; pointer-events: none;
    opacity: calc((var(--p2, 0) - 0.76) / 0.1 - (var(--p2, 0) - 0.94) / 0.06);
}
.ix-ok-rond {
    width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 14px;
    background: oklch(0.72 0.15 62 / 0.15); border: 1.5px solid var(--vert);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: var(--vert);
    box-shadow: 0 0 40px -6px oklch(0.82 0.15 73 / 0.5);
}
.ix-ok-txt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vert); }

/* C4 : le plat apparaît */
.ix-c4 .ix-pin {
    background:
        radial-gradient(ellipse 800px 480px at 50% 62%, oklch(0.36 0.09 62 / calc(0.5 * (1 - (var(--p4, 0) - 0.78) / 0.22 * 0.6))) 0%, transparent 65%),
        var(--fond);
}
.ix-stage {
    position: absolute; left: 50%; top: 54%;
    width: min(86vw, 540px); height: min(60svh, 540px);
    transform: translate(-50%, -50%) scale(calc(0.55 + min(var(--p4, 0), 0.6) * 0.75));
    opacity: calc(var(--p4, 0) / 0.15);
    will-change: transform;
}
.ix-stage model-viewer { width: 100%; height: 100%; --poster-color: transparent; pointer-events: none; }
.ix-socle {
    position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%);
    width: 62%; height: 22px; border-radius: 50%;
    background: radial-gradient(ellipse, oklch(0 0 0 / 0.55) 0%, transparent 70%);
}
.ix-anneau {
    position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%) rotateX(74deg);
    width: 76%; aspect-ratio: 1; border-radius: 50%;
    border: 1px solid oklch(0.82 0.15 73 / 0.35);
    box-shadow: 0 0 30px oklch(0.82 0.15 73 / 0.15), inset 0 0 30px oklch(0.82 0.15 73 / 0.1);
}
.ix-bienvenue {
    position: absolute; left: 50%; bottom: 10svh; transform: translateX(-50%);
    z-index: 10; text-align: center; width: min(90vw, 700px); pointer-events: none;
}

/* C3 : le menu apparaît */
.ix-c3 .ix-pin {
    background:
        radial-gradient(ellipse 700px 420px at 50% 28%, oklch(0.34 0.08 62 / 0.3) 0%, transparent 65%),
        var(--fond);
}
.ix-menu {
    width: min(86vw, 340px, 56svh); z-index: 5; margin-top: 3svh;
    transform: translateY(calc(max(0, 1 - var(--p3, 0) / 0.32) * 32svh)) scale(calc(0.94 + min(var(--p3, 0) / 0.32, 1) * 0.06));
    opacity: calc(var(--p3, 0) / 0.1);
    will-change: transform;
    background: oklch(0.08 0.005 170);
    border: 1px solid oklch(0.96 0.01 170 / 0.12);
    border-radius: 36px; padding: 11px;
    box-shadow: 0 50px 110px -30px oklch(0 0 0 / 0.8), inset 0 1px 0 oklch(0.96 0.01 170 / 0.08);
}
.ix-menu-screen {
    border-radius: 27px; overflow: hidden;
    background: linear-gradient(180deg, var(--fond-2), var(--fond));
    border: 1px solid var(--ligne-2);
}
.ix-menu-head { padding: 18px 18px 13px; border-bottom: 1px solid var(--ligne-2); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ix-menu-resto { font-size: 15px; font-weight: 600; letter-spacing: -0.015em; }
.ix-menu-sub { font-family: var(--mono); font-size: 9px; color: var(--gris-2); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 3px; }
.ix-menu-live {
    font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--vert); background: oklch(0.82 0.15 73 / 0.08); border: 1px solid oklch(0.82 0.15 73 / 0.25);
    padding: 5px 9px; border-radius: 999px; white-space: nowrap;
}
.ix-menu-rows { padding: 6px 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.ix-mrow {
    display: flex; align-items: center; gap: 12px; padding: 10px 9px;
    border-radius: 14px; border: 1px solid transparent;
    transition: border-color 450ms var(--ease, ease), background 450ms, box-shadow 450ms, transform 450ms;
}
.ix-mrow .th {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px;
    background: var(--fond-3); border: 1px solid var(--ligne-2);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 9px; font-weight: 600; color: var(--gris-2);
}
.ix-mrow .in { flex: 1; min-width: 0; }
.ix-mrow .nm { font-size: 13px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-mrow .pr { font-family: var(--mono); font-size: 10px; color: var(--gris-2); margin-top: 2px; }
.ix-mrow .v3d {
    font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--vert); background: oklch(0.82 0.15 73 / 0.08); border: 1px solid oklch(0.82 0.15 73 / 0.22);
    padding: 5px 9px; border-radius: 999px; white-space: nowrap;
}
.ix-mrow.sel {
    border-color: oklch(0.82 0.15 73 / 0.5);
    background: oklch(0.82 0.15 73 / 0.07);
    box-shadow: 0 0 28px -6px oklch(0.82 0.15 73 / 0.35);
    transform: scale(1.035);
}

/* C5 : par-dessus l'épaule — AR dans le téléphone */
.ix-c5 .ix-bg img { filter: blur(5px) brightness(0.65) saturate(0.9); }
.ix-c5 .ix-bg { transform: scale(calc(1.1 - var(--p5, 0) * 0.04)); }
.ix-c5 .ix-voile { background: linear-gradient(180deg, oklch(0.135 0.01 170 / 0.6) 0%, oklch(0.135 0.01 170 / 0.25) 45%, oklch(0.135 0.01 170 / 0.9) 100%); }
/* La légende du haut s'efface avant que le téléphone ne remonte à sa place :
   sans ça, le texte reste affiché par-dessus l'écran du téléphone (z-index
   supérieur) pendant toute la suite du chapitre, et on ne voit plus le plat. */
.ix-c5 .ix-cap.ix-haut { opacity: calc(1 - max(0, min(1, (var(--p5, 0) - 0.5) / 0.15))); }
.ix-arphone {
    position: absolute; left: 50%; bottom: 4svh; z-index: 6;
    width: min(72vw, 320px, 44svh); aspect-ratio: 9 / 18.2;
    transform: translateX(-50%) translateY(calc(max(0, 1 - var(--p5, 0) / 0.38) * 48svh)) rotate(calc(-2.5deg + min(var(--p5, 0) / 0.38, 1) * 1.5deg));
    opacity: calc(var(--p5, 0) / 0.08);
    will-change: transform;
    background: oklch(0.08 0.005 170);
    border: 1px solid oklch(0.96 0.01 170 / 0.14);
    border-radius: 44px; padding: 11px;
    box-shadow: 0 60px 120px -30px oklch(0 0 0 / 0.85), inset 0 1px 0 oklch(0.96 0.01 170 / 0.1);
}
.ix-arphone::before {
    content: ""; position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
    width: 84px; height: 24px; border-radius: 999px; background: oklch(0.05 0 0); z-index: 9;
}
.ix-arscreen { position: absolute; inset: 11px; border-radius: 34px; overflow: hidden; background: #000; }
.ix-artable {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 75% 32% at 50% 64%, oklch(0.34 0.028 75 / 0.85) 0%, transparent 70%),
        linear-gradient(180deg,
            oklch(0.17 0.008 170) 0%,
            oklch(0.19 0.010 170) 36%,
            oklch(0.27 0.022 75) 40%,
            oklch(0.24 0.020 75) 70%,
            oklch(0.19 0.016 75) 100%);
}
.ix-artable::after {
    content: ""; position: absolute; left: 0; right: 0; top: 39.5%; height: 1px;
    background: linear-gradient(90deg, transparent, oklch(0.45 0.03 75 / 0.5), transparent);
}
.ix-armv { position: absolute; left: 6%; right: 6%; top: 30%; height: 50%; z-index: 3; }
.ix-armv model-viewer { width: 100%; height: 100%; --poster-color: transparent; pointer-events: none; }
.ix-arret {
    position: absolute; left: 50%; top: 76%; transform: translateX(-50%) rotateX(72deg);
    width: 58%; aspect-ratio: 1; border-radius: 50%;
    border: 1.5px dashed oklch(0.82 0.15 73 / 0.6); z-index: 2;
    box-shadow: 0 0 26px oklch(0.82 0.15 73 / 0.2);
}
.ix-artag {
    position: absolute; top: 58px; left: 50%; transform: translateX(-50%); z-index: 8;
    font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--vert); background: oklch(0.135 0.010 170 / 0.75); border: 1px solid oklch(0.82 0.15 73 / 0.3);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    padding: 6px 11px; border-radius: 999px; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
}
.ix-artag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 8px var(--vert); }

/* ── Indice + passer ── */
.ix-cue {
    position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
    z-index: 900; display: flex; flex-direction: column; align-items: center; gap: 9px;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--gris-2); transition: opacity 500ms; pointer-events: none;
}
.ix-cue::after {
    content: ""; width: 1px; height: 34px;
    background: linear-gradient(to bottom, var(--vert), transparent);
    animation: ixCue 1.8s cubic-bezier(0.22,1,0.36,1) infinite;
}
@keyframes ixCue {
    0% { transform: scaleY(0); transform-origin: top; opacity: 1; }
    70% { transform: scaleY(1); transform-origin: top; opacity: 1; }
    100% { transform: scaleY(1); opacity: 0; }
}
.ix-skip {
    position: fixed; bottom: 22px; right: 22px; z-index: 900;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--gris); text-decoration: none;
    background: oklch(0.135 0.010 170 / 0.7); backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--ligne); padding: 9px 16px; border-radius: 999px;
    transition: color 250ms, border-color 250ms, opacity 400ms;
}
.ix-skip:hover { color: var(--blanc); border-color: oklch(0.96 0.01 170 / 0.25); }
.ix-off { opacity: 0 !important; pointer-events: none !important; }

@media (max-height: 680px) {
    .ix-t { font-size: clamp(20px, 3vw, 30px); }
    .ix-s { font-size: 13px; max-width: 380px; }
    .ix-cap.ix-haut { top: 8svh; }
    .ix-cap.ix-bas { bottom: 7svh; }
    .ix-mrow { padding: 7px 8px; }
    .ix-mrow .th { width: 32px; height: 32px; }
    .ix-menu-head { padding: 13px 14px 10px; }
    .ix-opening-titre { font-size: clamp(26px, 4.4vw, 44px); }
}

@media (prefers-reduced-motion: reduce) {
    .ix-cue::after { animation: none; }
    .ix-rev { opacity: 1 !important; transform: none !important; transition: none !important; }
}