/* DroneLab by DRONOPS — charte (docs/charte.html). Couleurs DRONOPS : marine #0b1026 / #1a1f4a, bleu #328eeb / #357ee4,
   violet #6549d0 / #6b45cc, dégradé bleu -> violet. Titres : Montserrat (si installée) sinon Inter ExtraBold ; texte : Inter. */
@font-face { font-family: "Inter"; src: url("fonts/Inter-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
:root { --navy-900: #0b1026; --navy: #1a1f4a; --blue: #357ee4; --brand: #328eeb; --blue-l: #5aa3f0; --a: #1a6fc2;
  --violet: #6b45cc; --violet-d: #6549d0; --ink: #1f2433; --mist: #f5f6fb; --line: #d9dcef; --chip: #cfd6ff; --muted: #5b6275;
  --grad: linear-gradient(135deg, #328eeb 0%, #6549d0 100%); --c: var(--navy);
  --ok: #1b9e3e; --bad: #e08a00; --und: #8a8a8a; --err: #b3261e;
  --title: "Montserrat", "Inter", system-ui, sans-serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: 0 !important; overflow: hidden; clip: rect(0 0 0 0); border: 0 !important; opacity: 0; }
label.btn { position: relative; }
body { margin: 0; font: 15px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--mist); }
h1, h2, h3, .wm { font-family: var(--title); font-weight: 800; letter-spacing: -.01em; color: var(--navy); }
a { color: var(--a); }
header.top { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 20px; background: var(--navy-900); color: #fff; }
header.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--grad); }
header.top a { color: #fff; text-decoration: none; }
header.top nav { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
header.top nav a, header.top nav button.link { display: inline-block; padding: 8px 2px; font-size: 14px; }
header.top nav a:hover { color: var(--chip); }
.orgname { font-weight: 700; } .orgsw select { background: var(--navy); color: #fff; border: 1px solid #3a4180; border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 14px; }
.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand .sym { display: block; }
.brand .wm { color: #fff; font-size: 20px; line-height: 1; } .wm b { color: var(--blue-l); font-weight: 800; }
.brand .by { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--chip); letter-spacing: .02em; margin-top: 3px; }
.brand .by img { display: block; opacity: .9; }
footer.foot { text-align: center; font-size: 12px; color: var(--muted); padding: 18px 10px 26px; }
body.space footer.foot { color: #8f97c7; } body.space footer.foot .muted { color: #8f97c7; }
main { max-width: 1120px; margin: 22px auto; padding: 0 16px; min-height: calc(100vh - 140px); }
body.wide main { max-width: none; }
.card { background: #fff; border-radius: 14px; padding: 18px 22px; margin-bottom: 16px; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(26,31,74,.05); }
.card.narrow { max-width: 420px; margin: 60px auto; }
h1 { font-size: 22px; margin: 0 0 12px; } h2 { font-size: 18px; margin: 0 0 10px; } h3 { font-size: 15px; margin: 16px 0 6px; }
.ptitle a { color: inherit; }
label { display: block; margin: 8px 0; font-weight: 600; font-size: 13px; }
input:not([type=checkbox]):not([type=range]) { display: block; width: 100%; padding: 8px 10px; border: 1px solid #c7d0da; border-radius: 6px; font: inherit; font-weight: 400; margin-top: 3px; }
input[type=checkbox] { width: 18px; height: 18px; vertical-align: -3px; margin: 0 4px 0 0; }
form.row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; } form.row label { flex: 1; min-width: 180px; }
form.inline { display: inline; }
button, .btn { display: inline-block; padding: 7px 14px; border: 1px solid #b9c4cf; background: #fff; border-radius: 6px; font: inherit; cursor: pointer; color: #1c2430; text-decoration: none; margin: 2px 2px 2px 0; }
button.primary, .btn.primary { background: var(--a); border-color: var(--a); color: #fff; }
button.danger { color: var(--err); border-color: #e3b5b2; }
button.link { background: none; border: 0; color: #fff; text-decoration: underline; padding: 0; }
button.small { padding: 3px 8px; font-size: 12px; }
.badge { display: inline-block; font-size: 12px; font-weight: 600; background: #e3edf6; color: var(--c); padding: 2px 9px; border-radius: 10px; vertical-align: middle; }
.muted { color: #56616d; } .small { font-size: 13px; }
.err { color: var(--err); } .warn { background: #fff4e0; border-left: 4px solid var(--bad); padding: 8px 12px; }
.hint { background: #e8f3ff; border-left: 4px solid var(--a); padding: 8px 12px; }
.plist { list-style: none; padding: 0; margin: 0; } .plist li { padding: 9px 0; border-bottom: 1px solid #eef1f4; display: flex; justify-content: space-between; }
.plist a { color: inherit; text-decoration: none; }
.drop { border: 2px dashed #9fb3c6; border-radius: 10px; padding: 18px; text-align: center; background: #f8fbfd; }
.drop.over { background: #e3f1fc; border-color: var(--a); }
.bar { height: 10px; background: #e4e9ee; border-radius: 5px; overflow: hidden; margin: 8px 0; } .bar > div { height: 100%; background: var(--a); width: 0; transition: width .3s; }
.job { padding: 8px 0; border-bottom: 1px solid #eef1f4; } .job.run { font-weight: 600; } .job pre { white-space: pre-wrap; }
input.wide { display: inline-block !important; width: 60% !important; }
pre.mail { white-space: pre-wrap; background: #f6f8fa; padding: 12px; border-radius: 6px; font: 13px/1.5 ui-monospace, monospace; overflow-wrap: anywhere; }
.ctrl { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.ctrl input[type=range] { width: 380px; max-width: 60vw; }
#hsel button.on, .hsel button.on { background: var(--c); color: #fff; border-color: var(--c); }
.bandwrap { position: relative; overflow: hidden; border: 1px solid #c7d0da; border-radius: 6px; background: #111;
  height: min(62vh, 560px); min-height: 240px; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.bandwrap:active { cursor: grabbing; } .bandwrap.picking, .bandwrap.picking:active { cursor: crosshair; }
#tiles { position: absolute; inset: 0; overflow: hidden; }
#tiles img { position: absolute; display: block; max-width: none; pointer-events: none; -webkit-user-drag: none; }
#tiles img.lo { z-index: 0; } #tiles img.hi { z-index: 1; }
.bandwrap.px #tiles img.hi { image-rendering: pixelated; }
#ovl { position: absolute; left: 0; top: 0; z-index: 2; }
#ovl .rule { fill: rgba(0,0,0,.55); } #ovl .tick { stroke: #ddd; stroke-width: 1; } #ovl .tickt { fill: #ddd; font: 11px sans-serif; }
#ovl .lm line.hit { stroke: transparent !important; stroke-width: 14 !important; stroke-dasharray: none !important; }
.tblwrap { overflow-x: auto; }
#ovl .hz { stroke: rgba(255,255,255,.35); stroke-dasharray: 4 6; }
#ovl .card { stroke: #fff; stroke-width: 2; } #ovl .cardt { fill: #fff; font: bold 13px sans-serif; }
#ovl .det { fill: #ff3b30; }
#ovl .lm line { stroke-width: 1.6; } #ovl .lm text { font: 11px sans-serif; paint-order: stroke; stroke: rgba(0,0,0,.7); stroke-width: 3px; }
#ovl .lm.ok line { stroke: #35d35a; } #ovl .lm.ok text { fill: #8ff0a4; }
#ovl .lm.bad line { stroke: #ffae2b; } #ovl .lm.bad text { fill: #ffcf7d; }
#ovl .lm.und line { stroke: #bbb; stroke-dasharray: 3 4; } #ovl .lm.und text { fill: #ddd; }
#ovl .lm.conf line { stroke: #3d8bff; stroke-width: 2; } #ovl .lm.conf text { fill: #a9cbff; font-weight: bold; }
#ovl .lm.exc line { stroke: #ff6b6b; stroke-dasharray: 2 6; opacity: .6; } #ovl .lm.exc text { fill: #ffb3b3; opacity: .7; }
#ovl .lm.sel line { stroke: #ffe14d; stroke-width: 3; } #ovl .lm.sel text { fill: #ffe14d; } #ovl .lm { cursor: pointer; }
#ovl .obs { fill: #3d8bff; stroke: #fff; stroke-width: 1.2; }
table.lm { border-collapse: collapse; width: 100%; font-size: 13px; } table.lm td, table.lm th { padding: 4px 8px; border-bottom: 1px solid #eef1f4; text-align: left; }
table.lm tr.sel { background: #e8f3ff; }
td.ok { color: var(--ok); } td.bad { color: var(--bad); } td.und { color: var(--und); }
:root { --conf: #1e6bff; --exc: #c62828; }
td.st-ok, .st-ok { color: var(--ok); } td.st-bad, .st-bad { color: var(--bad); } td.st-und, .st-und { color: var(--und); }
td.st-confirmed, .st-confirmed { color: var(--conf); font-weight: 700; } td.st-excluded, .st-excluded { color: var(--exc); }
table.lm tr { cursor: pointer; } table.lm tr.rej td { color: #9aa3ad; } table.lm tr.exc td:nth-child(2) { text-decoration: line-through; }
table.lm tr.sel { background: #fff6cc; } table.lm td button.small { margin: 1px 2px 1px 0; white-space: nowrap; }
.tag { display: inline-block; font-size: 11px; background: #e3edf6; color: var(--c); padding: 0 6px; border-radius: 8px; }
#srcwarn .warn { margin: 6px 0; } #tie p { margin: 6px 0; } #tie button { margin-left: 6px; }
.mapgrid { display: grid; grid-template-columns: minmax(340px, 5fr) 6fr; gap: 16px; align-items: start; }
.mapgrid > .card { margin-bottom: 16px; min-width: 0; }
#lmlist { max-height: 560px; overflow: auto; }
#map { height: 440px; border-radius: 6px; border: 1px solid #c7d0da; background: #e8edf1; }
#map.moving .lmk { cursor: move; }
label.chk { display: inline-flex; gap: 6px; align-items: center; font-weight: 400; margin: 0; }
.lmk { display: flex !important; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid #fff;
  color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.45); }
.lmk svg { width: 70%; height: 70%; }
.lmk.s-ok { background: var(--ok); } .lmk.s-bad { background: var(--bad); } .lmk.s-und { background: var(--und); }
.lmk.s-confirmed { background: var(--conf); } .lmk.s-excluded { background: #fff; color: var(--exc); border-color: var(--exc); opacity: .75; }
.lmk.rej { opacity: .5; } .lmk.man { border-radius: 4px; } .lmk.mov { border-style: dashed; border-color: #111; }
.lmk.sel { box-shadow: 0 0 0 4px #ffe14d, 0 1px 4px rgba(0,0,0,.6); z-index: 1000 !important; opacity: 1; }
.lmk .ck { position: absolute; right: -6px; top: -7px; font: bold 11px/14px sans-serif; font-style: normal; background: #fff;
  color: var(--conf); border-radius: 50%; width: 14px; height: 14px; text-align: center; }
.lmk.drone { background: var(--navy); border-radius: 50%; color: var(--blue-l); }
.pop { font-size: 13px; min-width: 180px; } .pop b { display: block; margin-bottom: 3px; font-size: 14px; }
.popbtn { margin-top: 6px; } .pop.add select, .pop.add input { display: block; width: 100%; margin: 4px 0; padding: 5px 6px; font: inherit; }
.legend .lg { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin: 0 3px 0 8px; border: 1px solid #fff; box-shadow: 0 0 0 1px #9aa3ad; }
.lg.s-ok { background: var(--ok); } .lg.s-bad { background: var(--bad); } .lg.s-und { background: var(--und); }
.lg.s-confirmed { background: var(--conf); } .lg.s-excluded { background: #fff; box-shadow: 0 0 0 1px var(--exc); } .lg.man { border-radius: 2px; background: #6b7684; }
@media (max-width: 1000px) { .mapgrid { grid-template-columns: 1fr; gap: 0; } #lmlist { max-height: 420px; } }
@media (max-width: 640px) { #map { height: 320px; } .bandwrap { height: min(52vh, 420px); } table.lm { font-size: 12px; } table.lm td, table.lm th { padding: 3px 5px; } }
body.viewer main { max-width: 1400px; }
.vhead { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.vhead h1 { margin: 0; } .vhead small { font-weight: 400; color: #56616d; font-size: 15px; }
#pano.pano, .pano { width: 100%; height: 68vh; min-height: 320px; border-radius: 10px; overflow: hidden; background: #000; }
.dlcard { margin-top: 14px; }
@media (max-width: 640px) { main { margin: 10px auto; } #pano.pano, .pano { height: 60vh; } input.wide { width: 100% !important; } }
.vzoom { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.vzoom button { padding: 4px 10px; }
@media (max-width: 640px) { .vzoom .hint { display: none; } }
/* automatic north recomputed on request: value shown first, manual correction replaced only after confirmation */
.autobox { background: #f3f8fc; border: 1px solid #b9d3ea; border-radius: 6px; padding: 8px 12px; margin: 8px 0; }
.autobox p { margin: 6px 0; } .autobox button { margin: 4px 6px 4px 0; }
.autobox .confirm { background: #fff4e0; border-left: 4px solid var(--bad); padding: 8px 12px; }
/* audit UX 19/10: visible keyboard focus, job dates, failed-job details, copy feedback */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible,
.drop:focus-visible, .bandwrap:focus-visible, #pano:focus-visible, .pnlm-container:focus-visible, label.btn:focus-within { outline: 3px solid var(--a); outline-offset: 2px; }
header.top a:focus-visible, header.top button:focus-visible { outline-color: var(--blue-l); }
.job .when { font-weight: 400; margin-left: 6px; }
.job details { margin-top: 4px; } summary { cursor: pointer; padding: 4px 0; } .job details pre { margin: 4px 0 0; }
.job .errline { margin: 4px 0 0; }
/* props12 19/10: project list (date + photos), photo list, re-generate help, north compact, outlier, auto line */
.plist li { align-items: center; gap: 8px; flex-wrap: wrap; } .plist a { flex: 1 1 auto; }
.plist .pmeta { font-size: 13px; white-space: nowrap; }
.help { display: block; margin-top: 6px; max-width: 70ch; }
#photolist { margin-top: 6px; } ul.photos { list-style: none; padding: 0; margin: 6px 0; max-height: 320px; overflow: auto; }
ul.photos li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid #eef1f4; }
ul.photos li span { overflow-wrap: anywhere; } ul.photos button { padding: 2px 10px; }
#uperr { margin: 4px 0; padding-left: 18px; } #uperr:empty { display: none; }
/* north: stacked names, outlier (dispersion rule), last automatic value, compact controls on phone */
#ovl .lm.outl line { stroke: #ff3b30 !important; stroke-width: 3; stroke-dasharray: none; } #ovl .lm.outl text { fill: #ff8a80 !important; font-weight: bold; }
table.lm tr.outl { background: #ffe5e3 !important; } table.lm tr.outl td:first-child { box-shadow: inset 4px 0 0 #d93025; }
.tag.outl { background: #d93025; color: #fff; }
.lmk.outl { box-shadow: 0 0 0 4px #d93025, 0 1px 4px rgba(0,0,0,.6); z-index: 999 !important; opacity: 1; }
.refuse { background: #fdecea; border-left: 4px solid #d93025; padding: 8px 12px; margin: 6px 0; color: #5f1410; }
.refuse button { margin: 6px 6px 0 0; }
.autolast { background: #f3f8fc; border: 1px dashed #b9d3ea; border-radius: 6px; padding: 6px 10px; margin: 6px 0; }
.autolast button { margin: 2px 6px 2px 0; }
button:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 640px) {
  .nctrl { gap: 6px; margin: 6px 0; font-size: 14px; }
  .nctrl button { padding: 5px 8px; min-width: 36px; }
  .nctrl .zoomgrp { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
  .nctrl #zval { flex-basis: 100%; }
  .nudge { display: grid; grid-template-columns: repeat(4, 1fr); }
  .nudge input[type=range] { grid-column: 1 / -1; grid-row: 1; width: 100%; max-width: none; }
  .nudge #cval { grid-column: 1 / -1; font-size: 13px; }
}

/* ---------------------------------------------------------------- portal (charte DroneLab) */
button, .btn { border-radius: 9px; border-color: var(--line); color: var(--ink); }
button.primary, .btn.primary { background: var(--grad); border-color: transparent; color: #fff; font-weight: 700; }
button.primary:hover, .btn.primary:hover { filter: brightness(1.06); }
button.wide { width: 100%; padding: 10px; margin-top: 8px; }
input:not([type=checkbox]):not([type=range]), select { border-color: var(--line); border-radius: 9px; }
select { padding: 7px 8px; font: inherit; border: 1px solid var(--line); background: #fff; }
.badge { background: #e8eafb; color: var(--navy); }
.muted { color: var(--muted); } .ok { color: var(--ok); }
.hint { background: #eef1ff; border-left: 4px solid var(--violet-d); padding: 8px 12px; }
.kicker { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 700; color: var(--brand); margin: 0 0 4px; }
.lead { font-size: 16px; color: var(--muted); margin: 4px 0 0; }
.crumbs { font-size: 13px; color: var(--muted); margin: 0 0 14px; } .crumbs a { color: var(--a); text-decoration: none; }
/* night background of the home page and of the login */
body.space { background: radial-gradient(1200px 700px at 50% 35%, #1d2560 0%, var(--navy-900) 62%) fixed, var(--navy-900); color: #e8eaff; }
body.space::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 78% 12%, #cfd6ff 50%, transparent 51%),
  radial-gradient(1.4px 1.4px at 64% 72%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 30% 82%, #cfd6ff 50%, transparent 51%),
  radial-gradient(1px 1px at 90% 48%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 6% 58%, #fff 50%, transparent 51%),
  radial-gradient(1px 1px at 46% 8%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 22% 40%, #cfd6ff 50%, transparent 51%); }
body.space header.top { background: transparent; } body.space header.top::after { opacity: .6; }
body.space h1, body.space h2 { color: #fff; } body.space .lead { color: #b9c0ea; }
.hero { text-align: center; margin: 8px auto 0; max-width: 720px; position: relative; }
.hero h1 { font-size: clamp(26px, 4vw, 38px); margin: 0; }
.login { text-align: center; position: relative; color: var(--ink); } .login h1 { color: var(--navy) !important; font-size: 28px; margin: 6px 0 2px; }
.login h1 .lab { color: var(--brand); } .login h1 small { font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: .04em; }
.login form { text-align: left; } .loginsym { display: block; margin: 0 auto; }
/* constellation: universes on an orbit around DroneLab; on phones a two-column grid */
.constellation { position: relative; width: min(100%, 880px); aspect-ratio: 1.45; margin: 4px auto 110px; }
.star .sname, .star .stag, .star .scount { text-shadow: 0 0 8px #0b1026, 0 0 3px #0b1026; }
.orbits { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit { fill: none; stroke: rgba(207,214,255,.16); stroke-width: .25; vector-effect: non-scaling-stroke; stroke-dasharray: 2 6; }
.ray { stroke: rgba(90,163,240,.55); stroke-width: 1.4; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 1.1s ease-out .2s forwards; }
.ray.off { stroke: rgba(207,214,255,.18); stroke-dasharray: 3 5; animation: none; stroke-dashoffset: 0; }
.core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center;
  width: 150px; height: 150px; justify-content: center; border-radius: 50%; background: radial-gradient(circle, rgba(101,73,208,.35), rgba(11,16,38,0) 70%); }
.core img { filter: drop-shadow(0 0 18px rgba(90,163,240,.55)); animation: breathe 6s ease-in-out infinite; }
.core .wm { color: #fff; font-size: 22px; margin-top: 6px; } .core .by { font-size: 11px; color: var(--chip); letter-spacing: .06em; }
.star { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -40px); width: 190px; text-align: center; color: #fff;
  text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px; border-radius: 14px;
  opacity: 0; animation: fadein .7s ease-out forwards; animation-delay: var(--d); transition: background .2s; }
.star:hover, .star:focus-visible { background: rgba(255,255,255,.06); }
.star:hover .halo, .star:focus-visible .halo { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(90,163,240,.18), 0 0 30px rgba(101,73,208,.55); }
.halo { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; color: #fff;
  background: var(--grad); box-shadow: 0 0 0 5px rgba(90,163,240,.12), 0 0 22px rgba(101,73,208,.45); transition: transform .25s, box-shadow .25s; }
.halo .ico { width: 34px; height: 34px; } .halo.big { width: 76px; height: 76px; flex: none; } .halo.big .ico { width: 42px; height: 42px; }
.sname { font-family: var(--title); font-weight: 800; font-size: 15px; margin-top: 6px; line-height: 1.2; }
.stag { font-size: 12px; color: #b9c0ea; line-height: 1.3; }
.scount { font-size: 11px; color: var(--blue-l); font-weight: 700; margin-top: 2px; text-transform: uppercase; letter-spacing: .06em; }
.star.off { color: #8f97c7; } .star.off .halo { background: #2a3061; box-shadow: none; color: #8f97c7; } .star.off .scount { color: #8f97c7; }
@keyframes fadein { from { opacity: 0; transform: translate(-50%, -28px); } to { opacity: 1; transform: translate(-50%, -40px); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@media (max-width: 760px) {
  .constellation { aspect-ratio: auto; margin-bottom: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
  .orbits { display: none; }
  .core { position: static; transform: none; grid-column: 1 / -1; width: auto; height: auto; flex-direction: row; gap: 8px; background: none; margin-bottom: 4px; }
  .core img { width: 34px; height: 34px; } .core .wm { margin: 0; font-size: 18px; }
  .star { position: static; transform: none; width: auto; background: rgba(255,255,255,.05); border: 1px solid rgba(207,214,255,.14); padding: 12px 8px; }
  .star.off { background: rgba(255,255,255,.02); }
  @keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .halo { width: 52px; height: 52px; } .halo .ico { width: 28px; height: 28px; }
  .sname { font-size: 14px; } .stag { display: none; }
}
@media (prefers-reduced-motion: reduce) { .star, .ray, .core img { animation: none !important; opacity: 1; stroke-dashoffset: 0; } }
/* universe + module pages */
.uhead, .mhead { display: flex; gap: 18px; align-items: center; margin: 0 0 18px; } .uhead h1, .mhead h1 { margin: 2px 0 0; font-size: 28px; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.mcard { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px;
  text-decoration: none; color: var(--ink); position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.mcard::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--grad); }
.mcard:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,31,74,.10); }
.mcard h2 { margin: 4px 0 0; font-size: 18px; } .mcard p { margin: 0; color: var(--muted); font-size: 14px; flex: 1; }
.mcard .go { font-weight: 700; color: var(--a); font-size: 14px; }
.mcard.a_venir { background: #f0f1f7; color: #8b90a6; } .mcard.a_venir::before { background: #c9cde0; } .mcard.a_venir h2 { color: #8b90a6; }
.mcard.construction::before { background: repeating-linear-gradient(135deg, #328eeb 0 10px, #6549d0 10px 20px); }
.mstatus { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; padding: 3px 9px; border-radius: 20px; }
.s-actif { background: #e3f6ea; color: #157a33; } .s-construction { background: #efeafd; color: var(--violet-d); } .s-a_venir { background: #e7e8ef; color: #6b7085; }
.cols { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; } @media (max-width: 760px) { .cols { grid-template-columns: 1fr; gap: 0; } .uhead h1, .mhead h1 { font-size: 22px; } .halo.big { width: 58px; height: 58px; } }
ul.ticks { list-style: none; padding: 0; margin: 8px 0 0; } ul.ticks li { padding: 5px 0 5px 26px; position: relative; }
ul.ticks li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 12px; height: 7px; border-left: 2.5px solid var(--brand); border-bottom: 2.5px solid var(--brand); transform: rotate(-45deg); }
.build { border-left: 4px solid var(--violet-d); } .buildbar { height: 6px; border-radius: 3px; background: #ece9fb; overflow: hidden; margin-bottom: 10px; }
.buildbar span { display: block; height: 100%; width: 35%; background: var(--grad); animation: slide 2.4s ease-in-out infinite alternate; }
@keyframes slide { from { margin-left: 0; } to { margin-left: 65%; } }
@media (prefers-reduced-motion: reduce) { .buildbar span { animation: none; } }
table.tbl { border-collapse: collapse; width: 100%; font-size: 14px; } table.tbl th, table.tbl td { text-align: left; padding: 8px; border-bottom: 1px solid #eceef7; }
table.tbl th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } table.tbl tr.a_venir td { color: #8b90a6; }
table.tbl input, table.tbl select { max-width: 120px; display: inline-block !important; margin: 0 !important; }
#etage-tbl select { max-width: 230px; }
.toggle { min-width: 104px; border-radius: 20px; font-size: 13px; font-weight: 700; background: #e7e8ef; color: #6b7085; border: 0; padding: 5px 12px; display: inline-block; text-align: center; }
.toggle.on { background: var(--grad); color: #fff; } .toggle.ro { cursor: default; }
/* viewer: floor selector */
.hsel.floors { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.hsel-t { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; margin-right: 6px; }
#hsel button { border-radius: 20px; padding: 7px 14px; font-weight: 700; position: relative; }
#hsel button.on, .hsel button.on { background: var(--grad); color: #fff; border-color: transparent; }
#hsel button .cv { position: absolute; right: 3px; top: 3px; width: 7px; height: 7px; border-radius: 50%; background: #35d35a; }
.vinfo { margin: 0 0 8px; color: var(--muted); }
@media (max-width: 640px) { .vhead { flex-direction: column; align-items: flex-start; } .hsel.floors { width: 100%; } #hsel button { flex: 1; padding: 8px 6px; } .hsel-t { flex-basis: 100%; } }

/* compact header on phones: one line of navigation */
@media (max-width: 600px) {
  header.top { padding: 8px 14px; row-gap: 2px; }
  header.top nav { gap: 12px; } header.top nav a, header.top nav button.link { font-size: 13px; padding: 6px 0; }
  header.top nav a.navhome { display: none; }
  .brand .wm { font-size: 18px; } .brand .sym { width: 26px; height: 26px; }
  .orgsw select { max-width: 150px; }
}