:root {
  --orange: var(--c-ink);
  --orange-d: var(--c-night);
  --green: var(--c-ok);
  --green-d: var(--c-ok-d);
  --ink: var(--c-ink);
  --ink-2: var(--c-ink-2);
  --muted: var(--c-muted);
  --line: rgb(var(--c-night-rgb) / .09);
  --glass: rgb(var(--c-white-rgb) / .88);
  --red: var(--c-danger);
  --violet: var(--c-night-3);
  --sky-top: var(--c-blue-l);
  --sky-bottom: var(--c-blue-bg);
  --r: var(--r-card);
  --sh: var(--sh-float);
  --font: var(--f-text);
  --display: var(--f-display);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { font-family: var(--font); color: var(--ink); background: var(--c-night); -webkit-tap-highlight-color: transparent; overscroll-behavior: none; font-size: 15px; line-height: 1.35; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: not-allowed; opacity: .45; }
h1, h2, h3, h4 { font-family: var(--display); margin: 0; line-height: 1.05; }
small { display: block; color: var(--muted); font-size: .8rem; }
.small { font-size: .85rem; }
.muted { color: var(--muted); }
.center { text-align: center; }
.grow { flex: 1; min-width: 0; }
.ic { flex: none; }
#boot { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow-y: auto; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background: var(--c-night); color: white; }
.boot-card { width: min(100%, 380px); text-align: center; overflow-wrap: anywhere; padding-block: 16px; }
.boot-card h1 { font-size: clamp(1.7rem, 7vw, 2.5rem); }
.boot-card button[hidden] { display: none; }

/* ---------- Monde 3D ---------- */
.world { position: fixed; inset: 0; background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%); transition: background 1.5s; }
.world canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.world::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 120%, rgb(var(--c-white-rgb) / .0), rgb(var(--c-night-rgb) / .12)); }
.world.night::before { content: ''; position: absolute; inset: 0 0 40%; pointer-events: none; background-image: radial-gradient(1px 1px at 12% 20%, var(--c-white), transparent), radial-gradient(1px 1px at 32% 8%, var(--c-white), transparent), radial-gradient(1.5px 1.5px at 52% 26%, var(--c-white), transparent), radial-gradient(1px 1px at 72% 12%, var(--c-white), transparent), radial-gradient(1.5px 1.5px at 88% 30%, var(--c-white), transparent), radial-gradient(1px 1px at 64% 4%, var(--c-white), transparent), radial-gradient(1px 1px at 22% 38%, var(--c-white), transparent); opacity: .8; }
body.no3d .world { background: linear-gradient(180deg, var(--c-blue-l), var(--c-blue-bg)); }
.wlabels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.wlabel { position: absolute; left: 0; top: 0; white-space: nowrap; font-weight: 800; font-size: .78rem; padding: 2px 9px; border-radius: var(--r-pill); background: rgb(var(--c-white-rgb) / .92); box-shadow: 0 2px 8px rgb(var(--c-black-rgb) / .15); will-change: transform; }
.wlabel.player { background: var(--green); color: var(--c-white); }
.wlabel.thought { font-size: 1.3rem; padding: 6px 9px; background: var(--c-white); border-radius: 50%; }
.wlabel.thought::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 8px; height: 8px; margin-left: -4px; background: var(--c-white); border-radius: 50%; }

#app { position: fixed; inset: 0; pointer-events: none; }
#app > * { pointer-events: none; }
#app button, #app input, #app a, #app .glass, #app .card-glass, #app .overlay.open { pointer-events: auto; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border-radius: var(--r-ctl); font-weight: 800; transition: transform .1s, box-shadow .2s, background .2s; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn.green { background: var(--green); color: var(--c-white); box-shadow: 0 6px 16px rgb(var(--c-ok-rgb) / .3); }
.btn.green:hover:not(:disabled) { background: var(--green-d); }
.btn.orange { background: var(--orange); color: var(--c-white); box-shadow: 0 6px 16px rgb(var(--c-night-rgb) / .18); }
.btn.orange:hover:not(:disabled) { background: var(--orange-d); }
.btn.white { background: var(--c-white); border: 1.5px solid var(--line); }
.btn.danger { background: var(--c-pink-bg); color: var(--red); border: 1.5px solid var(--c-danger-bg); }
.btn.big { width: 100%; padding: 15px 18px; font-size: 1.08rem; border-radius: var(--r-card); margin-top: 10px; }
.btn.small { padding: 7px 12px; font-size: .85rem; border-radius: var(--r-sm); }
.btn.block { width: 100%; margin-top: 8px; }
.iconbtn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-sm); background: rgb(var(--c-night-rgb) / .06); }
.link { color: var(--orange-d); font-weight: 800; text-decoration: underline; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pill { font-size: .72rem; padding: 3px 9px; border-radius: var(--r-pill); font-weight: 800; white-space: nowrap; }
.pill.ok { background: var(--c-ok-bg); color: var(--c-ok-d); }
.pill.ko { background: var(--c-danger-bg); color: var(--c-danger-d); }
.glass, .card-glass { background: var(--glass); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border: 1px solid rgb(var(--c-white-rgb) / .7); box-shadow: var(--sh); }

/* ---------- Titre ---------- */
.title, .create { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; }
.title { align-items: flex-end; padding-bottom: max(5vh, 24px); }
@media (min-width: 900px) { .title { justify-content: flex-start; align-items: center; padding: 24px 0 24px 7vw; } }
.title-card { width: 100%; max-width: 380px; border-radius: var(--r-panel); padding: 22px 22px 18px; text-align: center; animation: rise .5s ease-out; }
.title-card .logo { margin-top: -58px; }
.title-card .logo svg { filter: drop-shadow(0 10px 18px rgb(var(--c-black-rgb) / .25)); }
/* Petits écrans et paysage : titre accessible sous les barres du navigateur. */
.title { overflow-y: auto; padding-top: max(64px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.title-card { flex-shrink: 0; margin-block: auto; }
@media (max-height: 600px) { .title { align-items: flex-start; } .title-card .logo svg { max-height: 70px; } }
.title-card h1 { font-size: 2.5rem; font-weight: 800; letter-spacing: -.03em; margin-top: 4px; }
.tag { margin: 2px 0 8px; color: var(--ink-2); font-weight: 700; }
.studio { margin: 14px 0 0; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.studio a { color: var(--ink); text-decoration: none; }
/* PRO-01 : accueil vivant (joueurs en jeu maintenant, lieux ouverts qui défilent, gros bouton pour commencer). */
.title-live { margin: 2px 0 4px; font-size: .86rem; }
.live-n { display: inline-flex; align-items: center; gap: 7px; text-align: left; margin: 0 0 6px; padding: 4px 12px; border-radius: var(--r-pill); background: rgb(var(--c-ok-rgb) / .14); color: var(--c-ok-d); font-weight: 700; animation: fade .4s; }
.live-n b { font-weight: 800; }
.live-n .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-ok); box-shadow: 0 0 0 3px rgb(var(--c-ok-rgb) / .25); animation: pulse 1.6s infinite; }
.live-place { margin: 0; min-height: 2.7em; color: var(--ink-2); font-weight: 600; line-height: 1.35; }
.live-place span { display: inline; animation: fade .5s; }
.btn.big.start { padding: 18px; font-size: 1.2rem; }
/* Téléphone en portrait : la carte descend en bas de l'écran pour laisser voir la scène 3D qui tourne au-dessus. */
@media (max-width: 899px) and (min-height: 640px) { .title-card { margin-top: auto; margin-bottom: 0; } }
@media (max-width: 359px) { .title-live { font-size: .8rem; } .live-n { padding: 4px 10px; gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .live-n, .live-n .dot, .live-place span { animation: none; } }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } }

/* ---------- Création ---------- */
.create { justify-content: flex-end; align-items: center; padding-right: max(4vw, 16px); }
.create-card { width: 100%; max-width: 400px; border-radius: var(--r-panel); padding: 22px; max-height: calc(100vh - 32px); overflow-y: auto; position: relative; animation: rise .4s ease-out; }
.create-card h2 { font-size: 1.7rem; margin: 6px 0 10px; }
.step { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--orange); color: var(--c-white); font-family: var(--display); font-weight: 800; font-size: 1.1rem; box-shadow: 0 4px 10px rgb(var(--c-night-rgb) / .2); }
.field { display: block; margin: 12px 0; }
.field > span { display: block; font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
.field input, .field select { width: 100%; min-width: 0; font: inherit; font-weight: 700; padding: 12px 14px; border-radius: var(--r-ctl); border: 1.5px solid var(--line); background: var(--c-white); color: var(--ink); }
.field select:focus, .field input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgb(var(--c-ok-rgb) / .18); }
.field textarea { display: block; width: 100%; font: inherit; font-weight: 600; padding: 12px 14px; border-radius: var(--r-ctl); border: 1.5px solid var(--line); background: var(--c-white); resize: vertical; min-height: 110px; }
.field textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgb(var(--c-ok-rgb) / .18); }
/* Choix « problème / idée » du service client : deux pastilles côte à côte */
.kind-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 8px; }
.kind-pick label { position: relative; }
.kind-pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.kind-pick span { display: block; text-align: center; padding: 10px 8px; border-radius: var(--r-ctl); border: 1.5px solid var(--line); background: var(--c-white); font-weight: 800; font-size: .88rem; }
.kind-pick input:checked + span { border-color: var(--c-teal); background: var(--c-blue-bg); color: var(--c-teal-d); }
.kind-pick input:focus-visible + span { outline: 2px solid var(--c-teal); outline-offset: 2px; }
/* Mot de passe : bouton œil dans le champ, à droite (cible tactile de 40 px) */
.pwd { position: relative; display: block; }
.field .pwd input { padding-right: 48px; }
.pwd-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--muted); }
.pwd-eye:hover, .pwd-eye[aria-pressed="true"] { color: var(--ink); }
.pwd-eye:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.seg { display: flex; gap: 6px; background: rgb(var(--c-night-rgb) / .05); padding: 4px; border-radius: var(--r-ctl); }
.seg.wrap { flex-wrap: wrap; }
.seg button { flex: 1; padding: 8px 10px; border-radius: var(--r-sm); font-weight: 800; min-width: 64px; }
.seg button.on { background: var(--c-white); box-shadow: 0 2px 8px rgb(var(--c-black-rgb) / .1); color: var(--orange-d); }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.sw { width: 36px; height: 36px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 2px rgb(var(--c-white-rgb) / .6), 0 0 0 1.5px var(--line); transition: transform .15s; }
.sw.on { transform: scale(1.12); box-shadow: inset 0 0 0 2px var(--c-white), 0 0 0 3px var(--orange); }
.hint { font-size: .85rem; color: var(--muted); margin: 10px 0 0; }
/* Traits de personnalité (création et fenêtre unique) */
.traits { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.trait { text-align: left; padding: 8px 10px; border-radius: var(--r-sm); background: rgb(var(--c-night-rgb) / .05); box-shadow: inset 0 0 0 1.5px transparent; min-width: 0; }
.trait b { display: block; font-size: .9rem; }
.trait small { display: block; font-size: .72rem; color: var(--muted); line-height: 1.25; margin-top: 2px; }
.trait.on { background: var(--c-white); box-shadow: inset 0 0 0 2px var(--green), 0 2px 8px rgb(var(--c-black-rgb) / .08); }
@media (max-width: 700px) {
  .create { align-items: flex-end; padding: 10px; }
  .create-card { max-height: 58vh; border-radius: 24px 24px 20px 20px; }
}

/* ---------- Destin ---------- */
.destiny { text-align: center; padding: 6px 4px; }
.destiny .dice { font-size: 4.5rem; display: inline-block; animation: roll .45s linear infinite; }
.destiny .coin { font-size: 4rem; margin: 6px 0 2px; animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }
.destiny h2 { font-size: 1.9rem; }
/* Tirage rare (Poignon, Jeunesse dorée) : halo doré sobre, deux pulsations, rien si l'appareil demande moins d'animations. */
.destiny.rare .coin { display: inline-block; border-radius: 50%; animation: pop .5s cubic-bezier(.2, 1.6, .4, 1), rareglow 1.4s ease-in-out .4s 2; }
.destiny .rare-tag { display: inline-block; margin: 2px 0 4px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--c-accent-bg); color: var(--c-yellow-d); font-weight: 800; font-size: .8rem; }
@keyframes rareglow { 0%, 100% { box-shadow: 0 0 0 0 rgb(var(--c-gold-rgb) / 0); } 50% { box-shadow: 0 0 0 18px rgb(var(--c-gold-rgb) / .35); } }
@media (prefers-reduced-motion: reduce) { .destiny.rare .coin { animation: none; } }
.facts { display: flex; flex-direction: column; gap: 6px; align-items: center; font-weight: 800; margin: 10px 0; }
.facts span { display: inline-flex; gap: 6px; align-items: center; }
@keyframes roll { to { transform: rotate(360deg); } }
@keyframes pop { from { transform: scale(.3); opacity: 0; } }

/* ---------- HUD ---------- */
.hud { position: absolute; inset: 0; }
.top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 12px; padding-top: max(12px, env(safe-area-inset-top)); }
.simcard { display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: var(--r-pill); text-align: left; min-width: 0; max-width: 52vw; }
.portrait { width: 44px; height: 44px; border-radius: 50%; background: var(--c-line); overflow: hidden; flex: none; display: grid; place-items: end center; }
.who { min-width: 0; }
.who b { display: block; font-family: var(--display); font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who small { display: flex; align-items: center; gap: 5px; font-weight: 700; white-space: nowrap; }
.plumb { width: 9px; height: 14px; display: inline-block; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: var(--green); }
.plumb.y { background: var(--c-yellow); } .plumb.r { background: var(--red); }
.top-r { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 60vw; }
.money { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-pill); color: var(--green-d); }
.money b { font-family: var(--display); font-size: 1.1rem; color: var(--ink); }
.clock { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--r-pill); }
.clock b { font-family: var(--display); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.clock small { font-weight: 800; }
.speeds { display: flex; padding: 3px; border-radius: var(--r-pill); }
.speeds button { width: 34px; height: 30px; border-radius: var(--r-pill); display: grid; place-items: center; color: var(--ink-2); }
.speeds button.on { background: var(--ink); color: var(--c-white); }
@media (max-width: 899px) {
  .top { flex-wrap: wrap; row-gap: 6px; }
  .top-r { display: contents; }
  .simcard { flex: 0 1 auto; max-width: 58%; }
  .money { margin-left: auto; }
  .clock { margin-left: auto; padding: 5px 12px; }
  .clock b { font-size: 1.1rem; }
}
.status-row { position: absolute; top: calc(max(12px, env(safe-area-inset-top)) + 106px); left: 0; right: 0; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 0 12px; }
.chip-st { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 800; padding: 4px 10px; border-radius: var(--r-pill); background: rgb(var(--c-white-rgb) / .9); box-shadow: var(--sh); pointer-events: auto; }
.chip-st.cut { background: var(--c-night-2); color: var(--c-gold); }
.chip-st.rush { color: var(--red); }
.chip-st.online { color: var(--green-d); }
.chip-st.off { color: var(--muted); }
.chip-st.startmission { color: var(--ink); }
.chip-st.startmission.ready { background: var(--green); color: var(--c-white); }

.bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 8px; padding: 0 10px calc(10px + env(safe-area-inset-bottom)); }
.actq { display: none; align-self: flex-start; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border-radius: var(--r-pill); background: rgb(var(--c-night-rgb) / .86); color: var(--c-white); box-shadow: var(--sh); pointer-events: auto; max-width: 100%; animation: rise .25s ease-out; }
.actq.show { display: flex; }
.aq-ring { --p: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--green) calc(var(--p) * 1%), rgb(var(--c-white-rgb) / .15) 0); flex: none; }
.aq-ring span { width: 38px; height: 38px; border-radius: 50%; background: var(--c-white); display: grid; place-items: center; font-size: 1.3rem; }
.aq-txt { min-width: 0; }
.aq-txt b { display: block; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56vw; }
.aq-txt small { color: var(--c-line-2); font-weight: 700; }
.aq-x { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgb(var(--c-white-rgb) / .14); flex: none; }

.ctx { border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.ctx-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; text-align: left; width: 100%; }
.ctx-i { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--c-soft); display: grid; place-items: center; font-size: 1.35rem; flex: none; }
.ctx-t { flex: 1; min-width: 0; }
.ctx-t b { display: block; font-family: var(--display); font-size: 1.08rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.ctx-chev { transition: transform .2s; color: var(--muted); }
.ctx.open .ctx-chev { transform: rotate(180deg); }
.ctx-body { display: none; padding: 0 12px 12px; overflow-y: auto; }
.ctx.open .ctx-body { display: block; max-height: 42vh; }
.ctx h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 14px 0 8px; font-family: var(--font); font-weight: 800; }
.ctx h4 .count { background: var(--green); color: var(--c-white); border-radius: var(--r-pill); padding: 1px 7px; margin-left: 4px; }
.ctx-hint { font-size: .85rem; color: var(--muted); margin: 6px 0 8px; }
.banner { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 9px 12px; border-radius: var(--r-ctl); font-weight: 700; font-size: .87rem; margin-bottom: 8px; }
.banner.cut { background: var(--c-night-2); color: var(--c-gold); }
.banner.info { background: var(--c-soft); }
.objs { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 6px; margin-bottom: 10px; }
.obj { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: var(--r-ctl); background: var(--c-white); border: 1.5px solid var(--line); font-size: .74rem; font-weight: 800; text-align: center; line-height: 1.1; }
.obj span { font-size: 1.5rem; }
.obj.using { border-color: var(--green); background: var(--c-bg); }
.obj.off { filter: grayscale(1); opacity: .6; }
.obj.add { border-style: dashed; color: var(--muted); background: transparent; }
.workcard { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--c-bg); border: 1.5px solid var(--c-mint); margin-bottom: 8px; }
.workcard .btn { flex: none; max-width: 50%; }
.acts { display: flex; flex-direction: column; gap: 6px; }
.act { display: flex; gap: 10px; align-items: center; text-align: left; padding: 9px 10px; border-radius: var(--r-ctl); background: var(--c-white); border: 1.5px solid var(--line); transition: border-color .15s, transform .1s; }
.act:hover:not(:disabled) { border-color: var(--orange); }
.act:active:not(:disabled) { transform: scale(.99); }
.act .ai { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--c-soft); display: grid; place-items: center; font-size: 1.35rem; flex: none; }
.act .at { flex: 1; min-width: 0; }
.act b { display: block; font-size: .92rem; }
.fxs { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.fx { font-size: .7rem; padding: 2px 7px; border-radius: var(--r-pill); background: var(--c-bg); font-weight: 800; white-space: nowrap; }
.fx.pos { background: var(--c-ok-bg); color: var(--c-ok-d); }
.fx.neg { background: var(--c-danger-bg); color: var(--c-danger-d); }
.fx.xp { background: var(--c-line); color: var(--c-night-3); }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.person { display: flex; flex-direction: column; align-items: center; padding: 8px 6px; border-radius: var(--r-ctl); background: var(--c-white); border: 1.5px solid var(--line); text-align: center; }
.person.player { border-color: var(--green); }
.person b { font-size: .86rem; }
.person small { font-size: .72rem; font-weight: 700; }
.face { font-size: 1.9rem; line-height: 1; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: var(--c-white); border: 1.5px solid var(--line); border-radius: var(--r-pill); padding: 6px 12px; font-size: .82rem; font-weight: 800; }
.bar { height: 8px; border-radius: var(--r-pill); background: rgb(var(--c-night-rgb) / .08); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--green); transition: width .35s, background .35s; }
.bar.mini { height: 5px; width: 100%; margin-top: 4px; }
.bar.mini i { background: var(--orange); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; }
.dot.ok { background: var(--green); } .dot.ko { background: var(--red); }

.needs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 12px; padding: 10px 14px; border-radius: var(--r); }
.need { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: center; }
.need .ni { grid-row: span 2; font-size: 1.2rem; }
.need .nl { font-size: .7rem; font-weight: 800; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.need .bar { height: 9px; }
.need.crit .ni { animation: pulse .7s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.3); } }

.dock { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: var(--r-card); padding: 5px; }
.dock button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0; border-radius: var(--r-ctl); color: var(--ink-2); }
.dock button span { font-size: .7rem; font-weight: 800; }
.dock button.on { background: var(--ink); color: var(--c-white); }
.badge:empty { display: none; }
.badge { position: absolute; top: 2px; right: 24%; background: var(--red); color: var(--c-white); font-size: .68rem; min-width: 18px; height: 18px; border-radius: var(--r-pill); display: grid; place-items: center; padding: 0 5px; font-weight: 800; }

/* Grand écran : disposition façon Sims */
@media (min-width: 900px) {
  .top-r { flex-wrap: nowrap; max-width: none; }
  .status-row { top: 72px; }
  .bottom { display: block; padding: 0; top: 0; }
  .ctx { position: absolute; right: 16px; top: 116px; width: 380px; max-height: calc(100vh - 140px); }
  .ctx.open .ctx-body { max-height: calc(100vh - 210px); }
  .needs { position: absolute; left: 16px; bottom: 16px; width: 380px; grid-template-columns: repeat(2, 1fr); }
  .actq { position: absolute; left: 16px; bottom: 166px; }
  .dock { position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px; width: 420px; }
}

/* Carte 3D : panneau latéral au lieu d'une fenêtre plein écran */
body:not(.no3d) .overlay.ov-map { background: none; backdrop-filter: none; pointer-events: none !important; justify-content: flex-end; align-items: flex-start; padding: 116px 16px 96px; }
body:not(.no3d) .ov-map .ov-card { pointer-events: auto; width: 380px; max-height: 100%; }
@media (max-width: 899px) {
  body:not(.no3d) .overlay.ov-map { align-items: flex-end; padding: 0 10px 84px; }
  body:not(.no3d) .ov-map .ov-card { width: 100%; max-height: 46vh; }
}
.wlabel[data-cmd] { pointer-events: auto; cursor: pointer; border: 0; font: inherit; font-weight: 800; }
.wlabel.commune { font-size: .82rem; padding: 4px 12px; background: rgb(var(--c-night-rgb) / .82); color: var(--c-white); letter-spacing: .02em; }
.wlabel.mplace { font-size: 1rem; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: var(--c-white); box-shadow: 0 4px 12px rgb(var(--c-night-rgb) / .2); }
.wlabel.mplace:hover { transform-origin: center; outline: 2px solid var(--green); }
.wlabel.mme { background: var(--green); color: var(--c-white); }
/* Carte, bouton « Noms » : pilule emoji + nom à la place du cercle. */
.wlabels.names .wlabel.mplace { width: auto; height: auto; padding: 4px 11px 4px 7px; display: flex; align-items: center; gap: 5px; border-radius: var(--r-pill); font-size: .95rem; }
.wlabels.names .wlabel.mplace::after { content: attr(data-name); font-size: .8rem; font-weight: 800; color: var(--c-ink); }
#hud.on-map [data-cmd="cam|rotl"], #hud.on-map [data-cmd="cam|rotr"] { display: none; }
.map-names-btn { border: 0; border-radius: var(--r-pill); padding: 6px 12px; font: inherit; font-weight: 800; font-size: .8rem; background: var(--c-soft); color: var(--c-ink); cursor: pointer; }
.map-names-btn[aria-pressed="true"] { background: var(--c-blue); color: var(--c-white); }

/* Marques et partenaires */
.brandbar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-ctl); margin-bottom: 10px; background: color-mix(in srgb, var(--c) 14%, var(--c-white)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 35%, transparent); }
.brandbar > span, .brandbar img { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--c); font-size: 1.3rem; object-fit: cover; flex: none; }
.brandbar > div { flex: 1; min-width: 0; }
.brandbar b { display: block; font-size: 1.05rem; }
.shop-row.ride { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); }
.shop-row.ride:disabled { opacity: .45; }

/* Publicité */
.eyebrow-s { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ad-img { width: 100%; border-radius: var(--r-ctl); margin: 6px 0 12px; max-height: 260px; object-fit: cover; }
.price-tag { margin: 10px 0 4px; font-size: .95rem; color: var(--ink-2); }
.price-tag b { font-size: 1.6rem; color: var(--ink); }
.adform { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.adform label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: .85rem; }
.adform label small { display: inline; font-weight: 500; }
.adform input, .adform select { font: inherit; font-weight: 500; padding: 10px 12px; border-radius: var(--r-sm); border: 1.5px solid var(--line); background: var(--c-white); }
.adform input:focus, .adform select:focus { outline: none; border-color: var(--green); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.total { font-size: 1rem; padding: 10px 12px; border-radius: var(--r-sm); background: var(--c-soft); }
.total b { font-size: 1.2rem; }
.busy { font-size: .78rem; color: var(--red); }
.busy:empty { display: none; }
.pill.wait { background: var(--c-yellow-bg); color: var(--c-yellow-d); }

/* Anneau de progression de la journée autour de l'icône météo */
.dayring { --dp: 0; position: relative; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--green) calc(var(--dp) * 1%), rgb(var(--c-night-rgb) / .1) 0); }
.dayring::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--c-white); }
.dayring > * { position: relative; }

/* File d'actions */
.aq-next { display: flex; gap: 4px; padding-left: 6px; margin-left: 2px; border-left: 1px solid rgb(var(--c-white-rgb) / .15); }
.aq-q { position: relative; width: 32px; height: 32px; border-radius: 50%; background: rgb(var(--c-white-rgb) / .9); display: grid; place-items: center; font-size: 1rem; }
.aq-q i { position: absolute; top: -3px; right: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--red); color: var(--c-white); display: none; place-items: center; }
.aq-q:hover i { display: grid; }

/* Contrôles de caméra */
.camctl { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; padding: 4px; border-radius: var(--r-ctl); }
.camctl button { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--ink-2); }
.camctl button:hover { background: rgb(var(--c-night-rgb) / .06); }
@media (min-width: 900px) { .camctl { right: auto; left: 16px; top: 84px; transform: none; flex-direction: row; } }
@media (max-width: 899px) { .camctl { top: 40%; } }

/* Carte « nouveau jour » */
.daycard { position: absolute; left: 50%; top: 22%; transform: translate(-50%, -10px); min-width: 260px; text-align: center; padding: 16px 22px; border-radius: var(--r-card); background: rgb(var(--c-white-rgb) / .95); box-shadow: var(--sh); opacity: 0; pointer-events: none; transition: opacity .35s, transform .35s; }
.daycard.show { opacity: 1; transform: translate(-50%, 0); }
.daycard > small { text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.daycard > b { display: block; font-size: 1.5rem; margin: 2px 0 8px; }
.dc-sum { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; font-weight: 700; font-size: .9rem; }

/* Mode achat */
.tabsrow { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: none; }
.tabsrow button { flex: none; padding: 7px 14px; border-radius: var(--r-pill); background: var(--c-white); box-shadow: inset 0 0 0 1.5px var(--line); font-weight: 700; font-size: .88rem; }
.tabsrow button.on { background: var(--ink); color: var(--c-white); box-shadow: none; }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px; }
.bcard { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--r-card); background: var(--c-white); box-shadow: 0 2px 8px rgb(var(--c-night-rgb) / .05); }
.bcard .bi { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r-sm); background: var(--c-soft); display: grid; place-items: center; font-size: 2.4rem; margin-bottom: 6px; }
.bcard small { flex: 1; font-size: .74rem; }
.bcard .btn { width: 100%; margin-top: 6px; }
.bcard.owned { opacity: .85; }
.bcard[hidden] { display: none; } /* recherche du catalogue : display:flex l'emporterait sur [hidden] */
.bcard .bi { background: var(--c-portrait); }
.bcard .fxs { display: flex; flex-wrap: wrap; gap: 4px; }
.bsearch { width: 100%; box-sizing: border-box; margin: 4px 0 8px; padding: 10px 14px; border: 0; border-radius: var(--r-pill); background: var(--c-soft); font: inherit; font-size: .9rem; color: var(--c-ink); }
.bsearch:focus { outline: 2px solid var(--c-blue); }
.placebar small { display: block; font-weight: 600; }

/* Carte : trajet */
.trip { display: flex; gap: 6px; align-items: flex-start; font-size: .86rem; color: var(--ink-2); background: var(--c-soft); padding: 9px 12px; border-radius: var(--r-sm); margin: 0 0 10px; }
.mapsvg .route { stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 5 5; animation: dash 1s linear infinite; }
.mapsvg .veh { font-size: 14px; text-anchor: middle; }
@keyframes dash { to { stroke-dashoffset: -10; } }

/* Téléphone : infos */
.news { display: flex; gap: 10px; padding: 10px 12px; background: var(--c-white); border-radius: var(--r-ctl); margin-bottom: 6px; font-size: .88rem; }
.news > span { font-size: 1.3rem; }

/* ---------- Superpositions (carte, téléphone, journal) ---------- */
.overlay { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; padding: 70px 12px 96px; background: rgb(var(--c-night-rgb) / .35); backdrop-filter: blur(3px); }
.overlay.open { display: flex; animation: fade .2s; }
.hud.ov-open .needs, .hud.ov-open .ctx, .hud.ov-open .actq, .hud.ov-open .status-row { display: none !important; }
@media (min-width: 900px) { .overlay { padding: 76px 24px 92px; } }
@keyframes fade { from { opacity: 0; } }
.ov-card { width: 100%; max-width: 640px; max-height: 100%; overflow-y: auto; background: var(--c-white); border-radius: var(--r-panel); padding: 16px; box-shadow: var(--sh); animation: rise .25s ease-out; }
.overlay.stay .ov-card { animation: none; } /* rafraîchissement d'un onglet déjà ouvert : pas de nouvelle entrée */
.ov-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ov-head h2 { display: flex; gap: 8px; align-items: center; font-size: 1.5rem; }
.mapsvg { width: 100%; height: auto; display: block; border-radius: var(--r-card); }
.mapsvg .water { font-size: 9px; fill: var(--c-teal-d); font-style: italic; font-weight: 700; }
.mapsvg .water.sea { fill: var(--c-white); }
.node { cursor: pointer; }
.node circle:not(.halo) { fill: var(--c-white); stroke: var(--orange); stroke-width: 3; }
.node .halo { fill: rgb(var(--c-night-rgb) / 0); transition: fill .2s; }
.node:hover .halo, .node.sel .halo { fill: rgb(var(--c-night-rgb) / .08); }
.node.cur circle:not(.halo) { fill: var(--orange); }
.node.sel circle:not(.halo) { stroke: var(--green); stroke-width: 4; }
.node .lbl { font-size: 10px; font-weight: 800; text-anchor: middle; fill: var(--ink); paint-order: stroke; stroke: rgb(var(--c-white-rgb) / .9); stroke-width: 3px; font-family: var(--font); }
.node .pinm { font-size: 14px; text-anchor: middle; } .node .tagm { font-size: 11px; }
.map-panel { margin-top: 12px; }
.map-panel h3 { font-size: 1.3rem; margin-bottom: 8px; }
.journal .log { display: flex; flex-direction: column; gap: 5px; }
.log-row { display: grid; grid-template-columns: 74px 1fr; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--c-soft); font-size: .88rem; border-left: 4px solid var(--c-line-2); }
.log-row.t-good, .log-row.t-money { border-left-color: var(--green); }
.log-row.t-bad { border-left-color: var(--red); }
.log-row.t-levelup { border-left-color: var(--violet); }
.log-row.t-power { border-left-color: var(--c-night-2); }

/* Téléphone */
.card { background: var(--c-white); border-radius: var(--r-card); padding: 12px; margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 2px 8px rgb(var(--c-night-rgb) / .05); }
.card.cur { border: 2px solid var(--orange); }
.card.balance b { font-family: var(--display); font-size: 2rem; color: var(--green-d); }
.card p { margin: 0; }
.card .lbl { font-size: .78rem; font-weight: 800; margin-top: 4px; }
.card .loan { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.card .loan details small { display: block; }
.card details small { display: block; }
.credit-plan { width: 100%; border-collapse: collapse; font-size: .82rem; }
.credit-plan td { padding: 3px 4px; border-top: 1px solid var(--line); }
.credit-plan td:nth-child(3) { text-align: right; white-space: nowrap; }
.card.msg.done { opacity: .55; }
.app-body h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 14px 0 8px; font-family: var(--font); }
.shop-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.shop-row .si { font-size: 1.6rem; width: 36px; text-align: center; }
.shop-row .st { flex: 1; min-width: 0; }
.tx-row { display: grid; grid-template-columns: 62px 1fr auto; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .82rem; align-items: center; }
.pos { color: var(--c-ok-d); } .neg { color: var(--c-danger-d); }
.skill { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; margin: 10px 0; font-weight: 700; }
.skill .bar { grid-column: span 2; }
.skill .bar i { background: var(--green); }
.pips { grid-column: span 2; display: flex; gap: 3px; }
.pips i { flex: 1; height: 4px; border-radius: 2px; background: var(--c-line); }
.pips i.on { background: var(--violet); }
.goal { display: flex; gap: 10px; align-items: center; padding: 11px; border-radius: var(--r-ctl); background: var(--c-white); margin: 0 0 6px; }
.goal b { flex: 1; font-weight: 700; }
.goal.done { background: var(--c-ok-bg); }
.rank { display: grid; grid-template-columns: minmax(24px, max-content) 34px 1fr auto; gap: 8px; align-items: center; padding: 7px 4px; border-bottom: 1px solid var(--line); }
.rank-sep { margin: 12px 0 2px; text-align: center; }
.rank .pos-n { font-variant-numeric: tabular-nums; }
.rank.me { background: var(--c-soft); border-radius: var(--r-sm); }
.rank .pos-n { text-align: center; color: var(--orange-d); font-family: var(--display); }

/* ---------- Menu circulaire ---------- */
#pie { position: fixed; inset: 0; z-index: 30; display: none; background: radial-gradient(circle at center, rgb(var(--c-night-rgb) / .12), rgb(var(--c-night-rgb) / .28)); }
#pie.open { display: block; animation: fade .15s; }
.pie-center { position: absolute; transform: translate(-50%, -50%); background: var(--ink); color: var(--c-white); padding: 8px 14px; border-radius: var(--r-ctl); font-family: var(--display); font-weight: 700; text-align: center; max-width: 150px; box-shadow: var(--sh); pointer-events: none; }
.pie-center small { color: var(--c-line-2); font-family: var(--font); }
.pie-opt { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 1px; width: 128px; padding: 8px 8px; border-radius: var(--r-ctl); background: var(--c-white); box-shadow: var(--sh); font-weight: 800; font-size: .8rem; line-height: 1.15; text-align: center; animation: pieIn .22s cubic-bezier(.2, 1.5, .4, 1) backwards; animation-delay: var(--d); }
.pie-opt span { font-size: 1.3rem; }
.pie-opt small { font-size: .66rem; color: var(--red); }
.pie-opt:hover:not(:disabled) { background: var(--c-soft); outline: 2px solid var(--orange); }
@keyframes pieIn { from { transform: translate(-50%, -50%) scale(.3); opacity: 0; } }

/* ---------- Modale ---------- */
#modal { position: fixed; inset: 0; z-index: 40; background: rgb(var(--c-night-rgb) / .45); display: none; align-items: flex-end; justify-content: center; backdrop-filter: blur(4px); }
#modal.open { display: flex; animation: fade .15s; }
.sheet { position: relative; background: var(--c-soft); width: 100%; max-width: 520px; max-height: 88vh; overflow: auto; border-radius: 28px 28px 0 0; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); animation: up .25s ease-out; }
.sheet h2 { font-size: 1.5rem; margin: 0 40px 6px 0; display: flex; gap: 8px; align-items: center; }
.dm-heading { display: flex; align-items: flex-start; gap: 8px; padding-right: 42px; }
.dm-heading h2 { flex: 1; min-width: 0; margin-right: 0; flex-wrap: wrap; overflow-wrap: anywhere; }
.dm-contact { flex: 0 0 44px; min-height: 44px; border-radius: 14px; background: var(--c-white); font-size: 1.8rem; line-height: 1; }
.dm-contact:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.sheet .acts { margin-top: 10px; }
.sheet-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; background: rgb(var(--c-night-rgb) / .06); }
@media (min-width: 700px) { #modal { align-items: center; } .sheet { border-radius: var(--r-panel); } }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.chat-older { align-self: center; font-size: 13px; padding: 4px 8px; }
.chatlist { display: flex; flex-direction: column; gap: 6px; max-height: 45vh; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; padding: 10px; background: var(--c-white); border-radius: var(--r-card); margin: 10px 0; }
.cmsg { align-self: flex-start; max-width: 85%; background: var(--c-bg); padding: 7px 11px; border-radius: 14px 14px 14px 4px; }
.cmsg.mine { align-self: flex-end; background: var(--c-ok-bg); border-radius: 14px 14px 4px 14px; }
.cmsg b { display: block; font-size: .76rem; color: var(--orange-d); }
.cmsg span { overflow-wrap: anywhere; }
.cmsg small { font-size: .68rem; }
.chatform { display: flex; gap: 8px; }
.chatform input { flex: 1; min-width: 0; font: inherit; padding: 11px 14px; border-radius: var(--r-ctl); border: 1.5px solid var(--line); }
.chatform input:focus { outline: none; border-color: var(--orange); }

/* ---------- Notifications ---------- */
#toasts { position: fixed; top: calc(max(12px, env(safe-area-inset-top)) + 120px); left: 50%; transform: translateX(-50%); width: calc(100% - 24px); max-width: 440px; z-index: 50; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.toast { background: rgb(var(--c-night-rgb) / .92); color: var(--c-white); padding: 10px 16px; border-radius: var(--r-ctl); box-shadow: var(--sh); font-weight: 700; font-size: .9rem; animation: up .2s ease-out; transition: opacity .4s, transform .4s; backdrop-filter: blur(8px); }
.toast.out { opacity: 0; transform: translateY(-10px); }
.toast.t-good, .toast.t-money { background: rgb(var(--c-ok-rgb) / .95); }
.toast.t-bad { background: rgb(var(--c-danger-rgb) / .95); }
.toast.t-levelup { background: var(--c-night-3); }
.toast.t-power { background: var(--c-night-2); color: var(--c-gold); }
.toast.t-msg { background: rgb(var(--c-blue-2-rgb) / .95); }
.toast.t-done { background: rgb(var(--c-night-rgb) / .8); font-size: .82rem; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- HUD temps réel (barre du haut, carte de gauche) ---------- */
.topbar { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: var(--r-pill); min-height: 46px; }
.tb-time { display: flex; align-items: center; gap: 6px; font-size: .9rem; white-space: nowrap; color: var(--ink); }
.tb-time b { font-variant-numeric: tabular-nums; }
.tb-sep { width: 1px; height: 22px; background: var(--line); flex: none; }
.tb-grow { flex: 1; }
.tb-mood { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-pill); font-weight: 800; font-size: .82rem; white-space: nowrap; }
.tb-mood.mood-g, .mood-g { background: var(--c-ok-bg); color: var(--c-ok-d); }
.tb-mood.mood-y, .mood-y { background: var(--c-yellow-bg); color: var(--c-yellow-d); }
.tb-mood.mood-r, .mood-r { background: var(--c-danger-bg); color: var(--c-danger-d); }
.tb-net { font-size: .78rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.tb-snd { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); flex: none; }
.tb-money { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 14px; border-radius: var(--r-pill); background: var(--ink); color: var(--c-white); font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tb-money i { width: 22px; height: 22px; border-radius: 50%; background: var(--c-yellow); color: var(--ink); display: grid; place-items: center; }
.status-row { top: calc(max(10px, env(safe-area-inset-top)) + 54px); }
@media (max-width: 520px) { .hide-sm { display: none !important; } .tb-time { font-size: .82rem; } .tb-mood { padding: 4px 8px; } }

.lcard { position: absolute; left: 10px; top: calc(max(10px, env(safe-area-inset-top)) + 92px); width: min(300px, calc(100vw - 72px)); z-index: 3; pointer-events: none; }
.lcard:empty { display: none; }
.lc { pointer-events: auto; background: rgb(var(--c-night-rgb) / .88); color: var(--c-white); border-radius: var(--r-card); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--sh); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.lc b { font-size: .95rem; line-height: 1.25; }
.lc small { color: var(--c-line-2); font-size: .78rem; }
.lc-bar { height: 6px; border-radius: var(--r-pill); background: rgb(var(--c-white-rgb) / .15); overflow: hidden; }
.lc-bar i { display: block; height: 100%; background: var(--c-yellow); border-radius: var(--r-pill); transition: width .25s linear; }
.lc-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.lc-tags .tag { margin: 0; padding: 2px 8px; border-radius: var(--r-pill); background: rgb(var(--c-white-rgb) / .12); color: var(--c-line); font-size: .72rem; }
.lc-tags .tag.go { background: var(--c-ok); color: var(--c-white); }
.lc-btns { display: flex; gap: 6px; }
.lc-btns .btn { flex: 1; padding: 9px 10px; font-size: .84rem; border-radius: var(--r-sm); }
.lc-head { display: flex; align-items: center; gap: 10px; }
.lc-head > span { font-size: 1.6rem; }
.lc-head > div { flex: 1; display: flex; flex-direction: column; }
.lc-head em { font-style: normal; font-size: .72rem; font-weight: 800; background: rgb(var(--c-white-rgb) / .12); padding: 3px 8px; border-radius: var(--r-pill); white-space: nowrap; }
.lc-row { display: flex; align-items: center; gap: 10px; font-size: .82rem; font-weight: 700; }
.ring { --p: 0; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c-yellow) calc(var(--p) * 1%), rgb(var(--c-white-rgb) / .15) 0); flex: none; }
.ring i { width: 32px; height: 32px; border-radius: 50%; background: var(--c-night); display: grid; place-items: center; font-style: normal; font-size: .7rem; font-weight: 800; }
.tasks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.task { position: relative; aspect-ratio: 1; border-radius: var(--r-ctl); background: rgb(var(--c-white-rgb) / .1); font-size: 1.35rem; display: grid; place-items: center; border: 1.5px solid rgb(var(--c-white-rgb) / .14); }
.task:hover:not(:disabled) { background: rgb(var(--c-white-rgb) / .2); }
.task.done { background: var(--c-ok); border-color: var(--c-ok); }
.task.busy { border-color: var(--c-yellow); }
.task i { position: absolute; inset: auto 4px 3px auto; font-style: normal; font-size: .66rem; font-weight: 800; color: var(--c-yellow); }
.task:disabled { cursor: default; }
.task-lab { text-align: center; }
/* Carte compacte (service, trajet) : petite et translucide pour voir le personnage agir. */
.lcard:has(.lc.mini) { width: min(244px, calc(100vw - 84px)); }
.lc.mini { padding: 8px 10px; gap: 6px; border-radius: var(--r-ctl); background: rgb(var(--c-night-rgb) / .66); }
.lc.mini b { font-size: .86rem; }
.lc.mini small { font-size: .72rem; }
.lc.mini .lc-head { gap: 8px; }
.lc.mini .lc-head > span { font-size: 1.25rem; }
.lc.mini .lc-head > div { min-width: 0; }
.lc.mini .lc-head b, .lc.mini .lc-head small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lc.mini .tasks { gap: 5px; }
.lc.mini .task { aspect-ratio: auto; height: 38px; border-radius: var(--r-sm); font-size: 1.1rem; }
.lc.mini .lc-btns .btn { padding: 7px 8px; font-size: .78rem; }
/* Écran d'accueil du téléphone : rubriques, « À la une » en haut, noms lisibles sur deux lignes */
.ph-sec { margin-top: 10px; }
.ph-sec h5 { margin: 0 2px 2px; color: rgb(var(--c-white-rgb) / .78); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.ph-sec h5 em { font-style: normal; font-weight: 700; letter-spacing: 0; text-transform: none; padding: 1px 6px; border-radius: var(--r-pill); background: rgb(var(--c-white-rgb) / .16); }
.ph-sec.featured { padding: 8px 8px 2px; border-radius: var(--r-card); background: rgb(var(--c-white-rgb) / .1); box-shadow: inset 0 0 0 1px rgb(var(--c-white-rgb) / .12); }
.ph-sec .apps { gap: 12px 8px; padding-top: 6px; }
.app small { white-space: normal; text-align: center; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.app > span.logo svg { width: 100%; height: 100%; display: block; }
.brandbar > span.bl { background: none; padding: 0; overflow: hidden; }
.brandbar > span.bl svg, .brandbar > span.bl img { width: 100%; height: 100%; }
/* Applis promues */
.app .logo b { color: var(--c-white); font-size: 1.3rem; font-weight: 800; }
.app .logo.add { background: rgb(var(--c-white-rgb) / .16); color: var(--c-white); font-size: 1.6rem; font-weight: 400; border: 1.5px dashed rgb(var(--c-white-rgb) / .5); }
/* Discussion directe du lieu (sans téléphone) */
.pchat { pointer-events: auto; padding: 6px 8px; border-radius: var(--r-ctl); display: flex; flex-direction: column; gap: 4px; max-width: 520px; }
.pchat[hidden] { display: none; }
.pchat-list { display: flex; flex-direction: column; gap: 2px; }
.pc-msg { display: flex; align-items: center; gap: 6px; font-size: .78rem; min-width: 0; }
.pc-msg .av { flex: none; border-radius: 6px; background: var(--c-soft); }
.pc-msg b { flex: none; max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-msg span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2, var(--c-ink-2)); }
.pc-msg.mine b { color: var(--c-accent-d); }
.pc-empty { margin: 0; font-size: .76rem; color: var(--ink-2, var(--c-muted)); }
.pchat-form { display: flex; gap: 6px; }
.pchat-form input { flex: 1; min-width: 0; padding: 7px 10px; border-radius: var(--r-sm); font-size: .84rem; }
.pchat-form .btn { padding: 6px 10px; }
/* Aménagement : barre du meuble en cours de placement */
.placebar { position: absolute; left: 50%; top: calc(max(10px, env(safe-area-inset-top)) + 64px); transform: translateX(-50%); z-index: 6; pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--r-ctl); width: min(440px, calc(100vw - 24px)); font-size: .86rem; text-align: center; }
/* Carte seule */
.map-restore { position: absolute; left: 50%; top: calc(max(10px, env(safe-area-inset-top)) + 70px); transform: translateX(-50%); pointer-events: auto; z-index: 5; padding: 10px 16px; border-radius: var(--r-pill); background: rgb(var(--c-night-rgb) / .82); color: var(--c-white); font-weight: 800; font-size: .88rem; box-shadow: var(--sh); white-space: nowrap; }
/* Cadeau du jour */
.gift-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 12px 0 16px; }
.gift-days span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: var(--r-sm); background: var(--c-soft); font-size: .62rem; font-weight: 800; color: var(--c-muted); text-align: center; }
.gift-days span small { font-size: .62rem; }
.gift-days span.done { background: var(--c-ok-bg); color: var(--c-ok-d); }
.gift-days span.on { background: var(--c-accent); color: var(--c-white); transform: scale(1.06); }
/* Appli Dressing */
.card.style-prev { display: flex; flex-direction: row; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 2; }
.style-prev .av { flex: none; background: linear-gradient(160deg, var(--c-pink-bg), var(--c-violet-bg)); border-radius: var(--r-card); }
.style-prev > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.style-sec > b { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 0 8px; }
.style-sec > b ~ b { margin-top: 14px; }
.style-sec b em { font-style: normal; font-weight: 700; font-size: .78rem; color: var(--muted, var(--c-muted)); }
.style-sec .seg.wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.style-sec .seg.wrap button { white-space: normal; line-height: 1.2; padding: 9px 8px; }
.lc-more { flex: none; width: 30px; height: 30px; border-radius: var(--r-sm); background: rgb(var(--c-white-rgb) / .14); color: var(--c-white); font-size: .9rem; display: grid; place-items: center; }
.btn.yellow { background: var(--c-yellow); color: var(--c-ink); font-weight: 800; }
.btn.yellow:hover:not(:disabled) { background: var(--c-yellow); }
.btn.dark { background: rgb(var(--c-white-rgb) / .12); color: var(--c-white); border: 1.5px solid rgb(var(--c-white-rgb) / .18); }
.me-dock { position: absolute; left: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: none; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: var(--r-pill); font-weight: 800; font-size: .85rem; }
@media (min-width: 900px) {
  .topbar { left: 16px; right: 412px; top: 16px; }
  .status-row { top: 72px; }
  .lcard { left: 16px; top: 136px; width: 320px; }
  .me-dock { display: flex; left: 16px; bottom: 16px; }
}

/* ---------- Fiches d'actions (objets, personnes) ---------- */
.as-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.as-i { width: 54px; height: 54px; border-radius: var(--r-ctl); background: var(--c-soft); display: grid; place-items: center; font-size: 1.8rem; flex: none; overflow: hidden; }
.as-head h2 { margin: 0; }
.as-head p { margin: 2px 0 0; font-size: .86rem; }
.as-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.as-card { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 12px; border-radius: var(--r-ctl); background: var(--c-white); border: 1.5px solid var(--line); transition: border-color .15s, transform .15s; }
.as-card:hover:not(:disabled) { border-color: var(--ink); transform: translateY(-1px); }
.as-card:disabled { opacity: .55; cursor: not-allowed; }
.as-card > b { font-size: .92rem; line-height: 1.25; }
.as-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.as-ic { font-size: 1.5rem; }
.as-t { display: flex; flex-direction: column; align-items: flex-end; font-size: .74rem; font-weight: 800; color: var(--muted); }
.as-t b { color: var(--ink); font-size: .82rem; }
.as-t b.free { color: var(--green); }

/* Interrupteur (aller au travail automatiquement) */
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 700; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch span { width: 40px; height: 24px; border-radius: var(--r-pill); background: var(--c-line-2); position: relative; transition: background .2s; flex: none; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--c-white); box-shadow: 0 1px 3px rgb(var(--c-black-rgb) / .25); transition: transform .2s; }
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.card select { padding: 6px 8px; border-radius: var(--r-sm); border: 1.5px solid var(--line); font: inherit; margin-left: 6px; }
.lc .btn.white { color: var(--ink); }

/* Pastilles d'action au-dessus des objets */
.wlabel.hotspot { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: var(--c-white); font-size: 1.15rem; box-shadow: 0 4px 14px rgb(var(--c-night-rgb) / .25); border: 2px solid var(--c-white); transition: transform .15s; }
.wlabel.hotspot:hover { border-color: var(--c-yellow); }
body.hud-clean .wlabel.hotspot { display: none !important; }

/* Caméra du trajet : Poursuite / Côté / Intérieur */
.ridecam { position: absolute; right: 12px; top: 40%; display: none; flex-direction: column; gap: 2px; padding: 4px; border-radius: var(--r-ctl); }
.ridecam button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 8px; border-radius: var(--r-sm); font-size: 1rem; color: var(--ink-2); }
.ridecam button span { font-size: .64rem; font-weight: 800; }
.ridecam button.on { background: var(--ink); color: var(--c-white); }
.hud.riding .ridecam { display: flex; }
.hud.riding .camctl { display: none; }

/* Boutons rapides (Dégager l'écran, Aller au travail) */
.quick { position: absolute; right: 12px; bottom: calc(150px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; z-index: 2; }
.quick .btn { box-shadow: var(--sh); }
.quick .btn[hidden] { display: none; }
@media (min-width: 900px) { .quick { right: 412px; bottom: 96px; } .ridecam { right: 412px; top: 50%; transform: translateY(-50%); } }

/* Écran dégagé : on ne garde que la barre du haut, le dock et le bouton pour réafficher */
.hud.clean .lcard, .hud.clean .ctx, .hud.clean .needs, .hud.clean .status-row, .hud.clean .camctl, .hud.clean .me-dock, .hud.clean .actq, .hud.clean #h-gowork { display: none !important; }

/* ---------- Téléphone façon smartphone (prompt 7 du document « Prompts UI ») ---------- */
/* Au centre de l'écran, 340 × 690 px au plus, bordure noire de 10 px et encoche arrondie ; le jeu derrière est flouté. */
.overlay.ov-phone { z-index: 20; padding: 12px; background: rgb(var(--c-night-rgb) / .34); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.phone-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; max-height: 100%; }
.phone { --ph-h: min(690px, calc(100dvh - 76px)); position: relative; flex: none; height: var(--ph-h); width: min(340px, calc(var(--ph-h) * .5), calc(100vw - 24px)); border: 10px solid var(--c-black); border-radius: 48px; background: var(--c-black); box-shadow: 0 0 0 1.5px var(--c-night-3), 0 30px 70px rgb(var(--c-black-rgb) / .45); }
.phone::after { content: ''; position: absolute; left: -13px; top: 110px; width: 3px; height: 28px; border-radius: 2px 0 0 2px; background: var(--c-night-3); box-shadow: 0 50px 0 var(--c-night-3), 0 92px 0 var(--c-night-3); }
.phone.opening { animation: phopen .38s cubic-bezier(.2, .9, .3, 1.15); }
@keyframes phopen { from { transform: translateY(40px) scale(.94); opacity: 0; } }
.ph-screen { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 38px; background: var(--wall); color: var(--c-white); transition: background .25s; }
.phone.in-app .ph-screen { background: var(--c-soft); color: var(--ink); }
/* Barre d'état : heure à gauche, encoche au milieu, réseau « 4G » et batterie à droite */
.ph-status { position: relative; z-index: 2; flex: none; height: 44px; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; font-size: .82rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ph-status > span { display: flex; gap: 5px; align-items: center; font-size: .72rem; }
.ph-island { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 34%; max-width: 124px; height: 28px; border-radius: 0 0 18px 18px; background: var(--c-black); }
.ph-island::before, .ph-island::after { content: ''; position: absolute; top: 0; width: 10px; height: 10px; }
.ph-island::before { left: -10px; background: radial-gradient(circle at 0 100%, transparent 9.5px, var(--c-black) 10px); }
.ph-island::after { right: -10px; background: radial-gradient(circle at 100% 100%, transparent 9.5px, var(--c-black) 10px); }
.ph-bars { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.ph-bars i { width: 3px; border-radius: 1px; background: currentColor; }
.ph-bars i:nth-child(1) { height: 4px; } .ph-bars i:nth-child(2) { height: 6px; } .ph-bars i:nth-child(3) { height: 8px; } .ph-bars i:nth-child(4) { height: 10px; }
.ph-bat { position: relative; display: inline-flex; width: 23px; height: 11px; padding: 1px; border: 1.5px solid currentColor; border-radius: 4px; opacity: .9; }
.ph-bat::after { content: ''; position: absolute; right: -4px; top: 2.5px; width: 2px; height: 4px; border-radius: 0 1px 1px 0; background: currentColor; }
.ph-bat i { height: 100%; border-radius: 1.5px; background: currentColor; }
.ph-bat.low i { background: var(--c-coral); }
/* Fond « Abidjan » : silhouette du Plateau fixe en bas, derrière les applis et le dock */
.ph-sky { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; width: 100%; height: auto; aspect-ratio: 360 / 160; color: var(--c-night-2); pointer-events: none; }
.ph-sky path { fill: currentColor; }
.ph-sky .lit { fill: rgb(var(--c-yellow-l-rgb) / .7); }
.ph-home-scr { position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; padding: 4px 14px 12px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: none; }
.ph-home-scr::-webkit-scrollbar { display: none; }
.ph-home-scr.in { animation: phzoom .28s ease-out; }
@keyframes phzoom { from { transform: scale(1.05); opacity: 0; } }
/* Écran d'accueil : heure du jeu en très grand (Fredoka 64 px), date du jour et quartier */
.ph-lock { text-align: center; padding: 4px 0 2px; }
.ph-time { margin: 4px 0 4px; font-family: var(--f-display); font-size: 64px; font-weight: 600; letter-spacing: -.01em; line-height: 1; color: var(--c-white); font-variant-numeric: tabular-nums; text-shadow: 0 2px 14px rgb(var(--c-black-rgb) / .22); }
.ph-hello { margin: 0; font-weight: 700; font-size: .9rem; opacity: .92; }
.ph-widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.ph-w { min-width: 0; text-align: left; padding: 10px 12px; border-radius: var(--r-card); color: var(--c-white); background: rgb(var(--c-white-rgb) / .14); backdrop-filter: blur(10px); transition: background .15s, transform .12s; }
.ph-w small { display: flex; gap: 4px; align-items: center; color: rgb(var(--c-white-rgb) / .82); font-size: .66rem; font-weight: 700; white-space: nowrap; overflow: hidden; }
.ph-w b { display: block; margin-top: 3px; font-size: .84rem; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* « Demain · 07h–08h » sur deux lignes au besoin */
/* Notifications : cartes sombres arrondies (l'événement du moment en tête, entouré d'orange quand il est en direct) */
.ph-notif { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--r-card); background: rgb(var(--c-night-rgb) / .58); color: var(--c-white); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgb(var(--c-white-rgb) / .1), 0 6px 18px rgb(var(--c-black-rgb) / .18); font-size: .78rem; line-height: 1.3; transition: background .15s, transform .12s; }
.ph-notif img, .ph-ni { flex: none; width: 34px; height: 34px; border-radius: 9px; object-fit: cover; display: grid; place-items: center; color: var(--c-white); background: var(--c); }
.ph-notif > span:not(.ph-ni) { flex: 1; min-width: 0; color: rgb(var(--c-white-rgb) / .78); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ph-notif b { display: block; color: var(--c-white); font-size: .82rem; }
.ph-notif em { flex: none; font-style: normal; font-size: .66rem; color: rgb(var(--c-white-rgb) / .6); }
.ph-ev .ph-ni { background: var(--c-accent); font-size: 1.15rem; }
.ph-ev > span:not(.ph-ni) { -webkit-line-clamp: 3; } /* titre sur deux lignes et l'heure du match dessous */
.ph-ev em { font-family: var(--f-display); font-size: .9rem; font-weight: 700; color: var(--c-white); }
.ph-ev.live { box-shadow: inset 0 0 0 1.5px rgb(var(--c-accent-rgb) / .85), 0 6px 18px rgb(var(--c-black-rgb) / .22); }
@media (hover: hover) { button.ph-notif:hover { background: rgb(var(--c-night-rgb) / .7); } .ph-w:hover { background: rgb(var(--c-white-rgb) / .22); } }
button.ph-notif:active, .ph-w:active { transform: scale(.98); }
/* Grille d'applis : 4 colonnes, icône carrée de 60 px aux coins de 16 px, nom blanc de 12 px dessous */
.apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 6px; padding: 8px 0 4px; }
.ph-group h3 { margin: 6px 0 2px; color: rgb(var(--c-white-rgb) / .88); font-family: var(--f-text); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 1px 2px rgb(var(--c-black-rgb) / .3); }
.ph-partners { padding: 6px 10px 10px; border-radius: var(--r-card); background: rgb(var(--c-white-rgb) / .09); }
.ph-partners .apps { padding-top: 8px; }
.app:focus-visible { outline: 2px solid var(--c-white); outline-offset: 4px; border-radius: var(--r-sm); }
.app > span.logo.add { background: rgb(var(--c-white-rgb) / .16); border: 1px dashed rgb(var(--c-white-rgb) / .65); }
.app { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--c-white); }
.app > span { width: min(60px, 100%); aspect-ratio: 1; border-radius: var(--r-ctl); display: grid; place-items: center; color: var(--c-white); background: linear-gradient(150deg, color-mix(in srgb, var(--c) 78%, var(--c-white)), var(--c) 60%); box-shadow: 0 6px 14px rgb(var(--c-black-rgb) / .28), inset 0 1px 0 rgb(var(--c-white-rgb) / .35); transition: transform .12s var(--ease); }
@media (hover: hover) { .app:hover > span { transform: translateY(-2px); } }
.app:active > span { transform: scale(.9); }
/* Nom d'appli sur deux lignes au plus (« Service client », « Ton appli ici »). */
.app small { max-width: 100%; color: var(--c-white); font-weight: 600; font-size: var(--fs-label); line-height: 1.2; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; text-shadow: 0 1px 2px rgb(var(--c-black-rgb) / .45); }
.app .badge { right: 2px; top: -5px; }
.ph-dock { position: relative; z-index: 1; flex: none; margin: 0 10px 20px; padding: 10px 12px; border-radius: 30px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; background: rgb(var(--c-white-rgb) / .2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.ph-dock .app small { display: none; }
.ph-home { position: absolute; z-index: 3; bottom: 8px; left: 50%; transform: translateX(-50%); width: 128px; height: 5px; border-radius: var(--r-pill); background: rgb(var(--c-white-rgb) / .75); }
.phone.in-app .ph-home { background: rgb(var(--c-night-rgb) / .35); }
.ph-app { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ph-app.in { animation: phapp .26s ease-out; }
@keyframes phapp { from { transform: translateX(28px); opacity: 0; } }
.app-head { flex: none; padding: 2px 16px 10px; }
.ph-back { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; padding: 4px 0; font-weight: 700; font-size: .88rem; color: color-mix(in srgb, var(--c) 70%, var(--c-black)); }
.app-head h2 { display: flex; gap: 10px; align-items: center; margin-top: 4px; font-size: 1.65rem; letter-spacing: -.02em; }
.app-head h2 i { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--c-white); background: var(--c); }
.app-body { flex: 1; min-height: 0; padding: 4px 14px 30px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgb(var(--c-muted-rgb) / .45) transparent; }
/* Pilule « × Fermer » au-dessus du téléphone */
.ph-close { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 18px; border-radius: var(--r-pill); background: rgb(var(--c-white-rgb) / .95); color: var(--ink); font-weight: 800; box-shadow: var(--sh); transition: background .15s, transform .12s; }
.ph-close:hover { background: var(--c-white); }
.ph-close:active { transform: scale(.96); }
.ph-close:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.ph-walls { display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 6px; }
.ph-walls button { height: 66px; border-radius: var(--r-sm); display: flex; align-items: flex-end; justify-content: center; padding: 4px; color: var(--c-white); font-size: .66rem; font-weight: 700; text-shadow: 0 1px 3px rgb(var(--c-black-rgb) / .7); }
.ph-walls button.on { box-shadow: 0 0 0 2px var(--c-white) inset, 0 0 0 2px var(--ink); }
@media (max-width: 600px) {
  .overlay.ov-phone { padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom)); }
  /* Sur le téléphone du joueur, celui du jeu prend presque toute la hauteur (340 px de large au plus). */
  .phone { --ph-h: min(690px, calc(100dvh - 70px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); width: min(340px, calc(100vw - 24px)); }
  .phone::after { display: none; }
  .ph-status { padding: 0 20px; font-size: .78rem; }
  .ph-status > span { gap: 3px; font-size: .66rem; }
  .ph-close { min-height: 36px; padding: 6px 14px; font-size: .85rem; }
}
/* Très petit téléphone (320 px) : bordure un peu plus fine, colonnes d'environ 58 px. */
@media (max-width: 360px) {
  .phone { border-width: 8px; border-radius: 42px; }
  .ph-screen { border-radius: 34px; }
  .ph-home-scr { padding: 2px 10px 10px; }
  .ph-time { font-size: 56px; }
  .ph-dock { margin: 0 8px 18px; padding: 8px 10px; }
}
/* Téléphone (l'appareil du joueur) tenu en paysage : écran du jeu à côté du bouton Fermer. */
@media (max-height: 520px) and (orientation: landscape) {
  .overlay.ov-phone { justify-content: center; padding: 8px; }
  .phone-wrap { flex-direction: row; align-items: center; }
  .ph-close { order: 2; }
  .phone { --ph-h: calc(100dvh - 16px); width: min(380px, 60vw); border-width: 6px; border-radius: 30px; }
  .ph-screen { border-radius: 24px; }
  .phone::after, .ph-island, .ph-lock { display: none; }
  .ph-status { height: 30px; }
  .ph-dock { margin-bottom: 14px; padding: 6px 10px; }
  .app-head h2 { font-size: 1.25rem; }
}
/* App Classement : plein écran vert très foncé, titre doré, onglets pilules, podium, « Ton rang » collé en bas */
.phone.app-ranking .ph-screen { background: radial-gradient(130% 55% at 50% 0%, var(--c-rank-2), var(--c-rank) 72%); color: var(--c-white); }
.phone.app-ranking .ph-home { background: rgb(var(--c-white-rgb) / .55); }
.app-ranking .ph-back { color: var(--c-gold); }
/* Le titre « Classements » reste lu par les lecteurs d'écran ; à l'écran, le titre doré le remplace. */
.app-ranking .app-head { padding-bottom: 0; }
.app-ranking .app-head h2 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.app-ranking .app-body { scrollbar-color: rgb(var(--c-white-rgb) / .25) transparent; }
.app-ranking small, .app-ranking .muted { color: rgb(var(--c-mint-rgb) / .72); }
.app-ranking .app-body > p { text-align: center; }
.rk-hero { margin: 0 0 12px; text-align: center; }
.rk-hero small { color: var(--c-gold); font-family: var(--f-display); font-size: .8rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; }
.rk-hero h3 { margin-top: 2px; color: var(--c-gold); font-family: var(--f-display); font-size: 1.75rem; font-weight: 700; letter-spacing: .02em; line-height: 1.05; text-transform: uppercase; text-shadow: 0 2px 0 rgb(var(--c-black-rgb) / .35); }
/* Onglets centrés, mais toujours atteignables quand ils débordent (320 px) : marges automatiques plutôt que justify-content. */
.app-ranking .tabsrow button:first-child { margin-left: auto; }
.app-ranking .tabsrow button:last-child { margin-right: auto; }
.app-ranking .tabsrow button { background: rgb(var(--c-white-rgb) / .08); color: var(--c-white); box-shadow: inset 0 0 0 1px rgb(var(--c-white-rgb) / .14); transition: background .15s; }
@media (hover: hover) { .app-ranking .tabsrow button:hover:not(.on) { background: rgb(var(--c-white-rgb) / .14); } }
.app-ranking .tabsrow button.on { background: var(--c-gold); color: var(--c-rank); box-shadow: none; }
.app-ranking .rank { border-bottom-color: rgb(var(--c-white-rgb) / .08); }
.app-ranking .rank .pos-n { color: rgb(var(--c-white-rgb) / .7); }
.app-ranking .rank > b:last-child { color: var(--c-gold); font-family: var(--f-display); font-weight: 600; }
.app-ranking .rank > b.pos:last-child { color: var(--c-ok-l); }
.app-ranking .rank > b.neg:last-child { color: var(--c-danger-l); }
.app-ranking .biz-i { background: rgb(var(--c-white-rgb) / .08); }
.app-ranking .rank-sep { color: rgb(var(--c-white-rgb) / .5); }
.app-ranking .btn.white { background: rgb(var(--c-white-rgb) / .1); border-color: rgb(var(--c-white-rgb) / .18); color: var(--c-white); }
.app-ranking .rank.me { position: sticky; top: 0; bottom: 14px; z-index: 1; margin: 6px -4px; padding: 8px; border-radius: var(--r-ctl); background: var(--c-rank-2); box-shadow: inset 0 0 0 1.5px rgb(var(--c-gold-rgb) / .75), 0 8px 22px rgb(var(--c-black-rgb) / .45); }
.app-ranking .rank.me small { color: var(--c-gold); font-weight: 700; }
.app-ranking .rank.me .pos-n::before { content: '#'; }
/* Podium : 2e, 1er (couronne), 3e ; les marches portent le rang. */
.rk-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 6px; margin: 22px 0 8px; }
.rk-podium .rank { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; margin: 0; padding: 0; border: 0; text-align: center; background: none; box-shadow: none; }
.rk-podium .p1 { order: 2; --medal: var(--c-gold); --medal-rgb: var(--c-gold-rgb); --step: 68px; }
.rk-podium .p2 { order: 1; --medal: var(--c-silver); --medal-rgb: var(--c-silver-rgb); --step: 50px; }
.rk-podium .p3 { order: 3; --medal: var(--c-bronze); --medal-rgb: var(--c-bronze-rgb); --step: 38px; }
.rk-podium .rank > svg { order: 1; flex: none; border-radius: 50%; background: var(--c-portrait); box-shadow: 0 0 0 3px var(--medal), 0 6px 16px rgb(var(--c-black-rgb) / .4); }
.rk-podium .p1::before { content: '👑'; order: 0; margin-bottom: -6px; font-size: 1.6rem; line-height: 1; transform: rotate(-8deg); filter: drop-shadow(0 2px 3px rgb(var(--c-black-rgb) / .4)); }
.rk-podium .rank > span { order: 2; max-width: 100%; min-width: 0; margin-top: 2px; }
.rk-podium .rank > span b { display: block; font-size: .8rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-podium .rank > span small { font-size: .66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-podium .rank > b:last-child { order: 3; font-size: .78rem; line-height: 1.2; }
.rk-podium .rank .pos-n { order: 4; align-self: stretch; display: grid; place-items: center; height: var(--step); margin-top: 4px; border-radius: var(--r-sm) var(--r-sm) 0 0; background: linear-gradient(180deg, rgb(var(--medal-rgb) / .92), rgb(var(--medal-rgb) / .3)); color: var(--c-rank); font-family: var(--f-display); font-size: 1.5rem; font-weight: 700; }
.rk-podium .rank.me > span b { color: var(--c-gold); }

/* ---------- Vignettes 3D des objets ---------- */
img.thumb { display: block; width: 100%; height: 100%; object-fit: contain; }
.obj span:has(img.thumb) { width: 46px; height: 46px; }
.shop-row .si:has(img.thumb) { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--c-soft); }
.bcard .bi img.thumb { height: 100%; width: auto; max-width: 100%; }
.as-i img.thumb { padding: 2px; }
.fx img.thumb { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; }

/* ---------- Tutoriel ---------- */
#tuto { position: fixed; inset: 0; z-index: 60; }
.tuto-hole { position: fixed; border-radius: var(--r-ctl); box-shadow: 0 0 0 9999px rgb(var(--c-night-rgb) / .6); transition: all .3s ease; pointer-events: none; outline: 3px solid var(--c-yellow); outline-offset: 2px; }
.tuto-tip { position: fixed; padding: 16px; border-radius: var(--r-card); transition: top .3s ease, left .3s ease; }
.tuto-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tuto-h b { flex: 1; font-size: 1.05rem; }
.tuto-ic { font-size: 1.5rem; }
.tuto-tip p { margin: 0 0 12px; color: var(--ink-2); font-size: .92rem; }
.tuto-tip .row { display: flex; gap: 8px; justify-content: flex-end; }

/* ---------- Joueurs : amis, conversations ---------- */
small.inline { display: inline; font-weight: 700; }
.row.between { justify-content: space-between; align-items: center; }
.card.convo { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: inherit; border: 0; cursor: pointer; }
.card.convo .grow { min-width: 0; }
.card.convo .grow > small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.convo.unread b { color: var(--ink); }
.card.convo .badge { position: static; }
#psres { margin-top: 10px; max-height: 50vh; overflow-y: auto; }
.fwhere { flex-basis: 100%; font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.app > span.logo { padding: 0; overflow: hidden; background: none; position: relative; }
.app > span.logo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.ustate { margin-top: 6px; font-size: .78rem; }
.ustate.ok { color: var(--green-d); font-weight: 700; }
.ustate.bad { color: var(--red); font-weight: 700; }

/* ---------- Téléphone : la fiche laisse voir le personnage au-dessus ---------- */
@media (max-width: 899px) {
  #modal { background: rgb(var(--c-night-rgb) / .18); backdrop-filter: none; }
  .sheet { max-height: 56vh; max-height: 56dvh; overscroll-behavior: contain; box-shadow: 0 -10px 30px rgb(var(--c-night-rgb) / .25); }
}
@media (max-width: 899px) and (orientation: landscape) {
  .sheet { max-height: 80vh; max-height: 80dvh; }
}

/* ---------- Business ---------- */
.card.biz { display: flex; flex-direction: column; gap: 6px; }
.biz-i { width: 42px; height: 42px; border-radius: var(--r-sm); background: var(--c-bg); display: grid; place-items: center; font-size: 1.4rem; flex: none; }
.biz-cash { color: var(--green-d); font-size: 1.05rem; white-space: nowrap; }
.biz-tip { color: var(--c-accent-d); font-weight: 700; }
.biz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 6px 0; }
.biz-grid > div { background: var(--c-soft); border-radius: var(--r-sm); padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.biz-grid .row { gap: 6px; align-items: center; }
.row.staff { align-items: center; gap: 8px; }
.bizform select { width: 100%; font: inherit; font-weight: 700; padding: 12px 14px; border-radius: var(--r-ctl); border: 1.5px solid var(--line); background: var(--c-white); }

/* ---------- Argent du jeu / paiement réel ---------- */
.paybadge { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 800; padding: 3px 10px; border-radius: var(--r-pill); margin-bottom: 8px; }
.paybadge.fake { background: var(--c-yellow-bg); color: var(--c-yellow-d); }
.paybadge.real { background: var(--c-portrait); color: var(--c-blue-d); }
/* ---------- Bourse ---------- */
.card.mkt { display: flex; flex-direction: column; gap: 6px; }
.mkt-p { text-align: right; }
.mkt-p b { display: block; font-size: 1.02rem; }
.up { color: var(--green-d); } .down { color: var(--red); }
.spark { width: 100%; height: 34px; }
.spark path { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.spark.up path { stroke: var(--green); } .spark.down path { stroke: var(--red); }

/* ---------- Élections ---------- */
.card.elec { display: flex; flex-direction: column; gap: 6px; }
.row.cand { align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.row.official { padding: 6px 0; border-bottom: 1px solid var(--line); }
details.card summary { cursor: pointer; list-style: none; }
details.card[open] summary { margin-bottom: 8px; }
/* ---------- DJ du bar ---------- */
.card.dj { display: flex; flex-direction: column; gap: 8px; background: linear-gradient(135deg, var(--c-ink), var(--c-violet-d)); color: var(--c-white); }
.card.dj small { color: rgb(var(--c-white-rgb) / .75); }
.dj-disc { font-size: 1.9rem; display: inline-block; }
.dj-disc.spin { animation: djspin 1.6s linear infinite; }
@keyframes djspin { to { transform: rotate(360deg); } }
label.check { display: flex; gap: 8px; align-items: flex-start; font-size: .85rem; margin: 6px 0 12px; }
label.check input { margin-top: 3px; }
#djres { max-height: 40vh; overflow-y: auto; margin-top: 8px; }

/* Bilan de campagne dans « Mes pubs » */
.adstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 8px 0 4px; }
.adstats span { background: var(--c-soft); border-radius: var(--r-sm); padding: 6px 8px; font-size: .72rem; color: var(--muted); font-weight: 700; }
.adstats b { display: block; font-size: 1.05rem; color: var(--ink); }

/* Bandeau de mise à jour */
.upd { position: fixed; z-index: 55; left: 50%; top: calc(env(safe-area-inset-top) + 72px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 16px; border-radius: var(--r-pill); background: var(--c-night); color: var(--c-white); font-weight: 700; font-size: .85rem; box-shadow: 0 10px 30px rgb(var(--c-black-rgb) / .3); white-space: nowrap; }
/* Bandeau avec nouveautés : petite fiche sombre ; seule la liste défile, le bouton reste visible. */
.upd.upd-notes { flex-direction: column; align-items: stretch; gap: 8px; width: min(380px, calc(100vw - 32px)); padding: 12px 14px 14px; border-radius: var(--r-card); white-space: normal; }
.upd-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.upd-x { display: none; flex: none; width: 28px; height: 28px; align-items: center; justify-content: center; border: 0; border-radius: var(--r-pill); background: rgb(var(--c-white-rgb) / .12); color: inherit; cursor: pointer; }
.upd-notes .upd-x { display: inline-flex; }
.upd-t, .upd-list { display: none; }
.upd-notes .upd-t { display: block; margin: 0; color: rgb(var(--c-white-rgb) / .7); font-size: var(--fs-label); font-weight: 600; }
.upd-notes .upd-list { display: block; max-height: min(34vh, 220px); overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 0 4px 0 0; list-style: none; font-weight: 500; line-height: 1.35; }
.upd-list li { display: flex; gap: 8px; padding: 5px 0; }
.upd-list li + li { border-top: 1px solid rgb(var(--c-white-rgb) / .08); }
.upd-list .upd-v { padding-top: 8px; color: var(--c-accent-l); font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-top: 0; }
.upd-list .upd-v:first-child { padding-top: 0; }
.upd-i { flex: none; }
.upd-notes .upd-go { width: 100%; padding: 10px 12px; }

/* ================= Téléphone : interface allégée ================= */
/* « Dégager l'écran » : petite icône 👁 dans la barre caméra ; le bouton texte ne sert qu'à « Réafficher ». */
.hud:not(.clean) #h-clean { display: none; }
@media (max-width: 899px) {
  /* Les boutons flottants se placent au-dessus des panneaux du bas (hauteur mesurée en direct). */
  .quick { bottom: calc(var(--stack, 150px) + 10px); }
  .camctl { top: auto; bottom: calc(var(--stack, 150px) + 10px); transform: none; }
  .hud .quick { right: 58px; }
  .hud.clean .quick { bottom: calc(var(--stack, 80px) + 10px); }
}
@media (max-width: 899px) and (max-height: 500px) {
  .camctl { top: calc(max(10px, env(safe-area-inset-top)) + 96px); bottom: auto; flex-direction: row; }
}
/* Pas la place au-dessus des panneaux du bas (petit écran, panneau du lieu ouvert) : boutons en ligne sous la barre du haut. */
@media (max-width: 899px) {
  .hud.cam-tight .camctl { top: calc(max(10px, env(safe-area-inset-top)) + 88px); bottom: auto; flex-direction: row; } /* sous la ligne des états (heure de pointe, pluie…) */
}
/* Écran tactile : on tourne et zoome au doigt, les boutons de caméra sont inutiles (on garde 👁). */
@media (hover: none) and (pointer: coarse) {
  .camctl [data-cmd^="cam|"] { display: none; }
}
@media (max-width: 600px) {
  .topbar { left: 8px; right: 8px; gap: 6px; padding: 4px 4px 4px 12px; min-height: 42px; }
  .tb-time { font-size: .8rem; gap: 4px; min-width: 0; }
  .tb-sep, .tb-snd { display: none; }
  .tb-mood { padding: 4px 7px; font-size: 1rem; }
  .tb-mood b { display: none; }
  .tb-money { padding: 6px 6px 6px 11px; font-size: .86rem; gap: 5px; flex: none; }
  .tb-money i { width: 20px; height: 20px; }
  .status-row { top: calc(max(10px, env(safe-area-inset-top)) + 50px); }
  .chip-st { font-size: .72rem; padding: 3px 8px; }
  .bottom { gap: 6px; padding: 0 8px calc(8px + env(safe-area-inset-bottom)); }
  /* Besoins : une seule ligne de 6 jauges ; un toucher affiche le détail. */
  .needs { grid-template-columns: repeat(6, 1fr); gap: 4px 8px; padding: 8px 10px; cursor: pointer; }
  .need { grid-template-columns: 1fr; justify-items: center; row-gap: 4px; }
  .need .ni { grid-row: auto; font-size: 1.05rem; line-height: 1; }
  .need .nl { display: none; }
  .need .bar { width: 100%; height: 6px; }
  .needs.open { grid-template-columns: repeat(3, 1fr); gap: 8px 12px; }
  .needs.open .need { grid-template-columns: auto 1fr; justify-items: stretch; }
  .needs.open .ni { grid-row: span 2; }
  .needs.open .nl { display: block; }
  .ctx-head { padding: 8px 10px; gap: 8px; }
  .ctx-i { width: 34px; height: 34px; font-size: 1.15rem; border-radius: var(--r-sm); }
  .ctx-t b { font-size: 1rem; }
  .ctx.open .ctx-body { max-height: 38vh; }
  .dock { border-radius: var(--r-card); padding: 4px; }
  .dock button { padding: 5px 0; }
  .dock button svg { width: 20px; height: 20px; }
  .camctl { right: 8px; padding: 3px; border-radius: var(--r-ctl); }
  .camctl button { width: 36px; height: 36px; }
  .quick .btn { padding: 8px 12px; font-size: .85rem; }
}

/* ================= Couleurs : orange, blanc, vert et accents chaleureux ================= */
:root { --orange: var(--c-accent); --orange-d: var(--c-accent-d); --violet: var(--c-violet); --sky-top: var(--c-blue-l); }
.btn.orange { background: linear-gradient(135deg, var(--c-accent), var(--c-accent-l)); box-shadow: 0 6px 16px rgb(var(--c-accent-rgb) / .32); }
.btn.orange:hover:not(:disabled) { background: linear-gradient(135deg, var(--c-accent-d), var(--c-accent)); }
.btn.green { background: linear-gradient(135deg, var(--c-ok), var(--c-ok-l)); }
.step { background: linear-gradient(135deg, var(--c-accent), var(--c-accent-l)); box-shadow: 0 4px 12px rgb(var(--c-accent-rgb) / .35); }
.dock button.on { background: linear-gradient(135deg, var(--c-accent), var(--c-accent-l)); color: var(--c-white); box-shadow: 0 6px 14px rgb(var(--c-accent-rgb) / .35); }
/* Solde (prompt 2) : sous-pilule grise, Fredoka gras, bouton rond vert « + » */
.tb-money { background: var(--c-soft); color: var(--c-ink); font-family: var(--f-display); font-size: 15px; font-weight: 700; box-shadow: inset 0 0 0 1px rgb(var(--c-ink-rgb) / .06); }
.tb-money i { background: var(--c-ok); color: var(--c-white); }
.tb-money b { transition: color var(--t-msg) var(--ease); }
.tb-money b.up { color: var(--c-ok-d); }
.tb-money b.down { color: var(--c-danger); }
.ctx-i { background: linear-gradient(135deg, var(--c-accent-bg), var(--c-bg)); }
.title-card h1 { background: linear-gradient(90deg, var(--c-accent) 0%, var(--c-accent) 35%, var(--c-ok) 75%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.card.cur { box-shadow: inset 4px 0 0 var(--c-accent), 0 2px 8px rgb(var(--c-night-rgb) / .05); }
.field input:focus { border-color: var(--c-accent); box-shadow: 0 0 0 4px rgb(var(--c-accent-rgb) / .16); }
.seg button.on { color: var(--c-accent-d); }
.need .ni { filter: saturate(1.2); }

/* Inscription en 2 étapes */
.steps-dots { display: flex; gap: 6px; margin-bottom: 10px; }
.steps-dots i { width: 28px; height: 5px; border-radius: var(--r-pill); background: var(--line); }
.steps-dots i.on { background: linear-gradient(90deg, var(--c-accent), var(--c-accent-l)); }
.steps-dots i.done { background: var(--c-ok); }
.center-link { display: block; margin: 10px auto 0; background: none; border: 0; color: var(--ink-2); font-weight: 700; font-size: .88rem; text-decoration: underline; }
.create .btn.big { width: 100%; }
@media (max-width: 600px) {
  .create { align-items: flex-end; padding: 10px; }
  .create-card { max-height: 64vh; overflow-y: auto; border-radius: var(--r-panel); padding: 16px 16px 14px; }
  .create.step-2 .create-card { max-height: 52vh; }
  .create h2 { font-size: 1.35rem; }
  .field { margin: 8px 0; }
  .field input { padding: 10px 12px; }
}

/* Activités risquées */
.risky-wrap { margin: 10px 0; border-radius: var(--r-ctl); background: var(--c-pink-bg); border: 1px solid var(--c-danger-bg); padding: 0 10px; }
.risky-wrap summary { cursor: pointer; padding: 10px 2px; font-weight: 800; color: var(--c-danger-d); list-style: none; }
.risky-wrap[open] { padding-bottom: 10px; }
.card.risky { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--c-danger-bg); background: var(--c-white); }
.card.risky .biz-i { background: var(--c-danger-bg); }
.skill-how { grid-column: 1 / -1; color: var(--ink-2); font-size: .76rem; margin-top: 2px; }

/* ================= Murs de la maison (coupés / levés / baissés) ================= */
.camctl .walls-btn { display: none; }
.hud.at-home .camctl .walls-btn { display: grid; }

/* ================= Carte : en-tête et téléphone ================= */
.ov-head .iconbtn:first-of-type { margin-left: auto; margin-right: 6px; }
@media (max-width: 899px) {
  body:not(.no3d) .ov-map .ov-card { max-height: 44dvh; padding: 12px 14px; border-radius: var(--r-card); }
  .ov-map .ov-head { margin-bottom: 4px; }
  .ov-map .ov-head h2 { font-size: 1.2rem; }
  .ov-map .ov-card > p.small.muted:first-of-type { display: none; }
  .ov-map .tabsrow { padding-bottom: 4px; }
  .ov-map .map-panel h3 { font-size: 1.1rem; }
}
@media (min-width: 600px) and (max-width: 899px) and (orientation: portrait) {
  body:not(.no3d) .overlay.ov-map { justify-content: center; }
  body:not(.no3d) .ov-map .ov-card { max-width: 560px; }
  .bottom { left: 50%; right: auto; width: min(600px, 100%); transform: translateX(-50%); }
}

/* ================= Téléphone (appareil) en paysage : panneaux sur les côtés ================= */
@media (max-width: 899px) and (max-height: 520px) and (orientation: landscape) {
  .topbar { left: 8px; right: 8px; top: max(6px, env(safe-area-inset-top)); min-height: 40px; padding: 3px 4px 3px 12px; }
  .status-row { top: calc(max(6px, env(safe-area-inset-top)) + 46px); }
  .lcard { top: calc(max(6px, env(safe-area-inset-top)) + 50px); left: 8px; }
  .bottom { display: block; inset: 0; padding: 0; pointer-events: none; }
  .ctx { position: absolute; right: max(8px, env(safe-area-inset-right)); top: 52px; width: min(340px, 44vw); max-height: calc(100dvh - 120px); }
  .ctx.open .ctx-body { max-height: calc(100dvh - 180px); }
  .ctx-head { padding: 6px 10px; }
  .needs { position: absolute; left: max(8px, env(safe-area-inset-left)); bottom: 8px; width: min(340px, 44vw); grid-template-columns: repeat(6, 1fr); gap: 4px 8px; padding: 7px 10px; }
  .need { grid-template-columns: 1fr; justify-items: center; row-gap: 3px; }
  .need .ni { grid-row: auto; font-size: 1rem; line-height: 1; }
  .need .nl { display: none; }
  .need .bar { width: 100%; height: 6px; }
  .dock { position: absolute; right: max(8px, env(safe-area-inset-right)); bottom: 8px; width: min(340px, 44vw); border-radius: var(--r-card); padding: 3px; }
  .dock button { padding: 4px 0; }
  .dock button svg { width: 18px; height: 18px; }
  .dock button span { font-size: .64rem; }
  .actq { position: absolute; left: max(8px, env(safe-area-inset-left)); bottom: 62px; }
  .hud .quick, .hud.clean .quick { right: calc(min(340px, 44vw) + 20px); bottom: 10px; }
  .camctl { top: auto; bottom: 62px; left: auto; right: max(8px, env(safe-area-inset-right)); flex-direction: row; }
  .hud:has(.ctx.open) .camctl { display: none; }
  body:not(.no3d) .overlay.ov-map { justify-content: flex-end; align-items: stretch; padding: 52px 8px 60px; }
  body:not(.no3d) .ov-map .ov-card { width: min(360px, 46vw); max-height: 100%; }
  .overlay { padding: 52px 10px 60px; }
  .sheet { max-height: 86dvh; }
}

/* ================= Nuits d'Abidjan : carré VIP ================= */
.card.night { background: linear-gradient(140deg, var(--c-night), var(--c-plum) 55%, var(--c-wine)); color: var(--c-white); gap: 8px; }
.card.night small { color: rgb(var(--c-white-rgb) / .78); }
.night-i { font-size: 1.8rem; filter: drop-shadow(0 0 8px var(--c-yellow)); }
.bottles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.bottle { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border-radius: var(--r-ctl); background: rgb(var(--c-white-rgb) / .08); border: 1px solid rgb(var(--c-yellow-rgb) / .35); text-align: left; color: var(--c-white); transition: transform .12s, background .15s; }
.bottle:hover:not(:disabled) { background: rgb(var(--c-yellow-rgb) / .16); transform: translateY(-1px); }
.bottle > span { font-size: 1.4rem; }
.bottle b { font-size: .8rem; line-height: 1.2; }
.bottle small { font-size: .7rem; color: var(--c-yellow-l) !important; font-weight: 800; }
/* Boutique de mèches */
.wigs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.wig { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; border-radius: var(--r-ctl); background: var(--c-white); text-align: center; }
.wig-av { width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: linear-gradient(160deg, var(--c-pink-bg), var(--c-violet-bg)); }
.wig b { font-size: .84rem; line-height: 1.2; }
.wig small { font-size: .7rem; flex: 1; }
/* Mon cœur */
.card.love { box-shadow: inset 4px 0 0 var(--c-danger), 0 2px 8px rgb(var(--c-night-rgb) / .05); }

/* Duplex : bouton pour changer d'étage */
.camctl .floor-btn { display: none; width: auto !important; padding: 0 10px; gap: 4px; font-weight: 800; font-size: .78rem; color: var(--ink); }
.hud.duplex .camctl .floor-btn { display: inline-flex; align-items: center; }
.floor-btn span { white-space: nowrap; }

/* Icônes premium des applis */
.app > span.logo { box-shadow: 0 8px 18px rgb(var(--c-black-rgb) / .32), 0 2px 4px rgb(var(--c-black-rgb) / .18); border-radius: var(--r-ctl); }
.app > span.logo svg { border-radius: var(--r-ctl); }
.app-head h2 i.art { background: none; padding: 0; overflow: hidden; border-radius: 9px; box-shadow: 0 3px 8px rgb(var(--c-black-rgb) / .2); }
.app-head h2 i.art svg { width: 100%; height: 100%; display: block; }

/* Formulaires dans une fiche (annonce, compte, entreprise…) : rien ne dépasse, place en hauteur sur téléphone */
.adform input, .adform select, .bizform input, .bizform select { width: 100%; min-width: 0; max-width: 100%; }
.adform select { text-overflow: ellipsis; }
.grid2 > * { min-width: 0; }
.adform .total { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
@media (max-width: 480px) {
  .adform .grid2, .bizform .grid2 { grid-template-columns: 1fr; gap: 10px; }
  .adform { gap: 8px; }
  .adform input, .adform select { padding: 10px 11px; font-size: 16px; } /* 16 px : pas de zoom automatique sur iPhone */
}
@media (max-width: 899px) {
  .sheet:has(form) { max-height: 90vh; max-height: 90dvh; }
}
@media (max-width: 899px) and (orientation: landscape) {
  .sheet:has(form) { max-height: calc(100dvh - 16px); }
  #modal:has(.sheet form) { align-items: center; }
}

/* Études : quiz, notes de cours, paliers */
.quiz fieldset { border: 0; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--c-white); }
.quiz legend { font-weight: 800; font-size: .92rem; padding: 0; margin-bottom: 6px; float: left; width: 100%; }
.quiz label { display: flex; gap: 8px; align-items: flex-start; padding: 7px 4px; font-size: .9rem; border-top: 1px solid var(--line); clear: both; }
.quiz-res > div { padding: 8px 10px; border-radius: var(--r-sm); margin-bottom: 6px; background: var(--c-white); border-left: 4px solid var(--c-ok); }
.quiz-res > div.ko { border-left-color: var(--c-danger-d); }
.lc.course ul.notes { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--c-line); }
.lc.course { max-height: 60vh; overflow-y: auto; }
.degs { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.deg { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .62rem; font-weight: 800; background: var(--c-line); color: var(--c-muted); }
.deg.on { background: var(--c-ok); color: var(--c-white); }

/* Santé */
.card.health { border-left: 4px solid var(--c-danger-d); }
.card.health ul.rx { margin: 0; padding-left: 18px; font-size: .84rem; display: flex; flex-direction: column; gap: 2px; }
/* Événements simultanés (VIL-07) : écran géant dans le lieu, bandeau ailleurs. */
.evcard { border-radius: var(--r-ctl); padding: 10px 12px; margin-bottom: 8px; background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-amber) 45%, var(--c-ok) 100%); color: var(--c-white); }
.evcard p { margin: 6px 0; font-size: .85rem; font-weight: 600; }
.evcard .ev-top { display: flex; flex-direction: column; gap: 2px; }
.evcard .ev-top small { font-weight: 700; opacity: .95; }
.evcard .ev-score { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 8px 0; font-weight: 800; }
.evcard .ev-score b { font-size: 1.6rem; background: rgb(var(--c-black-rgb) / .35); border-radius: var(--r-sm); padding: 2px 12px; letter-spacing: 1px; }
.evcard.big { background: var(--c-night); border: 2px solid var(--c-accent); box-shadow: 0 0 0 3px rgb(var(--c-ok-rgb) / .35) inset; }
.evcard.big.live .ev-top small { color: var(--c-coral); }
.evcard .ev-feed { list-style: none; margin: 0 0 8px; padding: 0; max-height: 9.5em; overflow-y: auto; font-size: .82rem; }
.evcard .ev-feed li { padding: 4px 0; border-top: 1px solid rgb(var(--c-white-rgb) / .12); opacity: .85; }
.evcard .ev-feed li.new { opacity: 1; font-weight: 700; animation: ev-in .6s ease-out; }
.evcard .ev-feed b { color: var(--c-amber); margin-right: 4px; }
.evcard .chip { background: rgb(var(--c-white-rgb) / .92); color: var(--c-ink); }
.evcard .ctx-hint { color: var(--c-white); opacity: .9; margin: 6px 0 0; }
.evcard .btn.block { margin-top: 6px; }
@keyframes ev-in { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Chasse au trésor (PRO-06) */
.trecard { border-radius: var(--r-ctl); padding: 10px 12px; margin-bottom: 8px; background: var(--c-accent-bg); border: 1.5px dashed var(--c-accent-l); }
.trecard p { margin: 4px 0 6px; font-size: .85rem; font-style: italic; }

/* ---------- Messages : liste unique, onglets, groupes ---------- */
.msg-head { display: flex; gap: 8px; align-items: center; margin: 4px 0 8px; }
.msg-search { flex: 1; min-width: 0; margin: 0; }
.msg-search input { width: 100%; min-width: 0; padding: 9px 12px; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: var(--c-white); font: inherit; }
.msg-tabs { margin-bottom: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.msg-tabs::-webkit-scrollbar { display: none; }
.msg-tabs button { flex: none; padding: 6px 10px; font-size: .8rem; }
.threads { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.thread { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 6px; border: 0; border-radius: var(--r-sm); background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.thread:hover, .thread:focus-visible { background: rgb(var(--c-night-rgb) / .05); }
.thread[hidden] { display: none; }
.thread .grow { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.thread .th-top, .thread .th-bot { display: flex; align-items: center; gap: 8px; min-width: 0; }
.thread .th-top b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread .th-top small { flex: none; }
.thread .th-bot small { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread.unread .th-top b, .thread.unread .th-bot small { color: var(--orange-d); font-weight: 800; }
.thread .badge { flex: none; }
.gavatar { position: relative; flex: none; display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%; background: var(--c-line); overflow: hidden; }
.gavatar > :nth-child(1) { position: absolute; left: 0; top: 0; }
.gavatar > :nth-child(2) { position: absolute; right: 0; bottom: 0; border: 2px solid var(--c-white); border-radius: 50%; }
.th-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.th-title .link { font-size: .8rem; }
.newgrid { display: grid; gap: 8px; }
.newgrid .card { text-align: left; cursor: pointer; font: inherit; }
.gpick, .gmembers { display: flex; flex-direction: column; gap: 4px; max-height: 40vh; overflow-y: auto; margin: 6px 0 10px; }
.gpick-row { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--r-sm); }
.gpick-row:hover { background: rgb(var(--c-night-rgb) / .04); }
.gpick-row .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gpick-row input[type="checkbox"] { width: 20px; height: 20px; flex: none; }
.cnote { align-self: center; margin: 6px auto; padding: 3px 10px; border-radius: var(--r-pill); background: rgb(var(--c-night-rgb) / .06); color: var(--muted); font-size: .78rem; text-align: center; max-width: 90%; }
/* Loto Akwaba : grille de 30 numéros (cases de 40 px au moins, au doigt) et boules du tirage. */
.loto-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 6px 0 10px; }
.loto-grid button { min-height: 40px; border-radius: 50%; border: 2px solid var(--c-accent); background: var(--c-white); color: var(--c-yellow-d); font-weight: 700; font-size: .95rem; }
.loto-grid button.on { background: var(--c-accent); color: var(--c-white); }
.loto-balls { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.loto-balls b { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-yellow-l); color: var(--c-yellow-d); font-size: .8rem; }
.loto-balls b.hit { background: var(--c-ok); color: var(--c-white); }
/* Choix du moyen de paiement (Jèko) */
.paymethods { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 10px; }
/* Recharger son portefeuille (ECO-28) : 2 packs par ligne sur téléphone, 3 au-delà. */
.coinpacks { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 10px 0 8px; }
.coinpacks .btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; }
.coinpacks .btn small { opacity: .75; }
/* VIL-07 : match en plein écran (la 3D du match est dessinée dans #world, dessous), bandeau du score, bulles. */
body.tv-on #app, body.tv-on #pie { visibility: hidden; }
.mtv { position: fixed; inset: 0; z-index: 35; pointer-events: none; color: var(--c-white); font-family: Manrope, system-ui, sans-serif; }
.mtv[hidden] { display: none; }
.mtv > * { pointer-events: auto; }
.mtv-2d { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--c-forest); }
.mtv-top { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; display: flex; align-items: flex-start; gap: 8px; pointer-events: none; }
.mtv-board { pointer-events: auto; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-sm); background: rgb(var(--c-night-rgb) / .88); box-shadow: 0 6px 18px rgb(var(--c-black-rgb) / .35); font-weight: 800; font-size: 1rem; flex-wrap: wrap; }
.mtv-board .mtv-sc { font-size: 1.25rem; background: var(--c-accent); color: var(--c-white); border-radius: 8px; padding: 0 10px; letter-spacing: 1px; }
.mtv-board small { font-weight: 800; color: var(--c-yellow); margin-left: 4px; }
.mtv-board small.live { color: var(--c-danger-l); }
.mtv-flag { display: inline-block; width: 22px; height: 15px; border-radius: 3px; box-shadow: 0 0 0 1px rgb(var(--c-white-rgb) / .35); }
.mtv-x { pointer-events: auto; margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgb(var(--c-night-rgb) / .85); color: var(--c-white); font-size: 1.2rem; font-weight: 800; cursor: pointer; }
.mtv-banner { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font-size: clamp(2rem, 9vw, 4.5rem); font-weight: 900; letter-spacing: 2px; text-shadow: 0 4px 0 rgb(var(--c-black-rgb) / .45), 0 0 24px rgb(var(--c-accent-rgb) / .8); white-space: nowrap; pointer-events: none; animation: mtvPop .5s ease-out; }
.mtv-banner.slow { top: 22%; font-size: clamp(1.1rem, 4.5vw, 2rem); color: var(--c-yellow); text-shadow: 0 2px 0 rgb(var(--c-black-rgb) / .6); animation: none; }
.mtv-banner[hidden] { display: none; }
@keyframes mtvPop { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.mtv-crowd { position: absolute; right: 10px; top: calc(max(10px, env(safe-area-inset-top)) + 58px); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: min(70vw, 340px); pointer-events: none; }
.mtv-bubble { background: rgb(var(--c-white-rgb) / .94); color: var(--c-ink); border-radius: 14px 14px 4px 14px; padding: 6px 10px; font-size: .85rem; font-weight: 600; box-shadow: 0 4px 12px rgb(var(--c-black-rgb) / .25); animation: mtvPop .3s ease-out; transform: none; }
.mtv-bubble.mine { background: var(--c-yellow-l); }
.mtv-count { font-size: .78rem; font-weight: 800; background: rgb(var(--c-night-rgb) / .75); border-radius: var(--r-pill); padding: 3px 10px; }
.mtv-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px max(10px, env(safe-area-inset-bottom)); background: linear-gradient(0deg, rgb(var(--c-black-rgb) / .85), rgb(var(--c-black-rgb) / 0)); display: flex; flex-direction: column; gap: 8px; }
.mtv-ticker { display: flex; gap: 8px; align-items: baseline; background: rgb(var(--c-night-rgb) / .9); border-left: 4px solid var(--c-accent); border-radius: var(--r-sm); padding: 8px 10px; font-size: .9rem; font-weight: 600; line-height: 1.3; }
.mtv-ticker b { color: var(--c-yellow); flex: none; }
.mtv-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.mtv-tools .chip { background: rgb(var(--c-white-rgb) / .92); color: var(--c-ink); border: 0; }
.mtv-tools .mtv-view { margin-left: auto; background: var(--c-night); color: var(--c-white); box-shadow: 0 0 0 1px rgb(var(--c-white-rgb) / .4); }
.evpill { position: fixed; z-index: 7; left: 50%; transform: translateX(-50%); top: calc(max(12px, env(safe-area-inset-top)) + 64px); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 24px); padding: 6px 8px 6px 12px; border-radius: var(--r-pill); background: rgb(var(--c-night-rgb) / .92); color: var(--c-white); border: 2px solid var(--c-accent); box-shadow: 0 6px 16px rgb(var(--c-black-rgb) / .3); font-size: .85rem; font-weight: 700; }
.evpill[hidden] { display: none; }
.evpill .ep-sc b { background: var(--c-accent); border-radius: 6px; padding: 0 6px; margin: 0 2px; }
.evpill small { color: var(--c-danger-l); font-weight: 800; }
.evpill .ep-go { display: flex; gap: 4px; }
.evpill .chip { padding: 4px 9px; font-size: .78rem; background: var(--c-white); color: var(--c-ink); border: 0; }
.wlabel.player.bubble { background: var(--c-white); color: var(--c-ink); border-radius: 12px 12px 12px 4px; max-width: 220px; white-space: normal; font-weight: 700; box-shadow: 0 4px 12px rgb(var(--c-black-rgb) / .25); }
.mtv-board .mtv-fiction { flex-basis: 100%; font-style: normal; font-size: .68rem; font-weight: 700; color: var(--c-line-2); letter-spacing: .5px; text-transform: uppercase; }
.mtv-banner small { display: block; text-align: center; font-size: .38em; letter-spacing: 0; color: var(--c-yellow-l); }
/* Date de naissance : jour, mois, année côte à côte (TEC-11). */
.field .birth3 { display: grid; grid-template-columns: 1fr 1.5fr 1.2fr; gap: 6px; }
.field .birth3 select { width: 100%; min-width: 0; font: inherit; font-weight: 700; padding: 12px 8px; border-radius: var(--r-ctl); border: 1.5px solid var(--line); background: var(--c-white); color: var(--ink); }

/* ================= Design system : boutons principaux en relief (ombre de leur teinte foncée) ================= */
.btn.orange { --relief: var(--c-accent-d); }
.btn.green { --relief: var(--c-ok-d); }
.btn.orange, .btn.green { box-shadow: 0 4px 0 var(--relief), 0 10px 18px -10px rgb(0 0 0 / .4); transition: transform 120ms var(--ease), box-shadow 120ms var(--ease), background .2s; }
.btn.orange:hover:not(:disabled), .btn.green:hover:not(:disabled) { box-shadow: 0 5px 0 var(--relief), 0 10px 18px -10px rgb(0 0 0 / .4); }
.btn.orange:active:not(:disabled), .btn.green:active:not(:disabled) { box-shadow: var(--sh-relief-press); transform: translateY(2px); }

/* ================= HUD flottant (document « Prompts UI », prompt 2) ================= */
/* Bas centre : pilule blanche Ici / Acheter / Carte, et téléphone en bouton rond séparé de 64 px. */
.dock { display: flex; align-items: center; gap: 10px; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.dock-tabs { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); padding: 5px; border-radius: var(--r-pill); background: var(--surf-float); box-shadow: var(--sh-float); }
.dock-tabs button { border-radius: var(--r-pill); color: var(--c-ink-2); }
.dock-tabs button svg { width: 22px; height: 22px; }
.dock-tabs button span { font-size: var(--fs-label); }
.dock .dock-tabs button.on { background: rgb(var(--c-accent-rgb) / .12); color: var(--c-accent-d); box-shadow: none; }
.dock .dock-phone { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; padding: 0; color: var(--c-ink); background: var(--surf-float); box-shadow: var(--sh-float); transition: transform 120ms var(--ease); }
.dock-phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dock .dock-phone.on { background: var(--c-ink); color: var(--c-white); box-shadow: var(--sh-float); }
.dock-phone:active { transform: scale(.94); }
.dock-phone .badge { top: 4px; right: 4px; }
@media (max-width: 380px) { .dock .dock-phone { width: 56px; height: 56px; } }
/* Besoins : mini-barres fines à la couleur fixe du besoin, qui clignotent doucement sous 20 %. */
.need .bar { height: 6px; border-radius: var(--r-pill); }
.need.crit .bar i { animation: needblink 1.2s var(--ease) infinite; }
@keyframes needblink { 50% { opacity: .35; } }
/* Messages : carte blanche sous la pilule du haut, entrée avec la courbe « rise », liseré à la couleur du type. */
#toasts { top: calc(max(10px, env(safe-area-inset-top)) + 58px); z-index: var(--z-toast); }
.toast { background: var(--surf-float); color: var(--c-ink); box-shadow: var(--sh-float); border-left: 4px solid var(--c-ink-2); border-radius: var(--r-ctl); animation: toastin var(--t-in) var(--ease-rise); }
.toast.t-good, .toast.t-money { background: var(--surf-float); border-left-color: var(--c-ok); }
.toast.t-bad { background: var(--surf-float); border-left-color: var(--c-danger); }
.toast.t-levelup { background: var(--surf-float); border-left-color: var(--c-violet); }
.toast.t-power { background: var(--surf-float); color: var(--c-ink); border-left-color: var(--c-yellow); }
.toast.t-msg { background: var(--surf-float); border-left-color: var(--c-blue); }
.toast.t-done { background: var(--surf-float); border-left-color: var(--c-muted); }
@keyframes toastin { from { opacity: 0; transform: translateY(-8px) scale(.98); } }

/* ================= Panneaux (document « Prompts UI », prompt 3) : une seule fiche qui monte du bas ================= */
#modal, .overlay:not(.ov-phone) { background: rgb(var(--c-night-rgb) / .2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#modal { z-index: var(--z-modal); }
.sheet { background: var(--surf-panel); max-width: 560px; max-height: 80vh; border-radius: var(--r-panel) var(--r-panel) 0 0; padding-top: 26px; box-shadow: var(--sh-float); animation: sheetin var(--t-in) var(--ease-spring); }
.sheet::before { content: ''; position: absolute; top: 9px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: var(--r-pill); background: rgb(var(--c-ink-rgb) / .18); }
.sheet h2 { font-size: 20px; font-weight: 700; }
.ov-card { background: var(--surf-panel); box-shadow: var(--sh-float); animation: sheetin var(--t-in) var(--ease-spring); }
.overlay.stay .ov-card { animation: none; }
@keyframes sheetin { from { opacity: 0; transform: translateY(24px); } }
/* Onglets en pilules défilables : actif = encre et texte blanc ; inactif = gris doux. */
.tabsrow button { background: var(--c-soft); box-shadow: none; color: var(--c-ink); }
.tabsrow button.on { background: var(--c-ink); color: var(--c-white); }

/* Appli payée en tête de liste (« À découvrir ») */
.ph-topapp { margin: 2px 0 8px; }
.ph-topapp .ph-ni img { width: 100%; height: 100%; border-radius: 9px; object-fit: cover; }