/* TXS — Blockout → Lumière */
:root {
  color-scheme: dark;
  --ink: #0d0f14;
  --ink-2: #151922;
  --ink-3: #0a0c10;
  --line: #262b36;
  --text: #e8eaef;
  --muted: #9aa1ae;
  --grey: #8a8f99;
  --blue: #3557ff;
  --blue-2: #6f86ff;
  --amber: #ffb347;
  --live: #2fd27a;
  --bg: var(--ink);
  --accent: var(--blue);
  --accent-2: var(--blue-2);
  --on-accent: #fff;
  --display: "Barlow Condensed", Impact, sans-serif;
  --body: "Barlow", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --wrap: 1240px;
  --pad: 24px;
  --ease: cubic-bezier(.7, 0, .2, 1);
  --out: cubic-bezier(.2, .8, .2, 1);
  --grid: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 48px 48px,
          linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) 0 0 / 48px 48px;
  --greybox: grayscale(1) contrast(1.2) brightness(.5);
}
/* Chaque projet redéfinit les mêmes jetons : la DA bascule d'un attribut */
body[data-world="dbl"] { --bg: #141c22; --ink-2: #202c35; --line: #3e4b56; --accent: #ffc044; --accent-2: #ffcd70; --on-accent: #1b1204; --muted: #b1bec8; }
body[data-world="bo2"] { --bg: #10100f; --ink-2: #1a1815; --line: #403830; --accent: #dd9753; --accent-2: #efbf8d; --on-accent: #10100f; --muted: #bcb4aa; }
body[data-world="smash"] { --bg: #0e0d10; --ink-2: #1b191e; --line: #3b3640; --accent: #e0283c; --accent-2: #ff9ec4; --on-accent: #fff; --muted: #bdb6c0; }
body[data-world="zelda"] { color-scheme: light; --bg: #e9dfc4; --ink-2: #ded1af; --line: #b5a681; --text: #302e24; --muted: #655d49; --accent: #355d4f; --accent-2: #355d4f; --on-accent: #fff8e8;
  background-image: linear-gradient(#e9dfc4dc, #e9dfc4dc), url('media/zelda/parchemin.jpg'); background-size: cover; background-position: center; background-attachment: fixed; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--line) var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; transition: background .4s; }
::selection { background: var(--accent); color: var(--on-accent); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
p { text-wrap: pretty; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.h { font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase; line-height: .88; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.h em { font-style: inherit; color: var(--accent); }

/* Mots découpés pour les apparitions */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .22em .1em .08em 0; margin: -.22em -.1em -.08em 0; }
.w > span { display: inline-block; }
.js [data-split] .w > span { transform: translateY(105%); transition: transform .9s var(--out) calc(var(--i) * 60ms); }
.js [data-split].in .w > span { transform: none; }

/* Boutons */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 24px; border-radius: 10px; font-weight: 600; font-size: 16px; background: var(--accent); color: var(--on-accent); transition: transform .2s, filter .2s, background .4s; }
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: scale(.98); }
.btn.ghost { background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); color: var(--text); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.nav.scrolled { background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(12px); border-color: var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 72px; max-width: none; padding: 0 32px; }
.logo { font: italic 900 32px/1 "Barlow Condensed", Impact, sans-serif; letter-spacing: .01em; }
.logo span { color: var(--accent); transition: color .4s; }
.links { display: flex; gap: 26px; margin: 0 auto; font-size: 15px; font-weight: 500; color: var(--muted); }
.links a { position: relative; padding: 6px 0; transition: color .2s; }
.links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .25s; }
.links a:hover { color: var(--text); }
.links a:hover::after { transform: scaleX(1); transform-origin: left; }
.sound, .motion { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 99px; font: 500 13px/1 var(--body); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.sound:hover, .motion:hover { color: var(--text); }
[data-motion="full"] .motion { color: var(--text); }
.sound .bars { display: inline-flex; gap: 2px; align-items: end; height: 12px; }
.sound .bars i { width: 2px; height: 3px; background: currentColor; border-radius: 1px; }
[data-sound="on"] .sound { color: var(--text); }
/* Son actif : les barres montent en niveau fixe, sans pulser */
.sound .bars i { transition: height .2s var(--out); }
[data-sound="on"] .sound .bars i:nth-child(1) { height: 6px; }
[data-sound="on"] .sound .bars i:nth-child(2) { height: 12px; }
[data-sound="on"] .sound .bars i:nth-child(3) { height: 8px; }
.nav .btn { height: 40px; padding: 0 18px; font-size: 15px; }
.back-uefn { display: none; align-items: center; gap: 4px; font-size: 15px; font-weight: 600; color: var(--muted); }
.back-uefn:hover { color: var(--text); }
body:not([data-world="uefn"]) .links a:not(.to-contact) { display: none; }
body:not([data-world="uefn"]) .back-uefn { display: inline-flex; }

/* ---------- Rail des projets ----------
   Une forme par jeu. Le fond de la tuile sert de cadre : l'illustration et le voile sont découpés
   dans la même forme, 1px plus petits, donc le filet suit aussi les biais et les pointes.
   Le logo est la marque de la tuile ; c'est lui qui vole jusqu'au hero pendant la bascule. */
.projects { position: fixed; top: 72px; left: 0; right: 0; z-index: 40; border-bottom: 1px solid transparent; transition: background .25s, border-color .25s; }
.projects .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1440px; margin-inline: auto; padding: 12px 32px 0; transition: padding .25s var(--out); }
.pj {
  --cut: 16px; --b: 1px; --frame: rgba(255, 255, 255, .16); --shape: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; column-gap: 16px; row-gap: 4px;
  height: 80px; padding: 0 calc(var(--cut) + 16px); color: #fff; background: var(--frame); clip-path: var(--shape);
  transition: height .25s var(--out), background .2s;
}
.pj > img:first-child, .pj::before { position: absolute; top: var(--b); left: var(--b); width: calc(100% - 2 * var(--b)); height: calc(100% - 2 * var(--b)); clip-path: var(--shape); }
.pj > img:first-child { object-fit: cover; object-position: var(--pos, center); filter: saturate(.35) brightness(.55); transition: filter .35s; }
.pj::before { content: ""; z-index: 1; background: linear-gradient(90deg, rgba(0, 0, 0, .76), rgba(0, 0, 0, .28) 60%, rgba(0, 0, 0, .5)); }
.pj-s, .pj-t, .pj .rail-logo { position: relative; z-index: 2; }
.pj-s { grid-area: 1 / 1; font: 500 12px/1.2 var(--body); color: rgba(255, 255, 255, .72); }
.pj-t { grid-area: 2 / 1; font: italic 800 22px/1 "Barlow Condensed", Impact, sans-serif; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: font-size .25s var(--out); }
.pj .rail-logo { grid-area: 1 / 2 / 3 / 3; align-self: center; justify-self: end; width: auto; height: var(--lh); max-width: 136px; object-fit: contain; object-position: right center; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55)); transition: height .25s var(--out); }
.pj:hover, .pj:focus-visible { --frame: rgba(255, 255, 255, .42); }
.pj[aria-current] { --frame: var(--pj); --b: 2px; }
.pj:focus-visible { outline: none; --frame: #fff; --b: 2px; }
.pj:hover > img:first-child, .pj:focus-visible > img:first-child, .pj[aria-current] > img:first-child { filter: saturate(1) brightness(.78); }
/* La tuile UEFN reste grise tant que le chantier n'est pas allumé */
body:not(.lit) .pj-uefn[aria-current]:not(:hover, :focus-visible) > img:first-child { filter: var(--greybox); }
body.lit .pj-uefn > img:first-child { transition: filter 1.4s .2s; }
body[data-world="zelda"] .pj:not([aria-current], :hover, :focus-visible) { --frame: rgba(48, 46, 36, .32); }

/* Une seule forme pour les quatre tuiles : la carte en biais. Le logo porte l'identité du jeu.
   Hauteurs de logo réglées à l'œil : Fortnite est large et très blanc, le blason Zelda est compact. */
.pj-uefn { --pj: #3557ff; --pos: center 40%; --lh: 32px; }
.pj-dbl { --pj: #ffc044; --pos: center 30%; --lh: 48px; }
.pj-bo2 { --pj: #dd9753; --pos: center 45%; --lh: 44px; }
.pj-bo2 .rail-logo { filter: drop-shadow(0 0 4px rgba(240, 217, 178, .35)) brightness(1.25); }
.pj-zelda { --pj: #d9b45a; --pos: center 35%; --lh: 56px; }
.pj-smash { --pj: #e0283c; --pos: 50% 88%; --lh: 32px; }

/* Au défilement le rail se resserre */
.is-scrolled .projects { background: var(--bg); border-bottom-color: var(--line); }
.is-scrolled .projects .wrap { padding-block: 8px; }
.is-scrolled .pj { --cut: 12px; height: 48px; }
.is-scrolled .pj-s { display: none; }
.is-scrolled .pj-t { font-size: 16px; }
.is-scrolled .pj .rail-logo { height: calc(var(--lh) * .6); }

/* Le nom du projet dans l'identité du hero UEFN */
.id .pname { font: italic 800 1.5em/1 var(--display); text-transform: uppercase; color: var(--accent); }

/* Sous 1200px, la tuile n'a plus la place pour le nom et le logo : le logo seul la porte,
   le nom reste lu par les lecteurs d'écran */
@media (max-width: 1199px) {
  .pj { --cut: 12px; height: 64px; padding: 0 calc(var(--cut) + 8px); grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .pj-s { display: none; }
  .pj-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pj .rail-logo { grid-area: auto; justify-self: center; height: calc(var(--lh) * .85); max-width: 100%; object-position: center; }
  .is-scrolled .pj .rail-logo { height: calc(var(--lh) * .6); }
}
/* Sur mobile, quatre tuiles étroites */
@media (max-width: 900px) {
  .projects { top: 64px; }
  .projects .wrap { padding: 8px 16px 0; gap: 8px; }
  .pj { --cut: 10px; height: 56px; padding: 0 calc(var(--cut) + 4px); }
  .pj .rail-logo { height: calc(var(--lh) * .72); }
  .is-scrolled .pj { --cut: 8px; height: 44px; }
  .is-scrolled .pj .rail-logo { height: calc(var(--lh) * .56); }
}

/* ---------- Hero : l'île grise ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 760px; overflow: hidden; cursor: crosshair; }
.hero .stage, .hero .stage > * { position: absolute; inset: 0; }
.hero img { width: 100%; height: 100%; object-fit: cover; }
.hero .shade { background: linear-gradient(90deg, rgba(13,15,20,.85) 0%, rgba(13,15,20,.45) 45%, transparent 75%), linear-gradient(0deg, var(--ink) 0%, transparent 35%); pointer-events: none; }
.hero-copy { position: absolute; left: 0; right: 0; bottom: 9vh; z-index: 2; pointer-events: none; }
.hero-copy .ctas, .hero-copy a { pointer-events: auto; }
.hero h1 { font-size: clamp(68px, 11.5vw, 188px); color: var(--grey); transition: color 1s; }
.hero h1 em { color: inherit; transition: color 1s .2s; }
.hero.lit h1 { color: #fff; }
.hero.lit h1 em { color: var(--blue); }
.hero .sub { max-width: 560px; font-size: 19px; color: #c9cdd6; margin: 26px 0 30px; }
.id { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 22px; font-size: 15px; color: var(--muted); }
.id b { color: var(--text); font-weight: 600; }
.avail { display: inline-flex; align-items: center; gap: 8px; color: var(--live); }
.avail::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
.hero.lit { cursor: auto; }
h1[tabindex="-1"]:focus { outline: none; }
.scroll-cue { position: absolute; z-index: 2; left: 50%; bottom: 22px; width: 1px; height: 44px; background: linear-gradient(var(--text), transparent); opacity: .5; }

/* ---------- Manifeste ---------- */
.manifest { padding: 168px 0 72px; }
.manifest p { font: 600 clamp(30px, 3.9vw, 58px)/1.14 var(--body); letter-spacing: -.02em; margin: 0; max-width: 1080px; }
.manifest em { font-style: normal; color: var(--blue-2); }
.manifest .mw { opacity: .16; }
.manifest .sign { margin-top: 40px; font: 500 15px/1 var(--body); color: var(--muted); }

/* ---------- Chantiers ---------- */
.chantiers { padding: 120px 0 60px; }
.chantiers .pin { display: flex; flex-direction: column; gap: 56px; }
.chantiers.hs { padding: 0; }
.chantiers.hs .pin { height: 100vh; justify-content: center; gap: 36px; padding-top: 72px; overflow: hidden; }
.ch-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; }
.ch-head h2 { font-size: clamp(48px, 6.5vw, 104px); }
.ch-head p { max-width: 440px; margin: 0; color: var(--muted); }
.count { margin: 14px 0 0; font: 500 13px/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.count b { color: var(--text); font-weight: 500; }
.track { display: grid; grid-template-columns: 1fr 1fr; gap: 64px 40px; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.chantiers.hs .track { display: flex; gap: 4vw; max-width: none; margin: 0; padding-left: max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad))); padding-right: var(--pad); width: max-content; will-change: transform; }
.chantiers.hs .plate { flex: none; width: min(60vw, calc((100vh - 380px) * 1.7778)); }
.count, .ch-bar { display: none; }
.chantiers.hs .count, .chantiers.hs .ch-bar { display: block; }
.media { position: relative; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; background: var(--ink-2); }
.media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Pinned : l'image déborde un peu pour la parallaxe */
.chantiers.hs .media > img { left: -8%; width: 116%; }
.plate .media > img:first-child { filter: var(--greybox); }
.plate .media .lit { clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease); }
.plate .media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--grid); transition: opacity .8s .3s; }
/* Le front de lumière : une ligne blanche avec sa traîne, poussée en translateX */
.plate .media::after { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg, transparent calc(100% - 60px), rgba(111,134,255,.35) calc(100% - 3px), #fff calc(100% - 2px)); transform: translateX(-100%); opacity: 0; }
.plate.on .media .lit { clip-path: inset(0 0 0 0); }
.plate.on .media::before { opacity: 0; }
.plate.on .media::after { animation: edge 1s var(--ease) forwards; }
@keyframes edge { 0% { transform: translateX(-100%); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }
.cap { margin-top: 22px; }
.cap h3 { display: inline; font: italic 800 clamp(28px, 2.6vw, 38px)/1 var(--display); text-transform: uppercase; margin: 0 16px 0 0; }
.cap .meta { font-size: 15px; font-weight: 500; color: var(--accent-2); }
.cap p { margin: 10px 0 0; color: #b9bec9; font-size: 16px; max-width: 560px; }
.ch-bar { height: 2px; background: var(--line); }
.ch-bar i { display: block; height: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; }

/* ---------- Services ---------- */
section.block { padding: 128px 0; }
.head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 56px; }
.head h2 { font-size: clamp(48px, 6.5vw, 104px); }
.head p { max-width: 440px; margin: 0; color: var(--muted); }
/* L'établi */
.tools { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; margin-top: 20px; padding: 36px; border: 1px solid var(--line); border-radius: 16px; }
.tools .h { font-size: clamp(32px, 3.4vw, 48px); }
.tools p { color: var(--muted); margin: 16px 0 0; max-width: 380px; }
.tools ul { list-style: none; margin: 0; padding: 0; }
.tools li { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.tools li:last-child { border-bottom: 0; }
.tools b { font-weight: 600; color: var(--text); }
.tools span { color: #b9bec9; font-size: 16px; }

/* ---------- Méthode ---------- */

/* ---------- Seuil : une ampoule qui suit le curseur ---------- */
.door { position: relative; padding: 168px 0; background: linear-gradient(var(--ink), #06070a 40%); overflow: hidden; }
.door > .wrap { position: relative; z-index: 1; }
.door h2 { font-size: clamp(48px, 6.5vw, 104px); margin-top: 72px; }
.door h2 em { color: var(--amber); }
.door .lead { max-width: 600px; color: var(--muted); font-size: 19px; margin: 24px 0 48px; }
.door-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #1d2028; }
.door-list a { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid #1d2028; transition: color .3s; }
.door-list a:hover { color: var(--c); }
.door-list .t { font: italic 800 clamp(26px, 3vw, 40px)/1 var(--display); text-transform: uppercase; transition: transform .35s var(--out); }
.door-list a:hover .t { transform: translateX(14px); }
.door-list a[data-go="dbl"] { --c: #ffc044; }
.door-list a[data-go="bo2"] { --c: #efbf8d; }
.door-list a[data-go="zelda"] { --c: #d9b45a; }
.door-list a[data-go="smash"] { --c: #ff6b7c; }
.door-list .s { font-size: 15px; color: var(--muted); }

/* ---------- Coupure ---------- */
.cut { position: fixed; inset: 0; z-index: 150; pointer-events: none; visibility: hidden; overflow: hidden; }
.cut.on { visibility: visible; pointer-events: auto; }
.cut > * { position: absolute; inset: 0; }
.cut .fill { opacity: 0; background: var(--c-bg); }
/* Rideau : un aplat d'accent mène, le fond du monde d'arrivée suit. Seul transform bouge. */
.cut .pa, .cut .pb { will-change: transform; }
.cut .pa { background: var(--c-ac); }
.cut .pb { background: var(--c-bg); }
/* le nom du monde d'arrivée, en contre-mouvement : il traverse plus lentement que le rideau */
.cut[data-fx="uefn"] { --c-bg: #0d0f14; --c-ac: #3557ff; }
.cut[data-fx="dbl"] { --c-bg: #141c22; --c-ac: #ffc044; }
.cut[data-fx="bo2"] { --c-bg: #10100f; --c-ac: #dd9753; }
.cut[data-fx="zelda"] { --c-bg: #e9dfc4; --c-ac: #355d4f; }
.cut[data-fx="smash"] { --c-bg: #0e0d10; --c-ac: #e0283c; }

/* ---------- Pages projet (communes aux trois mondes) ---------- */
.p-hero { position: relative; min-height: 88vh; display: grid; align-content: end; padding: 230px 0 90px; overflow: hidden; }
.p-hero > .wrap { position: relative; z-index: 1; width: 100%; }
.p-hero h1 { font-size: clamp(60px, 12vw, 200px); }
.p-hero .lead { max-width: 640px; font-size: 19px; color: color-mix(in srgb, var(--text) 82%, var(--muted)); margin: 28px 0 0; }
.chips { display: flex; flex-wrap: wrap; list-style: none; margin: 24px 0 0; padding: 0; }
.chips li { padding: 4px 16px; color: var(--muted); font: 500 13px/1.6 var(--body); }
.chips li:first-child { padding-left: 0; color: var(--accent-2); }
.chips li + li { border-left: 1px solid var(--line); }
.exp { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; padding: 90px 0; border-top: 1px solid var(--line); }
.exp .big { font: 600 22px/1.3 var(--body); color: var(--text); margin: 0 0 16px; }
.exp dl { margin: 0; display: grid; grid-template-columns: 110px 1fr; border-top: 1px solid var(--line); }
.exp dt, .exp dd { padding: 13px 0; border-bottom: 1px solid var(--line); margin: 0; }
.exp dt { font: 600 13px/1.6 var(--body); color: var(--text); }
.exp dd { font-size: 16px; }
.exp-media { position: relative; border-radius: 16px; overflow: hidden; background: var(--ink-2); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .3s; }
.exp-media:hover { box-shadow: 0 0 0 1px var(--accent); }
.exp-media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .8s var(--out); }
.exp-media.natural img { aspect-ratio: auto; }
.exp-media .lbl { display: block; padding: 12px 16px; background: var(--ink-2); font: 500 13px/1.5 var(--body); }
.zelda img { aspect-ratio: 1600 / 514; object-fit: contain; background: #000; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; padding-bottom: 40px; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: auto; border: 1px solid var(--line); }
.gallery figcaption { margin-top: 10px; font-size: 15px; color: var(--muted); }
.hud-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 10px 0 40px; }
.hud { position: relative; padding: 22px; background: var(--ink-2); border: 1px solid var(--line); }
.hud .k { font: 500 13px/1 var(--mono); color: var(--accent); }
.hud h3 { font: 400 26px/1.05 var(--display); text-transform: uppercase; margin: 18px 0 10px; }
.hud p { margin: 0; color: var(--muted); font-size: 16px; }
/* Bâtons de survie : un trait de plus par carte */
.tally { position: absolute; z-index: 3; top: 18px; right: 20px; width: 40px; height: 28px; fill: none; stroke: #e0442f; stroke-width: 2.5; stroke-linecap: round; }
.tally path { stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset .35s calc(var(--n) * .15s + .3s); }
.hud.in .tally path { stroke-dashoffset: 0; }

/* ---------- Contact ---------- */
.contact { position: relative; text-align: center; padding: 168px 0 144px; overflow: hidden; }
.contact::before { content: ""; position: absolute; inset: 0; background: var(--grid); -webkit-mask-image: linear-gradient(transparent, #000 70%); mask-image: linear-gradient(transparent, #000 70%); opacity: .6; pointer-events: none; }
.contact > * { position: relative; }
.contact h2 { font-size: clamp(56px, 8vw, 128px); }
.contact p { max-width: 520px; margin: 26px auto 36px; font-size: 19px; color: var(--muted); }
.contact .ctas { justify-content: center; }
.contact .small { margin-top: 26px; font-size: 15px; color: var(--muted); }
footer { border-top: 1px solid var(--line); padding: 28px 0; color: var(--muted); font-size: 14px; }
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer b { color: var(--text); font-weight: 600; }

/* ---------- Divers ---------- */
.mock { position: fixed; z-index: 60; left: 16px; bottom: 16px; font: 500 11px/1.4 var(--mono); color: #4a3b00; background: #ffe58a; padding: 7px 10px; border-radius: 8px; max-width: calc(100vw - 32px); }
.toast { position: fixed; z-index: 160; left: 50%; bottom: 28px; width: max-content; max-width: calc(100vw - 32px); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 12px 18px; border-radius: 8px; background: #fff; color: var(--ink); font-weight: 600; font-size: 15px; transition: opacity .3s, transform .3s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--out), transform .9s var(--out); }
.js .rv.in { opacity: 1; transform: none; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  :root { --pad: 16px; }
  .nav .wrap { padding: 0 16px; gap: 14px; height: 64px; }
  .nav .btn, .links a:not(.to-contact) { display: none; }
  .links { margin: 0 0 0 auto; }
  .back-uefn, .sound, .motion { font-size: 14px; white-space: nowrap; }
  .motion .lbl { display: none; }
  body:not([data-world="uefn"]) .links .to-contact { display: none; }
  .hero { cursor: auto; min-height: 560px; }
  .hero-copy { bottom: 12vh; }
  .hero .sub { font-size: 17px; }
  .hint { right: auto; left: 16px; bottom: auto; top: 150px; }
  .vp { display: none; }
  .p-hero { min-height: 0; padding: 160px 0 110px; }
  .p-hero .lead { font-size: 17px; }
  .gallery, .hud-cards { grid-template-columns: minmax(0, 1fr); }
  .manifest { padding: 112px 0 48px; }
  .chantiers { padding: 88px 0 40px; }
  .chantiers .pin { gap: 28px; }
  .ch-head { flex-direction: column; align-items: start; gap: 16px; }
  .track { grid-template-columns: 1fr; gap: 56px; }
  .bbox { display: none; }
  .tools { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
  .tools li { grid-template-columns: 1fr; gap: 4px; }
  section.block { padding: 96px 0; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .cards .card { grid-column: auto; }
  .door { padding: 112px 0; }
  .door-list a { grid-template-columns: 1fr; gap: 8px; }
  .exp { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 70px 0; }
  .contact { padding: 112px 0 96px; }
  .mock { bottom: 10px; left: 10px; font-size: 10px; }
}
@media (max-width: 520px) {
  .viz { height: 200px; }
  .viz-code pre { font-size: 11px; padding: 16px; overflow-x: auto; }
  .viz-fix li { white-space: normal; }
  .ctas .btn { flex: 1 1 auto; justify-content: center; }
}
html[data-motion="calm"] { scroll-behavior: auto; }
.js[data-motion="calm"] .rv { transform: none; }
.js[data-motion="calm"] [data-split] .w > span { transform: none; opacity: 0; transition: opacity .7s calc(var(--i) * 60ms); }
.js[data-motion="calm"] [data-split].in .w > span { opacity: 1; }
[data-motion="calm"] .hint i::after, [data-motion="calm"][data-sound="on"] .sound .bars i, [data-motion="calm"] .caret, [data-motion="calm"] .pend .bulb, [data-motion="calm"] .pend .cone, [data-motion="calm"] .stars { animation: none; }
[data-motion="calm"] .plate.on .media::after { animation: none; }
[data-motion="calm"] .exp-media img, [data-motion="calm"] .btn:hover, [data-motion="calm"] .door-list a:hover .t { transform: none !important; }

/* Native game surfaces. Logos identify the world; project imagery leads the page. */
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 250; padding: 12px 20px; background: var(--text); color: var(--bg); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.nav { background: color-mix(in srgb, var(--bg) 95%, transparent); }
.nav .wrap { max-width: 1600px; margin-inline: auto; }
.sound, .motion { min-height: 44px; border-radius: 4px; }
.game-logo { display: block; width: auto; height: 96px; max-width: 240px; object-fit: contain; object-position: left center; margin: 0 0 26px; }
.game-logo-dbl { height: 112px; }
.game-logo-zelda { height: 120px; }
.p-hero { min-height: 850px; padding: 220px 0 88px; align-content: center; }
.project-composition { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 54px; align-items: center; }
.project-copy { min-width: 0; }
.p-hero h1, #bo2 .p-hero h1 { font-size: clamp(56px, 6.2vw, 92px); line-height: .98; letter-spacing: -.02em; }
.p-hero .lead { font-size: 18px; line-height: 1.65; max-width: 56ch; margin-top: 24px; }
.hero-actions { margin-top: 30px; }
.hero-art { min-width: 0; margin: 30px 0 0; position: relative; }
.hero-art > img { width: 100%; height: auto; }
.hero-art figcaption { font-size: 14px; padding: 16px 20px; color: var(--muted); }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.section-heading h2 { font: 600 clamp(28px, 3vw, 40px)/1.15 var(--body); margin: 0; letter-spacing: -.02em; }
.section-heading p { color: var(--muted); margin: 0; font-size: 15px; }
.exp { gap: 48px; padding-block: 80px; }
.contact { padding-block: 100px 80px; }
.contact::before { display: none; }
.contact h2 { font-size: clamp(50px, 6vw, 88px); }
.mock { position: static; max-width: var(--wrap); margin: 20px auto 0; padding: 0 var(--pad); font: 400 12px/1.6 var(--body); color: var(--muted); background: none; border-radius: 0; }
.native-service { background: #181b22; }
.native-service img { width: 100%; height: 100%; object-fit: contain; }
.hero h1 { font-size: clamp(68px, 9vw, 132px); }
.hero .shade { background: linear-gradient(90deg, rgba(13,15,20,.86), rgba(13,15,20,.35) 65%, rgba(13,15,20,.1)), linear-gradient(0deg, var(--ink), transparent 50%); }
.hero .sub { max-width: 520px; }
.native-ui .media img { object-fit: contain; }

/* Legends: native ink, printed yellow tabs, and the real desktop viewer. */
#dbl .p-hero { background: linear-gradient(90deg, rgba(20,28,34,.94), rgba(20,28,34,.5)), url('media/dbl/encre.png') right center / auto 100% no-repeat, url('media/dbl/fond.png') center / cover; }
#dbl .p-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 100px; background: linear-gradient(transparent, var(--bg)); }
#dbl .p-hero h1 { text-shadow: none; font-size: clamp(54px, 5.3vw, 80px); }
.legends-preview { background: #151d23; box-shadow: 0 24px 64px rgba(4,9,15,.5); border-bottom: 3px solid #ffc044; }
.legends-preview::before { content: ""; position: absolute; inset: -58px -22px; z-index: -1; background: url('media/dbl/brush.png') center / contain no-repeat; opacity: .75; }
.native-heading { padding: 15px 18px; display: flex; justify-content: space-between; gap: 12px; background: url('media/dbl/bouton.png') center / 100% 100% no-repeat, linear-gradient(#ffc044, #ffc044) center / calc(100% - 14px) calc(100% - 12px) no-repeat; color: #20170a; font-weight: 600; font-size: 14px; }
.native-heading span:last-child { font-size: 12px; align-self: center; }
.legends-preview > img { aspect-ratio: auto; object-fit: contain; background: #161b20; }
body[data-world="dbl"] .btn { background: url('media/dbl/bouton.png') center / 100% 100% no-repeat, linear-gradient(#ffc044, #ffc044) center / calc(100% - 14px) calc(100% - 12px) no-repeat; clip-path: none; color: #211705; border-radius: 0; font-family: var(--body); font-style: normal; font-weight: 600; text-transform: none; }
body[data-world="dbl"] .btn.ghost { background-image: url('media/dbl/bouton-retour.png'); color: #11202d; }
.interface-gallery { padding: 40px 0 72px; scroll-margin-top: 100px; }
.native-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.native-tabs button { flex: 1; min-height: 52px; padding: 12px; color: #28313a; background: url('media/dbl/bouton-neutre.png') center / 100% 100% no-repeat, linear-gradient(#eee, #eee) center / calc(100% - 14px) calc(100% - 12px) no-repeat; font-weight: 600; transition: filter .2s, transform .2s; }
.native-tabs button[aria-pressed="true"] { background-image: url('media/dbl/bouton.png'), linear-gradient(#ffc044, #ffc044); color: #211705; }
.native-tabs button:hover { filter: brightness(1.12); }
.native-tabs button:active { transform: translateY(2px); }
.interface-screen { margin: 0; background: #0d1217; }
.interface-screen img { width: 100%; height: 600px; object-fit: contain; }
.interface-screen figcaption { margin: 0; padding: 16px 20px; background: var(--ink-2); font-size: 14px; color: var(--muted); }

/* Zombies: native distressed frames, quiet orange and room for the planet. */
body[data-world="bo2"] .h { font-style: normal; font-weight: 800; letter-spacing: 0; }
body[data-world="bo2"] .h em { color: var(--accent); }
#bo2 .p-hero { min-height: 900px; padding-block: 225px 90px; }
#bo2 .project-composition { grid-template-columns: 1fr minmax(0, 1fr); }
#bo2 .project-copy { grid-column: 2; }
.game-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 25% center; pointer-events: none; }
#bo2 .p-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(16,16,15,.02) 20%, rgba(16,16,15,.68) 58%, rgba(16,16,15,.88)), linear-gradient(0deg, var(--bg), transparent 35%); }
#bo2 .p-hero > .wrap { z-index: 2; }
#bo2 .p-hero .lead { color: #d5cec6; }
body[data-world="bo2"]::after { display: none; }
body[data-world="bo2"] .btn { background: none; border-radius: 0; box-shadow: none; color: #f3e3ce; font-family: var(--body); letter-spacing: 0; text-transform: none; border: 14px solid transparent; border-image: url('media/bo2/etiquette.png') 18 fill stretch; padding: 0 14px; height: 54px; }
body[data-world="bo2"] .btn:hover { color: #ffbd74; filter: brightness(1.2); }
body[data-world="bo2"] .btn.ghost { color: var(--muted); }
body[data-world="bo2"] .hud::after, body[data-world="bo2"] .exp-media::after { display: none; }
.map-gallery { padding-block: 36px 64px; scroll-margin-top: 90px; }
.map-prints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.map-prints figure { margin: 0; position: relative; }
.map-prints img { aspect-ratio: 1; width: 100%; height: auto; object-fit: cover; border: 14px solid transparent; border-image: url('media/bo2/cadre-carte.png') 25 fill stretch; }
.map-prints figcaption { padding: 14px 6px; font: 600 28px/1.2 var(--display); color: #e9dfd1; text-transform: uppercase; }
.map-prints figcaption span { display: block; color: var(--muted); margin-top: 5px; font: 400 13px/1.6 var(--body); text-transform: none; }
.hud-cards { gap: 24px; }
.hud { background: none; border: 20px solid transparent; border-image: url('media/bo2/panneau.png') 36 fill stretch; padding: 8px; }
.hud .k { font-size: 11px; }
.hud h3 { font-weight: 600; margin-top: 20px; }
.hud .tally { top: 2px; right: 2px; width: 24px; opacity: .75; }

/* Skyward Sword: the game's warm paper and emerald save slots. */
body[data-world="zelda"] .nav { background: #e9dfc4; }
body[data-world="zelda"] .h { font-style: normal; letter-spacing: -.025em; text-transform: none; }
#zelda .p-hero { background: linear-gradient(90deg, rgba(233,223,196,.85), rgba(233,223,196,.5)), url('media/zelda/parchemin.jpg') center / cover; }
#zelda .p-hero h1 { font-size: clamp(44px, 4.6vw, 68px); line-height: 1.12; }
#zelda .p-hero .lead { color: #514a3b; }
#zelda .p-hero .chips li { color: #514a3b; }
body[data-world="zelda"] .btn { color: #fff8e8; background: #355d4f; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); font-weight: 600; height: 48px; }
body[data-world="zelda"] .btn:hover { filter: none; background: #2b4d41; }
body[data-world="zelda"] .btn.ghost { color: #355d4f; background: transparent; box-shadow: inset 0 0 0 1px #798b6b; }
.coop-preview { padding: 0 14px 0 0; }
.save-slot { position: relative; border: 18px solid transparent; border-image: url('media/zelda/carnet.png') 34 fill stretch; box-shadow: 0 18px 28px rgba(62,49,24,.14); }
.save-slot.second { width: 85%; margin: -26px -12px 0 auto; }
.save-label { display: flex; align-items: center; gap: 10px; padding: 0 0 10px; font: 600 14px/1 var(--body); color: #332e22; }
.hearts { display: flex; gap: 2px; margin-left: auto; }
.hearts img { width: 17px; height: 17px; }
.player-view { overflow: hidden; aspect-ratio: 16 / 9; position: relative; }
.player-view img { position: absolute; width: 175%; max-width: none; height: auto; top: 0; left: 0; }
.player-two img { width: 233%; left: -133%; top: -14%; }
.coop-preview figcaption { color: #655d49; text-align: center; padding: 24px 0 0; font-family: "Cinzel", Georgia, serif; }
.coop-preview figcaption small { font: 400 12px/1.6 var(--body); }
#zelda .exp-media { border: 18px solid transparent; border-image: url('media/zelda/carnet.png') 34 fill stretch; box-shadow: none; border-radius: 0; }
#zelda .exp-media .lbl { background: transparent; color: #4a4434; padding-bottom: 0; }
#zelda .exp-media img { aspect-ratio: 1600 / 514; }
body[data-world="zelda"] .contact { background: rgba(233,223,196,.7); }
body[data-world="zelda"] .toast { color: #302e24; background: #fff9e8; }

/* One calm entrance; no glitch, flashing text or camera shake over the work. */
[data-motion="full"] .world.enter .p-hero, [data-motion="full"] .world.enter .p-hero h1, [data-motion="full"] .world.enter .p-hero h1 em, [data-motion="full"] #zelda.enter .p-hero h1 em .w > span { animation: none; }
[data-motion="full"] #zelda.enter .p-hero h1 em .w > span { color: var(--accent); background: none; }
[data-motion="full"] #dbl .p-hero .rv, [data-motion="full"] #zelda .p-hero .rv { transform: translateY(16px); filter: none; }
[data-motion="full"] #dbl .p-hero .rv.in, [data-motion="full"] #zelda .p-hero .rv.in { transform: none; }
[data-motion="full"] #bo2 .p-hero .rv, [data-motion="full"] #bo2 .p-hero [data-split] .w > span { transition-timing-function: var(--out); }

@media (max-width: 1050px) {
  .nav .wrap { gap: 16px; }
  .back-uefn { display: none !important; }
  .project-composition { gap: 28px; }
  .p-hero { min-height: 740px; }
  .p-hero h1, #bo2 .p-hero h1 { font-size: 64px; }
  #zelda .p-hero h1 { font-size: 48px; }
}
@media (max-width: 700px) {
  .nav .wrap { gap: 10px; }
  .nav .sound { margin-left: auto; }
  .nav .links { display: none; }
  .project-composition { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .p-hero { padding: 164px 0 52px; min-height: 0; }
  .game-logo { height: 76px; margin-bottom: 22px; }
  .game-logo-dbl { height: 86px; }
  .game-logo-zelda { height: 90px; }
  .p-hero h1, #bo2 .p-hero h1 { font-size: clamp(48px, 13vw, 72px); }
  #zelda .p-hero h1 { font-size: clamp(36px, 9vw, 54px); }
  .p-hero .lead { font-size: 16px; line-height: 1.7; margin-top: 20px; }
  .chips { margin-top: 20px; }
  .chips li { font-size: 12px; padding-inline: 10px; }
  .hero-actions { margin-top: 24px; }
  .hero-art { margin-top: 4px; }
  .legends-preview > img { aspect-ratio: auto; }
  .native-heading { font-size: 12px; padding: 12px; }
  #bo2 .p-hero { min-height: 880px; padding: 350px 0 58px; }
  #bo2 .project-composition { display: block; }
  #bo2 .game-backdrop { height: 570px; object-position: 8% center; }
  #bo2 .p-hero::after { background: linear-gradient(0deg, var(--bg) 32%, rgba(16,16,15,.7) 52%, transparent 90%); }
  #bo2 .game-logo { height: 70px; }
  .map-prints { gap: 14px; grid-template-columns: 1fr; }
  .map-prints figure { display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: center; }
  .map-prints figcaption { font-size: 27px; }
  .map-prints img { border-width: 7px; }
  .map-gallery { padding-block: 20px 48px; }
  .section-heading { display: block; margin-bottom: 24px; }
  .section-heading p { margin-top: 10px; }
  .exp { padding-block: 48px; gap: 26px; }
  .interface-gallery { padding-top: 20px; }
  .interface-screen img { height: 330px; }
  .native-tabs { gap: 3px; }
  .native-tabs button { padding-inline: 4px; font-size: 13px; }
  .save-slot { border-width: 14px; }
  .save-slot.second { margin-top: -16px; }
  .save-label { font-size: 12px; }
  .hero h1 { font-size: clamp(64px, 16vw, 96px); }
  .hero-copy { bottom: 70px; }
  .hero { min-height: 740px; }
}

.image-hint { display: block; padding: 0 20px 16px; color: var(--muted); background: var(--ink-2); font-size: 12px; }
.interface-screen a { display: block; cursor: zoom-in; }
.hero.lit h1 em, .hero .id .pname { color: #9aafff; }
.hero .avail { color: #77e4a6; }
/* Finition : le travail porte l'image, la navigation reste disponible. */
:root { --muted: #adb4c1; --section-space: 96px; }
html { scroll-padding-top: 144px; }
[id] { scroll-margin-top: 0; }
.nav .wrap { gap: 20px; }
.mobile-contact { display: none; }
.hero-copy { bottom: 100px; }
.hero { height: min(960px, 100svh); min-height: 800px; }
.hero .id { color: #c4cbd6; font-size: 14px; }
.hero .id b { font-weight: 500; }
.hero h1 { font-size: clamp(72px, 8.8vw, 128px); }
.hero .sub { font-size: 18px; line-height: 1.65; }
.scroll-cue { width: auto; height: 24px; background: none; left: auto; right: max(24px, calc((100vw - 1192px) / 2)); bottom: 32px; display: flex; gap: 18px; align-items: center; color: #c7cdd5; opacity: 1; font-size: 13px; }
.manifest { padding: 80px 0; border-bottom: 1px solid var(--line); }
.manifest p { font-size: clamp(28px, 3vw, 44px); max-width: 970px; line-height: 1.3; }
.manifest .mw { opacity: 1; }
.manifest .sign { margin-top: 24px; }
.chantiers { padding: var(--section-space) 0; }
.chantiers .pin { gap: 40px; }
.ch-head h2, .head h2, .door h2 { font-size: clamp(44px, 4.8vw, 68px); line-height: 1; }
.ch-head p, .head p { font-size: 16px; line-height: 1.65; }
.track { gap: 48px 32px; }
.plate { min-width: 0; }
.plate .media { border-radius: 4px; aspect-ratio: 16 / 10; }
.visual-kind { position: absolute; z-index: 3; top: 16px; left: 16px; padding: 4px 10px; background: #10141ce6; color: #e2e7f0; font-size: 11px; line-height: 1.6; border-radius: 3px; }
.native-ui .visual-kind { background: #e0e8ff; color: #182341; }
.native-ui .media { background: #191d27; }
.native-ui .media img { padding: 40px 20px 12px; object-fit: contain; }
.cap { margin-top: 20px; }
.cap h3 { display: block; font-size: 32px; margin: 0 0 10px; }
.cap .meta { font-size: 13px; }
.cap p { font-size: 15px; line-height: 1.7; margin-top: 12px; max-width: 58ch; }
section.block { padding: var(--section-space) 0; border-top: 1px solid var(--line); }
.head { margin-bottom: 40px; }
.service-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
.service-row { padding: 24px 0; border-bottom: 1px solid var(--line); }
.service-row:first-child { padding-top: 0; }
.service-row:last-child { border-bottom: 0; }
.service-row h3 { margin: 0 0 12px; font: 600 24px/1.2 var(--body); }
.service-row p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.service-row strong { font-weight: 500; color: var(--text); }
.tools { margin-top: 64px; padding: 40px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.tools .h { font: 600 28px/1.2 var(--body); text-transform: none; }
.tools li { padding-block: 20px; }
.tools li:first-child { padding-top: 0; }
.tools li b { font-size: 15px; }
.tools span { color: var(--muted); font-size: 15px; }
.door { padding: var(--section-space) 0; background: #111620; }
.door h2 { margin-top: 0; }
.door .lead { font-size: 17px; max-width: 64ch; margin: 24px 0 40px; }
.door-list { border: 0; }
.door-list a { grid-template-columns: 144px 1fr auto; gap: 32px; padding: 24px 0; border-color: #2d3442; }
.door-list .door-preview { width: 144px; height: 88px; object-fit: cover; border-radius: 3px; }
.door-list .t { font: 600 clamp(24px, 2.5vw, 34px)/1.1 "Barlow Condensed", sans-serif; font-style: normal; text-transform: none; }
.door-list .s { font-size: 14px; }
.door-list a:hover .t { transform: translateX(4px); }
.project-facts { grid-template-columns: .8fr 1.2fr; align-items: start; gap: 72px; }
.facts-intro h2 { font: 600 clamp(32px, 3.2vw, 44px)/1.15 var(--body); letter-spacing: -.02em; margin: 0 0 24px; }
.facts-intro p { margin: 0; color: var(--muted); font-size: 15px; }
.interface-gallery { border-top: 1px solid var(--line); padding-block: 64px; }
.hud-cards { padding-bottom: 72px; }
.hud h3 { text-transform: none; font-size: 26px; }
.hud .tally { display: none; }
.hud .k { display: block; overflow-wrap: anywhere; color: var(--muted); }
.hud p { font-size: 15px; line-height: 1.7; }
.contact { padding-block: 88px; text-align: left; border-top: 1px solid var(--line); background: var(--ink-2); }
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.contact h2 { font-size: clamp(44px, 5vw, 68px); line-height: 1; }
.contact p { margin: 24px 0 0; font-size: 17px; line-height: 1.65; max-width: 46ch; }
.contact .contact-signature { font-size: 15px; color: var(--text); margin-top: 32px; }
.contact-signature span { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }
.contact-option { display: flex; align-items: center; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--line); width: 100%; text-align: left; }
.contact-option > svg { width: 24px; height: 24px; flex: none; color: var(--muted); }
/* Logos réels des réseaux : on garde leurs couleurs d'origine. */
.brand { width: 24px; height: 24px; flex: none; }
.reach { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.reach a, .reach button { display: inline-flex; align-items: center; gap: 8px; color: inherit; }
.reach .brand { width: 18px; height: 18px; }
.reach button:hover, .reach a:hover { color: var(--accent-2); }
.contact-option > span:nth-child(2) { flex: 1; min-width: 0; }
.contact-option small { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.contact-option strong { font-size: clamp(18px, 2vw, 26px); line-height: 1.3; font-weight: 500; overflow-wrap: anywhere; }
.contact-option:hover strong { color: var(--accent-2); }
.contact-option .copy-label { font-size: 12px; color: var(--muted); }
.contact .contact-note { font-size: 13px; margin-top: 20px; color: var(--muted); }
footer { padding-block: 32px; }
footer .wrap { gap: 24px; font-size: 13px; }
footer .wrap > span:last-child { max-width: 460px; }
.mock { font-size: 11px; }
body[data-world="zelda"] .contact { background: #e3d6b7; }
[data-motion="calm"] *, [data-motion="calm"] *::before, [data-motion="calm"] *::after { scroll-behavior: auto !important; }
@media (max-width: 1100px) {
  .nav .links { gap: 16px; font-size: 14px; }
  .nav .btn { padding-inline: 12px; font-size: 13px; }
  .service-layout { gap: 40px; }
  .door-list a { grid-template-columns: 128px 1fr; gap: 12px 24px; }
  .door-preview { grid-row: span 2; }
  .door-list .s { grid-column: 2; }
  .contact-layout, .project-facts { gap: 40px; }
}
@media (max-width: 900px) {
  :root { --section-space: 72px; }
  html { scroll-padding-top: 132px; }
  [id] { scroll-margin-top: 0; }
  .nav .links { display: none; }
  .nav .sound { margin-left: auto; }
  .mobile-contact { display: grid; place-items: center; width: 40px; height: 44px; flex: none; }
  .mobile-contact svg { width: 22px; height: 22px; }
  .service-layout { grid-template-columns: .8fr 1.2fr; gap: 32px; }
  .tools { grid-template-columns: 1fr; padding-inline: 0; }
  .tools li { grid-template-columns: 180px 1fr; }
  .project-facts { grid-template-columns: 1fr; gap: 32px; }
  .facts-intro h2 br { display: none; }
  .contact-layout { gap: 32px; }
  .contact-option { gap: 12px; }
}
@media (max-width: 600px) {
  .nav .wrap { gap: 8px; }
  .nav .logo { font-size: 28px; }
  .sound, .motion { font-size: 12px; padding-inline: 10px; }
  .hero { min-height: 760px; height: 100svh; }
  .hero-copy { bottom: 88px; }
  .hero h1 { font-size: clamp(58px, 15.7vw, 84px); }
  .hero .sub { font-size: 16px; }
  .hero .id { font-size: 12px; gap: 6px 12px; }
  .hero .id b { display: block; width: 100%; }
  .scroll-cue { bottom: 24px; right: 16px; }
  .manifest { padding-block: 56px; }
  .manifest p { font-size: 28px; }
  .track { grid-template-columns: 1fr; gap: 40px; }
  .cap h3 { font-size: 28px; }
  .service-layout { grid-template-columns: 1fr; gap: 32px; }
  .service-row h3 { font-size: 22px; }
  .tools { margin-top: 40px; gap: 24px; }
  .tools li { grid-template-columns: 1fr; gap: 8px; }
  .door-list a { grid-template-columns: 88px 1fr; gap: 8px 16px; }
  .door-list .door-preview { width: 88px; height: 72px; }
  .door-list .t { font-size: 24px; }
  .door-list .s { font-size: 12px; }
  .door .lead { font-size: 16px; }
  .contact { padding-block: 64px; }
  .contact-layout { grid-template-columns: 1fr; gap: 24px; }
  .contact h2 { font-size: 48px; }
  .contact p { font-size: 16px; }
  .contact-option { padding-block: 24px; }
  .contact-option strong { font-size: 22px; }
  .contact-option > svg { width: 22px; height: 22px; }
  .contact .contact-signature { margin-top: 24px; }
}


.hero .uefn-brand { position: absolute; z-index: 2; top: 204px; right: max(24px, calc((100vw - 1192px) / 2)); width: 140px; height: auto !important; object-fit: contain; opacity: .85; }
@media (max-width: 900px) { .hero .uefn-brand { top: 168px; right: 16px; width: 104px; } }

.shop-offers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; height: 100%; }
.shop-offers img { width: 100%; height: 100%; min-height: 0; object-fit: contain; padding: 0; }
.native-ui .media .shop-offers { padding: 40px 40px 16px; }
.native-ui .media .shop-offers img { padding: 0; }
@media (max-width: 600px) { .service-proof .shop-offers { height: 280px; } .native-ui .media .shop-offers { padding: 40px 24px 16px; gap: 12px; } }

.interface-gallery, .map-gallery { scroll-margin-top: 0; }

/* Relecture PC : une grille stable, des captures lisibles et une entrée complète. */
.ch-head { width: 100%; }
#zelda .p-hero { background: transparent; }
.legends-preview > .image-zoom img { width: 100%; height: auto; }
.image-zoom { display: block; position: relative; cursor: zoom-in; }
.zoom-hint { position: absolute; right: 12px; bottom: 12px; padding: 6px 10px; background: #10141ce8; color: #fff; font: 500 12px/1.5 var(--body); border: 1px solid #ffffff38; border-radius: 3px; opacity: 0; transition: opacity .2s; }
.image-zoom:hover .zoom-hint, .image-zoom:focus-visible .zoom-hint { opacity: 1; }
.image-zoom:focus-visible { outline-offset: 5px; }
.image-dialog { position: fixed; inset: 0; margin: 0; border: 0; padding: 72px 32px 24px; max-width: none; max-height: none; width: 100%; height: 100%; background: #080b10f5; color: #e8eaef; }
.image-dialog::backdrop { background: #080b10; }
.image-dialog form { position: absolute; top: 20px; right: 32px; }
.image-dialog button { display: flex; gap: 18px; align-items: center; padding: 8px 16px; min-height: 44px; border: 1px solid #ffffff48; border-radius: 4px; font-size: 14px; }
.image-dialog button:hover { background: #ffffff15; }
.image-dialog figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.image-dialog img { width: auto; height: auto; max-width: 100%; max-height: calc(100svh - 150px); object-fit: contain; }
.image-dialog figcaption { font-size: 14px; text-align: center; color: #c5cbd5; }
body:has(.image-dialog[open]) { overflow: hidden; }
@media (min-width: 1051px) {
  .p-hero, #bo2 .p-hero { min-height: min(920px, 100svh); padding-block: 204px 64px; }
  .hero { min-height: 740px; }
  .game-logo { height: 88px; margin-bottom: 22px; }
  .game-logo-dbl { height: 100px; }
  .game-logo-zelda { height: 96px; }
  #zelda .p-hero h1 { font-size: 54px; }
  .coop-preview { width: min(100%, clamp(390px, 55svh, 490px)); justify-self: end; margin-top: 0; }
  .hero-art { margin-top: 0; }
  .p-hero .lead { font-size: 17px; }
  .interface-gallery { padding-top: 40px; }
  .interface-screen img { height: min(620px, calc(100svh - 420px)); min-height: 300px; }
  .native-tabs { max-width: 800px; }
  .native-tabs button { flex: 0 1 250px; }
}
@media (min-width: 1051px) and (max-height: 820px) {
  .p-hero, #bo2 .p-hero { padding-block: 192px 48px; }
  .hero-copy { bottom: 80px; }
  .hero h1 { font-size: 108px; }
  .game-logo { height: 72px; margin-bottom: 18px; }
  #dbl .p-hero h1 { font-size: 68px; }
  #bo2 .p-hero h1 { font-size: 78px; }
  #zelda .p-hero h1 { font-size: 50px; }
  .p-hero .lead { margin-top: 20px; }
  .hero-actions { margin-top: 24px; }
  .chips { margin-top: 20px; }
}

html:has(body[data-world="zelda"]) { color-scheme: light; scrollbar-color: #a39169 #e9dfc4; }

.game-logo-bo2 { filter: drop-shadow(0 0 5px #f0d9b2b3); }

.image-dialog :focus-visible { outline-color: #fff; }

/* Le premier écran reste lisible pendant le chargement du JavaScript. */
.hero .rv { opacity: 1; transform: none; transition: none; }
.hero [data-split] .w > span, .js[data-motion="calm"] .hero [data-split] .w > span { transform: none; opacity: 1; transition: none; }

.p-hero .rv { opacity: 1; }

/* Icônes : un seul jeu, trait 1.5, couleur du texte */
.i { width: 16px; height: 16px; flex: none; }
.scroll-cue .i { width: 18px; height: 18px; }
.zoom-hint { display: inline-flex; align-items: center; gap: 6px; }
.zoom-hint .i { width: 14px; height: 14px; }
.contact-option > svg.i { width: 18px; height: 18px; transition: transform .2s; }
.contact-option:hover > svg.i { transform: translate(2px, -2px); }
.image-dialog button .i { width: 20px; height: 20px; }

/* Fiche technique : même gabarit pour les trois projets */
.exp dl { border-top: 1px solid var(--line); grid-template-columns: 148px 1fr; }
.exp dt, .exp dd { padding-block: 18px; border-bottom: 1px solid var(--line); }
.exp dt { font: 500 14px/1.7 var(--body); color: var(--muted); }
.exp dd { font-size: 16px; line-height: 1.7; color: var(--text); }
#zelda-prototype { margin-top: 24px; }

/* Pied de projet : tous les projets en cartes, sur une piste qui glisse comme le rail. Le projet ouvert est allumé, les autres attendent en gris. */
.p-strip { padding-block: 32px 88px; }
.rail-track.strip { --gap: 24px; }
.strip a { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; color: inherit; }
.strip a::before { content: ""; grid-area: 1 / 1; z-index: 1; background: linear-gradient(transparent 40%, rgba(0, 0, 0, .75)); border-bottom: 3px solid transparent; pointer-events: none; }
.strip a[aria-current]::before { border-bottom-color: var(--c); }
.strip img { grid-area: 1 / 1; display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: grayscale(1) brightness(.6); transition: filter .6s var(--out); }
.strip a:hover img, .strip a:focus-visible img, .strip a[aria-current] img { filter: none; }
.strip .t { grid-area: 1 / 1; z-index: 2; color: #fff; align-self: end; padding: 0 20px 16px; font: italic 800 clamp(26px, 2.4vw, 36px)/.95 var(--display); text-transform: uppercase; text-shadow: 0 2px 20px rgba(0, 0, 0, .6); }
.strip .s { display: block; padding: 10px 20px 0; font: 500 13px/1.4 var(--mono); color: var(--c); }
.strip a:focus-visible { outline: 2px solid var(--c); outline-offset: 4px; }
.strip [data-go="moi"] { --c: #8a9cff; }
.strip [data-go="uefn"] { --c: #7b93ff; }
.strip [data-go="dbl"] { --c: #ffc044; }
.strip [data-go="bo2"] { --c: #efbf8d; }
.strip [data-go="zelda"] { --c: #d9b45a; }
.strip [data-go="smash"] { --c: #ff6b7c; }
body[data-world="zelda"] .strip .s { filter: brightness(.55) saturate(1.5); }
@media (max-width: 900px) {
  .exp dl { grid-template-columns: 112px 1fr; }
}
@media (max-width: 600px) {
  .exp dl { grid-template-columns: 1fr; }
  .exp dt { padding-bottom: 0; border-bottom: 0; }
  .exp dd { padding-top: 4px; font-size: 15px; }
  .p-strip { padding-block: 24px 56px; }
}

/* Chantiers : chaque plaque part du blockout gris et s'allume en entrant dans l'écran.
   L'image se fond dans la page par le bas, le titre se pose dans ce fondu. */
.track { gap: 72px 32px; }
.plate .media { border-radius: 0; aspect-ratio: 16 / 10; -webkit-mask-image: linear-gradient(#000 48%, transparent 96%); mask-image: linear-gradient(#000 48%, transparent 96%); }
.plate .media > img { transition: transform .8s var(--out); }
.js .plate .media > img:not(.lit) { filter: var(--greybox); }
.js .plate .media .lit { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease), transform .8s var(--out); }
.js .plate .media::before { display: block; }
.js .plate .media::after { display: block; }
.js .plate.on .media .lit { clip-path: inset(0); }
.js .plate .shop-offers { filter: var(--greybox); transition: filter 1.1s var(--ease); }
.js .plate.on .shop-offers { filter: none; }
.plate:hover .media > img { transform: scale(1.03); }
.visual-kind { top: 16px; left: 16px; padding: 0; background: none; color: #ffffffb3; font: 500 12px/1 var(--mono); border-radius: 0; text-shadow: 0 1px 8px #000; }
.native-ui .visual-kind { background: none; color: #ffffffb3; }
.cap { position: relative; z-index: 4; margin-top: -88px; padding-inline: 24px; }
.cap h3 { font: italic 800 clamp(34px, 3.2vw, 48px)/.95 var(--display); text-transform: uppercase; margin: 0 0 8px; text-shadow: 0 2px 24px var(--bg); }
.cap .meta { display: block; font: 500 13px/1 var(--mono); color: #aab8ff; }
.plate.native-ui .media .shop-offers { padding: 40px 64px 112px; }
.cap p { margin-top: 16px; color: var(--muted); }
[data-motion="calm"] .plate:hover .media > img { transform: none; }
@media (max-width: 600px) {
  .track { gap: 56px; }
  .cap { margin-top: -64px; padding-inline: 16px; }
  .cap h3 { font-size: 32px; }
  .plate.native-ui .media .shop-offers { padding: 36px 24px 84px; }
}

/* Services : la même lumière que les plaques. Un filet gris s'allume, le titre sort du gris. */
.service-layout { display: block; }
.service-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.service-row, .service-row:first-child, .service-row:last-child { position: relative; padding: 32px 0 40px; border: 0; }
.service-row::before, .service-row::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--line); }
.service-row::after { background: var(--accent); transform-origin: left; transition: transform 1.1s var(--ease); }
.service-row h3 { font: italic 800 clamp(30px, 2.6vw, 40px)/.95 var(--display); text-transform: uppercase; margin: 0 0 14px; transition: color .6s .3s; }
.js .service-row:not(.on)::after { transform: scaleX(0); }
.js .service-row:not(.on) h3 { color: var(--muted); }
.service-row:nth-child(even)::after, .service-row:nth-child(even) h3 { transition-delay: .15s; }
.tools { margin-top: 48px; }

/* Méthode : chaque numéro est un blockout en fil gris qui se remplit de lumière, l'un après l'autre. */

/* Seuil : trois grandes cartes, grises au repos comme les tuiles du rail, en couleur au survol.
   L'image se fond vers le bas et le nom se pose dedans, comme les chantiers. */
.door-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; border: 0; }
.door-list li { border: 0; }
.door-list a, .door-list a:hover { display: block; padding: 0; border: 0; color: inherit; }
.door-list .door-preview { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; filter: grayscale(1) brightness(.6); transition: filter .6s var(--out);
  -webkit-mask-image: linear-gradient(#000 45%, transparent 96%); mask-image: linear-gradient(#000 45%, transparent 96%); }
.door-list a:hover .door-preview, .door-list a:focus-visible .door-preview { filter: none; }
.door-list .t { display: block; position: relative; margin-top: -64px; padding-inline: 20px; font: italic 800 clamp(30px, 2.6vw, 40px)/.95 var(--display); text-transform: uppercase; text-shadow: 0 2px 24px #111620; transition: color .3s; }
.door-list a:hover .t { transform: none; color: var(--c); }
.door-list .s { display: block; padding: 10px 20px 0; font: 500 13px/1.4 var(--mono); color: var(--c); }
@media (hover: none) { .door-list .door-preview { filter: none; } }

@media (max-width: 1100px) {
  .door-list a { grid-template-columns: none; }
  .door-list .door-preview { width: 100%; height: auto; }
}
@media (max-width: 900px) {
  .service-list { grid-template-columns: 1fr; }
  .door-list { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
  .service-row, .service-row:first-child, .service-row:last-child { padding: 24px 0 32px; }
  .door-list a { grid-template-columns: none; padding: 0; }
  .door-list .door-preview { width: 100%; height: auto; }
  .door-list .t { margin-top: -56px; padding-inline: 16px; font-size: 32px; }
  .door-list .s { padding-inline: 16px; }
}
/* Les trois cartes partagent les mêmes rangées : un titre sur deux lignes monte dans le fondu au lieu de décaler la stack. */
.door-list li, .door-list a, .door-list a:hover { display: grid; grid-row: span 3; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; }
.door-list .t { align-self: start; }
.door-list .door-preview, .door-list .s { grid-row: auto; grid-column: auto; }
.door-list { row-gap: 0; }
@media (max-width: 900px) {
  .door-list { row-gap: 40px; }
  .door-list li, .door-list a, .door-list a:hover { display: block; }
}

/* Rail des mondes : une piste qui glisse entre les bords du contenu. Ce qui dépasse se fond,
   seulement du côté où il reste des tuiles. Au départ, Moi dépasse à gauche de UEFN. */
@property --fl { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --fr { syntax: '<length>'; inherits: false; initial-value: 0px; }
.projects .wrap { display: block; }
.rail-track {
  --n: 4.4; --k: 4; --gap: 12px; --fade: 96px;
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - var(--k) * var(--gap)) / var(--n)); gap: var(--gap);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; -webkit-user-select: none; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
  transition: --fl .3s, --fr .3s;
}
.rail-track::-webkit-scrollbar { display: none; }
.rail-track.more-l { --fl: var(--fade); }
.rail-track.more-r { --fr: var(--fade); }
.rail-track.drag, .rail-track.drag .pj { cursor: grabbing; }
.pj-moi { --pj: #6f86ff; --pos: center; --lh: 34px; }
@media (max-width: 900px) { .rail-track { --n: 3.4; --k: 3; --gap: 8px; --fade: 48px; } }
@media (max-width: 600px) { .rail-track { --n: 2.6; --k: 2; --fade: 40px; } }
@media (max-width: 900px) { .rail-track.strip { --n: 2.4; --k: 2; --gap: 16px; } }
@media (max-width: 600px) { .rail-track.strip { --n: 1.3; --k: 1; } .strip .t { padding-inline: 16px; font-size: 28px; } .strip .s { padding-inline: 16px; } }

/* Monde Moi : la grille du blockout, et le T de TXS qui passe du fil gris à la lumière */
.cut[data-fx="moi"] { --c-bg: #0d0f14; --c-ac: #6f86ff; }
#moi .p-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 64px 64px;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, transparent); mask-image: linear-gradient(transparent, #000 30%, transparent); }
#moi .p-hero > .wrap { position: relative; }
#moi .lead + .lead { margin-top: 16px; }
#moi .ctas { margin-top: 32px; }
.moi-mark { justify-self: center; width: min(100%, 400px); margin: 0; }
.moi-mark svg { display: block; width: 100%; height: auto; overflow: visible; }
.moi-mark path { fill: transparent; stroke: #4a5266; stroke-width: .4; transition: fill 1.2s .3s var(--ease), stroke 1.2s .3s var(--ease); }
.moi-mark circle { fill: transparent; stroke: #4a5266; stroke-width: .4; transition: fill .6s 1.2s var(--ease), stroke .6s 1.2s var(--ease); }
.moi-mark.in path { fill: var(--text); stroke: var(--text); }
.moi-mark.in circle { fill: var(--accent); stroke: var(--accent); }
#moi dd a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .moi-mark { width: 160px; justify-self: start; } }

@media (max-width: 1100px) and (min-width: 901px) {
  .door-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .door-list li { margin-bottom: 40px; }
}

/* Monde Smash : l'écran de menu du jeu. Panneau rouge et emblème en filigrane, tuile de combat cadrée d'or, barre d'info noire. */
body[data-world="smash"] { --gold: #ffd23f; }
body[data-world="smash"] .h em { color: var(--gold); }
body[data-world="smash"] .btn { border-radius: 0; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); padding-inline: 30px; font: italic 800 20px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
body[data-world="smash"] .btn:hover { filter: none; background: #c51f32; }

#smash .sm-menu { background: #121015; }
#smash .sm-bg { position: absolute; inset: 0; overflow: hidden; background: repeating-linear-gradient(-62deg, transparent 0 22px, rgba(255,255,255,.025) 22px 44px); }
#smash .sm-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, #e0283c, #b80f26 70%); clip-path: polygon(0 0, calc(50% + 140px) 0, calc(50% + 20px) 100%, 0 100%); }
#smash .sm-bg::after { content: ""; position: absolute; inset: 0; background: #0b0a0d; clip-path: polygon(calc(50% + 140px) 0, calc(50% + 160px) 0, calc(50% + 40px) 100%, calc(50% + 20px) 100%); }
#smash .sm-mark { position: absolute; z-index: 1; width: 860px; max-width: none; left: -190px; top: 50%; transform: translateY(-50%); opacity: .13; }
#smash .sm-art { position: absolute; z-index: 1; top: 160px; bottom: 112px; left: calc(50% + 40px); right: 48px; background: var(--gold); clip-path: polygon(100px 0, 100% 0, calc(100% - 100px) 100%, 0 100%); }
#smash .sm-art img { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: cover; object-position: 30% center; clip-path: polygon(99px 0, 100% 0, calc(100% - 99px) 100%, 0 100%); }
@media (min-width: 1051px) and (max-width: 1290px) { #smash .project-copy, #smash .sm-tiles { max-width: calc(50vw - 40px); } }
#smash .p-hero > .wrap { z-index: 2; }
#smash .project-copy { max-width: 600px; }
#smash .p-hero .lead { color: #fff; }
#smash .sm-crumb { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 30px; padding: 8px 30px 8px 18px; background: #0b0a0d; color: #fff; clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); font: italic 800 22px/1 var(--display); text-transform: uppercase; }
#smash .game-logo-smash { height: auto; width: min(100%, 300px); max-width: none; margin: 0 0 24px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); }
#smash .sm-crumb .i { color: var(--gold); }
#smash .sm-crumb span:last-child { color: var(--gold); }
#smash .sm-tiles { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; max-width: 620px; margin-top: 36px; }
#smash .sm-tile { display: grid; gap: 4px; padding: 14px 26px; min-height: 76px; align-content: center; background: #0b0a0d; color: #fff; text-decoration: none; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); transition: background .2s, color .2s; }
#smash .sm-tile small { font: 500 13px/1.2 var(--body); color: #bdb6c0; }
#smash .sm-tile strong { font: italic 800 25px/1 var(--display); text-transform: uppercase; }
#smash .sm-tile:hover, #smash .sm-tile:focus-visible { background: #2a2530; }
#smash .sm-tile-main { background: var(--gold); color: #17110a; }
#smash .sm-tile-main small { color: #5a4512; }
#smash .sm-tile-main:hover, #smash .sm-tile-main:focus-visible { background: #fff; }
#smash .sm-info { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; margin: 0; padding: 15px 0; background: #0b0a0d; border-top: 3px solid var(--gold); font-size: 15px; color: #ddd6df; }
#smash .sm-info .wrap { display: block; }

#smash .sm-fighter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; padding: 90px 0; scroll-margin-top: 80px; }
#smash .sm-card { position: relative; background: repeating-linear-gradient(-62deg, transparent 0 16px, rgba(0,0,0,.08) 16px 32px), linear-gradient(160deg, #e0283c, #a10d22); clip-path: polygon(28px 0, 100% 0, calc(100% - 28px) 100%, 0 100%); }
#smash .sm-portrait { display: block; width: 100%; height: 340px; object-fit: contain; object-position: center bottom; padding-top: 24px; }
#smash .sm-p { position: absolute; top: 16px; left: 40px; padding: 6px 14px; background: #0b0a0d; color: #fff; font: italic 900 24px/1 var(--display); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
#smash .sm-plate { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 52px 16px 40px; background: #0b0a0d; }
#smash .sm-name { font: italic 900 clamp(30px, 3vw, 44px)/1 var(--display); text-transform: uppercase; color: #fff; -webkit-text-stroke: 6px var(--accent); paint-order: stroke fill; }
#smash .sm-stocks { display: flex; gap: 4px; }
#smash .sm-stocks img { width: 32px; height: 32px; image-rendering: pixelated; }
#smash .sm-kicker { margin: 0 0 12px; font: italic 800 18px/1 var(--display); text-transform: uppercase; color: var(--accent); }
#smash .sm-fighter-copy h2 { font: 600 clamp(32px, 3.2vw, 44px)/1.15 var(--body); letter-spacing: -.02em; margin: 0 0 20px; }
#smash .sm-fighter-copy > p:not(.sm-kicker) { margin: 0; font-size: 17px; max-width: 52ch; }
#smash .sm-forms { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 24px 0 0; padding: 0; font: italic 800 18px/1 var(--display); text-transform: uppercase; color: #fff; }
#smash .sm-forms li { display: flex; align-items: center; gap: 10px; }
#smash .sm-forms li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff; }

#smash .sm-ready { align-items: center; padding: 16px 32px; background: var(--accent); clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%); }
#smash .sm-ready h2 { font: italic 900 clamp(34px, 4vw, 56px)/1 var(--display); text-transform: uppercase; color: #fff; letter-spacing: 0; }
#smash .sm-ready p { color: #ffe1e5; }
#smash .native-tabs button { background: #211e25; color: var(--muted); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); font: italic 800 19px/1 var(--display); text-transform: uppercase; border-bottom: 4px solid transparent; }
#smash .native-tabs button[aria-pressed="true"] { background: #2d2932; color: #fff; border-bottom-color: var(--gold); }
#smash .native-tabs button:hover { filter: brightness(1.2); }
#smash .interface-screen { background: #000; }
@media (min-width: 1051px) { #smash .native-tabs { max-width: 900px; } }
@media (max-width: 1050px) {
  #smash .sm-menu { padding: 400px 0 120px; min-height: 0; }
  #smash .sm-bg::before { clip-path: polygon(0 340px, 100% 300px, 100% 100%, 0 100%); }
  #smash .sm-bg::after { clip-path: polygon(0 332px, 100% 292px, 100% 300px, 0 340px); }
  #smash .sm-art { top: 134px; bottom: auto; left: 0; height: 198px; clip-path: polygon(0 0, 100% 0, 100% 158px, 0 100%); }
  #smash .sm-art img { inset: 0 0 6px 0; width: 100%; height: calc(100% - 6px); clip-path: polygon(0 0, 100% 0, 100% 152px, 0 100%); }
  #smash .sm-mark { width: 600px; left: -160px; top: 62%; }
  #smash .sm-fighter { grid-template-columns: 1fr; gap: 32px; padding: 64px 0; }
}
@media (max-width: 700px) {
  #smash .sm-crumb { font-size: 18px; padding-right: 24px; }
  #smash .game-logo-smash { width: 220px; margin-bottom: 18px; }
  #smash .sm-tiles { grid-template-columns: 1fr 1fr; }
  #smash .sm-tile-main { grid-column: 1 / -1; }
  #smash .sm-tile { min-height: 64px; padding: 12px 22px; }
  #smash .sm-tile strong { font-size: 21px; }
  #smash .sm-info { font-size: 14px; }
  #smash .sm-portrait { height: 240px; }
  #smash .sm-plate { padding: 12px 36px 14px 28px; }
  #smash .sm-stocks img { width: 24px; height: 24px; }
  #smash .sm-ready { padding: 14px 24px; flex-direction: column; align-items: flex-start; gap: 6px; }
  #smash .native-tabs { flex-wrap: wrap; }
  #smash .native-tabs button { flex: 1 1 30%; min-height: 44px; font-size: 16px; }
}

/* BO2 : mélange des mods */
.mod-mix { padding-block: 24px 64px; }
.mix-bar { display: flex; gap: 3px; height: 28px; }
.mix-bar span, .mix-legend li::before { flex: var(--n) 1 0; background: color-mix(in srgb, var(--accent) calc(100% - var(--k) * 19%), var(--line)); }
.mix-legend { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin: 24px 0 0; padding: 0; list-style: none; }
.mix-legend li { display: grid; grid-template-columns: 10px auto; column-gap: 12px; align-content: start; }
.mix-legend li::before { content: ""; width: 10px; height: 10px; margin-top: 10px; grid-row: span 2; }
.mix-legend b { font: 600 32px/1 var(--display); color: #e9dfd1; font-variant-numeric: tabular-nums; }
.mix-legend span { margin-top: 8px; font-weight: 500; }
.mix-legend small { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.5; }
/* Crédits : les repos derrière chaque projet */
.repos { padding-block: 8px 72px; }
.repos ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.repos a { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; padding: 14px 16px; color: inherit; border: 1px solid var(--line); transition: border-color .2s; }
.repos a:hover, .repos a:focus-visible { border-color: var(--accent); }
.repos .brand { width: 20px; height: 20px; grid-row: span 2; color: var(--muted); }
.repos .r { font: 400 14px/1.4 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.repos .r b { font-weight: 500; color: var(--accent-2); }
.repos .d { margin-top: 2px; font-size: 14px; color: var(--muted); }
@media (max-width: 700px) {
  .mix-legend { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .mix-legend b { font-size: 26px; }
  .repos { padding-bottom: 48px; }
}
/* Accueil : les autres projets glissent comme le rail ; quatre cartes, donc une qui dépasse */
.door .strip { margin-top: 40px; }
@media (min-width: 901px) { .door .rail-track.strip { --n: 3.4; --k: 3; } }

/* Zelda : l'oiseau de Link en fond, le curseur du jeu, l'écran de sélection des fichiers */
#zelda .p-hero { background: linear-gradient(90deg, #e9dfc4 30%, rgba(233,223,196,.88) 44%, rgba(233,223,196,0) 64%), linear-gradient(0deg, #e9dfc4, rgba(233,223,196,0) 26%), url('media/zelda/ciel.webp') left 12vw center / cover no-repeat; }
#zelda .p-hero .project-composition { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body[data-world="zelda"], body[data-world="zelda"] a, body[data-world="zelda"] button { cursor: url('media/zelda/curseur.png') 8 2, auto; }
.file-select { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 24px 0 0; }
.file-select .player-view { display: block; }
.file-select .save-slot { display: block; color: inherit; transition: transform .2s var(--out); }
.file-select .save-slot:hover, .file-select .save-slot:focus-visible { transform: translateY(-4px); }
.file-select figcaption { grid-column: 1 / -1; color: #655d49; text-align: center; padding: 8px 0 0; font-family: "Cinzel", Georgia, serif; }
.file-select figcaption small { font: 400 13px/1.6 var(--body); }
#zelda .exp dt { display: flex; align-items: center; gap: 12px; }
#zelda .exp dt img { width: 32px; height: 32px; object-fit: contain; flex: none; }
@media (max-width: 700px) {
  #zelda .p-hero .project-composition { grid-template-columns: minmax(0, 1fr); }
  #zelda .p-hero { padding-top: 360px; background: linear-gradient(0deg, #e9dfc4 52%, rgba(233,223,196,0) 74%), url('media/zelda/ciel.webp') 60% 0 / auto 520px no-repeat, #e9dfc4; }
  .file-select { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { .file-select .save-slot { transition: none; } }