/* =========================================================
   leandro-dbb.com — DA pixel art (bannière LinkedIn v6)
   Échelle : 1 pixel d'art = var(--px) (entier en pixels écran, ajusté par JS).
   Desktop d'abord, puis media queries descendantes.
   ========================================================= */

@font-face { font-family: "Pixelify Sans"; src: url(../fonts/PixelifySans-var.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url(../fonts/Silkscreen-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }

/* positions des sprites : non héritées, pour que les enfants ne décalent pas */
@property --x { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --y { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --f { syntax: "<number>"; inherits: false; initial-value: 0; }

:root {
  --px: 3px; --px2: calc(var(--px) * 2); --u: 3px;
  --paper: #efe9dc; --wall2: #e6dece; --ink: #1c1813; --ink2: #574f43; --muted: #928876;
  --acc: #c0532f; --acc2: #e27850; --accdk: #963e24;
  --muted-t: #695f50; --acc-t: #a8441f; --btn: #b44a27; /* variantes texte (contraste AA) */
  --wood: #a9744a; --woodhi: #c08a5c; --wooddk: #785234; --wooddk2: #62422a;
  --plinth: #ded4c0; --slot: #e2d8c4; --night: #343e60;
  --bar: 60px; --gut: clamp(20px, 5vw, 72px); --maxw: 1240px;
  /* ciel (crépuscule par défaut, réécrit selon l'heure) */
  --k0: #343e60; --k1: #4a4c70; --k2: #6e5876; --k3: #a0686e; --k4: #ce7c60; --k5: #eca068; --k6: #f6c48c;
  color-scheme: light;
}
@media (min-width: 1400px) { :root { --px: 4px; --u: 4px; } }
@media (min-width: 2300px) { :root { --px: 5px; } }
@media (max-width: 339px) { :root { --px: 2px; } }

html[data-time="morning"] { --k0: #7896c4; --k1: #96acce; --k2: #bac4d4; --k3: #ded0c8; --k4: #f2ceb0; --k5: #f8c896; --k6: #fad6aa; }
html[data-time="day"]     { --k0: #6096d2; --k1: #6ea2d8; --k2: #7eaede; --k3: #90bae2; --k4: #a4c6e6; --k5: #bad4ea; --k6: #cee0ec; }
html[data-time="night"]   { --k0: #14182c; --k1: #1a1e36; --k2: #202640; --k3: #262c48; --k4: #2c3250; --k5: #343a58; --k6: #3c405e; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 19px/1.55 "Pixelify Sans", ui-sans-serif, system-ui, sans-serif;
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h2 { font-weight: 700; font-size: clamp(34px, 3.6vw, 54px); line-height: 1.05; letter-spacing: .01em; }
h3 { font-weight: 700; font-size: 22px; line-height: 1.2; }
section[id] { scroll-margin-top: var(--bar); }
:focus-visible { outline: var(--u) dashed var(--acc); outline-offset: 3px; }

.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; font-family: Silkscreen, monospace; font-size: 13px; }
.skip:focus { top: 8px; }

.label { font-family: Silkscreen, monospace; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-t); }
.caret { display: inline-block; width: .42em; height: .78em; margin-left: .18em; background: var(--acc); vertical-align: -.02em; animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* --- bordure pixel (coins crantés) ------------------------------------- */
.panel, .btn, .tbtn, .bubble, .tip, .fiche, .tag, .board, .step, .frame-px {
  --bc: var(--ink);
  box-shadow: 0 calc(-1 * var(--u)) 0 0 var(--bc), 0 var(--u) 0 0 var(--bc), calc(-1 * var(--u)) 0 0 0 var(--bc), var(--u) 0 0 0 var(--bc);
}

/* --- boutons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 22px; margin: var(--u);
  background: var(--btn); color: #fff8ef; text-decoration: none; font: 700 19px/1.1 "Pixelify Sans", sans-serif; letter-spacing: .02em;
  box-shadow: 0 calc(-1 * var(--u)) 0 0 var(--ink), 0 var(--u) 0 0 var(--ink), calc(-1 * var(--u)) 0 0 0 var(--ink), var(--u) 0 0 0 var(--ink),
              inset 0 calc(-1 * var(--u)) 0 0 var(--accdk), inset 0 var(--u) 0 0 var(--acc2);
  transition: transform .08s steps(2);
  cursor: pointer; border: 0;
}
.btn:hover { transform: translateY(calc(-1 * var(--u))); background: var(--accdk); }
.btn:active { transform: translateY(var(--u)); box-shadow: 0 calc(-1 * var(--u)) 0 0 var(--ink), 0 var(--u) 0 0 var(--ink), calc(-1 * var(--u)) 0 0 0 var(--ink), var(--u) 0 0 0 var(--ink), inset 0 var(--u) 0 0 var(--accdk); }
.btn-alt { background: var(--paper); color: var(--ink);
  box-shadow: 0 calc(-1 * var(--u)) 0 0 var(--ink), 0 var(--u) 0 0 var(--ink), calc(-1 * var(--u)) 0 0 0 var(--ink), var(--u) 0 0 0 var(--ink),
              inset 0 calc(-1 * var(--u)) 0 0 var(--plinth), inset 0 var(--u) 0 0 #fffaf0; }
.btn-alt:hover { background: #f7f2e7; }
.tbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 6px 12px; margin: var(--u);
  background: var(--paper); color: var(--ink); border: 0; cursor: pointer; text-decoration: none;
  font: 400 12px/1 Silkscreen, monospace; text-transform: uppercase; letter-spacing: .06em;
}
.tbtn:hover, .tbtn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.link-btn { text-align: left; background: none; border: 0; padding: 8px 0; min-height: 44px; color: var(--acc-t); font: 700 17px "Pixelify Sans", sans-serif; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.link-btn::after { content: " →"; }

/* --- barre du haut ------------------------------------------------------ */
.bar {
  position: sticky; top: 0; z-index: 50; height: var(--bar); display: flex; align-items: center; gap: 24px;
  padding: 0 var(--gut); background: var(--paper);
  box-shadow: 0 var(--u) 0 0 var(--ink);
}
.brand { font: 700 21px "Pixelify Sans", sans-serif; text-decoration: none; white-space: nowrap; }
.brand .caret { height: .8em; }
.nav { display: flex; gap: 6px; margin-left: auto; }
.nav a { font: 400 13px Silkscreen, monospace; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; padding: 12px 10px; }
.nav a:hover, .nav a.on { color: var(--acc-t); background: linear-gradient(var(--acc), var(--acc)) 10px calc(100% - 6px) / calc(100% - 20px) var(--u) no-repeat; }
.bar-tools { display: flex; align-items: center; gap: 2px; }
.menu-btn { display: none; }
.snd-ico { position: relative; width: 16px; height: 14px; flex: 0 0 auto; }
.snd-ico::before { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 2px; box-shadow: 0px 4px 0 currentColor, 0px 6px 0 currentColor, 0px 8px 0 currentColor, 2px 4px 0 currentColor, 2px 6px 0 currentColor, 2px 8px 0 currentColor, 4px 2px 0 currentColor, 4px 4px 0 currentColor, 4px 6px 0 currentColor, 4px 8px 0 currentColor, 4px 10px 0 currentColor, 6px 0px 0 currentColor, 6px 2px 0 currentColor, 6px 4px 0 currentColor, 6px 6px 0 currentColor, 6px 8px 0 currentColor, 6px 10px 0 currentColor, 6px 12px 0 currentColor, 10px 4px 0 currentColor, 14px 4px 0 currentColor, 12px 6px 0 currentColor, 10px 8px 0 currentColor, 14px 8px 0 currentColor; }
[aria-pressed="true"] .snd-ico::before { box-shadow: 0px 4px 0 currentColor, 0px 6px 0 currentColor, 0px 8px 0 currentColor, 2px 4px 0 currentColor, 2px 6px 0 currentColor, 2px 8px 0 currentColor, 4px 2px 0 currentColor, 4px 4px 0 currentColor, 4px 6px 0 currentColor, 4px 8px 0 currentColor, 4px 10px 0 currentColor, 6px 0px 0 currentColor, 6px 2px 0 currentColor, 6px 4px 0 currentColor, 6px 6px 0 currentColor, 6px 8px 0 currentColor, 6px 10px 0 currentColor, 6px 12px 0 currentColor, 10px 4px 0 currentColor, 10px 6px 0 currentColor, 10px 8px 0 currentColor, 12px 2px 0 currentColor, 12px 10px 0 currentColor, 14px 4px 0 currentColor, 14px 6px 0 currentColor, 14px 8px 0 currentColor; }


/* --- scènes : positionnement en pixels d'art ----------------------------- */
.scene { position: relative; overflow: hidden; image-rendering: pixelated; }
.s, .p { left: calc(var(--x) * var(--px)); bottom: calc(var(--y) * var(--px)); }
.p { position: absolute; }
.g { position: absolute; width: calc(var(--gw) * var(--px)); height: calc(var(--gh) * var(--px)); }
.box { position: absolute; bottom: 0; left: 50%; width: calc(var(--bw) * var(--px)); height: 100%; margin-left: calc(var(--bw) * var(--px) / -2); }
.is-off .s, .is-off .caret { animation-play-state: paused; }

/* ciel des fenêtres et du parcours (7 bandes, comme la bannière) */
.sky { position: absolute; inset: 0; background: linear-gradient(var(--k0) 0 14.3%, var(--k1) 0 28.6%, var(--k2) 0 42.9%, var(--k3) 0 57.2%, var(--k4) 0 71.5%, var(--k5) 0 85.8%, var(--k6) 0); }
.sun, .moon, .stars, .lights { display: none; }
html[data-time="morning"] .sun, html[data-time="day"] .sun { display: block; }
html[data-time="night"] .moon { display: block; }
html[data-time="night"] .stars, html[data-time="dusk"] .stars { display: block; }
html[data-time="dusk"] .stars { opacity: .6; }
html[data-time="night"] .lights, html[data-time="dusk"] .lights { display: block; }
html[data-time="morning"] .city, html[data-time="morning"] .sil { filter: brightness(1.7) saturate(.7); }
html[data-time="day"] .city, html[data-time="day"] .sil { filter: brightness(2.1) saturate(.55); }

/* --- personnage ---------------------------------------------------------- */
.actor { position: absolute; left: 0; bottom: calc(var(--ay, 0) * var(--px)); z-index: 6; width: calc(48 * var(--px)); height: calc(80 * var(--px));
  transform: translateX(calc(var(--ax, 0) * var(--px))); }
.lea { position: absolute; inset: 0; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; }
.lea:focus-visible { outline-offset: 0; }
.lsp { position: absolute; inset: 0; background: url(../images/pixel/leandro-hoodie.png?v=6) no-repeat;
  background-size: calc(384 * var(--px)) calc(1760 * var(--px));
  background-position: calc(var(--c, 0) * -48 * var(--px)) calc(var(--r, 0) * -80 * var(--px)); image-rendering: pixelated; }
.actor[data-outfit="tee"] .lsp { background-image: url(../images/pixel/leandro-tee.png?v=6); }
.actor[data-outfit="shirt"] .lsp { background-image: url(../images/pixel/leandro-shirt.png?v=6); }
.actor[data-home="code"] .lsp { --r: 3; }
.actor[data-home="read"] .lsp { --r: 17; }
.actor .zz, .actor .bang { display: none; }
.actor .zz { --x: 30; --y: 52; }
.actor.desk-sleep .zz { --y: 58; }
.actor.sleeping .zz { display: block; }
.actor .bang { --x: 22; --y: 86; }
.actor.bang-on .bang { display: block; }

.bubble {
  position: absolute; left: 50%; bottom: calc(86 * var(--px)); z-index: 20; width: max-content; max-width: min(260px, 70vw);
  padding: 8px 12px; background: #fffaf0; color: var(--ink); font: 500 17px/1.3 "Pixelify Sans", sans-serif; text-align: left;
  transform: translateX(-50%); visibility: hidden; pointer-events: none;
}
.bubble::after { content: ""; position: absolute; left: calc(50% - 6px); bottom: -12px; width: 6px; height: 6px; background: var(--ink);
  box-shadow: 6px 0 0 var(--ink), 0 -6px 0 #fffaf0, 6px -6px 0 #fffaf0, 3px 6px 0 var(--ink); }
.bubble.on { visibility: visible; }
.bubble.left { left: 0; transform: none; }
.bubble.left::after { left: calc(24 * var(--px) - 6px); }

/* =========================================================
   HERO — le bureau du soir
   ========================================================= */
.hero { position: relative; height: max(600px, calc(100svh - var(--bar))); max-height: 1100px; display: flex; align-items: center; overflow: hidden; }
.sc-hero { position: absolute; inset: 0; }
.sc-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(17 * var(--px)); z-index: 0;
  background: repeating-linear-gradient(90deg, #d2c7b2 0 var(--px), transparent 0 calc(24 * var(--px))) 0 var(--px) / 100% 100% no-repeat,
              linear-gradient(#cdc1aa 0 var(--px), var(--plinth) 0); }
.sc-hero > * { z-index: 1; }
.hero-text { position: relative; z-index: 5; margin-left: var(--gut); max-width: 640px; padding: calc(50 * var(--px)) 0 calc(24 * var(--px)); }
.hero-text { pointer-events: none; } .hero-text > * { pointer-events: auto; }
.kicker { display: block; font: 400 15px Silkscreen, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-t); margin-bottom: 14px; }
.h1-l1, .h1-l2 { display: block; font-weight: 700; font-size: clamp(48px, 5.6vw, 92px); line-height: 1.02; letter-spacing: .01em; }
.h1-l2 { color: var(--acc); }
.tagline { margin-top: 26px; font-size: clamp(22px, 1.9vw, 28px); font-weight: 500; color: var(--ink2); }
.prompt { margin-top: 12px; font-size: clamp(20px, 1.7vw, 25px); font-weight: 500; }
.prompt .caret { width: .45em; height: .9em; vertical-align: -.12em; margin-left: .3em; }
.hero-sub { margin-top: 18px; font: 400 13px/1.6 Silkscreen, monospace; letter-spacing: .06em; color: var(--muted-t); text-transform: uppercase; }
.cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.sc-hero { background: url(../images/pixel/paper.png) 0 0 / calc(8 * var(--px)) calc(8 * var(--px)); }

/* guirlande sur toute la largeur */
.garland-strip { position: absolute; left: 0; right: 0; top: calc(2 * var(--px)); height: calc(12 * var(--px));
  background: url(../images/pixel/garland.png) 0 0 / calc(48 * var(--px)) calc(48 * var(--px)) repeat-x; image-rendering: pixelated;
  animation: garland 1.8s steps(4) infinite; }
@keyframes garland { to { background-position-y: calc(-48 * var(--px)); } }

/* coin haut gauche (plante, diplôme, horloge, chat) */
.g-deco { --gw: 136; --gh: 46; top: calc(6 * var(--px)); left: calc(2 * var(--px)); }
.hd-hplant { --x: 12; --y: 13; } .hd-diploma { --x: 40; --y: 12; }
.hd-clock { --x: 74; --y: 13; width: calc(17 * var(--px)); height: calc(17 * var(--px)); }
.hd-clock .s { left: 0; bottom: 0; }
.hands { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.hd-catshelf { --x: 98; --y: 1; } .hd-catzzz { --x: 125; --y: 15; }
.cat-btn { --x: 100; --y: 6; width: calc(24 * var(--px)); height: calc(11 * var(--px)); padding: 0; border: 0; background: none; cursor: pointer; }
.cat-btn .s { left: 0; bottom: 0; }
.cat-btn.awake .s { --w: 14; --h: 14; }

/* mur de droite : carte, liège, vinyles, calendrier, affiche */
.hd-map, .hd-cork, .hd-poster, .hd-records, .hd-cal, .hd-pothos, .hd-bigshelf, .hd-guitar, .hd-monstera, .hd-win, .win-label { left: auto; }
.hd-map { right: calc(156 * var(--px)); --y: 112; }
.hd-cork { right: calc(14 * var(--px)); --y: 148; }
.hd-records { right: calc(76 * var(--px)); --y: 152; }
.hd-poster { right: calc(212 * var(--px)); --y: 110; display: none; }
.hd-pothos { right: calc(122 * var(--px)); top: calc(8 * var(--px)); bottom: auto; }
.hd-cal { right: calc(76 * var(--px)); --y: 73; width: calc(16 * var(--px)); height: calc(20 * var(--px)); }
.hd-cal .s { left: 0; bottom: 0; }
.cal-mon, .cal-day { position: absolute; left: 0; right: 0; text-align: center; line-height: 1; color: #fff; }
.cal-mon { top: calc(1 * var(--px)); font: 400 calc(2.6 * var(--px)) Silkscreen, monospace; }
.cal-day { top: calc(7.5 * var(--px)); font: 700 calc(8 * var(--px)) "Pixelify Sans", sans-serif; color: var(--ink); }
.g-shelf { --gw: 76; --gh: 26; left: auto; right: calc(74 * var(--px)); bottom: calc(98 * var(--px)); }
.hd-books { --x: 0; --y: 0; } .hd-postits { --x: 52; --y: 10; }
.hd-monstera { right: calc(158 * var(--px)); --y: 2; }
.hd-bigshelf { right: calc(206 * var(--px)); --y: 2; display: none; }
.hd-guitar { right: calc(258 * var(--px)); --y: 2; display: none; }
.hd-basket { --x: 6; --y: 2; } .hd-pile { --x: 34; --y: 2; }
@media (min-width: 1000px) and (max-width: 1199px) { .hd-map, .hd-monstera { display: none; } }
.hd-books2, .hd-hplant2, .hd-frame2 { display: none; top: calc(var(--t) * var(--px)); bottom: auto; left: calc(50% + var(--l) * var(--px)); }
.hd-books2 { --t: 44; --l: -28; } .hd-hplant2 { --t: 13; --l: 30; } .hd-frame2 { --t: 30; --l: 66; }
@media (min-width: 1700px) { .hd-poster, .hd-bigshelf, .hd-guitar, .hd-books2, .hd-hplant2, .hd-frame2 { display: block; } }

/* fenêtres : ciel, ville, rue animée, météo */
.win { width: calc(60 * var(--px)); height: calc(77 * var(--px)); }
.win .glass { position: absolute; left: calc(2 * var(--px)); top: calc(2 * var(--px)); width: calc(56 * var(--px)); height: calc(70 * var(--px)); overflow: hidden; }
.win-s { width: calc(42 * var(--px)); height: calc(57 * var(--px)); }
.win-s .glass { width: calc(38 * var(--px)); height: calc(50 * var(--px)); }
.glass .stars { left: 0; top: 0; bottom: auto; }
.glass .city, .glass .lights { left: 0; bottom: calc(5 * var(--px)); }
.glass .street { left: 0; bottom: 0; }
.glass .sun { --x: 38; --y: 46; } .glass .moon { --x: 40; --y: 52; }
html[data-time="morning"] .glass .sun { --x: 6; --y: 34; }
.win-s .glass .sun { --x: 24; --y: 34; } .win-s .glass .moon { --x: 26; --y: 38; }
.hd-win { right: calc(10 * var(--px)); bottom: calc(64 * var(--px)); }
.hd-wins { display: none; }
.car { bottom: calc(1 * var(--px)); left: 0; animation: drive var(--cd) steps(var(--cs)) infinite; animation-delay: var(--cdl); }
.c0 { --cd: 7s; --cs: 70; --cdl: -2s; } .c1 { --cd: 9s; --cs: 70; --cdl: -6s; scale: -1 1; animation-direction: reverse; } .c2 { --cd: 13s; --cs: 70; --cdl: -9s; }
@keyframes drive { from { transform: translateX(calc(-12 * var(--px))); } to { transform: translateX(calc(60 * var(--px))); } }
html[data-time="night"] .car::after, html[data-time="dusk"] .car::after, .hero.dark .car::after { content: ""; position: absolute; right: calc(-3 * var(--px)); top: var(--px); width: calc(3 * var(--px)); height: var(--px); background: rgba(255, 236, 170, .85); }
.ped { position: absolute; left: 0; bottom: calc(5 * var(--px)); width: calc(3 * var(--px)); height: calc(7 * var(--px)); animation: drive 26s steps(72) infinite; }
.ped .s-walker { --x: 0; --y: 2; } .ped .s-wlegs { --x: 0; --y: 0; }
.p0 .s-walker { --f: 1; } .p1 { animation-duration: 34s; animation-delay: -15s; animation-direction: reverse; scale: -1 1; }
.p1 .s-walker { --f: 2; }
.wplane { top: calc(7 * var(--px)); bottom: auto; animation: wfly 31s steps(90) infinite; }
@keyframes wfly { 0% { transform: translateX(calc(-10 * var(--px))); } 30%, 100% { transform: translateX(calc(64 * var(--px))); } }
html[data-time="night"] .wplane { opacity: .7; }
.fly { position: absolute; display: none; width: var(--px); height: var(--px); background: #fff3a0; box-shadow: 0 0 calc(2 * var(--px)) #f6e27a;
  left: calc(var(--fx) * var(--px)); bottom: calc(var(--fy) * var(--px)); animation: firefly var(--fd) steps(12) infinite alternate; }
.f0 { --fx: 8; --fy: 14; --fd: 3.1s; } .f1 { --fx: 22; --fy: 20; --fd: 4.3s; } .f2 { --fx: 34; --fy: 12; --fd: 3.7s; } .f3 { --fx: 46; --fy: 24; --fd: 5.2s; }
@keyframes firefly { 0% { transform: translate(0, 0); opacity: .2; } 50% { opacity: 1; } 100% { transform: translate(calc(4 * var(--px)), calc(-6 * var(--px))); opacity: .4; } }
html[data-time="night"] .fly, html[data-time="dusk"] .fly, .hero.dark .fly { display: block; }
.wx { position: absolute; inset: 0; pointer-events: none; }
html[data-weather="rain"] .wx, html[data-weather="storm"] .wx { background: url(../images/pixel/rain.png) 0 0 / calc(8 * var(--px)) calc(12 * var(--px)); image-rendering: pixelated; animation: rain .5s steps(4) infinite; }
html[data-weather="snow"] .wx { background: url(../images/pixel/snow.png) 0 0 / calc(12 * var(--px)) calc(12 * var(--px)); image-rendering: pixelated; animation: rain 3s steps(12) infinite; }
html[data-weather="clouds"] .wx { background: linear-gradient(rgba(214, 214, 222, .55) 0 calc(6 * var(--px)), rgba(214, 214, 222, .3) 0 calc(12 * var(--px)), transparent 0); }
html[data-weather="fog"] .wx { background: rgba(232, 230, 226, .5); }
html[data-weather="storm"] .glass .sky { animation: flash 7s steps(1) infinite; }
@keyframes rain { to { background-position-y: calc(12 * var(--px)); } }
@keyframes flash { 0%, 91%, 94%, 100% { filter: none; } 92%, 95% { filter: brightness(2.2); } }
.win-label { right: calc(10 * var(--px)); bottom: calc(57 * var(--px)); width: calc(60 * var(--px)); margin: 0; text-align: center;
  font: 400 11px/1 Silkscreen, monospace; letter-spacing: .06em; color: var(--muted-t); text-transform: uppercase; }
.win-label:empty { display: none; }

/* bureau */
.g-desk { --gw: 150; --gh: 90; left: auto; right: calc(6 * var(--px)); bottom: calc(6 * var(--px)); }
.hd-chair { --x: 55; --y: 0; }
.g-desk .actor { --ax: 46; }
.hd-desk { --x: 0; --y: 0; z-index: 7; } .hd-deskm { display: none; }
.hd-glow { --x: -1; --y: 23; z-index: 7; }
.lamp-btn, .duck-btn, .gold { padding: 0; border: 0; background: none; cursor: pointer; }
.lamp-btn .s, .duck-btn .s, .gold .s { left: 0; bottom: 0; }
.hd-lamp { --x: 6; --y: 24; z-index: 8; width: calc(10 * var(--px)); height: calc(21 * var(--px)); }
.hd-duck { --x: 42; --y: 24; z-index: 8; width: calc(10 * var(--px)); height: calc(10 * var(--px)); }
.duck-btn.squeak { animation: squeak .3s steps(2); }
@keyframes squeak { 50% { transform: translateY(calc(-2 * var(--px))); } }
.hd-panda { --x: 24; --y: 24; z-index: 8; } .hd-laptop { --x: 54; --y: 24; z-index: 8; }
.hd-phone { --x: 98; --y: 24; z-index: 8; } .hd-mug { --x: 120; --y: 24; z-index: 8; } .hd-steam { --x: 120; --y: 32; z-index: 8; }
.gold { width: calc(9 * var(--px)); height: calc(9 * var(--px)); z-index: 9; }
.gold.got { display: none; }
.hd-gold { --x: 28; --y: 1; z-index: 2; }
.dust { position: absolute; z-index: 8; width: var(--px); height: var(--px); background: rgba(255, 240, 200, .9);
  left: calc(var(--dx) * var(--px)); bottom: calc(var(--dy) * var(--px)); animation: dust var(--dd) steps(10) infinite; animation-delay: var(--ddl); }
.d0 { --dx: 6; --dy: 30; --dd: 5s; --ddl: 0s; } .d1 { --dx: 12; --dy: 34; --dd: 6.4s; --ddl: -2s; } .d2 { --dx: 16; --dy: 28; --dd: 4.6s; --ddl: -1s; }
.d3 { --dx: 9; --dy: 38; --dd: 7s; --ddl: -4s; } .d4 { --dx: 19; --dy: 33; --dd: 5.6s; --ddl: -3s; }
@keyframes dust { 0% { transform: translate(0, 0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(calc(3 * var(--px)), calc(-8 * var(--px))); opacity: 0; } }

/* lampe éteinte : la pièce plonge dans la pénombre, la fenêtre et les lucioles brillent */
.veil { position: absolute; inset: 0; z-index: 3; background: rgba(22, 20, 36, .62); opacity: 0; pointer-events: none; transition: opacity .3s steps(3); }
.hero.dark .veil { opacity: 1; }
.hero.dark .hd-win, .hero.dark .hd-wins { z-index: 4; }
.hero.dark .hd-glow, .hero.dark .dust { display: none; }
.hero.dark .hero-text { color: #f4ebd9; }
.hero.dark .h1-l2 { color: var(--acc2); }
.hero.dark .tagline, .hero.dark .kicker, .hero.dark .hero-sub { color: #e6dac4; }

/* =========================================================
   Sections communes
   ========================================================= */
.sec { padding: clamp(72px, 9vw, 128px) 0 clamp(48px, 6vw, 88px); }
.sec-head { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.sec-head h2 { margin-top: 10px; }
.sec-head .intro { margin-top: 16px; max-width: 46em; color: var(--ink2); }

/* =========================================================
   PARCOURS — le voyage Rouen → Lafayette → Rouen (piloté par le scroll)
   ========================================================= */
.parcours { --t0: #7896c4; --t1: #96acce; --t2: #bac4d4; --t3: #ded0c8; --t4: #f2ceb0; --t5: #f8c896; --t6: #fad6aa;
  padding-bottom: 0; background:
  linear-gradient(color-mix(in srgb, var(--t6, #f6c48c) 18%, var(--paper)), var(--paper) 60%); }
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 48px; margin-top: 26px; color: var(--ink2); }
.about .langs { grid-column: 1 / -1; color: var(--ink); }
.about .langs .label { margin-right: 10px; }
.journey { position: relative; height: auto; margin-top: clamp(28px, 3vw, 48px); }
.stage { position: relative; }
html.js .sc-trip { height: auto; }
html.js .stage { position: sticky; top: var(--bar); height: calc(100svh - var(--bar)); display: flex; flex-direction: column; }
.sc-trip { flex: 1 1 auto; min-height: 0; height: calc(120 * var(--px)); overflow: hidden;
 }
.sc-trip .sky { background: linear-gradient(var(--t0) 0 14.3%, var(--t1) 0 28.6%, var(--t2) 0 42.9%, var(--t3) 0 57.2%, var(--t4) 0 71.5%, var(--t5) 0 85.8%, var(--t6) 0); }
.tsun, .tmoon { left: 0; bottom: auto; top: 0; transform: translate(calc(var(--sx2, 0) * var(--px)), calc(var(--sy2, 0) * var(--px))); }
.tmoon { opacity: var(--moon, 0); } .tsun { opacity: var(--sun, 1); }
.tst { top: calc(var(--sty) * var(--px)); bottom: auto; left: var(--stl); opacity: var(--stars, 0); }
.st1 { --sty: 4; --stl: 6%; } .st2 { --sty: 10; --stl: 42%; } .st3 { --sty: 2; --stl: 74%; }
.sc-trip .far { position: absolute; left: 0; bottom: calc(24 * var(--px)); width: calc(240 * var(--px)); height: calc(60 * var(--px)); margin: 0; opacity: var(--far, 1); }
.sc-trip .far .s { --x: 0; --y: 0; }
.sc-trip .world { position: absolute; left: 0; bottom: 0; width: calc(1400 * var(--px)); height: 100%; transform: translateX(calc(var(--cam, 0) * var(--px) * -1)); }
.gr { position: absolute; bottom: 0; left: calc(var(--gx) * var(--px)); width: calc(var(--gw) * var(--px)); height: calc(26 * var(--px)); image-rendering: pixelated; }
.gr-road { background:
    url(../images/pixel/grass.png) 0 calc(8 * var(--px)) / calc(16 * var(--px)) calc(6 * var(--px)) repeat-x,
    linear-gradient(to top, transparent calc(14 * var(--px)), #96b06e calc(14 * var(--px)), #a8bc7c calc(26 * var(--px))),
    url(../images/pixel/cobble.png) 0 100% / calc(16 * var(--px)) calc(8 * var(--px)) repeat, #b8a484; }
.gr-tarmac { background: repeating-linear-gradient(90deg, #f2ead6 0 calc(6 * var(--px)), transparent 0 calc(14 * var(--px))) 0 calc(19 * var(--px)) / 100% var(--px) no-repeat,
    linear-gradient(#6e6a70 0 var(--px), #58545c 0); height: calc(20 * var(--px)); }
.gr-ocean { height: calc(22 * var(--px)); background: url(../images/pixel/ocean.png) 0 0 / calc(32 * var(--px)) calc(44 * var(--px)) repeat-x;
  animation: water 1.4s steps(2) infinite; }
@keyframes water { to { background-position-y: calc(-44 * var(--px)); } }
.gr-bayou { background:
    url(../images/pixel/grass.png) 0 calc(8 * var(--px)) / calc(16 * var(--px)) calc(6 * var(--px)) repeat-x,
    linear-gradient(to top, #6e8a58 calc(14 * var(--px)), #8fa86a calc(14 * var(--px)), #a4b778 calc(26 * var(--px))); }
.gr-bayou::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(12 * var(--px));
  background: url(../images/pixel/bayou.png) 0 0 / calc(32 * var(--px)) calc(24 * var(--px)) repeat-x; image-rendering: pixelated;
  animation: bayou 2s steps(2) infinite; }
@keyframes bayou { to { background-position-y: calc(-24 * var(--px)); } }
.w { left: calc(var(--x) * var(--px)); bottom: calc(var(--y) * var(--px)); }
.tcloud { opacity: .92; }
html[data-time] .sc-trip .tcloud { animation: tdrift var(--cd, 60s) steps(120) infinite alternate; }
@keyframes tdrift { to { translate: calc(30 * var(--px)) 0; } }
.haze { opacity: .7; animation: haze 1.6s steps(2) infinite; }
@keyframes haze { 50% { transform: translateY(calc(-1 * var(--px))); } }
.pelican { animation: pelican 16s steps(80) infinite, spr var(--d) steps(var(--n)) infinite; }
@keyframes pelican { from { transform: translateX(0); } to { transform: translateX(calc(220 * var(--px))); } }
.lit { filter: brightness(1.05); }
.board { position: absolute; z-index: 3; left: calc(var(--x) * var(--px)); bottom: calc(var(--y) * var(--px)); width: calc(var(--bw) * var(--px)); height: calc(var(--bh) * var(--px));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; margin: 0; text-align: center; line-height: 1.05; box-shadow: none; }
.board span:first-child { font: 700 calc(4.2 * var(--px)) "Pixelify Sans", sans-serif; white-space: nowrap; }
.board span:last-child { font: 500 calc(2.9 * var(--px)) "Pixelify Sans", sans-serif; white-space: nowrap; }
.b-totem { --x: 1294; --y: 23; --bw: 40; --bh: 28; color: #fff; }
.b-totem span:last-child { color: #f0c8c0; }
.b-carved { --x: 1059; --y: 21; --bw: 42; --bh: 16; color: #fff3df; text-shadow: 0 calc(-.4 * var(--px)) 0 #6e4a2e; }
.b-hwy { --x: 179; --y: 24; --bw: 40; --bh: 21; color: #fff; }
.b-hwy span:first-child { font-family: "Pixelify Sans", sans-serif; letter-spacing: .02em; }
.b-neon { --x: 1056; --y: 24; --bw: 47; --bh: 14; color: #ffe4cc; text-shadow: 0 0 calc(1.5 * var(--px)) #ff8a5c, 0 0 calc(3 * var(--px)) #ff6a3a; animation: neon 4s steps(1) infinite; }
@keyframes neon { 0%, 37%, 41%, 100% { opacity: 1; } 38%, 40% { opacity: .55; } }
.stairs { display: none; } .stairs.on { display: block; }
.flipx { transform: scaleX(-1); }
.sc-trip:not(.cdi) .sg-new, .sc-trip.cdi .sg-old { display: none; }
.tcloud.front { z-index: 7; opacity: .85; }
.plane { position: absolute; left: 0; bottom: 0; z-index: 5; width: calc(84 * var(--px)); height: calc(36 * var(--px));
  transform: translate(calc(var(--plx, 410) * var(--px)), calc(var(--ply, 14) * var(--px) * -1)); }
.plane .pl { --x: 0; --y: 0; }
.plane .trail { --x: -40; --y: 17; display: none; }
.plane[data-dir="l"] .trail { --x: 84; transform: scaleX(-1); }
.plane[data-fly="1"] .trail { display: block; }
.sc-trip .actor { --ay: 2; z-index: 6; }
.sc-trip .actor.hidden, .sc-trip .actor.hidden .bubble { visibility: hidden; }
.tmap { position: absolute; right: calc(6 * var(--px)); top: calc(6 * var(--px)); width: calc(70 * var(--px)); height: calc(40 * var(--px)); z-index: 8;
  opacity: 0; transition: opacity .3s steps(3); }
.tmap.on { opacity: 1; }
.tmap .s { --x: 0; --y: 0; }
.tmap .mp { left: calc(var(--mx, 56) * var(--px) - 2 * var(--px)); bottom: auto; top: calc(var(--my, 10) * var(--px) - 2 * var(--px)); }
.ml { position: absolute; font: 400 calc(2.4 * var(--px)) Silkscreen, monospace; color: var(--ink); text-transform: uppercase; line-height: 1; }
.ml-r { right: calc(2 * var(--px)); top: calc(13 * var(--px)); } .ml-l { left: calc(3 * var(--px)); top: calc(25 * var(--px)); }

.steps { list-style: none; margin: 0; padding: 14px var(--gut) 18px; position: relative; min-height: 132px; background: var(--paper);
  box-shadow: 0 calc(-1 * var(--u)) 0 0 var(--ink); }
.step { max-width: 780px; margin: 0 auto 12px; padding: 10px 16px 12px; background: #fffaf0; }
html.js .journey { height: 470vh; }
html.js .step { display: none; margin-bottom: 0; }
html.js .step.on { display: block; animation: stepin .35s steps(4); }
@keyframes stepin { from { opacity: 0; transform: translateY(6px); } }
.step .when { font: 400 13px Silkscreen, monospace; color: var(--acc-t); letter-spacing: .08em; }
.step .when::before { content: "> "; }
.step h3 { margin: 4px 0 6px; }
.step p:not(.when) { font-size: 17px; color: var(--ink2); }
.step.transit h3 { color: var(--ink2); font-weight: 500; }
.trip-skip { text-align: right; max-width: var(--maxw); margin: 0 auto; padding: 12px var(--gut) 0; font-size: 15px; }
.trip-skip a { color: var(--acc-t); }
.trip-skip a::after { content: " ↓"; }

/* sans animation : pas de scène collante, toutes les étapes visibles */
html.rm .journey { height: auto; }
html.rm .stage { position: relative; top: 0; height: auto; }
html.rm .sc-trip { height: calc(120 * var(--px)); flex: none; }
html.rm .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: var(--maxw); margin: 0 auto; box-shadow: none; }
html.rm .step { display: block; cursor: pointer; margin: 0; } html.rm .step.transit { display: none; }
html.rm .step.on { outline: var(--u) solid var(--ink); outline-offset: 8px; }

/* =========================================================
   ATELIER — projets
   ========================================================= */
.sc-atelier { display: flex; justify-content: center; margin-top: clamp(28px, 3vw, 48px);
  --room: linear-gradient(to top, transparent calc(36 * var(--px)), #c4b08c calc(36 * var(--px)) calc(37 * var(--px)), transparent calc(37 * var(--px))),
          repeating-linear-gradient(90deg, #cbb898 0 var(--px), #d8c6a6 0 calc(14 * var(--px))) 0 100% / 100% calc(36 * var(--px)) no-repeat,
          linear-gradient(var(--wall2), var(--wall2));
  background: url(../images/pixel/planks.png) 0 100% / calc(32 * var(--px)) calc(8 * var(--px)) repeat-x, var(--room); }
.zone { position: relative; height: calc(150 * var(--px)); flex: 0 0 calc(var(--bw) * var(--px)); }
.z-research { --bw: 120; order: 1; } .z-main { --bw: 132; order: 2; } .z-shelf { --bw: 84; order: 3; }
.zone .box { --bw: inherit; }
.z-main .box { --bw: 132; } .z-research .box { --bw: 120; } .z-shelf .box { --bw: 84; }

.obj { position: absolute; left: calc(var(--x) * var(--px)); bottom: calc(var(--y) * var(--px)); width: calc(var(--ow) * var(--px)); height: calc(var(--oh) * var(--px));
  padding: 0; margin: 0; border: 0; background: none; cursor: pointer; z-index: 3; transition: transform .1s steps(2); }
.obj .s { --x: 0; --y: 0; transition: filter .1s steps(2); }
.obj:hover, .obj:focus-visible, .obj.hot { transform: translateY(calc(-1 * var(--px))); z-index: 8; }
.obj:hover .s, .obj:focus-visible .s, .obj.hot .s {
  filter: drop-shadow(0 calc(-1 * var(--px)) 0 var(--acc)) drop-shadow(0 var(--px) 0 var(--acc)) drop-shadow(var(--px) 0 0 var(--acc)) drop-shadow(calc(-1 * var(--px)) 0 0 var(--acc)); }
.obj:focus-visible { outline: none; }
.tag { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center;
  padding: 5px 10px; background: #fffaf0; color: var(--ink); white-space: nowrap; pointer-events: none;
  font: 700 16px/1.15 "Pixelify Sans", sans-serif; }
.tag-sub { font: 400 10px Silkscreen, monospace; text-transform: uppercase; letter-spacing: .08em; color: var(--acc-t); }
.tag-star { --bc: var(--acc); }
.tag-r { left: calc(100% + 12px); bottom: 50%; transform: translateY(50%); }
.obj:hover .tag, .obj:focus-visible .tag, .obj.hot .tag { background: var(--ink); color: var(--paper); }

.at-ceil { --x: 18; --y: 128; } .at-spot { --x: -10; --y: 3; } .at-rug { --x: 20; --y: 1; }
.at-tenoa { --x: 8; --y: 3; --ow: 34; --oh: 66; }
.at-pandahub { --x: 66; --y: 3; --ow: 66; --oh: 50; }
.at-pandahub .s-pandabig { --x: 40; --y: 0; }
.z-main .actor { --ax: 40; --ay: 2; }
.at-board { --x: 4; --y: 58; --ow: 66; --oh: 44; }
.at-board .tag { bottom: auto; top: calc(100% + 8px); }
.at-lafayette { --x: 76; --y: 3; --ow: 42; --oh: 38; }
.at-shelf { --x: 4; --y: 3; }
.shelf-label { position: absolute; left: calc(4 * var(--px)); bottom: calc(72 * var(--px)); width: calc(46 * var(--px)); text-align: center;
  font: 400 11px Silkscreen, monospace; text-transform: uppercase; letter-spacing: .06em; color: var(--ink2); }
.at-amv { --x: 24; --y: 47; --ow: 18; --oh: 14; }
.at-veat { --x: 26; --y: 27; --ow: 16; --oh: 15; }
.at-fplant { --x: 62; --y: 3; }

/* =========================================================
   INVENTAIRE — compétences (grille en px CSS : indépendante de l'échelle du décor)
   ========================================================= */
.inventaire { background: url(../images/pixel/paper.png) 0 0 / calc(8 * var(--px)) calc(8 * var(--px)),
  repeating-linear-gradient(90deg, rgba(120, 82, 52, .045) 0 calc(2 * var(--px)), transparent 0 calc(14 * var(--px))); }
.inv-wrap { max-width: 1340px; margin: clamp(28px, 3vw, 48px) auto 0; padding: 0 var(--gut);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 3.5vw, 56px); align-items: center; }
.sc-lib { --px: var(--pxs, 3px); --bw: 150; width: auto; height: calc(110 * var(--px)); margin: var(--u);
  background: url(../images/pixel/planks.png) 0 100% / calc(32 * var(--px)) calc(8 * var(--px)) repeat-x, linear-gradient(#e2d6c0, #e2d6c0);
  box-shadow: 0 calc(-1 * var(--u)) 0 0 var(--ink), 0 var(--u) 0 0 var(--ink), calc(-1 * var(--u)) 0 0 0 var(--ink), var(--u) 0 0 0 var(--ink); }
.lb-library { --x: 4; --y: 3; } .lb-lamp { --x: 98; --y: 3; } .lb-chair { --x: 110; --y: 3; } .lb-table { display: none; }
.lb-chest { --x: 74; --y: 3; } .lb-gold { --x: 92; --y: 24; }
.sc-lib .actor { --ax: 44; --ay: 2; }

.inv { --cell: 104px; --ipx: 3px; background: #f7f2e7; margin: var(--u); padding: 0 18px 18px; min-width: 0; }
.inv-title { display: flex; justify-content: space-between; align-items: center; margin: 0 -18px 18px; padding: 10px 18px;
  background: var(--wooddk); color: #fff2de; font: 400 13px Silkscreen, monospace; text-transform: uppercase; letter-spacing: .1em; }
.inv-count { color: #f2dcc0; }
/* sac à 59 objets : défilement interne propre sur desktop, grille compacte pour « Tout » */
.inv-tab .ts { display: none; }
.inv-info { display: none; }
@media (min-width: 761px) {
  .inv-pane { max-height: clamp(380px, 60vh, 600px); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
    margin-right: -8px; padding: 14px 8px 4px 0; scrollbar-color: var(--wood) #e9e0cc; }
  .inv-pane.more { -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), rgba(0, 0, 0, .35)); mask-image: linear-gradient(#000 calc(100% - 28px), rgba(0, 0, 0, .35)); }
}
.inv-pane.all { --cell: 90px; }
.inv-pane.all .slot { min-height: 94px; padding: 9px 4px 8px; gap: 4px; }
.inv-pane.all .sname { font-size: 13.5px; }
.tip.tb { bottom: auto; top: calc(100% + 12px); }
.tip.tb::after { bottom: auto; top: -10px; }
/* onglets du sac : une catégorie par intercalaire, compteur par onglet */
.inv-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; padding-bottom: 10px; border-bottom: var(--u) solid #d6caae; }
.inv-tab { --cat: var(--ink2); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border: 0; cursor: pointer;
  background: #e9e0cc; color: var(--ink); font: 500 15px/1.1 "Pixelify Sans", sans-serif;
  box-shadow: inset 0 calc(-1 * var(--u)) 0 0 var(--cat); }
.inv-tab::before { content: ""; width: 10px; height: 10px; background: var(--cat); flex: 0 0 auto; }
#tab-all::before { background: linear-gradient(90deg, var(--acc) 0 25%, var(--night) 0 50%, var(--wood) 0 75%, var(--muted) 0); }
.inv-tab b { font: 400 11px Silkscreen, monospace; padding: 2px 5px; background: rgba(28, 24, 19, .08); }
.inv-tab:hover { background: #fffaf0; }
.inv-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); box-shadow: inset 0 calc(-1 * var(--u)) 0 0 var(--cat); }
.inv-tab[aria-selected="true"] b { background: rgba(255, 250, 240, .16); }
.slots li[hidden] { display: none; }
.slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--cell), 1fr)); gap: 8px; }
.slots li { position: relative; display: flex; }
.slot { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px;
  min-height: 112px; padding: 12px 6px 10px; border: 0; cursor: pointer; color: var(--ink); background: #e9e0cc; --cat: var(--muted);
  box-shadow: inset 0 var(--u) 0 0 #d6caae, inset var(--u) 0 0 0 #d6caae, inset 0 calc(-1 * var(--u)) 0 0 var(--cat); }
.slot .s { position: relative; left: auto; bottom: auto; flex: 0 0 auto; --px: var(--ipx); }
.sname { font: 500 15px/1.15 "Pixelify Sans", sans-serif; text-align: center; overflow-wrap: break-word; hyphens: manual; }
.slot:hover, .slot:focus-visible, .slot.tap { background: #fffaf0; outline: var(--u) solid var(--ink); outline-offset: 0; }
.slot:hover .s, .slot:focus-visible .s, .slot.tap .s { translate: 0 -3px; }
.c-ia { --cat: var(--acc); } .c-data { --cat: var(--night); } .c-front { --cat: var(--wood); } .c-ops { --cat: var(--muted); }
.tip { position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); width: max-content; max-width: 220px;
  display: none; flex-direction: column; gap: 2px; padding: 7px 11px; background: var(--ink); color: var(--paper); --bc: var(--ink);
  text-align: left; pointer-events: none; font: 400 16px/1.3 "Pixelify Sans", sans-serif; }
.tip em { font: 400 11px Silkscreen, monospace; font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: #e2c9a8; }
.tip::after { content: ""; position: absolute; left: calc(50% - 4px); bottom: -10px; width: 8px; height: 5px; background: var(--ink); }
.slot:hover .tip, .slot:focus-visible .tip, .slot.tap .tip { display: flex; }
.tip.tl { left: 0; transform: none; } .tip.tl::after { left: 18px; }
.tip.tr { left: auto; right: 0; transform: none; } .tip.tr::after { left: auto; right: 18px; }
@media (max-width: 1199px) {
  .inv-wrap { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .sc-lib { --px: var(--pxs, 3px); max-width: calc(150 * var(--px) + 2 * var(--u)); width: 100%; justify-self: center; }
}

/* =========================================================
   CONTACT — la porte d'entrée
   ========================================================= */
.contact { padding-bottom: clamp(56px, 7vw, 96px); }
.contact-grid { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.sc-door { --bw: 130; width: calc(130 * var(--px)); height: calc(110 * var(--px)); margin: var(--u);
  background:
    linear-gradient(var(--wooddk2) 0 calc(4 * var(--px)), var(--wooddk) 0 calc(6 * var(--px)), transparent 0) 0 0 / 100% 100% no-repeat,
    linear-gradient(to top, #b8a484 0 calc(5 * var(--px)), #a8977a 0 calc(6 * var(--px)), #d8cbb4 0 calc(8 * var(--px)), transparent 0),
    url(../images/pixel/brick.png) 0 0 / calc(16 * var(--px)) calc(8 * var(--px)) repeat;
  box-shadow: 0 calc(-1 * var(--u)) 0 0 var(--ink), 0 var(--u) 0 0 var(--ink), calc(-1 * var(--u)) 0 0 0 var(--ink), var(--u) 0 0 0 var(--ink); }
.dr-window { --x: 8; --y: 44; } .dr-lantern { --x: 84; --y: 52; } .dr-door { --x: 48; --y: 8; } .dr-mat { --x: 48; --y: 6; }
.dr-pot { --x: 112; --y: 6; }
.dr-mailbox { --x: 94; --y: 6; width: calc(18 * var(--px)); height: calc(32 * var(--px)); z-index: 4; }
.dr-mailbox .s { --x: 0; --y: 0; }
.dr-mailbox:hover .s-mailbox, .dr-mailbox:focus-visible .s-mailbox { --f: 1; }
.dr-mailbox .letter { --x: 4; --y: 20; opacity: 0; }
.dr-mailbox.sent .letter { animation: post .9s steps(9) forwards; }
@keyframes post { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(0, calc(-30 * var(--px))); } }
.sc-door .actor { --ax: 2; --ay: 4; }
.contact-text p:not(.label) { margin-top: 16px; max-width: 34em; color: var(--ink2); }
.contact-text h2 { margin-top: 10px; }
.links { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.mail-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.btn-mail { font-size: 18px; word-break: break-all; text-align: left; }

/* --- le chat qui suit Leandro ------------------------------------------- */
.kitty { position: absolute; left: 0; bottom: calc(var(--ky, 2) * var(--px)); z-index: 7; width: calc(18 * var(--px)); height: calc(14 * var(--px));
  transform: translateX(calc(var(--kx, 0) * var(--px))) scaleX(var(--kf, 1)); cursor: pointer; }
.kitty .s { left: 0; bottom: 0; }
.kitty .heart { left: calc(5 * var(--px)); bottom: calc(14 * var(--px)); animation: rise 1s steps(6) forwards; }
@keyframes rise { to { transform: translateY(calc(-8 * var(--px))); opacity: 0; } }
.at-gold { --x: 43; --y: 27; } .dr-gold { --x: 76; --y: 3; z-index: 3; }

/* --- succès, notifications, trophée ------------------------------------------ */
.tro-ico { position: relative; width: 14px; height: 14px; flex: 0 0 auto; }
.tro-ico::before { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 2px;
  box-shadow: 2px 0 0 currentColor, 4px 0 0 currentColor, 6px 0 0 currentColor, 8px 0 0 currentColor, 10px 0 0 currentColor,
    0 2px 0 currentColor, 2px 2px 0 currentColor, 4px 2px 0 currentColor, 6px 2px 0 currentColor, 8px 2px 0 currentColor, 10px 2px 0 currentColor, 12px 2px 0 currentColor,
    0 4px 0 currentColor, 4px 4px 0 currentColor, 6px 4px 0 currentColor, 8px 4px 0 currentColor, 12px 4px 0 currentColor,
    4px 6px 0 currentColor, 6px 6px 0 currentColor, 8px 6px 0 currentColor, 6px 8px 0 currentColor, 4px 10px 0 currentColor, 6px 10px 0 currentColor, 8px 10px 0 currentColor; }
.trophy.bump { animation: bump .5s steps(3); }
@keyframes bump { 50% { transform: translateY(-4px); background: var(--acc); color: #fff; } }
.toasts { position: fixed; left: calc(12px + env(safe-area-inset-left)); align-items: flex-start; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 90; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { --bc: var(--ink); display: flex; align-items: center; gap: 12px; max-width: min(360px, calc(100vw - 32px)); margin: var(--u); padding: 10px 14px;
  background: var(--ink); color: var(--paper); font: 500 16px/1.25 "Pixelify Sans", sans-serif; animation: toastin .4s steps(4), toastout .4s steps(4) 2.4s forwards; }
.toast b { display: block; color: #f6d68a; font: 400 11px Silkscreen, monospace; text-transform: uppercase; letter-spacing: .08em; }
.toast .s { position: relative; left: auto; bottom: auto; --px: 3px; flex: 0 0 auto; }
@keyframes toastin { from { transform: translateY(16px); opacity: 0; } }
@keyframes toastout { to { transform: translateY(16px); opacity: 0; } }
.ach-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.ach-list li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: #e9e0cc; color: var(--ink2); font-size: 15px; line-height: 1.3; }
.ach-list li b { display: block; color: var(--ink); font-size: 17px; }
.ach-list li::before { content: "?"; flex: 0 0 26px; height: 26px; display: grid; place-items: center; background: var(--muted); color: #fff; font: 400 13px Silkscreen, monospace; }
.ach-list li.ok { background: #fffaf0; outline: var(--u) solid var(--ink); outline-offset: calc(-1 * var(--u)); }
.ach-list li.ok::before { content: "*"; background: var(--acc); }
.ach-list li:not(.ok) b { color: var(--muted-t); }
.gold-count { margin-top: 16px !important; font: 400 13px Silkscreen, monospace; text-transform: uppercase; letter-spacing: .06em; }

/* --- raccords de décor entre les sections --------------------------------- */
.atelier { background: url(../images/pixel/paper.png) 0 0 / calc(8 * var(--px)) calc(8 * var(--px)), var(--wall2);
  border-top: calc(5 * var(--px)) solid var(--wooddk); box-shadow: inset 0 var(--px) 0 var(--woodhi), inset 0 calc(-3 * var(--px)) 0 #d8c6a6; }
.inventaire { border-top: calc(3 * var(--px)) solid #d6c6a6; box-shadow: inset 0 var(--px) 0 #efe2c8; }
.contact { background: linear-gradient(#f2dcc0, var(--paper) 55%); border-top: calc(2 * var(--px)) solid #cdbfa8; }
.parcours { border-top: calc(2 * var(--px)) solid #cdbfa8; }

/* --- pied de page --------------------------------------------------------- */
.foot { padding: 28px var(--gut) calc(28px + env(safe-area-inset-bottom)); text-align: center; font-size: 16px; color: var(--ink2);
  background: url(../images/pixel/grass.png) 0 0 / calc(16 * var(--px)) calc(6 * var(--px)) repeat-x, linear-gradient(transparent calc(6 * var(--px)), #e3d9c5 0);
  padding-top: calc(28px + 6 * var(--px)); image-rendering: pixelated; }
.foot a { color: var(--acc-t); margin-left: 10px; }
.foot-small { margin-top: 6px; font: 400 11px Silkscreen, monospace; letter-spacing: .05em; color: var(--muted-t); }

/* =========================================================
   Fiches projet (dialog)
   ========================================================= */
.fiche { width: min(680px, calc(100% - 32px)); max-height: min(86vh, 900px); padding: 0; border: 0; background: var(--paper); color: var(--ink); overflow: auto; overscroll-behavior: contain; }
.fiche::backdrop { background: repeating-conic-gradient(rgba(28, 24, 19, .55) 0 25%, rgba(28, 24, 19, .35) 0 50%) 0 0 / 6px 6px; }
.win-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 0 0 0 16px; background: var(--ink); color: var(--paper); }
.win-title { font: 400 13px Silkscreen, monospace; letter-spacing: .08em; }
.win-x { width: 48px; height: 44px; border: 0; background: var(--acc); color: #fff; font: 700 26px/1 "Pixelify Sans", sans-serif; cursor: pointer; }
.win-x:hover { background: var(--acc2); }
.fiche-body { padding: 24px clamp(18px, 4vw, 32px) 30px; }
.fiche-body h3 { font-size: clamp(28px, 3vw, 38px); margin: 6px 0 14px; }
.fiche-body p + p, .fiche-body ol + p { margin-top: 12px; }
.fiche-body p { color: var(--ink2); }
.pipeline { margin: 14px 0; padding: 0; list-style: none; counter-reset: st; }
.pipeline li { counter-increment: st; position: relative; padding: 6px 0 6px 44px; color: var(--ink2); }
.pipeline li::before { content: counter(st); position: absolute; left: 0; top: 6px; width: 28px; height: 28px; display: grid; place-items: center;
  background: var(--acc); color: #fff; font: 400 13px Silkscreen, monospace; }
.shot { margin: 18px 0 4px; padding: var(--u); background: var(--ink); }
.shot img { display: block; width: 100%; aspect-ratio: auto; background: var(--wall2); }
.stack { margin-top: 18px !important; padding-top: 14px; border-top: var(--u) dotted var(--muted); font-size: 16px; color: var(--ink) !important; }
.stack .label { margin-right: 8px; }
.fiche-links { margin-top: 20px !important; }
.note { font: 400 12px Silkscreen, monospace; color: var(--muted-t) !important; text-transform: uppercase; letter-spacing: .06em; }

/* révélation tramée (pilotée par JS) */
.rv-wait { visibility: hidden; }

/* =========================================================
   Tablette / mobile : scènes recomposées, texte au-dessus ou dessous
   ========================================================= */
@media (max-width: 1100px) {
  .nav a { padding: 12px 6px; font-size: 12px; }
}
@media (max-width: 999px) {
  :root { --bar: 56px; }
  .menu-btn { display: inline-flex; }
  .nav { position: absolute; top: var(--bar); left: 0; right: 0; display: none; flex-direction: column; gap: 0; margin: 0;
    padding: 8px var(--gut) 16px; background: var(--paper); box-shadow: 0 var(--u) 0 0 var(--ink); }
  .nav.open { display: flex; }
  .nav a { font-size: 15px; padding: 14px 4px; }
  .bar { gap: 10px; }
  .bar-tools { margin-left: auto; }
  .burger { width: 14px; height: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }

  .hero { display: flex; flex-direction: column; align-items: stretch; height: auto; max-height: none; }
  .sc-hero { position: relative; inset: auto; height: calc(118 * var(--px)); order: -1; flex: 0 0 auto; }
  .hero-text { margin: 0; padding: 26px var(--gut) 40px; max-width: 640px; }
  .kicker { font-size: 13px; margin-bottom: 10px; }
  .tagline { margin-top: 18px; }
  .cta { margin-top: 24px; }
  .g-deco { left: 0; }
  .hd-hplant, .hd-diploma, .hd-map, .hd-cork, .hd-records, .hd-poster, .hd-bigshelf, .hd-guitar, .hd-monstera, .hd-cal, .hd-pile { display: none; }
  .hd-pothos { right: auto; left: calc(50% + 4 * var(--px)); top: calc(4 * var(--px)); }
  .hd-basket { --x: 2; } .g-deco { top: calc(4 * var(--px)); }
  .win-label { right: calc(6 * var(--px)); bottom: calc(47 * var(--px)); width: calc(42 * var(--px)); font-size: 10px; }
  .hd-clock { --x: 44; --y: 15; } .hd-catshelf { --x: 2; } .hd-cat { --x: 4; } .hd-catzzz { --x: 29; }
  .g-shelf, .hd-win { display: none; }
  .hd-wins { display: block; left: auto; right: calc(6 * var(--px)); bottom: calc(54 * var(--px)); }
  .g-desk { --gw: 118; right: auto; left: 50%; margin-left: calc(-59 * var(--px)); }
  .hd-desk, .hd-lamp, .hd-glow { display: none; }
  .hd-deskm { display: block; --x: 0; --y: 0; z-index: 7; }
  .hd-chair { --x: 39; } .g-desk .actor { --ax: 30; } .hd-laptop { --x: 38; }
  .hd-phone { --x: 82; } .hd-mug { --x: 100; } .hd-steam { --x: 100; } .hd-duck { --x: 26; --y: 24; } .hd-panda { --x: 6; }
  .hd-gold { --x: 20; }

  .about { grid-template-columns: 1fr; }

  .sc-atelier { flex-direction: column; background: none; gap: 0; }
  .zone { flex: 0 0 auto; width: 100%; background: url(../images/pixel/planks.png) 0 100% / calc(32 * var(--px)) calc(8 * var(--px)) repeat-x, var(--room); }
  .z-main { order: 1; height: calc(116 * var(--px)); }
  .z-research { order: 2; height: calc(100 * var(--px)); box-shadow: 0 calc(-1 * var(--u)) 0 0 var(--paper); margin-top: 18px; }
  .z-shelf { order: 3; height: calc(90 * var(--px)); margin-top: 18px; }
  .at-ceil { --y: 92; } .at-spot { --y: 3; }
  .at-board { --x: 2; --y: 52; }
  .at-board .tag { top: auto; bottom: calc(100% + 8px); }

  .inv-wrap, .contact-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .sc-lib .bubble, .sc-door .bubble, .sc-lib .bubble.left, .sc-door .bubble.left { left: calc(30 * var(--px)); bottom: calc(50 * var(--px)); transform: none; max-width: 220px; }
  .sc-lib .bubble::after, .sc-door .bubble::after { left: 8px; }
  .contact-text { justify-self: stretch; }
  .tbtn { white-space: nowrap; }
}
@media (max-width: 760px) {
  .toasts { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); align-items: center; }
  .toast { max-width: 300px; padding: 6px 10px; gap: 8px; font-size: 14px; }
  html.rm .steps { grid-template-columns: 1fr; gap: 6px; }
  .sc-lib { --bw: 124; width: calc(124 * var(--px)); height: calc(96 * var(--px)); }
  .lb-library { --x: 2; } .lb-lamp, .lb-chair { display: none; } .lb-chest { --x: 92; } .sc-lib .actor { --ax: 48; }
  .inv-title { margin: 0 -12px 14px; padding: 10px 12px; }
  .inv { padding: 0 12px 14px; --cell: 92px; justify-self: stretch; width: auto; min-width: 0; }
  .inv-tabs { flex-wrap: wrap; gap: 5px; }
  .inv-tab { flex: 1 1 auto; justify-content: center; font-size: 14px; padding: 6px 8px; gap: 6px; }
  .inv-tab .tl { display: none; } .inv-tab .ts { display: inline; }
  .tip { display: none !important; }
  .inv-info { display: block; min-height: 44px; font-style: normal; margin: 0 0 12px; padding: 8px 12px; background: var(--ink); color: var(--paper); font: 400 15px/1.3 "Pixelify Sans", sans-serif; }
  .inv-info b { color: #f6d68a; font-weight: 700; }
  .inv-info em { display: block; font: 400 10px Silkscreen, monospace; font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: #e2c9a8; }
  .sname { font-size: 14px; }
  .slot { min-height: 104px; }
  .sc-lib, .sc-door { justify-self: stretch; width: auto; margin: var(--u) calc(-1 * var(--gut));
    box-shadow: 0 calc(-1 * var(--u)) 0 0 var(--ink), 0 var(--u) 0 0 var(--ink); }
  .sc-door { height: calc(104 * var(--px)); }
}
@media (max-width: 600px) {
  body { font-size: 17px; }
  .brand { font-size: 18px; }
  .snd-txt, .menu-btn > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bar { padding: 0 14px; }
  .h1-l1, .h1-l2 { font-size: clamp(40px, 12vw, 56px); }
  .cta .btn { flex: 1 1 100%; }
  .btn-mail { font-size: 15px; padding: 12px 14px; word-break: normal; white-space: nowrap; }
}
@media (max-width: 400px) {
  .tro-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .bar { padding: 0 10px; gap: 6px; } .brand { font-size: 17px; }
  .tbtn { margin: 2px; padding: 0 6px; }
}
@media (max-width: 380px) {
  .dr-pot { display: none; }
  .btn-mail { font-size: 13px; padding: 12px 10px; }
  .tbtn { padding: 6px 8px; }
}

/* paysage bas (téléphone couché) */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 999px) {
  .sc-hero { height: calc(100 * var(--px)); }
}

/* mouvement réduit : décor figé, personnage en idle */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .s, .caret, .cloud, .bird, .car, .ped, .wplane, .fly, .dust, .garland-strip, .gr, .wx, .b-neon, .haze, .pelican, .tcloud, .toast, .step, .trophy, .gr-bayou::after { animation: none !important; }
  .btn, .obj, .step { transition: none; }
}