/* Page /team/ : Antoine, PlayCorals, Anachron. Scènes plein écran, calques PNG en parallaxe (08/10/2026). */
.team-page { background: var(--bg); }
.team-page main { overflow-x: clip; }
.scene { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; overflow: hidden; isolation: isolate; }
.scene .layer { position: absolute; inset: -8% -6%; z-index: 0; pointer-events: none; will-change: transform; }
.scene .layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scene .prop { position: absolute; z-index: 2; pointer-events: none; will-change: transform; }
.scene .prop img { display: block; width: 100%; height: auto; filter: drop-shadow(0 22px 40px #00000080); }
.scene .shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.scene .container { position: relative; z-index: 3; }
.scene-tag { position: absolute; z-index: 3; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #c9cfde; }
.scene-tag .icon { width: 16px; height: 16px; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 50% { transform: translateY(5px); } }
.drift { animation: drift var(--dur, 60s) linear infinite alternate; }
@keyframes drift { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
.bob { animation: bob var(--dur, 6s) ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-14px) rotate(-1deg); } }
.float { animation: float var(--dur, 9s) ease-in-out infinite; }
@keyframes float { 33% { transform: translate(6px, -10px) rotate(2deg); } 66% { transform: translate(-5px, 6px) rotate(-2deg); } }
.scene-dots { position: fixed; right: 18px; top: 50%; z-index: 40; transform: translateY(-50%); display: grid; gap: 12px; }
.scene-dots a { display: block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #ffffff66; background: transparent; transition: background .3s, border-color .3s, transform .3s; }
.scene-dots a.on { background: #a5eebc; border-color: #a5eebc; box-shadow: 0 0 12px #a5eebc80; transform: scale(1.25); }
.team-back { position: absolute; z-index: 5; top: 92px; left: 0; right: 0; font-size: 13px; }
.team-back .text-link { color: #e3e8f1; text-shadow: 0 2px 10px #000; }

/* ---------- Scène 1 : le quai d'Argent ---------- */
#s1 .layer.sky img { object-position: center 55%; }
#s1 .layer.sea { inset: auto -6% -8% -6%; height: 48%; z-index: 1; mix-blend-mode: screen; opacity: .9; }
#s1 .layer.sea canvas { width: 100%; height: 100%; display: block; }
#s1 .prop.clouds { inset: -4% -10% auto -10%; height: 60%; opacity: .95; }
#s1 .prop.clouds img { width: 100%; height: 100%; object-fit: contain; object-position: top; filter: none; }
#s1 .prop.gulls { right: 8%; top: 12%; width: clamp(160px, 22vw, 360px); opacity: .9; }
#s1 .prop.gulls img { filter: drop-shadow(0 6px 10px #0005); }
#s1 .prop.person { right: clamp(1%, 6vw, 10%); bottom: -2%; height: min(94%, 880px); width: auto; }
#s1 .prop.person img { height: 100%; width: auto; filter: drop-shadow(0 30px 50px #000c); }
#s1 .prop.quay { inset: auto -2% -4% -15%; height: 66%; z-index: 2; }
#s1 .prop.quay img { width: 100%; height: 100%; object-fit: contain; object-position: left bottom; filter: drop-shadow(0 10px 30px #0008); }
#s1 .bubble { position: absolute; z-index: 5; right: clamp(14%, 32vw, 38%); top: 20%; display: flex; gap: 10px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 14px; background: #f5f5f0; color: #0d1324; font: 600 13px/1.3 var(--body); box-shadow: 0 18px 40px -16px #000; pointer-events: none; will-change: transform; }
#s1 .bubble img { width: 34px; height: 34px; border-radius: 50%; }
#s1 .bubble small { display: block; font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #5a6382; }
#s1 .shade { background: linear-gradient(180deg, #080c19 0%, #080c1900 18%, #080c1900 55%, #080c19d9 90%, #080c19 100%), linear-gradient(90deg, #080c19e0 0%, #080c198a 36%, #080c1900 60%); }
.copy { max-width: 620px; padding-block: clamp(120px, 16vh, 170px) clamp(90px, 12vh, 130px); }
.copy .eyebrow { color: #c9cfde; }
.copy h1, .copy h2 { font: 700 clamp(36px, 4.6vw, 62px)/1 var(--display); letter-spacing: -.035em; margin-top: 18px; text-shadow: 0 4px 40px #000; }
.copy h1 span, .copy h2 span { color: var(--blue); }
.role { display: inline-flex; gap: 10px; align-items: center; margin-top: 20px; padding: 8px 14px; border-radius: 999px; border: 1px solid #ffffff2e; background: #080c1999; backdrop-filter: blur(8px); font: 600 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #e3e8f1; }
.role i { width: 6px; height: 6px; border-radius: 50%; background: #a5eebc; box-shadow: 0 0 12px #a5eebc; }
.copy p { color: #e3e8f1; font-size: clamp(16px, 1.35vw, 18.5px); line-height: 1.65; margin-top: 20px; text-shadow: 0 2px 16px #000; }
.copy p strong { color: #fff; font-weight: 600; }
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.facts span { font: 600 clamp(22px, 2.4vw, 30px)/1 var(--display); letter-spacing: -.03em; padding: 14px 18px; border-radius: 14px; border: 1px solid #ffffff22; background: #080c19aa; backdrop-filter: blur(8px); }
.facts span small { display: block; margin-top: 6px; font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #a9afc0; }

/* ---------- Grilles communes (scènes 2, 3, 5) ---------- */
.s2-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 50px; align-items: center; padding-block: 120px 100px; }
.s2-grid h2 { font: 700 clamp(30px, 3.6vw, 50px)/1.05 var(--display); letter-spacing: -.03em; margin-top: 16px; text-shadow: 0 4px 30px #000; }
.s2-grid h2 span { color: var(--blue); }
.s2-grid > div > p { color: #d9deea; font-size: 16.5px; line-height: 1.7; margin-top: 18px; text-shadow: 0 2px 12px #000; }
#s2 .shade { background: linear-gradient(180deg, #080c19 0%, #080c1999 20%, #080c19b3 70%, #080c19 100%), linear-gradient(90deg, #080c19 0%, #080c19d9 42%, #080c1966 80%); }
#s2 .prop.coins { right: 4%; bottom: 8%; width: clamp(160px, 18vw, 300px); opacity: .9; }
.list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.list li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; padding: 14px 16px; border-radius: 14px; border: 1px solid #ffffff1c; background: #080c19aa; backdrop-filter: blur(8px); }
.list b { display: block; color: var(--ink); font-weight: 600; }
.list small { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.list .ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #3765f555; color: #cfe0ff; font: 700 12px var(--mono); }
.cards { position: relative; height: clamp(420px, 56vh, 620px); }
.cards figure { position: absolute; margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid #ffffff2a; background: #0d1324; box-shadow: 0 30px 60px -20px #000; cursor: zoom-in; will-change: transform; transition: box-shadow .3s; }
.cards figure:hover { box-shadow: 0 30px 70px -14px #3765f5aa; z-index: 9; }
.cards figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cards figcaption { position: absolute; left: 10px; right: 10px; bottom: 8px; font: 600 9.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 8px #000; }
.cards .c1 { left: 0; top: 4%; width: 54%; aspect-ratio: 16 / 10; rotate: -3deg; }
.cards .c2 { right: 0; top: 0; width: 30%; aspect-ratio: 2 / 3; rotate: 4deg; }
.cards .c3 { left: 8%; bottom: 0; width: 36%; aspect-ratio: 16 / 9; rotate: 2deg; }
.cards .c4 { right: 6%; bottom: 10%; width: 42%; aspect-ratio: 16 / 9; rotate: -2deg; }
.cards .c5 { left: 46%; top: 36%; width: 24%; aspect-ratio: 1; rotate: 6deg; }
.cards .c5 img { object-fit: contain; background: #0d1324; padding: 6%; }
.cards .c5 figcaption { display: none; }
.lightbox { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: #080c19f0; padding: 24px; cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: min(1400px, 96vw); max-height: 86vh; border-radius: 14px; box-shadow: 0 40px 100px #000; }
.lightbox figcaption { margin-top: 12px; font: 600 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #c9cfde; text-align: center; }
.pills { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pills li { font: 500 12.5px var(--body); padding: 7px 12px; border-radius: 999px; border: 1px solid #ffffff22; background: #080c19aa; backdrop-filter: blur(6px); }
.cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }

/* ---------- Scène 4 : DS2 ---------- */
#s4 .shade { background: linear-gradient(180deg, #080c19 0%, #080c1966 22%, #080c1999 78%, #080c19 100%), linear-gradient(90deg, #080c19e6 0%, #080c19a0 45%, #080c1900 75%); }
#s4 .prop.dome { left: -3%; bottom: -3%; width: clamp(140px, 16vw, 280px); opacity: .95; }
#s4 .prop.phyllis { right: -1%; bottom: 4%; height: min(52%, 500px); width: auto; }
#s4 .prop.phyllis img { height: 100%; width: auto; }
.s4-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; padding-block: 120px 110px; }
.s4-grid h2 { font: 700 clamp(30px, 3.8vw, 52px)/1.04 var(--display); letter-spacing: -.03em; margin-top: 14px; text-shadow: 0 4px 30px #000; }
.s4-grid h2 span { color: var(--blue); }
.s4-grid p { color: #d9deea; line-height: 1.7; margin-top: 16px; text-shadow: 0 2px 12px #000; }
.slides { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid #ffffff2a; aspect-ratio: 16 / 10; box-shadow: 0 40px 80px -30px #000; will-change: transform; }
.slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease, transform 6s linear; transform: scale(1.04); }
.slides img.on { opacity: 1; transform: scale(1); }
.slides .tag { position: absolute; left: 14px; bottom: 12px; z-index: 2; padding: 7px 10px; border-radius: 8px; background: #080c19cc; font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #e3e8f1; }

/* ---------- Scène finale ---------- */
.s5-wrap { text-align: center; padding-block: 140px 120px; max-width: 760px; margin-inline: auto; }
.s5-wrap h2 { font: 700 clamp(38px, 5.6vw, 76px)/.98 var(--display); letter-spacing: -.04em; margin-top: 16px; text-shadow: 0 4px 40px #000; }
.s5-wrap h2 span { color: var(--blue); }
.s5-wrap p { color: #e3e8f1; font-size: 18px; line-height: 1.6; margin-top: 20px; text-shadow: 0 2px 16px #000; }
.s5-wrap .cta { justify-content: center; }

@media (max-width: 980px) {
  .scene-dots { display: none; }
  .team-back { top: 84px; }
  #s1 { align-items: end; }
  #s1 .layer.sky { inset: -4% -6% auto -6%; height: 64vh; }
  #s1 .layer.sea { inset: auto; top: 34vh; left: -6%; right: -6%; height: 28vh; }
  #s1 .prop.clouds { height: 30vh; }
  #s1 .prop.gulls { right: 4%; top: 8vh; width: 34vw; }
  #s1 .prop.person { top: 7vh; bottom: auto; right: -6%; height: 56vh; }
  #s1 .prop.quay { inset: auto -8% auto -14%; top: 30vh; height: 34vh; }
  #s1 .bubble { right: auto; left: 5%; top: 10vh; }
  #s1 .shade { background: linear-gradient(180deg, #080c19 0, #080c1900 80px, #080c1900 40vh, #080c19ee 60vh, #080c19 66vh); }
  .copy { padding-top: 58vh; padding-bottom: 60px; max-width: 100%; }
  .s2-grid, .s4-grid { grid-template-columns: 1fr; gap: 36px; padding-block: 90px 80px; }
  .cards { height: 62vw; max-height: 420px; }
  #s2 .prop.coins { display: none; }
  #s4 .prop.phyllis { height: 36vh; right: -6%; bottom: 0; opacity: .85; }
  #s4 .prop.dome { width: 30vw; left: -4%; bottom: 2%; opacity: .9; }
}
@media (max-width: 560px) {
  #s1 .prop.person { height: 50vh; right: -3%; top: 10vh; }
  #s1 .bubble { font-size: 12px; }
  .copy { padding-top: 56vh; }
  .cards { height: 92vw; max-height: none; }
  .cards .c1 { width: 70%; } .cards .c2 { width: 34%; } .cards .c3 { width: 48%; } .cards .c4 { width: 52%; } .cards .c5 { width: 28%; left: 40%; top: 34%; }
}
@media (prefers-reduced-motion: reduce) {
  .drift, .bob, .float, .scene-tag .icon, .orbit, .orbit .ag img, #s3 .prop.ship, #s3 .prop.ship img { animation: none !important; }
  .slides img { transition: none !important; }
  #s3 .prop.ship { left: 55%; }
}

/* ---------- Scène 2 (système agentique) : l'orbite des personnages IA ---------- */
.orbit-wrap { position: relative; aspect-ratio: 1; max-width: 560px; margin-inline: auto; width: 100%; }
.orbit-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; display: grid; justify-items: center; gap: 8px; will-change: transform; }
.orbit-center img { width: clamp(84px, 9vw, 120px); height: auto; border-radius: 50%; border: 3px solid #f5f5f0; box-shadow: 0 0 0 6px #3765f555, 0 20px 50px #000; }
.orbit-center span { font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #e3e8f1; text-shadow: 0 2px 10px #000; }
.orbit { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; animation: orbit-spin 90s linear infinite; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.orbit .ag { position: absolute; left: 50%; top: 50%; width: clamp(48px, 5.4vw, 72px); margin: calc(clamp(48px, 5.4vw, 72px) / -2); transform: rotate(calc(var(--i) * 360deg / var(--n))) translateX(calc(min(40vw, 215px))) rotate(calc(var(--i) * -360deg / var(--n))); }
.orbit .ag img { width: 100%; height: auto; border-radius: 50%; border: 2px solid #ffffff66; box-shadow: 0 10px 24px #000a; animation: orbit-counter 90s linear infinite; transition: transform .3s, border-color .3s; }
@keyframes orbit-counter { to { transform: rotate(-360deg); } }
.orbit .ag:hover img { transform: scale(1.18); border-color: #a5eebc; }
.orbit .ag span { position: absolute; left: 50%; top: 110%; transform: translateX(-50%); white-space: nowrap; padding: 6px 9px; border-radius: 8px; background: #f5f5f0; color: #0d1324; font: 500 10.5px/1.3 var(--body); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 5; }
.orbit .ag span b { display: block; font-weight: 700; }
.orbit .ag:hover span { opacity: 1; }
.orbit-wrap::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: 1px dashed #ffffff33; }
.orbit-wrap::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; border: 1px dashed #ffffff22; }
.s3-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; padding-block: 120px 100px; }
.s3-grid h2 { font: 700 clamp(30px, 3.6vw, 50px)/1.05 var(--display); letter-spacing: -.03em; margin-top: 16px; text-shadow: 0 4px 30px #000; }
.s3-grid h2 span { color: var(--blue); }
.s3-grid > div > p { color: #d9deea; font-size: 16.5px; line-height: 1.7; margin-top: 18px; text-shadow: 0 2px 12px #000; }
#s3 .shade { background: linear-gradient(180deg, #080c19 0%, #080c1966 20%, #080c1980 70%, #080c19 100%), linear-gradient(270deg, #080c19 0%, #080c19cc 42%, #080c1922 80%); }
#s3 .prop.ship { left: -30%; top: 10%; width: clamp(220px, 28vw, 480px); animation: sail 52s linear infinite; }
#s3 .prop.ship img { animation: bob 5s ease-in-out infinite; }
.cards .c5 img { object-fit: contain; background: #0d1324; padding: 8%; }
#s5 .shade { background: linear-gradient(180deg, #080c19 0%, #080c1966 20%, #080c1980 70%, #080c19 100%), linear-gradient(90deg, #080c19 0%, #080c19cc 42%, #080c1922 80%); }
.s5-grid > .cards { order: 2; }
.cards-ana .c1 { left: 0; top: 0; width: 58%; aspect-ratio: 16 / 10; transform: rotate(-2deg); }
.cards-ana .c2 { right: 0; top: 10%; width: 36%; aspect-ratio: 3 / 4; transform: rotate(3deg); }
.cards-ana .c3 { left: 10%; bottom: 0; width: 44%; aspect-ratio: 16 / 10; transform: rotate(2deg); }
.cards-ana .c4 { right: 4%; bottom: 4%; width: 40%; aspect-ratio: 16 / 10; transform: rotate(-3deg); }
#s6 { min-height: 92vh; }
#s6 .shade { background: linear-gradient(180deg, #080c19 0%, #080c1973 30%, #080c19cc 85%, #080c19 100%); }
#s6 .prop.squidy { right: 10%; bottom: 10%; width: clamp(120px, 14vw, 240px); }
#s6 .prop.coins { left: 6%; top: 18%; width: clamp(120px, 14vw, 240px); opacity: .85; }
@media (max-width: 980px) {
  .s3-grid { grid-template-columns: 1fr; gap: 36px; padding-block: 90px 80px; }
  .s3-grid > .cards { order: 2; }
  .orbit-wrap { max-width: 86vw; }
  .orbit .ag { transform: rotate(calc(var(--i) * 360deg / var(--n))) translateX(38vw) rotate(calc(var(--i) * -360deg / var(--n))); }
  #s3 .prop.ship { width: 44vw; top: 4%; }
  #s6 .prop.coins { width: 28vw; }
}