/* RODRIGUE — Version Dev · Game Boy Color */
@font-face {
  font-family: "Press Start 2P";
  src: url("../fonts/press-start-2p.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "VT323";
  src: url("../fonts/vt323.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: #14161d;
  color: #e8e8f0;
  font-family: "VT323", monospace;
  min-height: 100vh;
  overflow-x: hidden;
}
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }

/* ============ Mise en page / modes ============ */
body.nojs #stage, body.nojs #under { display: none; }
body:not(.nojs):not(.cv-mode) #cv { display: none; }
body.cv-mode #stage, body.cv-mode #under { display: none; }

#stage { padding: 18px 0 0; }
#console-wrap { width: 600px; margin: 0 auto; transform-origin: top center; }

/* ============ Coque GBC ============ */
.gbc {
  width: 560px;
  margin: 0 auto;
  background: #17a9b4;
  background: linear-gradient(160deg, #1ab6c1 0%, #12a0ab 55%, #0c8b96 100%);
  border: 3px solid #076d76;
  border-radius: 18px 18px 64px 64px;
  padding: 20px 22px 30px;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.25), inset 0 -6px 0 rgba(0,0,0,.18), 0 18px 40px rgba(0,0,0,.55);
  user-select: none;
}
.bezel {
  background: #23242c;
  border-radius: 12px 12px 42px 12px;
  padding: 22px 34px 14px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.7);
}
.bezel-top {
  display: flex; align-items: center; gap: 8px;
  font-family: "Press Start 2P", monospace; font-size: 7px; color: #8a8c98;
  margin-bottom: 10px;
}
.led { width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 7px #ff3b30; }
.bezel-brand {
  text-align: center; margin-top: 11px;
  font-family: "Press Start 2P", monospace; font-size: 9px; color: #d8d8e0;
  letter-spacing: 1px;
}
.bezel-brand .col1 { color: #e24b4a; } .bezel-brand .col2 { color: #efa927; }
.bezel-brand .col3 { color: #63b922; } .bezel-brand .col4 { color: #378add; }
.bezel-brand .col5 { color: #b06fd4; }

/* ============ Écran ============ */
.screen {
  position: relative;
  width: 480px; height: 432px;
  margin: 0 auto;
  background: #000;
  overflow: hidden;
  image-rendering: pixelated;
}
#game { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.layer { position: absolute; inset: 0; }

/* Boot */
#boot { background: #0c0c14; display: flex; align-items: center; justify-content: center; }
#boot .boot-logo {
  font-family: "Press Start 2P", monospace; font-size: 22px; color: #63d8e0;
  animation: bootdrop 1.1s ease-out forwards;
  text-shadow: 0 3px 0 #1a5c66;
}
#boot .boot-sub { position: absolute; bottom: 40px; left: 0; right: 0; text-align: center; font-family: "Press Start 2P", monospace; font-size: 8px; color: #55586a; }
@keyframes bootdrop { 0% { transform: translateY(-190px); } 60% { transform: translateY(0); } 75% { transform: translateY(-9px); } 100% { transform: translateY(0); } }

/* Écran titre */
#title {
  background: linear-gradient(#2a3a78 0%, #3f6ab8 45%, #7fb8e8 78%, #a8e0a0 78.5%, #7cc470 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; cursor: pointer;
}
#title .t-logo {
  font-family: "Press Start 2P", monospace; font-size: 34px; color: #f8d020;
  text-shadow: 3px 3px 0 #c03028, -2px -2px 0 #c03028, 2px -2px 0 #c03028, -2px 2px 0 #c03028, 5px 5px 0 #302818;
  line-height: 1.35;
}
#title .t-ver {
  font-family: "Press Start 2P", monospace; font-size: 12px; color: #fff;
  background: #c03028; padding: 6px 12px; margin: 12px 0 6px; border: 2px solid #302818;
}
#title .t-sub { font-family: "Press Start 2P", monospace; font-size: 8px; color: #20304c; margin-bottom: 14px; }
#title-sprite { height: 84px; }
#title-sprite canvas { image-rendering: pixelated; }
#title-menu { margin-top: 14px; }
#title-menu .t-opt {
  font-family: "Press Start 2P", monospace; font-size: 11px; color: #182848;
  padding: 6px 4px 6px 22px; position: relative; cursor: pointer;
}
#title-menu .t-opt.sel::before { content: "▶"; position: absolute; left: 2px; color: #c03028; animation: blink 1.15s steps(1) infinite; }
#title .t-copy { position: absolute; bottom: 12px; left: 0; right: 0; font-family: "Press Start 2P", monospace; font-size: 7px; color: #2a4a30; }
@keyframes blink { 50% { opacity: 0; } }

/* Fondu / flash */
#fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 40; }
#fade.dark { opacity: 1; }
#fade.flash { animation: bflash .65s steps(2) forwards; }
@keyframes bflash { 0%,40% { opacity: 1; } 20%,60% { opacity: 0; } 100% { opacity: 1; } }

/* ============ Bannière de lieu ============ */
#loc {
  position: absolute; top: 8px; left: 8px; z-index: 15;
  background: #f8f8f0; border: 3px solid #23242c; border-radius: 4px;
  box-shadow: inset 0 0 0 2px #f8f8f0, inset 0 0 0 4px #8890b0;
  padding: 8px 12px;
  animation: locin .25s ease-out;
  pointer-events: none;
}
#loc b { display: block; font-family: "Press Start 2P", monospace; font-size: 9px; color: #23242c; font-weight: 400; }
#loc span { display: block; font-family: "VT323", monospace; font-size: 16px; color: #a06830; margin-top: 4px; line-height: 1; }
@keyframes locin { from { transform: translateX(-14px); opacity: 0; } }

/* ============ Toast succès ============ */
#toast {
  position: absolute; top: 8px; right: 8px; z-index: 35;
  background: #23242c; color: #f8e048;
  border: 3px solid #f8e048; border-radius: 4px;
  font-family: "Press Start 2P", monospace; font-size: 8px;
  padding: 9px 12px; max-width: 240px; line-height: 1.7;
  pointer-events: none;
}
#toast.pop { animation: toastin .3s ease-out; }
@keyframes toastin { from { transform: translateY(-16px); opacity: 0; } }

/* ============ Crédits ============ */
#credits { background: #0c0c14; z-index: 28; overflow: hidden; cursor: pointer; }
#credits-roll {
  position: absolute; left: 0; right: 0; top: 100%;
  text-align: center; color: #f8f8f0;
  font-family: "Press Start 2P", monospace;
  animation: creditsroll 34s linear forwards;
}
#credits-roll h3 { font-size: 15px; color: #f8d020; margin-bottom: 26px; }
#credits-roll b { display: block; font-size: 9px; color: #63d8e0; margin: 26px 0 8px; font-weight: 400; }
#credits-roll p { font-size: 9px; line-height: 2; margin-bottom: 8px; }
#credits-roll .cr-end { margin-top: 60px; color: #f8d020; }
@keyframes creditsroll { to { transform: translateY(calc(-100% - 432px)); } }

/* ============ Dialogue ============ */
#dialog {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 30;
  background: #f8f8f0; border: 3px solid #23242c; border-radius: 4px;
  box-shadow: inset 0 0 0 2px #f8f8f0, inset 0 0 0 4px #8890b0;
  padding: 12px 14px; min-height: 92px;
  font-family: "Press Start 2P", monospace; font-size: 11px; line-height: 2; color: #23242c;
  cursor: pointer;
}
#dlg-arrow { position: absolute; right: 12px; bottom: 6px; color: #c03028; animation: blink 0.9s steps(1) infinite; font-size: 12px; }

#choice {
  position: absolute; right: 10px; bottom: 112px; z-index: 31;
  background: #f8f8f0; border: 3px solid #23242c; border-radius: 4px;
  box-shadow: inset 0 0 0 2px #f8f8f0, inset 0 0 0 4px #8890b0;
  padding: 10px 12px;
  font-family: "Press Start 2P", monospace; font-size: 10px; color: #23242c;
}
.ch-opt { padding: 5px 4px 5px 18px; cursor: pointer; position: relative; }
.ch-opt.sel::before { content: "▶"; position: absolute; left: 0; color: #c03028; }

/* ============ Menu pause ============ */
#pause { background: rgba(8, 10, 18, .55); z-index: 25; }
#pause-box {
  position: absolute; top: 12px; right: 12px; width: 250px;
  background: #f8f8f0; border: 3px solid #23242c; border-radius: 4px;
  box-shadow: inset 0 0 0 2px #f8f8f0, inset 0 0 0 4px #8890b0;
  padding: 12px;
}
#pause-box h2 { font-family: "Press Start 2P", monospace; font-size: 10px; color: #c03028; margin: 2px 0 10px 4px; }
.p-item { font-family: "Press Start 2P", monospace; font-size: 10px; color: #23242c; padding: 7px 4px 7px 20px; position: relative; cursor: pointer; }
.p-item.sel::before { content: "▶"; position: absolute; left: 2px; color: #c03028; }

/* ============ Sections ============ */
#section { background: #f4ecd8; z-index: 20; display: flex; flex-direction: column; color: #2a2a34; }
.sec-head {
  background: #23242c; color: #f8f8f0; flex: 0 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; font-family: "Press Start 2P", monospace; font-size: 11px;
}
.sec-close { background: #c03028; color: #fff; border: 2px solid #7a1c16; font-family: "Press Start 2P", monospace; font-size: 8px; padding: 5px 8px; border-radius: 3px; }
.chips span { display: inline-block; background: #23242c; color: #8ae0e8; font-size: 15px; padding: 1px 8px; margin: 2px 4px 0 0; border-radius: 3px; }

/* Carte du village */
.map-here {
  background: #23242c; color: #f8e048; flex: 0 0 auto;
  font-family: "Press Start 2P", monospace; font-size: 8px;
  padding: 9px 12px; border-top: 2px solid #8890b0;
}
.map-body { flex: 1; display: flex; gap: 12px; padding: 12px; min-height: 0; align-items: flex-start; }
#vmap {
  image-rendering: pixelated; width: 272px; flex: 0 0 auto;
  border: 3px solid #23242c; border-radius: 4px; display: block;
}
.map-legend { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.lg {
  display: flex; gap: 8px; align-items: center;
  background: #fdf6e2; border: 2px solid #23242c; border-radius: 4px; padding: 6px 8px;
}
.lg.now { outline: 3px solid #c03028; outline-offset: -1px; }
.lg i { width: 14px; height: 14px; border: 2px solid #23242c; border-radius: 3px; flex: 0 0 auto; }
.lg b { font-family: "Press Start 2P", monospace; font-size: 7px; display: block; font-weight: 400; line-height: 1.4; }
.lg span { font-family: "VT323", monospace; font-size: 14px; color: #8a7a58; display: block; line-height: 1; margin-top: 3px; }

/* SkillDex */
.dex-wrap { flex: 1; display: flex; min-height: 0; }
.dex-list { width: 186px; overflow-y: auto; background: #ece0c4; border-right: 3px solid #23242c; }
.dex-item { font-family: "Press Start 2P", monospace; font-size: 8px; padding: 8px 6px; color: #2a2a34; cursor: pointer; white-space: nowrap; }
.dex-item .dex-no { color: #a09068; margin-right: 5px; }
.dex-item.sel { background: #23242c; color: #f8e048; }
.dex-item.sel .dex-no { color: #8ae0e8; }
.dex-detail { flex: 1; padding: 14px 16px; overflow-y: auto; }
.dex-no-big { font-family: "Press Start 2P", monospace; font-size: 9px; color: #a09068; }
.dex-name { font-family: "Press Start 2P", monospace; font-size: 15px; margin: 8px 0; }
.dex-cat { display: inline-block; font-family: "Press Start 2P", monospace; font-size: 8px; color: #fff; padding: 5px 9px; border-radius: 3px; }
.dex-lvl { font-family: "Press Start 2P", monospace; font-size: 9px; margin: 14px 0 4px; }
.lvlbar { height: 10px; background: #d8c8a0; border: 2px solid #23242c; margin-top: 5px; border-radius: 3px; }
.lvlbar i { display: block; height: 100%; background: #63b922; }
.dex-desc { font-size: 19px; line-height: 1.35; margin-top: 12px; }

/* Carte dresseur */
.card-wrap { flex: 1; overflow-y: auto; padding: 12px 16px; }
.card-top { display: flex; gap: 14px; align-items: flex-start; background: #fdf6e2; border: 3px solid #23242c; border-radius: 6px; padding: 12px; }
#card-avatar { flex: 0 0 auto; background: #cfe8f2; border: 2px solid #23242c; border-radius: 4px; padding: 4px; }
#card-avatar canvas { display: block; image-rendering: pixelated; }
.card-tbl { font-family: "Press Start 2P", monospace; font-size: 8px; border-collapse: collapse; flex: 1; }
.card-tbl td { padding: 5px 6px; }
.card-tbl td:first-child { color: #a06830; white-space: nowrap; }
.card-bio { margin-top: 12px; font-size: 19px; line-height: 1.3; }
.card-bio p { margin-bottom: 6px; }
.card-pass { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.pass { background: #fdf6e2; border: 2px solid #23242c; border-radius: 5px; padding: 8px; }
.pass b { font-family: "Press Start 2P", monospace; font-size: 8px; color: #c03028; }
.pass p { font-size: 15px; line-height: 1.2; margin-top: 5px; }

/* Hauts faits */
.ach-title { font-family: "Press Start 2P", monospace; font-size: 10px; color: #c03028; margin: 16px 0 8px; }
.ach-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ach { background: #fdf6e2; border: 2px solid #23242c; border-radius: 5px; padding: 8px; }
.ach b { font-family: "Press Start 2P", monospace; font-size: 7px; display: block; color: #a06830; font-weight: 400; line-height: 1.5; }
.ach span { font-size: 14px; font-family: "VT323", monospace; color: #6a5a3a; display: block; margin-top: 4px; line-height: 1; }
.ach.lock { opacity: .45; }

/* Salle secrète */
.secret-wrap { flex: 1; overflow-y: auto; padding: 14px 18px; background: #2a2438; }
.secret-intro { font-family: "Press Start 2P", monospace; font-size: 9px; color: #f8d020; line-height: 2; text-align: center; margin-bottom: 14px; }
.fact { display: flex; gap: 10px; align-items: flex-start; background: #382f4c; border: 2px solid #f8d020; border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; }
.fact span { color: #f8d020; font-size: 16px; }
.fact p { font-size: 18px; line-height: 1.3; color: #f0ecf8; }

/* RecrutoDex */
.rdx-wrap { flex: 1; overflow-y: auto; padding: 12px 16px; }
.rdx {
  display: flex; gap: 12px; align-items: center;
  background: #fdf6e2; border: 2px solid #23242c; border-radius: 6px;
  padding: 8px 12px; margin-bottom: 8px;
}
.rdx.lock { opacity: .5; }
.rdx.lock .rdx-spr canvas { filter: brightness(0); }
.rdx.shiny { border-color: #e0a010; }
.rdx-spr { width: 32px; height: 32px; flex: 0 0 auto; }
.rdx-spr canvas { image-rendering: pixelated; display: block; }
.rdx b { font-family: "Press Start 2P", monospace; font-size: 10px; display: block; font-weight: 400; }
.rdx span { font-family: "VT323", monospace; font-size: 16px; color: #1d9e75; display: block; margin-top: 4px; line-height: 1; }
.rdx.lock span { color: #8a7a58; }
.rdx-hint { font-family: "VT323", monospace; font-size: 17px; color: #6a5a3a; text-align: center; margin-top: 10px; }

/* Debug Snake */
.snk-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 10px; background: #1a1626; }
.snk-top { display: flex; gap: 30px; font-family: "Press Start 2P", monospace; font-size: 9px; color: #8ae0e8; margin-bottom: 10px; }
.snk-top b { color: #f8e048; font-weight: 400; }
#snake { image-rendering: pixelated; width: 380px; border: 4px solid #63b922; border-radius: 4px; }
#brk { image-rendering: pixelated; width: 380px; border: 4px solid #22d3ee; border-radius: 4px; }
.snk-help { font-family: "VT323", monospace; font-size: 16px; color: #9a92b5; margin-top: 10px; text-align: center; line-height: 1.3; }

/* Projets */
.proj-wrap { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.proj { display: flex; gap: 12px; background: #fdf6e2; border: 3px solid #23242c; border-radius: 6px; padding: 12px; cursor: pointer; }
.proj.sel { outline: 3px solid #c03028; outline-offset: -3px; }
.badge-ico { flex: 0 0 auto; width: 38px; height: 38px; transform: rotate(45deg); margin: 10px 8px 0 6px; border: 3px solid #23242c; }
.badge-ico.b0 { background: linear-gradient(135deg, #f8d020, #e07818); }
.badge-ico.b1 { background: linear-gradient(135deg, #63b8e8, #7f77dd); }
.proj-body b { font-family: "Press Start 2P", monospace; font-size: 11px; }
.badge-name { display: block; font-family: "Press Start 2P", monospace; font-size: 7px; color: #a06830; margin: 5px 0; }
.proj-body p { font-size: 18px; line-height: 1.25; }
.proj-link { display: block; font-family: "Press Start 2P", monospace; font-size: 8px; color: #1d9e75; margin-top: 7px; }
.proj-note { display: block; font-size: 15px; color: #8a7a58; margin-top: 6px; }

/* Parcours */
.tl-wrap { flex: 1; overflow-y: auto; padding: 12px 14px; }
.tl-row { display: flex; gap: 10px; border-left: 4px solid #23242c; padding: 0 0 14px 12px; margin-left: 6px; position: relative; }
.tl-row::before { content: ""; position: absolute; left: -9px; top: 3px; width: 10px; height: 10px; background: #f8d020; border: 3px solid #23242c; border-radius: 50%; }
.tl-left { flex: 0 0 108px; }
.tl-type { display: inline-block; font-family: "Press Start 2P", monospace; font-size: 7px; color: #fff; padding: 4px 6px; border-radius: 3px; }
.tl-type.exp { background: #c03028; } .tl-type.form { background: #378add; }
.tl-years { display: block; font-size: 15px; color: #6a5a3a; margin-top: 5px; line-height: 1.1; }
.tl-body b { font-family: "Press Start 2P", monospace; font-size: 9px; line-height: 1.6; }
.tl-body i { display: block; font-size: 16px; color: #a06830; }
.tl-body p { font-size: 17px; line-height: 1.2; margin-top: 3px; }

/* Contact */
.pc-wrap { flex: 1; padding: 22px 26px; display: flex; flex-direction: column; }
.pc-hello { font-family: "Press Start 2P", monospace; font-size: 11px; line-height: 2; }
.pc-opts { margin-top: 22px; }
.pc-opt { font-family: "Press Start 2P", monospace; font-size: 11px; padding: 11px 8px; cursor: pointer; color: #2a2a34; }
.pc-opt.sel { background: #23242c; color: #f8e048; border-radius: 4px; }
.pc-mail { margin-top: auto; font-size: 19px; color: #a06830; text-align: center; }

/* ============ Effets de combat ============ */
.hitflash { animation: hitfl 0.4s steps(2); }
@keyframes hitfl { 0%, 50% { opacity: 1; } 25%, 75% { opacity: .15; } }
.screen.shake { animation: scrshake 0.32s; }
@keyframes scrshake {
  10% { transform: translate(-3px, 2px); }
  30% { transform: translate(3px, -2px); }
  50% { transform: translate(-2px, -2px); }
  70% { transform: translate(2px, 2px); }
  100% { transform: translate(0, 0); }
}
#b-esprite, #b-asprite { position: relative; }
.spark {
  position: absolute; left: 30px; top: 30px; width: 5px; height: 5px;
  animation: sparkfly 0.7s ease-out forwards; pointer-events: none;
}
@keyframes sparkfly { to { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .hitflash, .screen.shake, .spark { animation: none !important; }
  .spark { display: none; }
}

/* ============ Combat ============ */
#battle { background: linear-gradient(#cfe8f2 0%, #cfe8f2 55%, #a8d888 55.5%, #90c870 100%); z-index: 22; }
.b-enemy { position: absolute; top: 14px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: flex-start; }
.b-ally { position: absolute; bottom: 128px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: flex-end; }
#b-esprite, #b-asprite { image-rendering: pixelated; }
#b-esprite { margin-right: 22px; }
#b-asprite { margin-left: 22px; }
.b-info {
  background: #f8f8f0; border: 3px solid #23242c; border-radius: 5px; padding: 9px 11px;
  font-family: "Press Start 2P", monospace; font-size: 9px; color: #23242c; min-width: 210px;
}
.b-info .b-lv { color: #a06830; margin-left: 8px; }
.hpbar { height: 9px; background: #d8c8a0; border: 2px solid #23242c; border-radius: 3px; margin-top: 7px; }
.hpbar i { display: block; height: 100%; background: #63b922; width: 100%; transition: width .35s; }
.hpbar i.mid { background: #efa927; } .hpbar i.low { background: #e24b4a; }
.b-box {
  position: absolute; left: 8px; right: 8px; bottom: 8px; height: 108px;
  background: #f8f8f0; border: 3px solid #23242c; border-radius: 4px;
  box-shadow: inset 0 0 0 2px #f8f8f0, inset 0 0 0 4px #c03028;
  display: flex;
}
#b-msg { flex: 1; padding: 12px; font-family: "Press Start 2P", monospace; font-size: 10px; line-height: 1.9; color: #23242c; cursor: pointer; }
#b-moves { flex: 0 0 232px; border-left: 3px solid #23242c; display: grid; grid-template-columns: 1fr; align-content: center; padding: 6px 8px; }
.b-move { font-family: "Press Start 2P", monospace; font-size: 8px; padding: 6px 4px 6px 16px; position: relative; cursor: pointer; color: #23242c; }
.b-move.sel::before { content: "▶"; position: absolute; left: 2px; color: #c03028; }

/* ============ Commandes ============ */
.controls { display: flex; justify-content: space-between; align-items: center; margin: 22px 8px 0; }
.dpad { display: grid; grid-template-columns: 38px 38px 38px; grid-template-rows: 38px 38px 38px; }
.dpad button {
  background: #23242c; border: none; color: #6a6c78; font-size: 13px;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.5);
  touch-action: none;
}
.dpad button:active { box-shadow: inset 0 3px 0 rgba(0,0,0,.5); }
.dpad .du { grid-column: 2; grid-row: 1; border-radius: 6px 6px 0 0; }
.dpad .dl { grid-column: 1; grid-row: 2; border-radius: 6px 0 0 6px; }
.dpad .dc { grid-column: 2; grid-row: 2; border-radius: 0; }
.dpad .dr { grid-column: 3; grid-row: 2; border-radius: 0 6px 6px 0; }
.dpad .dd { grid-column: 2; grid-row: 3; border-radius: 0 0 6px 6px; }
.ab { display: flex; gap: 16px; align-items: center; transform: rotate(-18deg); }
.ab button {
  width: 52px; height: 52px; border-radius: 50%;
  background: #8b3d8f; border: 2px solid #5e2762; color: #e8c8ec;
  font-family: "Press Start 2P", monospace; font-size: 13px;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.35);
  touch-action: manipulation;
}
.ab button:active { box-shadow: inset 0 4px 0 rgba(0,0,0,.35); }
.ab #btn-a { margin-top: -20px; }
.ss-row { display: flex; justify-content: center; gap: 26px; margin-top: 20px; }
.ss-row button {
  background: #23242c; color: #8a8c98; border: 2px solid #0f1015; border-radius: 12px;
  font-family: "Press Start 2P", monospace; font-size: 7px; padding: 7px 16px;
  transform: rotate(-18deg);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.6);
  touch-action: manipulation;
}
.speaker { display: flex; gap: 7px; justify-content: flex-end; margin: 10px 26px 0 0; transform: rotate(-18deg); }
.speaker i { width: 5px; height: 34px; background: #0d8791; border-radius: 3px; box-shadow: inset 0 2px 3px rgba(0,0,0,.4); }

/* ============ Sous la console ============ */
#under { text-align: center; padding: 16px 12px 34px; }
#hint { font-size: 18px; color: #7a7e90; line-height: 1.45; max-width: 560px; margin: 0 auto; }
#hint b { color: #b8bcd0; font-weight: 400; }
.under-btns { margin-top: 12px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.under-btns button {
  background: #23242c; color: #c8ccd8; border: 2px solid #3a3c48; border-radius: 6px;
  font-family: "Press Start 2P", monospace; font-size: 8px; padding: 9px 13px;
}
.under-btns button:hover { border-color: #17a9b4; color: #fff; }

/* ============ Mode recruteur / CV ============ */
#cv {
  background: #0d1017;
  background-image: radial-gradient(circle at 15% 0%, rgba(34, 211, 238, .07), transparent 45%), radial-gradient(circle at 90% 30%, rgba(127, 119, 221, .06), transparent 40%);
  color: #e6e9f0; min-height: 100vh;
  font-family: "Inter", system-ui, sans-serif;
}
#cv .cv-in { max-width: 860px; margin: 0 auto; padding: 26px 22px 60px; }
.cv-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 44px; }
#cv-back {
  background: #12a0ab; color: #04262a; border: none; border-radius: 8px;
  font-family: "Press Start 2P", monospace; font-size: 9px; padding: 12px 16px;
  box-shadow: 0 4px 0 #076d76; transition: transform .1s;
}
#cv-back:hover { transform: translateY(-1px); }
#cv-back:active { transform: translateY(2px); box-shadow: 0 2px 0 #076d76; }
body.nojs #cv-back { display: none; }
.cv-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #4ade80;
  border: 1px solid rgba(74, 222, 128, .35); border-radius: 999px; padding: 7px 14px;
}
.cv-status i { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; }

.cv-hero { margin-bottom: 22px; }
.cv-eyebrow { font-family: "VT323", monospace; font-size: 19px; color: #22d3ee; letter-spacing: .04em; margin-bottom: 10px; }
#cv h1 { font-size: clamp(38px, 7vw, 58px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin-bottom: 10px; }
.cv-role { font-size: 18px; color: #9aa3b5; }
.cv-role strong { color: #e6e9f0; font-weight: 600; }
.cv-pitch { font-size: 17px; color: #c3cad8; margin-top: 14px; max-width: 560px; }
.cv-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.cv-btn {
  display: inline-block; text-decoration: none; font-weight: 600; font-size: 15px;
  color: #e6e9f0; background: #161b26; border: 1px solid #2a3346; border-radius: 10px;
  padding: 12px 20px; transition: border-color .15s, transform .1s;
}
.cv-btn:hover { border-color: #22d3ee; transform: translateY(-1px); }
.cv-btn.primary { background: #22d3ee; color: #06222a; border-color: #22d3ee; }
.cv-btn.small { padding: 9px 14px; font-size: 14px; margin-top: 14px; }

#cv h2 {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 15px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #e6e9f0;
  margin: 52px 0 20px; padding-bottom: 12px; border-bottom: 1px solid #232b3b;
}
#cv h2 span { font-family: "VT323", monospace; font-size: 21px; color: #22d3ee; letter-spacing: 0; }
.cv-lead { font-size: 17px; line-height: 1.75; color: #c3cad8; max-width: 720px; }

.cv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.cv-grid.three { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cv-card {
  background: #141926; border: 1px solid #232b3b; border-radius: 14px; padding: 20px;
  transition: border-color .15s;
}
.cv-card:hover { border-color: #33405c; }
.cv-card h3 { font-size: 16px; font-weight: 600; color: #22d3ee; margin-bottom: 12px; }
.cv-card p { font-size: 15px; line-height: 1.6; color: #b3bccc; margin-bottom: 4px; }
.cv-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.cv-chips span {
  font-family: "VT323", monospace; font-size: 17px; color: #7fe3f2;
  background: rgba(34, 211, 238, .07); border: 1px solid rgba(34, 211, 238, .22);
  border-radius: 7px; padding: 3px 11px;
}

.cv-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.cv-colname { font-family: "VT323", monospace; font-size: 21px; color: #7f77dd; margin-bottom: 16px; letter-spacing: .04em; }
#cv .cv-item {
  border-left: 2px solid #232b3b; padding: 2px 0 4px 16px; margin-bottom: 20px; position: relative;
}
#cv .cv-item::before {
  content: ""; position: absolute; left: -5px; top: 8px;
  width: 8px; height: 8px; border-radius: 50%; background: #22d3ee;
}
#cv .cv-item .when { display: block; font-family: "VT323", monospace; font-size: 17px; color: #8b93a7; margin-bottom: 3px; }
#cv .cv-item b { font-size: 15.5px; font-weight: 600; line-height: 1.4; }
#cv .cv-item p { font-size: 14.5px; line-height: 1.55; color: #9aa3b5; margin-top: 5px; }

.cv-foot {
  margin-top: 64px; padding-top: 22px; border-top: 1px solid #232b3b;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 14px; color: #7b8397;
}
.cv-foot a { color: #22d3ee; text-decoration: none; }
.cv-foot a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .cv-cols { grid-template-columns: 1fr; }
  .cv-topbar { flex-wrap: wrap; gap: 10px; }
}

/* ============ Couleurs de coque ============ */
.shell-picker { margin-top: 14px; display: flex; gap: 10px; justify-content: center; }
.shell-dot {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid #3a3c48; cursor: pointer;
  transition: transform .1s, border-color .1s;
}
.shell-dot:hover { transform: scale(1.15); }
.shell-dot.sel { border-color: #fff; box-shadow: 0 0 0 2px #17a9b4; }
body[data-shell="violet"] .gbc { background: linear-gradient(160deg, #8a6fd4 0%, #7a5fc4 55%, #64489e 100%); border-color: #4c3a85; }
body[data-shell="violet"] .speaker i { background: #5a4499; }
body[data-shell="berry"] .gbc { background: linear-gradient(160deg, #d95287 0%, #c94277 55%, #a52e5c 100%); border-color: #8a2a4e; }
body[data-shell="berry"] .speaker i { background: #a83562; }
body[data-shell="dandelion"] .gbc { background: linear-gradient(160deg, #f2c85e 0%, #e8b830 55%, #cc9a1a 100%); border-color: #a87818; }
body[data-shell="dandelion"] .speaker i { background: #c69a20; }
body[data-shell="kiwi"] .gbc { background: linear-gradient(160deg, #9fce4e 0%, #8fc23a 55%, #74a426 100%); border-color: #5e7e18; }
body[data-shell="kiwi"] .speaker i { background: #79a52c; }

/* ============ Formulaire de contact (CV) ============ */
.cv-form { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.cv-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cv-form label { display: flex; flex-direction: column; gap: 7px; font-size: 14px; font-weight: 600; color: #9aa3b5; }
.cv-form input, .cv-form textarea {
  background: #141926; border: 1px solid #2a3346; border-radius: 10px;
  color: #e6e9f0; font-family: "Inter", system-ui, sans-serif; font-size: 15px;
  padding: 12px 14px; outline: none; transition: border-color .15s;
}
.cv-form input:focus, .cv-form textarea:focus { border-color: #22d3ee; }
.cv-form textarea { resize: vertical; }
.cv-form .cv-btn { align-self: flex-start; cursor: pointer; font-family: inherit; }

/* ============ Impression (CV PDF) ============ */
@media print {
  body { background: #fff; }
  #stage, #under { display: none !important; }
  #cv { display: block !important; background: #fff !important; background-image: none !important; color: #111 !important; min-height: 0; }
  .cv-topbar, .cv-actions, .cv-form, #cv h2:last-of-type { display: none !important; }
  #cv h1, .cv-role strong, #cv h2, .cv-card h3, #cv .cv-item b { color: #111 !important; }
  .cv-eyebrow, #cv h2 span, .cv-colname { color: #555 !important; }
  .cv-role, .cv-pitch, .cv-lead, .cv-card p, #cv .cv-item p, #cv .cv-item .when, .cv-foot { color: #333 !important; }
  .cv-card { background: #fff !important; border: 1px solid #bbb !important; break-inside: avoid; }
  .cv-chips span { background: #eee !important; color: #222 !important; border-color: #ccc !important; }
  #cv .cv-item { border-left-color: #999 !important; }
  #cv .cv-item::before { background: #555 !important; }
  #cv h2 { border-bottom-color: #999 !important; margin-top: 24px; }
  .cv-status { display: none !important; }
  .cv-foot a { color: #333 !important; }
  #cv .cv-in { padding: 0; max-width: none; }
}

/* ============ Langues ============ */
body[data-lang="fr"] .cv-l[data-lang="en"] { display: none; }
body[data-lang="en"] .cv-l[data-lang="fr"] { display: none; }
body:not([data-lang]) .cv-l[data-lang="en"] { display: none; }

/* ============ Accessibilité : animations réduites ============ */
@media (prefers-reduced-motion: reduce) {
  .blink, #dlg-arrow, #title-menu .t-opt.sel::before, .led,
  #boot .boot-logo, #loc, #toast.pop, #fade.flash {
    animation: none !important;
  }
  #fade { transition: none; }
  .cv-btn, #cv-back, .shell-dot { transition: none; }
  .cv-btn:hover, #cv-back:hover, .shell-dot:hover { transform: none; }
  #credits-roll { animation: none; top: 0; position: relative; padding: 20px 0 60px; }
  #credits { overflow-y: auto; }
}

/* ============ Responsive ============ */
@media (max-width: 620px) {
  #stage { padding-top: 6px; }
  .cv-form-row { grid-template-columns: 1fr; }
}