/* LumiPC - noir OLED + verre neon. Couleurs du theme : --a1 / --a2 / --gl (intensite du neon) */
:root {
  --a1: #22d3ee; --a2: #34d399; --gl: .6;
  --bg: #000; --card: color-mix(in srgb, var(--cb, #0d0f14) calc(var(--op, 65) * 1%), transparent); --line: rgba(255,255,255,.09);
  --txt: #f4f3fb; --mut: #a3a7b5; --red: #f43f5e; --hot: #f87171;
  --a1s: color-mix(in srgb, var(--a1) 16%, transparent);
  --a1m: color-mix(in srgb, var(--a1) 38%, transparent);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --head: "Space Grotesk", "Inter", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); }
body { margin: 0; background: transparent; color: var(--txt); font: 15px/1.4 var(--font); max-width: 560px; margin-inline: auto; overscroll-behavior-y: contain; }
.hidden { display: none !important; }
.muted { color: var(--mut); } .small { font-size: 12.5px; }
.grow { flex: 1; min-width: 0; }
.mt { margin-top: 12px; }
.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; min-width: 0; }
.center { text-align: center; }
svg.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- structure ---------- */
.page { display: none; padding: calc(14px + env(safe-area-inset-top)) 16px 0; }
.page.sel { display: block; }
.spacer { height: calc(120px + env(safe-area-inset-bottom)); }
body.has-mini .spacer { height: calc(184px + env(safe-area-inset-bottom)); }
header.top { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; min-height: 40px; }
.title { font: 700 22px var(--head); letter-spacing: -.01em; }
.top .sub { font-size: 12px; color: var(--mut); }
.logo { width: 34px; height: 34px; border-radius: 10px; flex: none; background: url(/icon-192.png) center / cover; box-shadow: 0 0 18px color-mix(in srgb, var(--a1) calc(var(--gl) * 70%), transparent); }
.logo.big { width: 72px; height: 72px; border-radius: 22px; margin: 0 auto 14px; }
.live { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mut); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: #555; }
.live.on { color: var(--a2); } .live.on i { background: var(--a2); box-shadow: 0 0 8px var(--a2); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 14px; margin-bottom: 10px; backdrop-filter: blur(var(--blur, 14px)); }
.lab { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--mut); margin-bottom: 10px; }
.lab b { color: var(--txt); font-weight: 600; margin-left: auto; }
.lab .btn, .lab .switch { margin-left: auto; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.grid2 > .card { margin-bottom: 0; }
h3.sect { font: 600 13px var(--font); text-transform: uppercase; letter-spacing: .08em; color: var(--mut); margin: 22px 4px 10px; }

/* ---------- boutons ---------- */
button { font: inherit; color: inherit; cursor: pointer; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--txt); font-weight: 600; font-size: 14px; }
.btn:active, .ib:active, .chips button:active { transform: scale(.97); }
.btn.wide { width: 100%; }
.btn.sm { min-height: 36px; padding: 0 12px; font-size: 12.5px; border-radius: 11px; }
.btn.acc { background: var(--a1); border-color: var(--a1); color: #000; }
.btn.acc-ghost { background: var(--a1s); border-color: var(--a1m); color: var(--a1); }
.btn.ghost { background: transparent; }
.btn.danger { background: rgba(244,63,94,.12); border-color: rgba(244,63,94,.4); color: #fda4af; }
.btn.tall { flex-direction: column; gap: 2px; min-height: 84px; }
.btn.tall small { font-weight: 400; color: var(--mut); font-size: 11.5px; }
.btn.tall svg.i { color: var(--a1); }
.ib { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: none; border-radius: 50%; background: transparent; color: var(--txt); padding: 0; }
.ib.big { width: 56px; height: 56px; }
.ib.acc { background: var(--a1); color: #000; }
.ib.sm { min-width: 40px; min-height: 40px; }
.switch { position: relative; width: 54px; height: 32px; border-radius: 16px; border: none; background: rgba(255,255,255,.14); padding: 0; flex: none; transition: background .2s; }
.switch i { position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: left .2s; }
.switch.on { background: var(--a1); box-shadow: 0 0 14px color-mix(in srgb, var(--a1) calc(var(--gl) * 60%), transparent); }
.switch.on i { left: 25px; }
.chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.chips button { min-height: 42px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.05); font-size: 13px; font-weight: 600; padding: 0 4px; }
.chips button.sel { background: var(--a1s); border-color: var(--a1m); color: var(--a1); box-shadow: 0 0 12px color-mix(in srgb, var(--a1) calc(var(--gl) * 30%), transparent); }
input, textarea { font: inherit; color: var(--txt); background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 12px; padding: 12px; width: 100%; margin-bottom: 8px; outline: none; }
input:focus, textarea:focus { border-color: var(--a1m); }
.field { display: flex; gap: 8px; margin-bottom: 8px; } .field input { margin: 0; }
.check { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; font-size: 14px; } .check input { width: 20px; height: 20px; margin: 0; accent-color: var(--a1); }
.filebtn { cursor: pointer; }
.pick { font-size: 12.5px; color: var(--mut); gap: 6px; } .pick input { height: 46px; padding: 4px; }

/* curseurs */
.rng { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; border: none; padding: 0; margin: 0; }
.rng::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--a1) var(--p, 50%), rgba(255,255,255,.1) var(--p, 50%)); }
.rng::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--a1) 35%, transparent); }
.rng::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); }
.rng::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--a1); }
.rng::-moz-range-thumb { width: 22px; height: 22px; border: none; border-radius: 50%; background: #fff; }

.bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--a1); transition: width .4s; }
.bar i.warm { background: linear-gradient(90deg, #3b82f6, #f59e0b, #ef4444); background-size: 300px 100%; }
.bar.thin { height: 5px; margin-top: 10px; }
.stat { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 14px; }
.stat span { color: var(--mut); } .stat b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }

/* ---------- accueil ---------- */
.banner { border-radius: 20px; padding: 12px 14px; margin-bottom: 10px; }
.banner .bi { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.banner small { font-size: 12px; color: #c9c6d9; }
.banner b { font: 700 15.5px var(--head); }
.banner.red { background: linear-gradient(135deg, rgba(244,63,94,.16), color-mix(in srgb, var(--a1) 10%, transparent)); border: 1px solid rgba(244,63,94,.38); }
.banner.red .bi { background: rgba(244,63,94,.18); color: #fda4af; }
.banner.red .bar i { background: linear-gradient(90deg, #fb7185, var(--a1)); }
.banner.hot { background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.4); animation: pulse 1.6s infinite; }
.banner.hot .bi { color: var(--hot); } .banner.hot b { color: #fca5a5; }
@keyframes pulse { 50% { box-shadow: 0 0 22px rgba(248,113,113,.35); } }

.scene-card { padding: 0; overflow: hidden; }
.scene-wrap { position: relative; }
.scene svg { display: block; width: 100%; height: auto; }
#sceneHome svg { aspect-ratio: 358 / 205; }
.scene-card .pad { padding: 12px 14px; }
.scene-card .pad b { font-size: 15px; white-space: nowrap; }
.clock-badge { position: absolute; left: 24%; top: 10px; display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 10px; background: rgba(0,0,0,.72); border: 1px solid rgba(244,63,94,.5); color: #fda4af; font: 600 11px var(--font); }
.clock-badge svg.i { width: 13px; height: 13px; }
.legend { padding: 0 14px 12px; font-size: 12px; color: var(--mut); }
.tile { display: flex; flex-direction: column; gap: 8px; }
.tile .lab { margin: 0; } .tile .lab svg.i { width: 15px; height: 15px; }
.tile .lab span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.num { font: 700 26px var(--head); }

.favgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 6px; }
.fav { display: flex; flex-direction: column; align-items: center; gap: 6px; border: none; background: none; padding: 0; font-size: 11.5px; font-weight: 500; text-align: center; min-width: 0; }
.fav span.t { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font: 700 18px var(--head); color: #fff; flex: none; }
.ic.fold { background: color-mix(in srgb, var(--a1) 22%, #0b1418); color: var(--a1); }
.ic.sm { width: 38px; height: 38px; border-radius: 11px; font-size: 15px; }

/* glisser pour confirmer */
.slide { position: relative; height: 58px; border-radius: 29px; border: 1px solid var(--a1m); background: var(--a1s); color: var(--a1); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; margin-bottom: 10px; touch-action: none; user-select: none; -webkit-user-select: none; overflow: hidden; }
.slide.red { border-color: rgba(244,63,94,.35); background: rgba(244,63,94,.08); color: #fda4af; }
.slide .knob { position: absolute; left: 4px; top: 4px; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--a1); color: #000; box-shadow: 0 0 18px color-mix(in srgb, var(--a1) calc(var(--gl) * 80%), transparent); transition: transform .25s; }
.slide.red .knob { background: var(--red); color: #fff; box-shadow: 0 0 18px rgba(244,63,94,calc(var(--gl) * .8)); }
.slide.drag .knob { transition: none; }
.slide .txt { padding-left: 40px; transition: opacity .2s; }
.slide.done { opacity: .55; pointer-events: none; }

/* ---------- barre en cours + onglets ---------- */
.mini { position: fixed; left: 50%; transform: translateX(-50%); width: calc(min(560px, 100vw) - 24px); bottom: calc(12px + var(--navh, 75px) + 8px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 18px; background: rgba(20,22,28,.94); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 8px 24px rgba(0,0,0,.5); z-index: 9; backdrop-filter: blur(14px); }
.mini b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini small { font-size: 11.5px; color: var(--a2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini .ib { background: rgba(255,255,255,.08); width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
.cover { width: 64px; height: 64px; border-radius: 12px; flex: none; background: linear-gradient(135deg, var(--a1), var(--a2)); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.85); }
.cover.sm { width: 38px; height: 38px; border-radius: 9px; }
.cover.jf { background: linear-gradient(160deg, #7c3aed, #0ea5e9); }
.tabs { position: fixed; left: 50%; transform: translateX(-50%); width: calc(min(560px, 100vw) - 24px); bottom: calc(12px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 8px; border-radius: 22px; background: rgba(12,14,18,.85); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.35); z-index: 10; backdrop-filter: blur(14px); }
.tabs button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 0; min-height: 48px; border: none; border-radius: 14px; background: transparent; color: var(--mut); font-size: 10.5px; font-weight: 600; }
.tabs button.sel { background: var(--a1s); color: var(--a1); }
.toast { position: fixed; left: 16px; right: 16px; top: calc(10px + env(safe-area-inset-top)); z-index: 50; padding: 12px 14px; border-radius: 14px; background: #3a1b22; border: 1px solid #6b2a38; color: #ffc9d3; font-size: 14px; }
.toast.ok { background: #0f2a22; border-color: #1f5c48; color: #a7f3d0; }

/* ---------- lumieres ---------- */
.wheel-row { display: flex; gap: 12px; align-items: center; }
.wheel-box { position: relative; flex: 1; max-width: 240px; aspect-ratio: 1; touch-action: none; }
.wheel-box canvas { width: 100%; height: 100%; border-radius: 50%; display: block; }
#wheelDot { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 14px rgba(0,0,0,.5); pointer-events: none; }
.swatch-col { display: grid; grid-template-columns: repeat(2, 38px); gap: 10px; }
.sw { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); padding: 0; }
.sw.sel { outline: 3px solid #fff; outline-offset: 2px; }

/* ---------- son ---------- */
.np { display: flex; gap: 12px; align-items: center; }
.np b { font-size: 16px; } .np .src { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--a2); }
.media { display: flex; justify-content: center; align-items: center; gap: 26px; margin-top: 10px; }
.list .it { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.06); min-height: 52px; }
.list .it:last-child { border: none; }
.list .it .n { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.list .it .n b { font-weight: 500; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .it .n small { font-size: 12px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .it.sel b { color: var(--a1); }
.list.card { padding: 4px 14px; }
.list .it.click { cursor: pointer; }
.star { color: #5b6070; } .star.on { color: #fbbf24; } .star.on svg.i { fill: currentColor; }
.ib.x { background: rgba(248,113,113,.12); color: #f87171; border-radius: 12px; }
.ib.dl { background: var(--a1s); color: var(--a1); border-radius: 12px; }
.warn { color: #fbbf24 !important; }

.help { margin-top: 10px; } .help summary { color: var(--a1); font-size: 13px; cursor: pointer; }
.help ol { padding-left: 18px; } code#spUris { display: block; white-space: pre-wrap; font-size: 11.5px; color: var(--txt); background: rgba(255,255,255,.06); padding: 8px; border-radius: 8px; overflow-wrap: anywhere; }
.sheet-box .list { max-height: 36vh; overflow: auto; }
/* ---------- applis ---------- */
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.05); margin-bottom: 10px; }
.seg button { min-height: 40px; border-radius: 10px; border: none; background: transparent; color: var(--mut); font-weight: 600; font-size: 13px; }
.seg button.sel { background: var(--a1s); color: var(--a1); }
.segp { display: none; } .segp.sel { display: block; }
.search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--line); margin-bottom: 10px; color: var(--mut); }
.search input { border: none; background: none; margin: 0; padding: 12px 0; }
.crumbs { display: flex; align-items: center; gap: 6px; } .crumbs b { font: 700 18px var(--head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.path { display: block; padding-left: 46px; overflow-wrap: anywhere; }

/* ---------- infos ---------- */
.hero { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px; border-radius: 20px; margin-bottom: 10px; border: 1px solid var(--a1m); background: linear-gradient(135deg, var(--a1s), color-mix(in srgb, var(--a2) 10%, transparent)); color: var(--txt); box-shadow: 0 0 24px color-mix(in srgb, var(--a1) calc(var(--gl) * 18%), transparent); }
.hero > svg.i:first-child { width: 30px; height: 30px; color: var(--a1); }
.hero b { font: 700 16px var(--head); } .hero small { color: var(--mut); font-size: 12.5px; }
.themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.th { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.04); font-size: 12px; font-weight: 600; }
.th i { width: 34px; height: 34px; border-radius: 50%; }
.th.sel { border-color: var(--a1m); background: var(--a1s); color: var(--a1); }

/* ---------- alim ---------- */
.ring { position: relative; width: 170px; height: 170px; margin: 4px auto 6px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .rbg { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 9; }
.ring .rfg { fill: none; stroke: var(--red); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset .6s; filter: drop-shadow(0 0 6px rgba(244,63,94,calc(var(--gl) * .9))); }
.ring-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-txt b { font: 700 30px var(--head); } .ring-txt small { color: var(--mut); font-size: 12px; }

/* ---------- PC eteint ---------- */
#offScreen { position: relative; text-align: center; padding: calc(70px + env(safe-area-inset-top)) 24px 40px; min-height: 100vh; }
#offScreen h1 { font: 700 26px var(--head); margin: 0 0 6px; }
.power-big { width: 150px; height: 150px; border-radius: 50%; margin: 36px auto 14px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--a1m); background: radial-gradient(circle, var(--a1s), transparent 70%); color: var(--a1); box-shadow: 0 0 40px color-mix(in srgb, var(--a1) calc(var(--gl) * 45%), transparent); }
.power-big svg.i { width: 62px; height: 62px; stroke-width: 2; }
.power-big:active { transform: scale(.96); }
.power-big.wait { animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 70px color-mix(in srgb, var(--a1) 60%, transparent); transform: scale(1.03); } }
.boot-lab { display: block; font: 700 19px var(--head); margin-bottom: 10px; }
.corner-claude { position: absolute; right: 18px; top: calc(18px + env(safe-area-inset-top)); width: 46px; height: 46px; border-radius: 15px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: #e8a27c; display: flex; align-items: center; justify-content: center; }
.corner-claude.sm { position: static; width: 38px; height: 38px; border-radius: 12px; margin-left: 4px; }
.corner-claude.sm svg.i { width: 19px; height: 19px; }

/* ---------- PIN ---------- */
#pinScreen { text-align: center; padding: 80px 24px; }
#pinScreen h1 { font: 700 26px var(--head); margin: 0 0 6px; }
#pinScreen input { font-size: 28px; letter-spacing: .3em; text-align: center; max-width: 240px; margin: 18px auto 12px; display: block; }
#pinScreen .btn { max-width: 240px; }
.err-text { color: #fda4af; }

/* ---------- fenetre de confirmation ---------- */
.sheet { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.6); display: flex; align-items: flex-end; justify-content: center; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
.sheet-box { width: 100%; max-width: 520px; background: #14161c; border: 1px solid var(--line); border-radius: 22px; padding: 18px; }
.sheet-box b { font: 700 17px var(--head); } .sheet-box .grid2 { margin: 6px 0 0; }

/* ---------- ecran du PC ---------- */
.remote { position: fixed; inset: 0; z-index: 40; background: #000; display: flex; flex-direction: column; padding: calc(10px + env(safe-area-inset-top)) 12px calc(10px + env(safe-area-inset-bottom)); gap: 8px; }
.rhead { display: flex; align-items: center; gap: 10px; } .rhead b { font: 700 19px var(--head); }
.fps { margin-left: auto; font-size: 12px; color: var(--a2); }
.rview { position: relative; overflow: hidden; border-radius: 12px; background: #0b0d12; touch-action: none; flex: none; }
.rzoom { transform-origin: 0 0; will-change: transform; }
.rview img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; pointer-events: none; min-height: 120px; }
#rtap { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid var(--a1); opacity: 0; pointer-events: none; transition: opacity .35s; }
#rtap.show { opacity: .9; transition: none; }
.rhint { text-align: center; font-size: 12px; }
.rbar { display: flex; gap: 6px; flex-wrap: wrap; }
.rbar .btn { flex: 1; white-space: nowrap; }
.rbar .btn.on { background: var(--a1s); border-color: var(--a1m); color: var(--a1); }
.rbar .btn.acc.off { background: rgba(255,255,255,.06); border-color: var(--line); color: var(--txt); }
.rkeys { display: flex; flex-wrap: wrap; gap: 6px; }
.rkeys button { min-height: 36px; padding: 0 10px; border-radius: 9px; border: none; background: var(--a1s); color: var(--a1); font-size: 12.5px; font-weight: 600; }
#rtype { position: fixed; left: 0; bottom: 0; width: 2px; height: 2px; opacity: 0; padding: 0; border: 0; margin: 0; }
.only-land { display: none !important; }
@media (orientation: landscape) and (max-height: 600px) {
  .remote { padding: 0; gap: 0; }
  .remote .rhead, .remote .rhint { display: none; }
  .rview { position: absolute; inset: 0; border-radius: 0; display: flex; align-items: center; justify-content: center; }
  .rzoom { height: 100%; }
  .rview img { height: 100%; width: auto; max-width: 100vw; object-fit: contain; }
  .rbar { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); flex-wrap: nowrap; padding: 6px; border-radius: 16px; background: rgba(12,14,18,.82); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(12px); transition: opacity .3s; z-index: 3; }
  .rbar .btn { flex: none; }
  .rkeys { position: absolute; left: 8px; right: 8px; top: 8px; justify-content: center; transition: opacity .3s; z-index: 3; }
  .rkeys button { background: rgba(12,14,18,.82); }
  .remote.idle .rbar, .remote.idle .rkeys { opacity: 0; pointer-events: none; }
  .remote:not(.kbd) .rkeys { display: none; }
  .remote.kbd .rbar { bottom: auto; top: 56px; }
  .only-land { display: inline-flex !important; }
  .fps { position: absolute; right: 12px; top: 10px; z-index: 2; background: rgba(0,0,0,.6); padding: 3px 8px; border-radius: 8px; }
}

/* ---------- accueil : grille rangeable ---------- */
.hgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.hgrid > * { grid-column: span 2; margin-bottom: 0; position: relative; }
.hgrid > .half { grid-column: span 1; }
.hgrid > .half.stretch { grid-column: span 2; }
.hgrid > .half:not(.stretch) .favgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hgrid > .half:not(.stretch).slide { font-size: 11.5px; line-height: 1.2; }
.hgrid > .half:not(.stretch).slide .txt { padding: 0 8px 0 56px; }
.hgrid > .half:not(.stretch) .pad { padding: 10px; gap: 6px; }
.hgrid > .half:not(.stretch) .pad .muted { display: none; }
.hgrid > .half:not(.stretch) .pad b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.lockbtn { color: var(--mut); }
.lockbtn.open { color: var(--a1); border-color: var(--a1m); background: var(--a1s); box-shadow: 0 0 12px color-mix(in srgb, var(--a1) calc(var(--gl) * 40%), transparent); }
.arr-ov { position: absolute; inset: 0; z-index: 5; border-radius: inherit; border: 1.5px dashed var(--a1m); background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.arr-ov .nm { font: 600 13px var(--font); color: var(--txt); padding: 0 8px; text-align: center; }
.arr-ov .tools { position: absolute; right: 6px; top: 6px; display: flex; gap: 6px; }
.arr-ov .tools button { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: #14161c; color: var(--txt); display: flex; align-items: center; justify-content: center; padding: 0; }
.arr-ov .tools svg.i { width: 17px; height: 17px; }
.hgrid.arr > * { min-height: 58px; }
.hgrid > .dragging { z-index: 20; opacity: .92; box-shadow: 0 12px 30px rgba(0,0,0,.6), 0 0 0 1.5px var(--a1); }
.hgrid > .dragging .arr-ov { cursor: grabbing; }
#hiddenList { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- bus ---------- */
.bln { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 20px; padding: 0 6px; border-radius: 6px; font: 700 11.5px var(--font); background: #C19FCB; color: #1D1D1B; flex: none; }
.bdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #5b6070; flex: none; }
.bdot.on { background: var(--a2); box-shadow: 0 0 6px var(--a2); }
.tile.bus { cursor: pointer; }
.bnext { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.bnext .p { font-size: 13px; color: var(--mut); white-space: nowrap; }
.bnext .p.first { font: 700 26px var(--head); color: var(--txt); flex-basis: 100%; display: flex; align-items: center; gap: 8px; }
.bnext .p.msg { font: 600 15px var(--font); color: var(--mut); flex-basis: 100%; white-space: normal; }
.hgrid > .wide .bnext { gap: 4px 22px; }
.hgrid > .wide .bnext .p { font: 700 20px var(--head); color: var(--txt); flex-basis: auto; display: flex; align-items: center; gap: 6px; }
.hgrid > .wide .bnext .p.first { font-size: 26px; }
#bStop { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sheet-box .bsdir { font-weight: 600; font-size: 14.5px; }
#bsRows .it { min-height: 46px; }
#bsRows .it .t { font: 700 19px var(--head); min-width: 86px; }
#bsRows .it .h { flex: 1; text-align: right; color: var(--mut); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bsStops { max-height: 40vh; overflow: auto; margin-top: 6px; }
#bsStops .it { min-height: 44px; }
#busSheet .sheet-box { max-height: 88vh; overflow: auto; }
.tile.bus .lab { flex-wrap: wrap; row-gap: 4px; }
.tile.bus .lab #bDir { flex-basis: 100%; white-space: normal; line-height: 1.25; }
.hgrid > .wide.bus .lab #bDir { flex-basis: auto; flex: 1; }

/* ---------- bulle de volume (touches du telephone) ---------- */
.volb { position: fixed; top: calc(14px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 70; width: min(320px, calc(100vw - 32px)); display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; background: rgba(12,14,18,.94); border: 1px solid var(--a1m); box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 18px color-mix(in srgb, var(--a1) calc(var(--gl) * 30%), transparent); pointer-events: none; }
.volb svg.i { color: var(--a1); }
.volb b { font-weight: 600; font-size: 13.5px; }
.volb #vbName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 6px; }
.volb #vbNum { min-width: 46px; text-align: right; font: 700 15px var(--head); }
.volb .bar i { transition: width .12s; }

/* ---------- rangement des onglets : cellules, poignee ---------- */
.hcell { position: relative; }
.hcell > .card, .hcell > .hero, .hcell > .btn, .hcell > .slide, .hcell > .grid2 { margin-bottom: 0; }
.hcell > .hero, .hcell > .btn.wide { width: 100%; }
.hcell > .arr-ov { border-radius: 20px; }
.arr-ov { touch-action: pan-y; cursor: default; }
.arr-ov .nm { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 14px; border: 1px solid var(--a1m); background: rgba(20,22,28,.92); touch-action: none; cursor: grab; max-width: calc(100% - 100px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arr-ov .nm svg.i { width: 18px; height: 18px; stroke-width: 3; color: var(--a1); }
.hgrid.arr > .hcell { min-height: 64px; }
.hidbox { margin-bottom: 10px; }
.hidlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hgrid > .hcell.half:not(.stretch) .card, .hgrid > .hcell.half:not(.stretch) .hero { min-width: 0; }
.arr-ov { background: rgba(0,0,0,.72); }

/* ---------- carte repliable (Couleur) ---------- */
.lab.fold { width: 100%; background: none; border: none; padding: 0; font: inherit; color: var(--mut); cursor: pointer; text-align: left; min-height: 30px; }
.lab.fold .cdot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); display: none; flex: none; }
.lab.fold .foldic { margin-left: auto; transition: transform .2s; transform: rotate(90deg); }
.card.collapsed > .lab.fold { margin-bottom: 0; }
.card.collapsed > .lab.fold .cdot { display: inline-block; }
.card.collapsed > .lab.fold .foldic { transform: rotate(0); }
.card.collapsed > :not(.fold) { display: none; }

/* ---------- boosters Pokemon ---------- */
#pkTile { cursor: pointer; }
#pkTile .btn { margin-top: 2px; }
.pkchips { grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); }
.pkrow input { flex: 1; min-width: 0; }

/* ---------- menus repliables (toutes les cartes) ---------- */
.cdot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); display: none; flex: none; }
.lab.fold { cursor: pointer; user-select: none; -webkit-user-select: none; min-height: 30px; width: auto; padding: 0; background: none; border: none; text-align: left; }
.lab.fold .foldic { margin-left: 10px; transition: transform .2s; transform: rotate(90deg); flex: none; }
.lab.fold .foldic.solo { margin-left: auto; }
.lab.fold .foldic svg.i { width: 16px; height: 16px; }
.card.collapsed > .lab.fold { margin-bottom: 0; }
.card.collapsed > .lab.fold .foldic { transform: rotate(0); }
.card.collapsed > .lab.fold .cdot { display: inline-block; }
.card.collapsed > :not(.fold) { display: none; }
.sublab { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); }
.sublab:first-of-type { margin-top: 4px; } .sublab .btn { margin-left: auto; }
h3.sect:first-of-type { margin-top: 6px; }

/* ---------- onglet Lumieres : le PC cliquable ---------- */
#sceneLights { cursor: pointer; }
.scene-hint { position: absolute; left: 10px; bottom: 8px; display: flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 9px; font-size: 11px; color: var(--mut); background: rgba(0,0,0,.6); border: 1px solid var(--line); pointer-events: none; }
.scene-hint svg.i { width: 13px; height: 13px; }

/* ---------- fiche des composants ---------- */
.hwbox { max-height: 88vh; overflow: auto; }
.hwbox .hwcard { margin: 10px 0 0; }
.hwi { padding: 9px 0; border-top: 1px solid rgba(255,255,255,.06); }
.hwi:first-of-type { border-top: none; }
.hwn { font-weight: 600; font-size: 14px; }
.hwd { font-size: 13px; margin-top: 2px; }
.hwl { font-size: 12px; color: var(--mut); margin-top: 3px; }
.hww { font-size: 12.5px; color: #fbbf24; margin-top: 4px; }

/* ---------- accueil : tout tient sur un ecran, sans defilement ---------- */
#p-home header.top { margin: 0 0 8px; min-height: 36px; }
#p-home .hgrid { gap: 8px; margin-bottom: 0; }
#p-home .card { padding: 12px; }
#p-home .tile .num { font-size: 24px; }
#p-home .tile .lab { font-size: 12px; }
#p-home .slide { height: 52px; margin-bottom: 0; }
#p-home .slide .knob { width: 44px; height: 44px; }
#p-home .favgrid { gap: 8px 4px; }
#p-home .spacer { height: calc(88px + env(safe-area-inset-bottom)); }
body.has-mini #p-home .spacer { height: calc(156px + env(safe-area-inset-bottom)); }
.pctile { flex-direction: column; }
@media (max-height: 740px) {
  #p-home .card { padding: 10px; }
  #p-home .tile { gap: 5px; }
  #p-home .slide { height: 46px; }
  #p-home .slide .knob { width: 38px; height: 38px; }
}

/* Reglages : sections deplacables en bloc */
.sectcell { padding-bottom: 4px; }
.sectcell > h3.sect { margin-top: 8px; }
.hcell.sc > .arr-ov { inset: 0 0 auto 0; height: 46px; border-radius: 14px; justify-content: flex-start; padding-left: 4px; z-index: 6; }
.hcell.sc > .arr-ov [data-arr="size"] { display: none; }
.hgrid.arr > .hcell.sc { padding-top: 52px; border: 1.5px dashed var(--a1m); border-radius: 20px; }
.hgrid.arr > .hcell.sc .sectcell > h3.sect { display: none; }

/* Rangement : niveaux bien lisibles (section = bloc plein colore, carte = pointilles discrets) */
.hgrid.arr > .hcell.sc { border: 2px solid var(--a1); background: rgba(255,255,255,.035); padding: 52px 8px 8px; }
.hcell.sc > .arr-ov { background: var(--a1); border: 0; border-radius: 12px; inset: 0 0 auto 0; height: 44px; }
.hcell.sc > .arr-ov .nm { background: transparent; border: 0; color: #04141a; font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.hcell.sc > .arr-ov .nm svg.i { color: #04141a; }
.hcell.sc > .arr-ov .nm::before { content: "Section"; font: 700 10px var(--font); letter-spacing: .08em; padding: 2px 6px; border-radius: 6px; background: rgba(0,0,0,.28); color: #fff; margin-right: 2px; }
.hcell.sc > .arr-ov .tools button { background: rgba(0,0,0,.28); border-color: transparent; color: #fff; }
.sectcell .hgrid.arr > .hcell > .arr-ov { background: rgba(0,0,0,.6); border: 1.5px dashed var(--line); }
.sectcell .hgrid.arr > .hcell > .arr-ov .nm { font-weight: 600; font-size: 13px; }
.sectcell .hgrid.arr > .hcell > .arr-ov .nm::before { content: "Carte"; font: 700 10px var(--font); letter-spacing: .08em; padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,.14); color: var(--mut); }
.hcell.sc > .arr-ov { justify-content: flex-start; padding-left: 6px; }
.hcell.sc > .arr-ov .nm { max-width: calc(100% - 60px); padding: 6px 8px; font-size: 13px; }
.sectcell .hgrid.arr > .hcell > .arr-ov { justify-content: flex-start; padding-left: 6px; }
.sectcell .hgrid.arr > .hcell > .arr-ov .nm { max-width: calc(100% - 92px); padding: 6px 8px; gap: 6px; }
.sectcell .hgrid.arr > .hcell > .arr-ov .nm::before { padding: 1px 5px; font-size: 9px; }
.hcell.sc > .arr-ov .nm { text-transform: none; letter-spacing: 0; font-size: 15px; max-width: calc(100% - 52px); }

/* ---------- tuile Bus agrandie : horaires, retard, mini-carte, autres lignes ---------- */
#busTile { display: flex; flex-direction: column; gap: 6px; height: clamp(240px, 38dvh, 340px); }
#busTile.nomap { height: auto; }
#busTile .lab { flex-wrap: nowrap; }
#busTile .lab #bDir { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bmap { position: relative; flex: 1; min-height: 64px; border-radius: 12px; overflow: hidden; background: #0c0e12; }
.bmap img { position: absolute; width: 256px; height: 256px; max-width: none; user-select: none; -webkit-user-select: none; pointer-events: none; }
.bmap .mk { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; }
.mk.me { width: 14px; height: 14px; background: #4aa3ff; border: 2.5px solid #fff; box-shadow: 0 0 0 7px rgba(74,163,255,.28); }
.mk.stp { width: 18px; height: 18px; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.6); z-index: 2; }
.mk.car { width: 20px; height: 20px; border: 2px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.6); }
.mk.car::after { content: ""; position: absolute; left: 50%; top: -9px; margin-left: -4px; border: 4px solid transparent; border-bottom: 7px solid #fff; transform-origin: 4px 17px; transform: rotate(var(--b, 0deg)); }
.mk.car.first { width: 24px; height: 24px; box-shadow: 0 0 0 5px rgba(255,255,255,.2), 0 1px 6px rgba(0,0,0,.6); z-index: 3; }
.bmap .attr { position: absolute; right: 5px; bottom: 3px; font: 9px var(--font); color: rgba(255,255,255,.6); background: rgba(0,0,0,.45); padding: 1px 5px; border-radius: 4px; }
.dl { font: 600 11px var(--font); padding: 2px 7px; border-radius: 6px; margin-left: 2px; align-self: center; white-space: nowrap; }
.dl.late { background: rgba(255,160,40,.2); color: #ffb04a; }
.dl.ok { background: rgba(60,220,140,.15); color: #4be0a0; }
.bother { display: grid; gap: 3px; }
.bother .bo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; min-height: 22px; }
.bother .bod { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mut); }
.bother .bod small { opacity: .8; }
.bother .bot { font-weight: 700; white-space: nowrap; }
.bopts { margin-top: 4px; }
.bmap .lbl { position: absolute; left: 6px; top: 6px; max-width: calc(100% - 12px); font: 600 11.5px var(--font); color: var(--txt); background: rgba(10,12,16,.82); padding: 3px 8px; border-radius: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; z-index: 4; }
.bmap img { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.8); }
/* mini-carte : fond clair (style Esri), trace, boutons de zoom */
.bmap { touch-action: none; background: #e6e3dc; }
.bmap img { filter: none; }
.bmap .tl, .bmap .shp, .bmap .mkl { position: absolute; inset: 0; }
.bmap .shp { width: 100%; height: 100%; pointer-events: none; overflow: hidden; }
.bmap .mkl { pointer-events: none; }
.bmap .zc { position: absolute; right: 6px; top: 6px; display: flex; flex-direction: column; gap: 4px; z-index: 5; }
.bmap .zc button { width: 32px; height: 32px; padding: 0; border-radius: 9px; border: 1px solid rgba(0,0,0,.22); background: rgba(255,255,255,.94); color: #222; font: 700 18px/1 var(--font); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.bmap .zc button.hidden { display: none; }
.bmap .attr { color: #333; background: rgba(255,255,255,.7); right: 6px; bottom: 3px; }
.mk.stp { border-color: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.5); }

/* lecteur de musique visible : la tuile Bus rend de la place pour que le bouton d extinction reste visible */
body.has-mini #busTile { height: clamp(190px, 29dvh, 290px); }
#busTile.compact, #busTile.nomap { height: auto !important; }
#busTile.compact .bmap, #busTile.compact .bother { display: none; }
#busTile.compact #bStop { display: block !important; }
/* accueil tres serre (petit ecran + lecteur + bandeaux) : marges et details reduits pour ne jamais defiler */
#p-home.tight .card { padding: 7px 10px; }
#p-home.tight #homeGrid { gap: 6px; }
#p-home.tight .tile { gap: 2px; }
#p-home.tight .tile .num { font-size: 19px; }
#p-home.tight .tile .bar, #p-home.tight .tile small, #p-home.tight #pkOpen { display: none; }
#p-home.tight .slide { height: 42px; }
#p-home.tight .slide .knob { width: 34px; height: 34px; }
#p-home.tight .banner { padding: 8px 10px; }
#p-home.tight .favgrid .ic { transform: scale(.8); }
/* rangement : la poignee reste utilisable sur une carte repliee (ex. Favoris) */
.card.collapsed > .arr-ov { display: flex !important; }

/* thèmes de jeux (Zelda, Elden Ring) : décor fixe derrière le contenu, police à empattements pour les titres */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--deco, none); }
html[data-game-theme] .title, html[data-game-theme] h3.sect { letter-spacing: .02em; }
html[data-game-theme] h3.sect { font-family: var(--head); text-transform: none; font-size: 15px; color: var(--a1); }
html[data-game-theme] .card { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a1) 6%, transparent); }

/* arrets de la ligne sur la mini-carte : petits points, nom au zoom, arret choisi en grand avec halo qui pulse */
.mk.sd { width: 9px; height: 9px; background: #fff; border: 2.5px solid #C19FCB; z-index: 1; }
.bmap .sn { position: absolute; transform: translate(8px, -50%); font: 600 9.5px var(--font); color: #222; background: rgba(255,255,255,.82); padding: 0 3px; border-radius: 3px; white-space: nowrap; z-index: 1; pointer-events: none; }
.mk.stp.sel { width: 22px; height: 22px; }
.mk.stp.sel::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #fff; animation: pls 1.8s ease-out infinite; }
@keyframes pls { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }

/* scènes animées : uniquement transform / opacité (calculés par le GPU), peu d'éléments, rien quand l'écran est éteint */
#fx, #fxv { position: fixed; pointer-events: none; z-index: -1; }
#fx { inset: 0; overflow: hidden; }
#fxv { inset: -16px; background-position: center top; background-size: cover; background-repeat: no-repeat; transform-origin: 50% 0; }
#fxv.sway { animation: sway 10s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-.6deg); } to { transform: rotate(.6deg); } }
#fx i { position: absolute; will-change: transform, opacity; font-style: normal; opacity: 0; }
.fx-fly { width: 5px; height: 5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 7px 3px var(--c); animation: fly linear infinite; }
@keyframes fly { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: .9; } 50% { transform: translate(var(--dx, 12px), -28px); opacity: .25; } 80% { opacity: .85; } 100% { transform: translate(0, -56px); opacity: 0; } }
.fx-ember, .fx-note { top: 100% !important; animation: rise linear infinite; }
.fx-ember { width: 3px; height: 3px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px 2px var(--c); }
.fx-note { color: var(--c); font-size: 16px; }
@keyframes rise { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .85; } 100% { transform: translate(var(--dx, 20px), -105vh); opacity: 0; } }
.fx-snow { top: -10px !important; width: 3px; height: 3px; border-radius: 50%; background: var(--c); animation: snow linear infinite; }
@keyframes snow { 0% { transform: translate(0, 0); opacity: .75; } 100% { transform: translate(var(--dx, -30px), 105vh); opacity: .75; } }

/* fées (Navi et ses amies) : lueur + deux ailes qui battent, promenade entre 4 points ; feuilles qui tombent en tournant */
#fx .fx-fairy { left: 0; top: 0; width: 0; height: 0; opacity: 1; animation: wander ease-in-out infinite; }
@keyframes wander {
  0%, 100% { transform: translate(calc(var(--x0) * 1vw), calc(var(--y0) * 1vh)); }
  25% { transform: translate(calc(var(--x1) * 1vw), calc(var(--y1) * 1vh)); }
  50% { transform: translate(calc(var(--x2) * 1vw), calc(var(--y2) * 1vh)); }
  75% { transform: translate(calc(var(--x3) * 1vw), calc(var(--y3) * 1vh)); }
}
.fx-fairy b { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 5px 2px #fff, 0 0 12px 5px var(--c), 0 0 24px 9px color-mix(in srgb, var(--c) 55%, transparent); animation: glow 1.6s ease-in-out infinite alternate; }
@keyframes glow { from { opacity: .65; transform: scale(.85); } to { opacity: 1; transform: scale(1.1); } }
.fx-fairy s { position: absolute; top: -11px; width: 8px; height: 12px; background: linear-gradient(160deg, rgba(255,255,255,.95), color-mix(in srgb, var(--c) 45%, transparent)); opacity: .8; transform-origin: 50% 100%; animation: flap .15s ease-in-out infinite alternate; }
.fx-fairy s:first-of-type { left: -8px; border-radius: 80% 20% 80% 20%; --r1: -15deg; --r2: -60deg; }
.fx-fairy s:last-of-type { left: 0; border-radius: 20% 80% 20% 80%; --r1: 15deg; --r2: 60deg; }
@keyframes flap { from { transform: rotate(var(--r1)); } to { transform: rotate(var(--r2)); } }
.fx-leaf { top: -14px !important; width: 9px; height: 5px; border-radius: 100% 0; background: var(--c); animation: leaf linear infinite; }
@keyframes leaf { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: .7; } 100% { transform: translate(var(--dx, 30px), 105vh) rotate(540deg); opacity: .7; } }

/* ---- mouvements des autres scènes : feux follets, losanges néon, étoiles filantes, pluie de code, scintillements ---- */
.fx-wisp b { width: 6px; height: 6px; left: -3px; top: -3px; }
.fx-spark { top: 100% !important; width: 7px; height: 7px; background: var(--c); box-shadow: 0 0 8px 2px var(--c); transform: rotate(45deg); animation: rise linear infinite; }
.fx-code { top: -15% !important; color: var(--c); font: 11px/1.15 ui-monospace, Consolas, monospace; white-space: pre; text-shadow: 0 0 6px var(--c); animation: code linear infinite; }
@keyframes code { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: .5; } 90% { opacity: .35; } 100% { transform: translateY(125vh); opacity: 0; } }
.fx-shoot { width: 90px; height: 2px; background: linear-gradient(90deg, transparent, var(--c)); border-radius: 2px; animation: shoot linear infinite; }
@keyframes shoot { 0%, 92% { transform: translate(0, 0) rotate(28deg); opacity: 0; } 93% { opacity: .95; } 100% { transform: translate(260px, 150px) rotate(28deg); opacity: 0; } }
.fx-twinkle { color: var(--c); font-size: 11px; animation: twink ease-in-out infinite; }
@keyframes twink { 0%, 100% { opacity: 0; transform: scale(.5); } 50% { opacity: .95; transform: scale(1.15); } }

/* ---- habillage de chaque thème : cadres, lueurs, détails de texte (en plus des couleurs et du fond) ---- */
html[data-skin^="zelda"] .card { border-color: color-mix(in srgb, var(--a2) 30%, transparent); outline: 1px solid color-mix(in srgb, var(--a2) 14%, transparent); outline-offset: -4px; }
html[data-skin^="zelda"] .title { text-shadow: 0 0 14px color-mix(in srgb, var(--a2) 55%, transparent); }
html[data-skin^="elden"] .card { border-color: color-mix(in srgb, var(--a1) 34%, transparent); outline: 1px solid color-mix(in srgb, var(--a1) 22%, transparent); outline-offset: -5px; }
html[data-skin^="elden"] .title { text-shadow: 0 0 16px color-mix(in srgb, var(--a1) 55%, transparent); letter-spacing: .04em; }
html[data-skin^="elden"] .tabs, html[data-skin^="zelda"] .tabs { outline: 1px solid color-mix(in srgb, var(--a1) 18%, transparent); outline-offset: -4px; }
html[data-skin="violet"] .card { box-shadow: 0 0 16px color-mix(in srgb, var(--a1) 16%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--a2) 22%, transparent); }
html[data-skin="violet"] .title { text-shadow: 0 0 14px var(--a2); }
html[data-skin="glacier"] .card { border-color: rgba(200,235,255,.26); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 14px rgba(120,200,255,.08); }
html[data-skin="vert"] .card { border-color: color-mix(in srgb, var(--a1) 32%, transparent); box-shadow: inset 0 0 14px color-mix(in srgb, var(--a1) 9%, transparent); }
html[data-skin="vert"] #p-home .tile .num, html[data-skin="vert"] .title { font-family: ui-monospace, Consolas, monospace; }
html[data-skin="aurore"] .card { box-shadow: 0 0 20px color-mix(in srgb, var(--a1) 10%, transparent); }