.expedition{height:650svh;position:relative;background:#00101a}.dive-stage{height:100svh;min-height:600px;position:sticky;top:0;overflow:hidden;isolation:isolate;background:#000d16;--look-x:0;--look-y:0}.header{position:absolute;z-index:40;background:linear-gradient(#00101ad9,#00101a22);border:0}.header .brand img{width:145px;height:68px}.opening-art{position:absolute;inset:0;z-index:3;will-change:transform,opacity;transform-origin:25% 20%}.opening-art>img{height:100%;width:100%;object-fit:cover;display:block}.opening-shade{position:absolute;inset:0;background:linear-gradient(90deg,#00121e05,#00101a05 35%,#00101a55 65%,#00101a99),linear-gradient(0deg,#00101acc,transparent 65%)}.dive-opening{position:absolute;z-index:8;left:53%;right:5%;top:36%;will-change:opacity,transform;color:var(--ivory);text-shadow:0 2px 30px #0008}.dive-opening .eyebrow{font-size:9px;color:var(--ivory);letter-spacing:.17em}.dive-opening h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(42px,4.6vw,78px);font-weight:400;letter-spacing:-.045em;line-height:1.12;margin:24px 0}.dive-opening h1 em{font-weight:400;color:var(--ivory)}.dive-opening>p:not(.eyebrow){font-size:13px;color:#fff}.dive-start{border:1px solid #f6f3eb88;background:#001b2b80;backdrop-filter:blur(16px);border-radius:50px;padding:16px 28px;font-size:12px;margin-top:10px;display:flex;align-items:center;gap:55px;transition:background .3s}.dive-start:hover{background:var(--copper);color:var(--navy)}.dive-start span{font-size:24px}.wheel-instruction{display:block;font-size:7px;letter-spacing:.16em;margin-top:24px;color:var(--ivory)}#abyss{position:absolute;inset:0;width:100%;height:100%;z-index:1}.water-light{position:absolute;inset:-20%;z-index:2;pointer-events:none;background:conic-gradient(from 145deg at 48% 0,transparent 0deg,#bfe5ef13 9deg,transparent 12deg,#bfe5ef08 23deg,transparent 25deg,#bfe5ef14 34deg,transparent 40deg,#bfe5ef08 55deg,transparent 65deg);filter:blur(12px);mix-blend-mode:screen;transform:translate(calc(var(--look-x)*-12px),calc(var(--look-y)*-8px));will-change:opacity}.water-distortion{position:absolute;z-index:2;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 30%,#00101a77 75%,#000c 100%);box-shadow:inset 0 0 140px #000a}.distant-vessel{position:absolute;z-index:2;width:34%;top:32%;left:55%;filter:drop-shadow(0 0 30px #75d4ee44);opacity:0}.distant-vessel img{width:100%;height:auto}.cockpit{position:absolute;z-index:5;inset:0;pointer-events:none;opacity:0;will-change:transform,opacity}.porthole-frame{position:absolute;left:50%;top:45%;width:106vw;height:116vh;transform:translate(-50%,-50%) rotateX(calc(var(--look-y)*1deg)) rotateY(calc(var(--look-x)*1deg));border-radius:50%;box-shadow:0 0 0 250px #030b0f,0 0 130px 50px #000,inset 0 0 80px #000b;perspective:1000px}.porthole-brass{position:absolute;inset:0;border-radius:50%;border:clamp(24px,4vw,66px) solid transparent;background:linear-gradient(28deg,#030d13,#071e2c 20%,#403521 42%,#99724a 50%,#092131 66%,#020d13 85%) border-box;mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask-composite:exclude;box-shadow:inset 0 0 20px #f6b48f55}.porthole-inner{position:absolute;inset:clamp(24px,4vw,66px);border:3px solid #c5935855;border-radius:50%;box-shadow:0 0 0 5px #000a,inset 0 0 0 3px #06293d,inset 0 0 30px #83d6e922}.rivets{position:absolute;inset:0}.rivet{position:absolute;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#e6c49c,#6a523c 35%,#102330 70%);box-shadow:2px 3px 5px #000b,0 0 1px #f5d2a3}.glass-reflection{position:absolute;inset:6%;border-radius:50%;background:linear-gradient(120deg,transparent 10%,#bfe5ef06 25%,transparent 26%,transparent 70%,#bfe5ef08 80%,transparent 81%);mix-blend-mode:screen}.cockpit-lower{position:absolute;bottom:-38px;left:8%;right:8%;height:145px;display:flex;justify-content:space-between;align-items:center;padding:0 7% 22px;border-radius:50% 50% 0 0;background:linear-gradient(#172a30,#050d13 25%,#03090d);border-top:2px solid #89633e;box-shadow:0 -12px 35px #000a}.instrument{height:104px;width:104px;border-radius:50%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(#082936,#00131d 58%,#59432c 59%,#a47e4f 61%,#07171e 64%,#020709 68%);border:1px solid #8b6b4344;box-shadow:0 2px 15px #000}.instrument:after{content:'';position:absolute;inset:14px;border:1px dashed #bfab8644;border-radius:50%}.instrument>span{font-size:5px;letter-spacing:.2em;color:#95adba}.instrument b{font:22px/1.2 'Courier New',monospace;font-weight:400;color:#cfe3dd;text-shadow:0 0 10px #88dbdf77}.instrument small{font-size:6px;color:#819598}.instrument i{position:absolute;height:1px;width:24px;background:var(--copper);top:50%;left:50%;transform-origin:left;transform:rotate(var(--needle,-90deg));z-index:2;opacity:.6}.console-center{text-align:center;color:var(--copper);padding-top:10px}.console-center>span{display:block;font-size:10px;letter-spacing:.4em}.console-center small{font-size:6px;letter-spacing:.25em;color:#7e969f;margin-top:8px;display:block}.console-lights{display:flex;gap:10px;justify-content:center;margin-bottom:15px}.console-lights i{height:3px;width:3px;border-radius:50%;background:#8ef3d1;box-shadow:0 0 8px #8ef3d1}.console-lights i:nth-child(2){background:var(--copper);box-shadow:0 0 8px var(--copper)}.dive-narrative{position:absolute;z-index:6;inset:0;pointer-events:none}.scene-copy{position:absolute;top:32%;left:17%;right:17%;opacity:0;transform:translateY(30px);text-align:center;will-change:opacity,transform}.scene-copy h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(44px,5.6vw,90px);line-height:1.08;margin:20px 0;letter-spacing:-.04em;text-shadow:0 4px 35px #00101a}.scene-copy h2 em{font-style:italic}.scene-copy p{font-size:14px;color:#cbdee6;max-width:540px;margin:0 auto 25px;text-shadow:0 2px 15px #000;line-height:1.8}.scene-copy .eyebrow{color:var(--cyan);font-size:9px;letter-spacing:.25em}.scene-three{pointer-events:none}.scene-three.active{pointer-events:auto}.dive-hud{position:absolute;left:27px;right:27px;bottom:24px;display:flex;justify-content:space-between;z-index:12;align-items:flex-end;gap:20px;pointer-events:none}.depth-track{width:120px;color:#d5e3e3}.depth-track>span{font-size:7px;letter-spacing:.22em}.depth-track>div{width:100%;height:1px;background:#bfe5ef33;margin:10px 0}.depth-track i{height:1px;background:var(--copper);width:0;display:block}.depth-track output{font:10px 'Courier New',monospace;color:var(--copper);letter-spacing:.15em}.dive-controls{display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:auto}.dive-controls button,.dive-controls a{background:none;border:0;font-size:9px;color:#c4d6dc;text-shadow:0 2px 4px #000;padding:3px}.dive-controls a:hover{color:var(--copper)}.dive-scroll-cue{position:absolute;bottom:145px;left:50%;transform:translateX(-50%);z-index:8;font-size:7px;letter-spacing:.25em;color:#8eb4c2;text-align:center;opacity:0;pointer-events:none}.dive-scroll-cue span{display:block;font-size:24px;line-height:2;color:var(--copper)}.dive-fallback .expedition{height:100svh;min-height:800px}.dive-fallback .cockpit,.dive-fallback #abyss,.dive-fallback .dive-narrative{display:none}.dive-fallback .opening-art{opacity:1!important;transform:none!important}.dive-fallback .dive-opening{opacity:1!important;transform:none!important}.dive-fallback .depth-track{display:none}
@media(min-width:1700px){.dive-opening{right:8%}.porthole-frame{width:103vw;height:119vh}}
@media(max-width:900px){.porthole-frame{width:123vw;height:110vh}.cockpit-lower{left:2%;right:2%}.scene-copy{left:13%;right:13%}.dive-opening{left:46%;right:4%}.dive-opening h1{font-size:48px}}
@media(max-width:700px){.expedition{height:540svh}.dive-stage{min-height:620px}.header .brand img{width:116px;height:57px}.opening-art>img{object-fit:cover;object-position:0 center;width:210%;max-width:none}.opening-shade{background:linear-gradient(0deg,#00101a 0%,#00101a99 33%,transparent 65%,#00101a22)}.dive-opening{left:24px;right:24px;top:auto;bottom:120px}.dive-opening h1{font-size:39px;max-width:340px;margin:17px 0}.dive-opening .eyebrow{font-size:7px}.dive-opening>p:not(.eyebrow){font-size:11px}.dive-start{padding:12px 22px;font-size:11px;margin-top:16px}.wheel-instruction{font-size:6px;max-width:240px;line-height:1.8;margin-top:15px}.porthole-frame{width:145vw;height:105vh;top:45%}.porthole-brass{border-width:32px}.porthole-inner{inset:32px}.cockpit-lower{height:120px;left:-2%;right:-2%;bottom:-20px;padding:0 12% 18px}.instrument{height:78px;width:78px}.instrument b{font-size:17px}.instrument i{width:15px}.console-center>span{font-size:7px;letter-spacing:.12em}.console-center small{display:none}.console-lights{margin-bottom:10px}.scene-copy{top:31%;left:10%;right:10%}.scene-copy h2{font-size:39px}.scene-copy p{font-size:12px}.scene-copy .eyebrow{font-size:7px}.scene-three{top:25%}.scene-three .button{font-size:10px;padding:14px 18px;gap:15px}.dive-hud{bottom:20px;left:17px;right:17px}.depth-track{width:62px}.depth-track>span{font-size:6px}.dive-controls button,.dive-controls a{font-size:8px}.dive-controls{gap:6px}.dive-scroll-cue{bottom:135px;font-size:6px;white-space:nowrap}.distant-vessel{width:65%;left:48%;top:22%}.rivet{height:7px;width:7px}.dive-fallback .expedition{min-height:800px}}
@media(prefers-reduced-motion:reduce){.expedition{height:100svh;min-height:800px}.cockpit,#abyss,.dive-narrative{display:none}.opening-art{opacity:1!important;transform:none!important}.dive-opening{opacity:1!important;transform:none!important}}
/* Cadrage de la scène marine dans la planche fournie, sans modifier l’original. */
.opening-art{background:#00101a}.opening-art>img{width:210%;height:auto;max-width:none;object-fit:initial;object-position:initial;clip-path:inset(0 0 28% 0)}
.opening-shade{background:linear-gradient(90deg,transparent 15%,#00101a20 40%,#00101aba 72%,#00101ae0),linear-gradient(0deg,#00101a99,transparent 65%)}
@media(max-width:700px){.opening-shade{background:linear-gradient(0deg,#00101a 10%,#00101af5 35%,#00101a55 60%,transparent 85%)}.dive-opening{bottom:120px}.dive-opening h1{font-size:clamp(34px,9.8vw,42px)}.wheel-instruction{max-width:280px}.opening-art>img{width:210%;height:auto}}

/* Images dédiées : aucun agrandissement d’un fragment de planche. */
.opening-art>img{width:100%;height:100%;max-width:100%;object-fit:cover;object-position:center;clip-path:none}
@media(max-width:700px){.opening-art>img{width:100%;height:100%;object-fit:cover;object-position:43% center}.opening-shade{background:linear-gradient(0deg,#00101af5 0%,#00101ad0 35%,#00101a20 75%,#00101a10)}}

/* Séquence Nemo : film rendu image par image, réversible au défilement. */
.expedition{height:850svh}
#film-sequence{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;opacity:0}
.sequence-ready #film-sequence{opacity:1}
.sequence-ready .opening-art{visibility:hidden}
.cockpit,#abyss,.water-light,.water-distortion{display:none}
.dive-narrative{z-index:7}
#film-caption{position:absolute;bottom:105px;left:50%;transform:translateX(-50%);z-index:9;font-size:10px;letter-spacing:.2em;color:var(--ivory);text-transform:uppercase;text-shadow:0 2px 16px #000;text-align:center;pointer-events:none;opacity:0}
#film-dialog{padding:36px 0 12px;width:min(1100px,94vw);max-width:1100px;background:#00101a}
#film-dialog video{display:block;width:100%;max-height:75svh}
#film-dialog p{padding:10px 25px;margin:0;font-size:11px}
#film-dialog .dialog-close{top:0;right:12px}
.dive-fallback #film-sequence{display:none}
.dive-fallback .opening-art{visibility:visible}
.dive-fallback #film-caption{display:none}
@media(max-width:700px){.expedition{height:740svh}#film-caption{font-size:8px;bottom:128px;width:80%;letter-spacing:.12em}.dive-controls{gap:8px}.scene-copy{top:25%}.scene-copy h2{font-size:34px}}
@media(prefers-reduced-motion:reduce){.expedition{height:100svh}#film-sequence{display:none}.opening-art{visibility:visible}}
/* Le cartouche de chapitre suffit pendant le film : éviter les légendes superposées. */
.dive-scroll-cue{display:none}

/* Logo pieuvre transparent, agrandi sur l’accueil. */
.header{height:210px;align-items:flex-start;padding-top:18px;background:transparent}
.header .brand{width:clamp(260px,29vw,420px);flex-shrink:0}
.header .brand img{width:100%;height:auto;filter:drop-shadow(0 2px 7px #00101a99)}
.header nav,.header .nav-contact{margin-top:25px}
@media(max-width:900px){.header .brand{width:260px}.header nav{gap:18px}}
@media(max-width:700px){.header{height:180px;padding-top:4px}.header .brand{width:235px;max-width:65vw}.header .brand img{width:100%;height:auto}.header .menu-toggle{margin-top:27px}}