/* caroule — app usagers. Style « sticker de nuit » : fond encre, couleurs acides, contours noirs, ombres décalées. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dmsans.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  --ink: #0C0A18;
  --night: #15122A;
  --sheet: #1B1733;
  --raised: #241F40;
  --line: #4A4470;
  --text: #FFFFFF;
  --soft: #A9A3C9;
  --paper: #FFFFFF;
  --paper-soft: #4A4560;
  --lime: #C6FF3D;
  --pink: #FF4FA3;
  --orange: #FFB020;
  --violet: #9B6BFF;
  --cyan: #3DE0F5;
  --coral: #FF7A45;
  --red: #FF3B5C;
  --display: "Bricolage Grotesque", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: "DM Sans", system-ui, sans-serif;
  --tabbar: 72px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--night);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--lime); }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--lime); color: var(--ink); padding: 8px 12px; border-radius: 10px; }
.skip:focus { left: 8px; }
svg { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- carte ---------- */
#map { position: fixed; inset: 0; background: var(--night); }
.maplibregl-ctrl-attrib { background: rgba(12, 10, 24, .7) !important; color: var(--soft); font-size: 11px; }
.maplibregl-ctrl-attrib a { color: var(--soft); }
.maplibregl-ctrl-attrib-button { filter: invert(1); }
.maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left { bottom: calc(var(--tabbar) + var(--safe-b)); }

/* ---------- haut d'écran ---------- */
.top {
  position: fixed; z-index: 10; left: 16px; right: 16px; top: calc(16px + var(--safe-t));
  display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: none;
}
.top > * { pointer-events: auto; }
.logo {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  background: var(--lime); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 16px;
  padding: 7px 14px 7px 10px; box-shadow: 3px 3px 0 var(--ink); transform: rotate(-2deg);
  font: 800 22px/1 var(--display); letter-spacing: -.5px;
}
.logo svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pts {
  min-height: 40px; display: flex; align-items: center; padding: 0 14px;
  background: var(--raised); border: 2.5px solid var(--ink); border-radius: 20px; box-shadow: 3px 3px 0 var(--ink);
  font: 700 14px var(--body); color: var(--lime);
}
.pts { gap: 8px; padding: 0 4px 0 14px; text-decoration: none; }
.pts .mini { width: 32px; height: 32px; border-radius: 11px; background: var(--paper); border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; }
.pts .mini svg { width: 26px; height: 26px; }

.locate {
  position: fixed; z-index: 10; right: 16px; top: calc(134px + var(--safe-t)); width: 44px; height: 44px; border-radius: 14px;
  background: var(--raised); color: var(--text); border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.locate svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.locate.on { background: var(--lime); color: var(--ink); }

/* mon avatar sur la carte */
.me { display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.maplibregl-marker.me { z-index: 4; } /* toujours au-dessus des repères (arrêts, vélos…), surtout pendant l'itinéraire */
.me .bubble {
  width: 54px; height: 54px; border-radius: 19px; background: var(--paper); border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink); display: flex; align-items: center; justify-content: center; transform: rotate(-4deg);
  animation: pop .45s cubic-bezier(.3, 1.6, .5, 1);
}
.me .bubble svg { width: 44px; height: 44px; }
.me .pulse { width: 14px; height: 14px; margin-top: 4px; border-radius: 50%; background: var(--lime); border: 2.5px solid var(--ink); box-shadow: 0 0 0 0 rgba(198, 255, 61, .6); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 14px rgba(198, 255, 61, 0); } 100% { box-shadow: 0 0 0 0 rgba(198, 255, 61, 0); } }

.avatars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.av {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 18px;
  background: var(--raised); border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); color: var(--text); font: 700 12px var(--body);
}
.av svg { width: 52px; height: 52px; }
.av[aria-pressed="true"] { background: var(--paper); color: var(--ink); transform: rotate(-3deg); outline: 3px solid var(--lime); outline-offset: 2px; }

.chips {
  position: fixed; z-index: 10; left: 0; right: 0; top: calc(78px + var(--safe-t));
  display: flex; gap: 8px; padding: 2px 16px 8px; overflow-x: auto; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 5px;
  border-radius: 20px; border: 2.5px solid var(--ink); background: var(--raised); color: var(--text);
  font: 700 13px var(--body); text-decoration: none; box-shadow: 2px 2px 0 var(--ink);
}
.chip.hot { background: var(--paper); color: var(--ink); }
.chip.dim { opacity: .75; }

.letter {
  flex: none; width: 28px; height: 28px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: var(--lc); color: var(--ink); font: 800 15px/1 var(--display);
}

/* ---------- marqueurs ---------- */
.tram {
  display: flex; align-items: center; gap: 3px; padding: 2px 6px 2px 2px; cursor: pointer;
  background: var(--lc); color: var(--ink); border: 2px solid var(--ink); border-radius: 10px;
  box-shadow: 2px 2px 0 var(--ink); font: 800 11px/1 var(--body); white-space: nowrap;
}
.tram b { width: 18px; height: 18px; border-radius: 6px; background: var(--ink); color: var(--lc); display: flex; align-items: center; justify-content: center; font: 800 11px/1 var(--display); }
.tram.on-time { padding-right: 2px; }
.tram.late { transform: rotate(-4deg); }
/* Vue d'ensemble : les rames à l'heure deviennent des points, celles en retard gardent leur étiquette. */
.compact .tram.on-time, .calm .tram.on-time { padding: 0; border-radius: 50%; width: 14px; height: 14px; box-shadow: 1px 1px 0 var(--ink); }
.compact .tram.on-time > *, .calm .tram.on-time > * { display: none; }

.pin { position: relative; display: flex; cursor: pointer; background: none; border: 0; padding: 0; }
.pin .pin-art {
  width: 52px; height: 52px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
  background: var(--paper); border: 3px solid var(--kc, var(--ink)); box-shadow: 3px 3px 0 var(--ink); transform: rotate(var(--r, -5deg));
}
.pin .pin-art svg { width: 40px; height: 40px; overflow: visible; }
/* Pastille façon notification : nombre de personnes qui signalent la même chose. */
.pin .count {
  position: absolute; top: -9px; right: -9px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px;
  background: var(--red); color: #FFFFFF; border: 2.5px solid var(--ink); font: 800 12px/19px var(--body); text-align: center;
}
.pin.pending .pin-art { border-style: dashed; border-color: var(--ink); opacity: .9; }
.pin.pending::after {
  content: "?"; position: absolute; left: -6px; bottom: -6px; width: 20px; height: 20px; border-radius: 10px;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink); font: 800 12px/16px var(--body); text-align: center;
}
.pin.mine .pin-art { outline: 3px solid var(--lime); outline-offset: 2px; }
.pin.pop .pin-art { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1); }

.ico { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- bouton signaler ---------- */
.fab {
  position: fixed; z-index: 11; right: 16px; bottom: calc(var(--tabbar) + var(--safe-b) + 150px);
  width: 72px; height: 72px; border-radius: 24px; display: flex; align-items: center; justify-content: center;
  background: var(--lime); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); transform: rotate(4deg);
  transition: transform .15s;
}
.fab:active { transform: rotate(4deg) translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.fab svg { width: 34px; height: 34px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }

/* ---------- carte résumé ---------- */
.card {
  position: fixed; z-index: 10; left: 16px; right: 16px; bottom: calc(var(--tabbar) + var(--safe-b) + 14px);
  background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 24px;
  box-shadow: 4px 4px 0 var(--ink); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}
.card:empty { display: none; }
.card-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.card h1 { margin: 0; font: 800 19px/1.1 var(--display); letter-spacing: -.3px; }
.card p { margin: 2px 0 0; font-size: 13px; color: var(--paper-soft); }
.square {
  flex: none; width: 38px; height: 38px; border-radius: 12px; border: 2.5px solid var(--ink);
  background: var(--lc, var(--lime)); display: flex; align-items: center; justify-content: center; font: 800 20px/1 var(--display); color: var(--ink);
}
.square svg { width: 22px; height: 22px; }
.go {
  flex: none; min-height: 44px; padding: 0 16px; border-radius: 14px; background: var(--ink); color: var(--lime);
  font: 700 14px var(--body); display: flex; align-items: center; text-decoration: none; border: 0;
}
.source { font-size: 11px !important; }
.crowd { display: flex; align-items: center; gap: 8px; }
.crowd > span:first-child { display: flex; }
.crowd i { width: 22px; height: 22px; border-radius: 11px; border: 2px solid var(--paper); }
.crowd i + i { margin-left: -8px; }

/* ---------- barre d'onglets ---------- */
.tabs {
  position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; height: calc(var(--tabbar) + var(--safe-b));
  padding: 8px 12px var(--safe-b); background: var(--ink);
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: center;
}
.tabs a {
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 48px; justify-content: center;
  color: var(--soft); font: 700 12px var(--body); text-decoration: none;
}
.tabs a[aria-current="page"] { color: var(--lime); }
.tabs svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- panneau (signaler, ligne, lignes, infos) ---------- */
.panel {
  position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; top: calc(64px + var(--safe-t));
  background: var(--sheet); border-top: 2.5px solid var(--ink); border-radius: 30px 30px 0 0;
  padding: 10px 16px calc(var(--tabbar) + var(--safe-b) + 24px); overflow-y: auto; overscroll-behavior: contain;
  animation: up .28s cubic-bezier(.2, .9, .3, 1);
  outline: none;
}
.panel::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 12px; }
body.has-panel .card, body.has-panel .fab, body.has-panel .chips, body.has-panel .locate { display: none; }
.close {
  position: absolute; right: 14px; top: 14px; width: 44px; height: 44px; border-radius: 22px;
  background: var(--raised); border: 2.5px solid var(--ink); display: flex; align-items: center; justify-content: center; color: var(--text);
}
.close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; }
.panel h1 { margin: 4px 56px 14px 0; font: 800 30px/1 var(--display); letter-spacing: -.8px; }
.panel h2 { margin: 24px 0 10px; font: 800 20px/1.1 var(--display); }
.panel p { margin: 0 0 10px; }
.muted { color: var(--soft); font-size: 14px; }

.context {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  background: var(--raised); border: 2px dashed var(--line); border-radius: 16px; padding: 8px 12px 8px 8px;
  font-size: 13px; color: #D9D4F2;
}
.context b { color: var(--text); }
.context .square { width: 32px; height: 32px; border-radius: 10px; font-size: 17px; }
.linepick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.linepick button {
  width: 48px; height: 48px; border-radius: 16px; border: 2.5px solid var(--ink); background: var(--raised); color: var(--text);
  font: 800 20px/1 var(--display); box-shadow: 2px 2px 0 var(--ink);
}
.linepick button[aria-pressed="true"] { background: var(--lc); color: var(--ink); transform: rotate(-4deg); }

.kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kind {
  min-height: 104px; border-radius: 22px; background: var(--kc); color: var(--ink);
  border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 12px 14px; text-align: left;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 8px;
  transform: rotate(var(--r, 0deg)); transition: transform .12s, box-shadow .12s;
}
.kind:active { transform: translate(3px, 3px) rotate(var(--r, 0deg)); box-shadow: 1px 1px 0 var(--ink); }
.kind:disabled { opacity: .45; cursor: not-allowed; }
.kind svg { width: 30px; height: 30px; }
.kind strong { display: block; font: 800 18px/1.1 var(--display); }
.kind small { font: 500 12px var(--body); }
.danger {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; min-height: 76px; border-radius: 22px;
  background: #2A0E16; color: var(--text); border: 2.5px solid var(--red); padding: 12px 14px; text-align: left;
}
.danger > span:first-child { flex: none; width: 48px; height: 48px; border-radius: 16px; background: var(--red); display: flex; align-items: center; justify-content: center; }
.danger svg { width: 28px; height: 28px; }
.danger strong { display: block; font: 800 18px/1.1 var(--display); }
.danger small { color: #FFC2CC; font-size: 12px; }
.sos { grid-column: 1 / -1; background: #2A0E16; border: 2.5px solid var(--red); border-radius: 22px; padding: 14px; }
.sos p { color: #FFC2CC; font-size: 14px; }
.sos .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.btn {
  min-height: 48px; border-radius: 14px; border: 2.5px solid var(--ink); display: flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 15px var(--body); text-decoration: none; padding: 0 14px; box-shadow: 3px 3px 0 var(--ink);
}
.btn.red { background: var(--red); color: var(--ink); }
.btn.white { background: var(--paper); color: var(--ink); }
.btn.lime { background: var(--lime); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); box-shadow: none; }
.btn.full { width: 100%; }
.reward { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--soft); text-align: center; }
.sticker { white-space: nowrap; background: var(--lime); color: var(--ink); font: 800 12px var(--body); padding: 3px 8px; border-radius: 8px; transform: rotate(-3deg); display: inline-block; }

/* fiche ligne */
.hero {
  margin: -10px -16px 16px; padding: 18px 16px; background: var(--lc); color: var(--ink);
  border-bottom: 2.5px solid var(--ink); display: flex; flex-direction: column; gap: 14px;
}
.panel .hero { border-radius: 28px 28px 0 0; margin-top: -27px; padding-top: 22px; }
.hero-id { display: flex; align-items: center; gap: 14px; }
.hero .big {
  flex: none; width: 72px; height: 72px; border-radius: 22px; background: var(--paper); border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink); display: flex; align-items: center; justify-content: center; font: 800 44px/1 var(--display); transform: rotate(-4deg);
}
.hero h1 { margin: 0; font: 800 30px/1 var(--display); letter-spacing: -.8px; }
.hero p { margin: 4px 0 0; font-size: 13px; font-weight: 500; }
.meter { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.meter i { height: 12px; border-radius: 4px; background: rgba(255, 255, 255, .5); }
.meter i.on { background: var(--ink); }
.meter-foot { display: flex; justify-content: space-between; gap: 8px; font: 700 12px var(--body); margin-top: 6px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat { background: var(--raised); border: 2.5px solid var(--ink); border-radius: 18px; padding: 10px 12px; }
.stat b { display: block; font: 800 26px/1.1 var(--display); }
.stat span { font-size: 12px; color: var(--soft); }
.feed { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.post {
  background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 22px; box-shadow: 4px 4px 0 var(--ink);
  padding: 12px; display: flex; align-items: center; gap: 10px;
}
.post:nth-child(even) { transform: rotate(-.6deg); }
.post .square { width: 40px; height: 40px; border-radius: 14px; background: var(--kc); }
.post div { flex: 1; min-width: 0; }
.post strong { display: block; font: 800 16px/1.15 var(--display); }
.post small { font-size: 12px; color: var(--paper-soft); }
.plus { flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--lime); border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; }
.plus svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.official { background: var(--raised); border: 2.5px solid var(--ink); border-radius: 18px; padding: 12px; }
.official + .official { margin-top: 10px; }
.official .tag { display: inline-block; background: var(--ink); color: var(--lime); font: 800 11px var(--body); padding: 3px 7px; border-radius: 8px; margin-bottom: 6px; }
.official strong { display: block; font-weight: 700; }
.official p { margin: 4px 0 0; font-size: 14px; color: #D9D4F2; }
.empty { color: var(--soft); font-size: 14px; background: var(--raised); border: 2px dashed var(--line); border-radius: 16px; padding: 12px; }

/* liste des lignes */
.lines { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.lines a {
  display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 22px; text-decoration: none;
  background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
}
.lines .square { width: 48px; height: 48px; border-radius: 16px; font-size: 26px; }
.lines div { flex: 1; min-width: 0; }
.lines strong { display: block; font: 800 18px/1.1 var(--display); }
.lines small { display: block; font-size: 13px; color: var(--paper-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mood { flex: none; font: 800 13px var(--body); padding: 5px 10px; border-radius: 10px; border: 2px solid var(--ink); }
.mood.ok { background: var(--lime); }
.mood.degraded { background: var(--orange); }
.mood.down { background: var(--red); }
.mood.off, .mood.nodata { background: #DDD8F0; }

.prose p, .prose li { color: #D9D4F2; font-size: 15px; }
.prose ul { padding-left: 20px; }
.prose b { color: var(--text); }

/* toasts */
.toast {
  position: fixed; z-index: 40; left: 50%; top: calc(20px + var(--safe-t)); transform: translateX(-50%) rotate(-2deg);
  background: var(--lime); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--ink);
  padding: 10px 16px; font: 800 15px var(--body); max-width: calc(100% - 32px); text-align: center; animation: pop .45s cubic-bezier(.3, 1.6, .5, 1);
}
.toast.bad { background: var(--paper); }

@keyframes up { from { transform: translateY(40px); opacity: 0; } }
@keyframes pop { 0% { transform: scale(.6) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- grand écran : la maquette téléphone telle quelle, dans une colonne à gauche, la carte prend le reste ---------- */
@media (min-width: 700px) {
  :root { --col: 440px; }
  .top { right: auto; width: calc(var(--col) - 32px); }
  .chips { right: auto; width: var(--col); }
  .card { right: auto; width: calc(var(--col) - 32px); }
  .fab { right: auto; left: calc(var(--col) - 88px); }
  .locate { right: auto; left: calc(var(--col) - 60px); }
  .tabs { right: auto; width: var(--col); border-right: 2.5px solid var(--ink); }
  .panel { right: auto; width: var(--col); border-right: 2.5px solid var(--ink); }
  .toast { left: calc(var(--col) / 2); }
  .maplibregl-ctrl-bottom-right { bottom: 0; }
}

/* ---------- profil et autres caroulers ---------- */
.avatars { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.field {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: 14px; border: 2.5px solid var(--ink);
  background: var(--paper); color: var(--ink); font: 700 17px var(--body); box-shadow: 3px 3px 0 var(--ink);
}
.field::placeholder { color: #8A84A8; }
.switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { flex: none; width: 52px; height: 32px; border-radius: 16px; background: var(--raised); border: 2.5px solid var(--ink); position: relative; transition: background .15s; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: var(--soft); border: 2px solid var(--ink); transition: transform .15s, background .15s; }
.switch input:checked + .track { background: var(--lime); }
.switch input:checked + .track::after { transform: translateX(20px); background: var(--paper); }
.switch input:focus-visible + .track { outline: 3px solid var(--lime); outline-offset: 3px; }
.switch b { display: block; }
.switch small { display: block; color: var(--soft); font-size: 13px; margin-top: 2px; }

.crew { display: flex; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; }
.crew .mini {
  width: 34px; height: 34px; border-radius: 12px; background: var(--paper); border: 2.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink); display: flex; align-items: center; justify-content: center;
}
.crew .mini + .mini { margin-left: -12px; }
.crew .mini:nth-child(2) { transform: rotate(6deg); }
.crew .mini:nth-child(3) { transform: rotate(-6deg); }
.crew .mini svg { width: 28px; height: 28px; }
.crew .mini.away { background: #DDD8EE; box-shadow: none; }
.crew .mini.away svg { opacity: .5; filter: grayscale(.6); }
.crew.away { opacity: .8; }
.crew .more { margin-left: 4px; background: var(--ink); color: var(--lime); font: 800 11px var(--body); padding: 3px 6px; border-radius: 8px; }
.crew-pop .maplibregl-popup-content {
  background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink);
  padding: 8px 12px; font: 500 13px var(--body); display: flex; flex-direction: column; gap: 2px;
}
.crew-pop .maplibregl-popup-tip { display: none; }

/* ---------- écran de démarrage (19/10/2026 : moins austère, animé le temps du chargement) ---------- */
.splash {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; overflow: hidden;
  background: radial-gradient(120% 70% at 50% 40%, #2E2660, #15122A 62%, #0C0A18);
  transition: opacity .45s, visibility .45s;
}
#splash::before { content: ""; position: absolute; inset: 0; pointer-events: none; /* seulement l'écran de démarrage : l'écran de fin du jeu porte aussi la classe « splash » */ background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 44px 44px; }
.splash.gone { opacity: 0; visibility: hidden; }
.sp-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.sp-lines path { fill: none; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; opacity: .75; animation: sp-draw 1.6s ease-out forwards; }
.sp-lines path:nth-child(2) { animation-delay: .25s; } .sp-lines path:nth-child(3) { animation-delay: .5s; } .sp-lines path:nth-child(4) { animation-delay: .75s; }
.sp-hero { position: relative; display: flex; flex-direction: column; align-items: center; }
.sp-tramy { width: 120px; height: 120px; margin-bottom: -18px; z-index: 1; animation: sp-hop .55s cubic-bezier(.3, 0, .5, 1) infinite alternate; filter: drop-shadow(5px 6px 0 rgba(0,0,0,.35)); }
.sp-tramy svg { width: 100%; height: 100%; overflow: visible; }
.sp-eye { transform-box: fill-box; transform-origin: center; animation: sp-blink 3.6s infinite; }
.splash-logo {
  position: relative; display: flex; align-items: center; gap: 12px; background: var(--lime); color: var(--ink); border: 3px solid var(--ink);
  border-radius: 26px; padding: 14px 24px 14px 18px; box-shadow: 6px 6px 0 var(--ink); font: 800 44px/1 var(--display); letter-spacing: -1px; transform: rotate(-3deg);
  animation: sp-pop .6s cubic-bezier(.3, 1.6, .5, 1) both;
}
.splash-logo svg { width: 44px; height: 44px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.splash p { position: relative; margin: 0; color: var(--soft); font: 700 15px var(--body); }
.sp-load { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 8px; }
.sp-rail { position: relative; width: 210px; height: 30px; background: linear-gradient(#5A5480, #5A5480) bottom / 100% 4px no-repeat, repeating-linear-gradient(90deg, #0C0A18 0 5px, transparent 5px 18px) bottom 4px left / 100% 6px no-repeat; }
.sp-mini { position: absolute; left: 0; bottom: 6px; width: 26px; height: 26px; animation: sp-ride 1.8s ease-in-out infinite; }
.sp-mini svg { width: 100%; height: 100%; }
@keyframes sp-draw { to { stroke-dashoffset: 0; } }
@keyframes sp-hop { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-16px) rotate(4deg); } }
@keyframes sp-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes sp-pop { from { transform: scale(.5) rotate(-12deg); opacity: 0; } to { transform: rotate(-3deg); opacity: 1; } }
@keyframes sp-ride { 0% { left: 0; transform: scaleX(1); } 48% { left: calc(100% - 26px); transform: scaleX(1); } 50% { left: calc(100% - 26px); transform: scaleX(-1); } 98% { left: 0; transform: scaleX(-1); } 100% { left: 0; transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { #splash *, #splash::before { animation: none !important; } .sp-lines path { stroke-dashoffset: 0; } }
.dots i { font-style: normal; animation: blink 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .2s; }
.dots i:nth-child(3) { animation-delay: .4s; }
@keyframes hop { from { transform: rotate(-4deg) translateY(0); } to { transform: rotate(3deg) translateY(-14px); } }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- célébration des points ---------- */
.boom { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; pointer-events: auto; background: rgba(12, 10, 24, .35); transition: opacity .35s; }
.boom.out { opacity: 0; }
.boom-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 220px; padding: 22px 26px 18px;
  background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 28px; box-shadow: 6px 6px 0 var(--ink);
  animation: boom .6s cubic-bezier(.25, 1.7, .45, 1) both; text-align: center;
}
.boom-pts { font: 800 72px/1 var(--display); color: var(--ink); -webkit-text-stroke: 0; background: var(--lime); border: 3px solid var(--ink); border-radius: 22px; padding: 4px 18px 8px; transform: rotate(-5deg); box-shadow: 4px 4px 0 var(--ink); }
.boom-card strong { margin-top: 10px; font: 800 22px var(--display); }
.boom-card small { color: var(--paper-soft); font-size: 13px; }
.boom-av { width: 110px; height: 110px; display: flex; align-items: center; justify-content: center; animation: wiggle .5s .3s ease-in-out 3; }
.boom-av svg { width: 96px; height: 96px; }
.boom-level { font: 800 26px var(--display); background: var(--lime); border: 3px solid var(--ink); border-radius: 14px; padding: 2px 12px; transform: rotate(-3deg); }
.burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.burst i { position: absolute; width: 14px; height: 14px; margin: -7px; border-radius: 4px; background: var(--c); border: 2px solid var(--ink); transform: rotate(var(--a)) translateY(0) scale(.2); animation: shoot .8s .1s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes boom { 0% { transform: scale(.3) rotate(-12deg); opacity: 0; } 100% { transform: scale(1) rotate(-2deg); opacity: 1; } }
@keyframes shoot { to { transform: rotate(var(--a)) translateY(-150px) scale(1) rotate(160deg); opacity: 0; } }
@keyframes wiggle { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }

/* ---------- page perso ---------- */
.me-card { display: flex; align-items: center; gap: 16px; padding: 14px; margin-bottom: 18px; background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 24px; box-shadow: 4px 4px 0 var(--ink); }
.me-big { flex: none; width: 88px; height: 88px; border-radius: 26px; background: var(--lime); border: 2.5px solid var(--ink); display: flex; align-items: center; justify-content: center; transform: rotate(-4deg); }
.me-big svg { width: 70px; height: 70px; }
.me-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.me-info strong { font: 800 22px/1.1 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lvl { font: 700 13px var(--body); color: var(--paper-soft); }
.xp { height: 12px; border-radius: 6px; background: #E6E1F5; border: 2px solid var(--ink); overflow: hidden; }
.xp i { display: block; height: 100%; background: var(--lime); border-right: 2px solid var(--ink); }
.me-info small { font-size: 12px; color: var(--paper-soft); }
.label { display: block; font: 800 16px var(--display); margin: 6px 0 8px; }
.hint { font-size: 13px; margin: 6px 0 14px; }
.switch { padding: 12px; margin-bottom: 10px; background: var(--raised); border: 2.5px solid var(--ink); border-radius: 18px; }
.levels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.levels li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 16px; background: var(--raised); border: 2px solid var(--ink); opacity: .6; }
.levels li.got { opacity: 1; }
.levels .mini { flex: none; width: 42px; height: 42px; border-radius: 13px; background: var(--paper); border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; }
.levels .mini svg { width: 32px; height: 32px; }
.levels span:nth-child(2) { flex: 1; min-width: 0; }
.levels b { display: block; font: 800 15px var(--display); }
.levels small { color: var(--soft); font-size: 12px; }
.levels i { width: 28px; height: 28px; border-radius: 9px; background: var(--lime); display: flex; align-items: center; justify-content: center; }
.levels i svg { width: 18px; height: 18px; }

/* ---------- départs ---------- */
.deps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.deps li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); }
.deps .dest { font: 700 14px/1.2 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deps .times { display: flex; gap: 6px; }
.deps b, .legend-rt b { min-width: 42px; text-align: center; padding: 3px 6px; border-radius: 9px; font: 800 15px var(--display); background: #EEEAF8; border: 2px solid transparent; }
.deps b small, .legend-rt b small { font: 700 10px var(--body); margin-left: 1px; }
.deps b.rt, .legend-rt b.rt { background: var(--lime); border-color: var(--ink); }
.deps b.th, .legend-rt b.th { font-style: italic; color: var(--paper-soft); }
.deps b.late, .legend-rt b.late { background: var(--orange); }
.deps b:not(:first-child) { opacity: .7; font-size: 13px; min-width: 36px; }
.deps.mini { margin-top: 4px; }
.deps.mini li { padding: 6px 8px; background: #F4F1FC; border-width: 0; }
.station { margin-bottom: 18px; }
.station header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.station h2 { margin: 0; }
.station .muted { display: flex; align-items: center; gap: 4px; margin: 2px 0 0; }
.station .muted svg { width: 16px; height: 16px; stroke: var(--soft); }
.station-lines { display: flex; gap: 6px; margin: -6px 0 14px; }
.legend-rt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 14px; color: var(--soft); font-size: 12px; }
.legend-rt b { color: var(--ink); }
.card .square svg { width: 22px; height: 22px; }
@media (max-width: 420px) { .deps b:nth-child(3) { display: none; } }

/* pictos illustrés des signalements */
.kind-art { width: 54px; height: 54px; border-radius: 18px; background: var(--paper); border: 2.5px solid var(--ink); display: flex; align-items: center; justify-content: center; }
.kind-art svg { width: 44px; height: 44px; overflow: visible; }
.danger > span:first-child { background: var(--paper); border: 2.5px solid var(--ink); }
.danger > span:first-child svg { width: 38px; height: 38px; }
.square.art { background: var(--paper) !important; border: 2.5px solid var(--kc); }
.square.art svg { width: 32px; height: 32px; overflow: visible; }
.post .tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; font: 800 10px var(--body); vertical-align: 2px; background: #EEEAF8; color: var(--paper-soft); }
.post .tag.me { background: var(--lime); color: var(--ink); }

/* ---------- installation ---------- */
.install {
  position: fixed; z-index: 30; left: 12px; right: 12px; top: calc(132px + var(--safe-t)); display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 10px 12px; background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 22px;
  box-shadow: 4px 4px 0 var(--ink); animation: pop .5s cubic-bezier(.3, 1.6, .5, 1);
}
.install img { flex: none; border-radius: 12px; border: 2px solid var(--ink); }
.install div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.install strong { font: 800 16px var(--display); }
.install small { font-size: 12px; color: var(--paper-soft); }
.install-x { flex: none; width: 36px; height: 36px; border-radius: 18px; border: 0; background: #EEEAF8; display: flex; align-items: center; justify-content: center; }
.install-x svg { width: 14px; height: 14px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
body.has-panel .install { display: none; }
.install-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.install-hero img { border-radius: 18px; border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-4deg); }
.install-hero p { margin: 0; color: #D9D4F2; font-size: 14px; }
.steps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.steps li { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 18px; box-shadow: 3px 3px 0 var(--ink); font-size: 15px; }
.step-n { flex: none; width: 32px; height: 32px; border-radius: 11px; background: var(--lime); border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; font: 800 17px var(--display); }
.key { display: inline-flex; vertical-align: -5px; width: 26px; height: 26px; border-radius: 8px; background: #EEEAF8; align-items: center; justify-content: center; }
.key svg { width: 18px; height: 18px; stroke: #2F6BFF; }
@media (min-width: 700px) { .install { right: auto; width: calc(var(--col) - 24px); } }
.crew-invite { flex-wrap: wrap; }
.crew-invite > div { flex: 1 1 180px; }
.crew-invite .install-actions { flex: 1 1 100%; display: flex; flex-direction: row; gap: 8px; }
.crew-invite .install-actions .go { flex: 1; }
.invite-av { flex: none; width: 52px; height: 52px; border-radius: 16px; background: #F4F1FC; border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; }
.invite-av svg { width: 42px; height: 42px; overflow: visible; }

/* pastille de signalements sur les puces de ligne */
.chip { position: relative; }
.chip-badge {
  position: absolute; top: -7px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--red); color: #FFFFFF; border: 2px solid var(--ink); font: 800 11px/16px var(--body); text-align: center;
}
.chips { padding-top: 9px; }
/* bouton afficher / masquer les autres carouleurs, sous le bouton de position */
.crew-toggle { top: calc(186px + var(--safe-t)); }
.theme-toggle { top: calc(186px + var(--safe-t)); }
.crew-toggle[hidden] { display: none !important; }
.theme-auto { position: absolute; right: -6px; bottom: -6px; width: 17px; height: 17px; border-radius: 6px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); font: 800 9px/13px var(--body); font-style: normal; text-align: center; }
.crew-toggle.on { background: var(--violet); color: var(--ink); }
.context.warn { border-color: var(--orange); background: #2E2410; color: #FFE7B8; }

.noscript { position: fixed; inset: 0; z-index: 200; background: var(--night); color: var(--text); padding: 40px 20px; }
.noscript h1 { font: 800 28px var(--display); }

/* lien vers le site vitrine, en tête de l'écran Infos */
.discover {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 12px 14px; text-decoration: none;
  background: var(--lime); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 22px; box-shadow: 4px 4px 0 var(--ink); transform: rotate(-.6deg);
}
.discover-art { flex: none; width: 56px; height: 56px; border-radius: 18px; background: var(--paper); border: 2.5px solid var(--ink); display: flex; align-items: center; justify-content: center; }
.discover-art svg { width: 44px; height: 44px; overflow: visible; }
.discover strong { display: block; font: 800 19px var(--display); }
.discover small { display: block; font-size: 13px; color: #3B4A10; }
.discover-go { margin-left: auto; font: 800 26px var(--display); }

/* plan B : vélos et trottinettes */
.planb ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.planb li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 16px; }
.pb-art { flex: none; width: 42px; height: 42px; border-radius: 13px; background: #F4F1FC; border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; }
.pb-art svg { width: 32px; height: 32px; overflow: visible; }
.planb strong { display: block; font: 800 15px var(--display); }
.planb small { font-size: 12px; color: var(--paper-soft); }

/* carte du bas : croix de fermeture (la carte est déjà en position fixe, qui sert de repère à la croix) */
.card-x {
  position: absolute; top: -12px; right: -10px; width: 34px; height: 34px; border-radius: 17px; padding: 0;
  background: var(--paper); border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); display: flex; align-items: center; justify-content: center;
}
/* les croix restent toujours au-dessus du contenu de la carte (scènes, images, listes positionnées) */
.card-x, .walk-x, .install-x { z-index: 6; }
.card-x svg { width: 14px; height: 14px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.card-actions { display: flex; gap: 8px; flex: none; }
.go.ghost { background: #F4F1FC; padding: 0 8px; border: 2px solid var(--ink); }
.go.ghost svg { width: 30px; height: 30px; overflow: visible; }
/* bouton Plan B sur la carte, sous « autres carouleurs » */
.planb-btn { top: calc(238px + var(--safe-t)); background: var(--cyan); color: var(--ink); }
body.has-panel .planb-btn { display: none; }
@media (min-width: 700px) { .planb-btn { right: auto; left: calc(var(--col) - 60px); } .crew-toggle, .theme-toggle { right: auto; left: calc(var(--col) - 60px); } }
/* résumé Plan B */
.pb-teaser {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 14px; padding: 10px 12px; text-decoration: none;
  background: var(--cyan); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 18px; box-shadow: 3px 3px 0 var(--ink);
}
.card .pb-teaser { margin: 8px 0 0; box-shadow: none; border-width: 2px; padding: 6px 10px; }
.pb-label { font: 800 15px var(--display); }
.pb-bit { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.pb-bit svg { width: 24px; height: 24px; overflow: visible; }
.pb-go { margin-left: auto; font: 800 20px var(--display); }
/* bannière d'installation : deux choix */
.install-actions { display: flex; flex-direction: column; gap: 6px; flex: none; }
.install-actions .go { min-height: 36px; }
.install-done { border: 0; background: none; color: var(--paper-soft); font: 700 12px var(--body); text-decoration: underline; padding: 0; }

/* ---------- Plan B en mode carte ---------- */
body.planb-mode .install, body.planb-mode .chips { display: none; } /* Autour : on est en local, l'état de tout le réseau est dans Réseau */
.pb-banner {
  position: fixed; z-index: 12; left: 16px; right: 16px; top: calc(78px + var(--safe-t)); display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 10px; background: var(--cyan); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 20px; box-shadow: 3px 3px 0 var(--ink);
}
.pb-banner div { flex: 1; display: flex; flex-direction: column; }
.pb-banner strong { font: 800 18px var(--display); }
.pb-banner small { font-size: 12px; }
.pb-banner .install-x { background: var(--paper); border: 2px solid var(--ink); }
.pbm { position: relative; display: flex; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; }
.pbm > span { display: flex; align-items: center; justify-content: center; background: var(--paper); border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.pbm.station > span { width: 44px; height: 44px; border-radius: 15px; background: var(--lime); }
.pbm.station svg { width: 34px; height: 34px; overflow: visible; }
.pbm.station b { position: absolute; top: -9px; right: -10px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--ink); color: var(--lime); border: 2px solid var(--ink); font: 800 12px/18px var(--body); text-align: center; }
.pbm.free > span { width: 32px; height: 32px; border-radius: 11px; }
.pbm.free svg { width: 26px; height: 26px; overflow: visible; }
.pbm.sel > span { outline: 3px solid var(--pink); outline-offset: 2px; transform: scale(1.15); }
.pb-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.pb-list li { display: flex; align-items: center; gap: 10px; }
.pb-list li.sel { background: #F4F1FC; border-radius: 14px; padding: 4px; margin: -4px; }
.pb-list div { flex: 1; min-width: 0; }
.pb-list strong { display: block; font: 800 15px/1.15 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-list small { font-size: 12px; color: var(--paper-soft); }
.pb-list .go { min-height: 40px; padding: 0 12px; }
@media (min-width: 700px) { .pb-banner { right: auto; width: calc(var(--col) - 32px); } }

/* carte du bas : le titre garde toute la largeur, le Plan B passe dessous */
.card h1 { font-size: 18px; }
.card .pb-teaser { justify-content: flex-start; }

/* le bouton « + » suit la hauteur de la carte du bas */
.fab { bottom: calc(var(--tabbar) + var(--safe-b) + var(--card-h, 0px) + 30px); transition: bottom .2s, transform .15s; }
@media (min-width: 700px) { .fab { bottom: calc(var(--tabbar) + var(--card-h, 0px) + 30px); } }
/* itinéraire à pied */
.walk-art { background: var(--cyan) !important; }
.walk-art svg { width: 30px; height: 30px; overflow: visible; }
.walk-left { margin: 6px 0 0; font-size: 13px; color: var(--paper-soft); }
.card .source a { color: var(--ink); font-weight: 700; }

/* Plan B : bus (arrêts proches et prochains passages) */
.letter.bus { --lc: #3DE0F5; min-width: 34px; width: auto; padding: 0 6px; font-size: 14px; }
.planb li.pb-bus { align-items: flex-start; }
.planb li.pb-bus > div { flex: 1; min-width: 0; }
.planb .deps li { display: grid; border-radius: 12px; gap: 8px; }
.pbm.bus > span { width: 40px; height: 40px; border-radius: 13px; background: #3DE0F5; }
.pbm.bus svg { width: 30px; height: 30px; overflow: visible; }
.pbm.bus b { position: absolute; top: -9px; right: -12px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--ink); color: #3DE0F5; border: 2px solid var(--ink); font: 800 12px/18px var(--body); text-align: center; }
.pbm.bus b:empty { display: none; }

/* ---------- visite guidée (premières ouvertures) ---------- */
.tour { position: fixed; inset: 0; z-index: 70; }
.tour-spot {
  position: fixed; border-radius: 18px; pointer-events: none; animation: spot-in .35s ease-out;
  box-shadow: 0 0 0 3px var(--lime), 0 0 0 200vmax rgba(12, 10, 24, .72);
}
@keyframes spot-in { from { outline: 6px solid rgba(198, 255, 61, .5); outline-offset: 10px; } to { outline: 0 solid transparent; outline-offset: 0; } }
.tour-spot[style*="opacity:0"] { box-shadow: 0 0 0 200vmax rgba(12, 10, 24, .72); }
.tour-bubble {
  position: fixed; padding: 14px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 22px;
  box-shadow: 5px 5px 0 var(--ink); animation: pop .4s cubic-bezier(.3, 1.6, .5, 1); outline: none;
}
.tour-bubble.center { left: 50%; top: 50%; width: min(340px, calc(100vw - 24px)); transform: translate(-50%, -50%); animation: none; }
.tour-bubble.below::before, .tour-bubble.above::before {
  content: ""; position: absolute; left: calc(var(--arrow) - 10px); width: 18px; height: 18px; background: var(--paper);
  border: 3px solid var(--ink); transform: rotate(45deg);
}
.tour-bubble.below::before { top: -12px; border-right: 0; border-bottom: 0; }
.tour-bubble.above::before { bottom: -12px; border-left: 0; border-top: 0; }
.tour-head { display: flex; gap: 12px; align-items: flex-start; }
.tour-av { flex: none; width: 52px; height: 52px; border-radius: 16px; background: #F4F1FC; border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; transform: rotate(-4deg); }
.tour-av svg { width: 42px; height: 42px; overflow: visible; }
.tour-bubble.center .tour-av { width: 72px; height: 72px; border-radius: 22px; }
.tour-bubble.center .tour-av svg { width: 60px; height: 60px; }
.tour-head strong { display: block; font: 800 18px/1.15 var(--display); margin: 2px 0 4px; }
.tour-head p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--paper-soft); }
.tour-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.tour-dots { display: flex; gap: 4px; margin-right: auto; }
.tour-dots i { width: 7px; height: 7px; border-radius: 4px; background: #DDD8EE; transition: width .2s; }
.tour-dots i.on { width: 18px; background: var(--ink); }
.tour-skip { border: 0; background: none; color: var(--paper-soft); font: 700 13px var(--body); padding: 8px 4px; cursor: pointer; }
.tour-prev { width: 38px; height: 38px; border-radius: 12px; border: 2px solid var(--ink); background: #F4F1FC; font: 800 16px var(--body); cursor: pointer; }
.tour-foot .go { min-height: 38px; padding: 0 14px; }
.tour-off { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--paper-soft); cursor: pointer; }
.tour-off input { width: 18px; height: 18px; accent-color: var(--ink); margin: 0; }
body.touring .install { display: none; }
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-bubble { transition: none; animation: none; } }

/* ---------- potes et réactions ---------- */
.btn.danger { color: var(--red); border-color: rgba(255, 59, 92, .45); }
.pals { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 8px; }
.pals a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 18px; box-shadow: 3px 3px 0 var(--ink); text-decoration: none; }
.pals a > span:nth-child(2) { flex: 1; min-width: 0; }
.pals b { display: block; font: 800 16px var(--display); }
.pals small { display: block; font-size: 12px; color: var(--paper-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-av { flex: none; width: 46px; height: 46px; border-radius: 15px; background: #F4F1FC; border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; }
.pal-av.on { background: var(--lime); }
.pal-av svg { width: 38px; height: 38px; overflow: visible; }
.pal-go { flex: none; width: 34px; height: 34px; }
.pal-go svg { width: 100%; height: 100%; overflow: visible; }
.reacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.reacts button {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; min-height: 92px; cursor: pointer;
  background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 18px; box-shadow: 3px 3px 0 var(--ink);
  font: 700 12px/1.2 var(--body); text-align: center; transition: transform .12s;
}
.reacts button:nth-child(odd) { transform: rotate(-1.5deg); }
.reacts button:nth-child(even) { transform: rotate(1.5deg); }
.reacts button:active { transform: scale(.94); box-shadow: 1px 1px 0 var(--ink); }
.reacts button.sent { background: var(--lime); }
.reacts i { display: block; width: 46px; height: 46px; }
.reacts i svg { width: 100%; height: 100%; overflow: visible; }
.qr { position: relative; width: min(260px, 72vw); margin: 14px auto 6px; padding: 12px; background: #FFFFFF; border: 3px solid var(--ink); border-radius: 22px; box-shadow: 5px 5px 0 var(--ink); }
.qr svg { display: block; width: 100%; height: auto; }
.qr-av { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%) rotate(-4deg); background: #FFFFFF; border: 2.5px solid var(--ink); border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.qr-av svg { width: 38px; height: 38px; overflow: visible; }
.qr-code { text-align: center; font: 800 26px var(--display); letter-spacing: .12em; margin: 8px 0 0; }
.center { text-align: center; }
.invite-hero { text-align: center; padding-top: 8px; }
.invite-hero .me-big { margin: 0 auto 14px; width: 110px; height: 110px; }
.invite-hero .me-big svg { width: 88px; height: 88px; }
.react-in {
  position: fixed; z-index: 45; left: 12px; right: 12px; top: calc(76px + var(--safe-t)); display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 12px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: 22px;
  box-shadow: 4px 4px 0 var(--ink); animation: pop .5s cubic-bezier(.3, 1.6, .5, 1); transition: opacity .4s, transform .4s;
}
.react-in.out { opacity: 0; transform: translateY(-12px); }
.react-in > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.react-in strong { font: 800 15px var(--display); }
.react-in span:not(.react-av) { font-size: 15px; font-weight: 700; }
.react-av { position: relative; flex: none; width: 48px; height: 48px; border-radius: 15px; background: var(--lime); border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; }
.react-av svg { width: 40px; height: 40px; overflow: visible; }
.react-av i { position: absolute; right: -12px; bottom: -10px; width: 30px; height: 30px; background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.react-av i svg { width: 24px; height: 24px; overflow: visible; }
.react-in .go { flex: none; min-height: 38px; padding: 0 12px; display: flex; align-items: center; text-decoration: none; }
@media (min-width: 700px) { .react-in { right: auto; width: calc(var(--col) - 24px); } }
.crew .mini.friend { background: var(--lime); box-shadow: 0 0 0 3px var(--lime), 2px 2px 0 3px var(--ink); }
.pal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 10px; }
.pal-actions .btn { padding-left: 8px; padding-right: 8px; text-align: center; justify-content: center; font-size: 14px; }
.code-form { margin: 0 0 6px; }
.code-form label { display: block; font: 800 14px var(--display); margin-bottom: 6px; }
.code-form > span { display: flex; gap: 8px; }
.code-form input {
  flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: 14px; border: 2.5px solid var(--ink); background: var(--paper); color: var(--ink);
  font: 800 20px var(--display); letter-spacing: .12em; text-transform: uppercase;
}
.code-form .go { min-height: 46px; padding: 0 18px; }
.scan { position: relative; margin: 12px auto 4px; width: min(320px, 86vw); aspect-ratio: 1; border-radius: 22px; overflow: hidden; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); background: #000; }
.scan video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame { position: absolute; inset: 18%; border: 4px solid var(--lime); border-radius: 18px; box-shadow: 0 0 0 999px rgba(12, 10, 24, .35); }
.in-app { margin: 0 0 14px; padding: 14px; background: var(--cyan); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 20px; box-shadow: 4px 4px 0 var(--ink); }
.in-app strong { display: block; font: 800 17px var(--display); }
.in-app p { margin: 6px 0; font-size: 14px; }
.in-app .qr-code { margin: 8px 0; }
.crew-write { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 10px 6px 6px; border-radius: 14px; background: var(--lime); color: var(--ink); border: 2px solid var(--ink); text-decoration: none; font: 800 14px var(--display); }
.crew-write i { flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--paper); border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; }
.crew-write i svg { width: 24px; height: 24px; overflow: visible; }
.push-card { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0; padding: 12px; background: var(--cyan); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 20px; box-shadow: 4px 4px 0 var(--ink); }
.push-card strong { display: block; font: 800 16px var(--display); }
.push-card p { margin: 4px 0 10px; font-size: 13px; }
.push-card > div { flex: 1; min-width: 0; }
.push-art { flex: none; width: 46px; height: 46px; border-radius: 15px; background: var(--paper); border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; transform: rotate(-5deg); }
.push-art svg { width: 38px; height: 38px; overflow: visible; }
/* Réactions : non-lus et historique */
.pts { position: relative; }
.pts .unread { position: absolute; top: -8px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--red); color: #fff; border: 2px solid var(--ink); font: 800 12px/18px var(--body); text-align: center; animation: pop .4s cubic-bezier(.3, 1.6, .5, 1); }
.pal-new { flex: none; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 14px; background: var(--red); color: #fff; border: 2px solid var(--ink); font: 800 14px/24px var(--body); text-align: center; }
.pals a.has-new { background: #FFF6D6; }
.news { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.news a { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 18px; box-shadow: 3px 3px 0 var(--ink); text-decoration: none; }
.news a > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.news b { font: 800 15px var(--display); }
.news small { font-size: 13px; color: var(--paper-soft); }
.news .go { flex: none; min-height: 36px; padding: 0 12px; display: flex; align-items: center; }
.talk { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; }
.talk li { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 85%; }
.talk li.out { align-self: flex-end; align-items: flex-end; }
.talk .bubble { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 18px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); }
.talk li.out .bubble { flex-direction: row-reverse; padding: 6px 6px 6px 12px; background: var(--lime); text-align: right; }
.talk li.new .bubble { box-shadow: 0 0 0 3px var(--red); }
.receipt { padding: 0 6px; font: 700 11px var(--body); color: var(--soft); }
.receipt.seen { color: var(--lime); }
.receipt.new { color: var(--red); font-weight: 800; }
.talk i { flex: none; width: 40px; height: 40px; }
.talk i svg { width: 100%; height: 100%; overflow: visible; }
.talk .bubble span { display: flex; flex-direction: column; min-width: 0; }
.talk b { font: 800 14px var(--display); }
.talk small { font-size: 11px; color: var(--paper-soft); }
.pick-ask { margin: 0 0 10px; padding: 10px 12px; border-radius: 14px; background: var(--raised); border: 2px solid var(--orange); font-size: 14px; color: var(--text); }
.pick-ask b { color: var(--orange); }

/* ---------- portrait seulement (téléphone tenu à l'horizontale) ---------- */
.rotate { display: none; }
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  .rotate {
    position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: var(--night); color: var(--text); text-align: center; padding: 20px;
  }
  .rotate strong { font: 800 24px var(--display); }
  .rotate span { color: var(--soft); font-size: 15px; }
  .rotate-phone { width: 76px; height: 76px; border-radius: 22px; background: var(--lime); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); display: flex; align-items: center; justify-content: center; animation: tilt-back 1.6s ease-in-out infinite; }
  .rotate-phone svg { width: 44px; height: 44px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; transform: rotate(90deg); }
  @keyframes tilt-back { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
  body:not(.gm-on) > :not(.rotate) { visibility: hidden; } /* pendant Tramy Run, le paysage est voulu : on ne cache rien */
}
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) and (prefers-reduced-motion: reduce) { .rotate-phone { animation: none; } }
.walk-follow { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 42px; margin-top: 8px; border-radius: 14px; border: 2.5px solid var(--ink); background: var(--paper); color: var(--ink); font: 800 14px var(--display); cursor: pointer; }
.walk-follow svg { width: 18px; height: 18px; fill: var(--ink); }
.walk-follow.on { background: var(--lime); box-shadow: 2px 2px 0 var(--ink); }
.kind:disabled { opacity: .4; filter: grayscale(.5); cursor: not-allowed; box-shadow: none; }
.tour-link { display: block; width: 100%; margin-top: 10px; padding: 8px; border: 0; border-radius: 12px; background: #F4F1FC; color: var(--ink); font: 700 13px var(--body); cursor: pointer; text-decoration: underline; }
.backup { margin: 6px 0 12px; padding: 14px; background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 20px; box-shadow: 4px 4px 0 var(--ink); }
.backup p { margin: 0 0 6px; font-size: 14px; }
.backup .qr-code { margin: 6px 0 10px; color: var(--ink); }
.backup .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.backup small { display: block; margin-top: 8px; font-size: 12px; color: var(--paper-soft); }
.crew-count { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--lime); color: var(--ink); border: 2px solid var(--ink); font: 800 11px/16px var(--body); text-align: center; pointer-events: none; }
.seen-state { margin: -4px 0 14px; padding: 8px 12px; border-radius: 12px; background: var(--raised); color: var(--soft); font-size: 13px; border: 2px dashed var(--line); }
.seen-state.on { border-style: solid; border-color: var(--lime); color: var(--text); }
.seen-state b { color: var(--lime); }
.dirpick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.dirpick button { min-height: 52px; padding: 8px 10px; border-radius: 14px; border: 2.5px solid var(--ink); background: var(--raised); color: var(--text); font: 600 13px/1.25 var(--body); text-align: left; cursor: pointer; }
.dirpick button b { display: block; font: 800 15px/1.2 var(--display); }
.dirpick button[aria-pressed="true"] { background: var(--lc); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.towards { font: 600 12px var(--body); color: var(--paper-soft); }
/* Signalements groupés, réactions : retard en un geste, « Plus de réactions » */
.kinds-h { margin: 14px 0 8px; font: 800 15px var(--display); color: var(--soft); text-transform: none; }
.react-late {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; min-height: 92px;
  background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 18px; box-shadow: 3px 3px 0 var(--ink);
  font: 700 12px/1.2 var(--body); text-align: center; transform: rotate(1.5deg);
}
.react-late i { display: block; width: 34px; height: 34px; }
.react-late i svg { width: 100%; height: 100%; overflow: visible; }
.late-pick { display: flex; gap: 4px; }
.reacts .late-pick button {
  min-height: 0; width: 30px; height: 26px; padding: 0; border-radius: 9px; box-shadow: none; transform: none;
  border: 2px solid var(--ink); background: var(--orange); font: 800 13px var(--display); flex-direction: row;
}
.reacts .late-pick button:active { transform: scale(.9); }
.react-more { margin: 0 0 16px; }
.react-more summary { cursor: pointer; list-style: none; padding: 10px 14px; border-radius: 14px; border: 2px dashed var(--line); color: var(--soft); font: 800 14px var(--display); text-align: center; margin-bottom: 10px; }
.react-more summary::-webkit-details-marker { display: none; }
.react-more[open] summary { border-style: solid; color: var(--text); }

/* ---------- bulles d'info et sections repliables : écrans plus légers ---------- */
.tip {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 4px; padding: 0;
  border-radius: 10px; border: 2px solid currentColor; background: transparent; color: var(--soft);
  font: 800 12px/1 var(--display); font-style: italic; vertical-align: 2px; cursor: pointer; opacity: .85;
}
.tip:hover, .tip:focus-visible { opacity: 1; color: var(--lime); }
.tipbox {
  position: fixed; z-index: 90; padding: 10px 12px; background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink);
  border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); font: 500 13px/1.4 var(--body); animation: pop .25s ease-out;
}
.tipbox::before { content: ""; position: absolute; left: calc(var(--ax) - 7px); width: 12px; height: 12px; background: var(--paper); border: 2.5px solid var(--ink); transform: rotate(45deg); }
.tipbox.below::before { top: -8px; border-right: 0; border-bottom: 0; }
.tipbox.above::before { bottom: -8px; border-left: 0; border-top: 0; }
.sect { margin: 14px 0 0; border-top: 2px solid var(--line); }
.sect > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 4px; padding: 14px 2px; font: 800 18px var(--display); color: var(--text); }
.sect > summary::-webkit-details-marker { display: none; }
.sect > summary::after { content: ""; margin-left: auto; width: 10px; height: 10px; border-right: 3px solid var(--soft); border-bottom: 3px solid var(--soft); transform: rotate(45deg); transition: transform .2s; }
.sect[open] > summary::after { transform: rotate(-135deg); }
.sect > :not(summary) { margin-bottom: 12px; }
.row-link { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 10px 14px; border-radius: 18px; background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); text-decoration: none; font: 800 17px var(--display); }
.row-art { flex: none; width: 36px; height: 36px; position: relative; }
.row-badge { position: absolute; top: -8px; right: -10px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--red); color: #fff; border: 2px solid var(--ink); font: 800 11px/16px var(--body); font-style: normal; text-align: center; }
.row-art svg { width: 100%; height: 100%; overflow: visible; }
.row-end { margin-left: auto; font: 800 16px var(--display); }
.switch b { display: inline-flex; align-items: center; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 6px; }
.row2 .btn:only-child { grid-column: 1 / -1; }
.prose .muted { font-size: 12px; }
.tabs a { position: relative; }
.tab-badge { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; border: 2px solid var(--ink); font: 800 11px/14px var(--body); text-align: center; }
.crew-count { animation: crew-pulse 2s ease-in-out infinite; }
@keyframes crew-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(198, 255, 61, .7); } 50% { box-shadow: 0 0 0 6px rgba(198, 255, 61, 0); } }
@media (prefers-reduced-motion: reduce) { .crew-count { animation: none; } }

.tabs a[hidden] { display: none; }
.row-link.quiet { background: var(--raised); color: var(--text); box-shadow: none; border-color: var(--line); font-size: 16px; }
.info-art { display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); font: 800 italic 18px var(--display); }

/* ---------- accueil « Autour » : ce qu'on peut prendre ---------- */
.take-head { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.take-head h1 { margin: 0; font: 800 19px var(--display); white-space: nowrap; }
.crew-slot { margin-left: auto; display: flex; }
.crew-slot:not(:empty) + .view-switch { margin-left: 0; }
.crew-near { display: flex; align-items: center; padding: 2px 8px 2px 4px; border-radius: 14px; background: var(--violet); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); cursor: pointer; margin-right: 6px; }
.crew-near i { width: 26px; height: 26px; border-radius: 9px; background: var(--paper); border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; }
.crew-near i + i { margin-left: -10px; }
.crew-near i.friend { background: var(--lime); }
.crew-near i svg { width: 22px; height: 22px; }
.crew-near b { margin-left: 5px; font: 800 13px var(--display); color: var(--ink); }
.take { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.take li, .take button { min-width: 0; }
.take button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 4px; border: 0; border-bottom: 1.5px solid #EEEAF8; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.take li:last-child button { border-bottom: 0; }
.take-badge { flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--lc); border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; font: 800 15px var(--display); color: var(--ink); }
.take-badge svg { width: 26px; height: 26px; overflow: visible; }
.take-badge.velo, .take-badge.trottinette { background: #F4F1FC; }
.take-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.take-txt b { font: 800 14px/1.2 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.take-txt small { font-size: 12px; color: var(--paper-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.take-time { flex: none; width: 60px; box-sizing: border-box; text-align: center; padding: 4px 6px; border-radius: 10px; background: #EEEAF8; font: 800 16px var(--display); font-style: italic; }
.take-time.rt { background: var(--lime); border: 2px solid var(--ink); font-style: normal; }
.take-time.ready { font: 700 13px var(--body); font-style: normal; }
.take-time small { font: 700 10px var(--body); margin-left: 1px; }
.take-more { width: 100%; margin-top: 4px; padding: 6px; border: 0; background: none; color: var(--paper-soft); font: 800 13px var(--display); cursor: pointer; }
.pbm.tramstop { flex-direction: column; gap: 2px; }
.pbm.tramstop .ts-line { width: 30px; height: 30px; border-radius: 10px; background: var(--lc); font: 800 15px var(--display); color: var(--ink); }
.pbm.tramstop b { padding: 1px 6px; border-radius: 8px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); font: 800 11px var(--body); white-space: nowrap; }
/* carte du bas repliable (accueil) */
.card .grab { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: #DDD8EE; margin: -6px 0 0; }
.card-fold { display: flex; align-items: center; gap: 10px; width: 100%; padding: 2px 0; border: 0; background: none; color: var(--ink); cursor: pointer; text-align: left; }
.card-fold .grab { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); margin: 0; }
.fold-txt { flex: 1; min-width: 0; font: 600 14px var(--body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 6px; }
.fold-txt b { font: 800 15px var(--display); }
.fold-up { width: 10px; height: 10px; border-left: 3px solid var(--ink); border-top: 3px solid var(--ink); transform: rotate(45deg); margin: 6px 6px 0 0; }
.take-sub { margin: 8px 0 2px; font: 800 13px var(--display); color: var(--paper-soft); text-transform: uppercase; letter-spacing: .06em; }
.take-pb { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 4px; padding: 8px 10px; border-radius: 14px; border: 2px solid var(--ink); background: var(--cyan); color: var(--ink); font: 700 13px var(--body); cursor: pointer; text-align: left; }
.take-pb .pb-label { font: 800 14px var(--display); }
.take-pb span:nth-child(2) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* la carte du bas ne dépasse jamais l'écran : en-tête fixe, liste qui défile */
body.planb-mode .card { max-height: calc(100dvh - var(--tabbar) - var(--safe-b) - var(--safe-t) - 150px); }
/* cartes « Tu peux prendre » : plus de hauteur, et le contenu défile au lieu d'être coupé en bas */
@media (min-height: 760px) { body.deck-open .card { max-height: calc(100dvh - var(--tabbar) - var(--safe-b) - var(--safe-t) - 120px); } }
.ds-wrap[data-dscene] { cursor: pointer; }
.take-scroll { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; margin: 0 -6px; padding: 0 6px; -webkit-overflow-scrolling: touch; }
.take-go { flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--ink); color: var(--lime); display: flex; align-items: center; justify-content: center; }
.take-go .ico { width: 18px; height: 18px; stroke: var(--lime); }
.go-pop .maplibregl-popup-content { gap: 4px; min-width: 170px; }
.go-pop strong { font: 800 15px var(--display); }
.go-pop span { font-size: 12px; color: var(--paper-soft); }
.go-pop .go { margin-top: 6px; min-height: 36px; width: 100%; justify-content: center; }
.add-h { margin: 22px 0 0; font: 800 16px var(--display); color: var(--soft); }
.pal-go svg { width: 26px; height: 26px; overflow: visible; }
/* Réseau zoomé : repères plus petits que sur l'accueil Autour */
.pbm.poi > span { width: 30px !important; height: 30px !important; border-radius: 10px !important; box-shadow: 1px 1px 0 var(--ink) !important; }
.pbm.poi svg { width: 22px !important; height: 22px !important; }
.pbm.poi.free > span { width: 24px !important; height: 24px !important; border-radius: 8px !important; }
.pbm.poi.free svg { width: 18px !important; height: 18px !important; }
.pbm.poi b { top: -7px; right: -8px; min-width: 18px; height: 18px; font-size: 10px; line-height: 14px; }
/* Réseau : afficher ou masquer vélos, bus, trottinettes (en plus des trams) */
.layer-toggles { display: none; position: fixed; z-index: 10; left: 16px; top: calc(142px + var(--safe-t)); gap: 6px; }
body.network-mode .layer-toggles { display: flex; }
body.has-panel .layer-toggles { display: none; }
.layer-toggles button { display: flex; align-items: center; gap: 5px; padding: 5px 10px 5px 7px; border-radius: 14px; border: 2px solid var(--ink); background: var(--raised); color: var(--soft); font: 700 12px var(--body); cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
.layer-toggles button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.lt-dot { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 7px; border: 2px solid var(--ink); opacity: .35; }
.lt-dot svg { width: 16px; height: 16px; overflow: visible; }
.layer-toggles button[aria-pressed="true"] .lt-dot { opacity: 1; }
.lt-dot.velo { background: #C6FF3D; } .lt-dot.bus { background: #3DE0F5; } .lt-dot.trott { background: #FFFFFF; }

/* Liste Autour : tous les temps en vert et gras, le départ suivant en petit ; bus en picto + numéro en pastille */
.take-time { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; min-height: 34px; }
.take-time em { display: block; font: 700 10px var(--body); font-style: normal; color: #3B4A10; opacity: .75; margin-top: 1px; }
.take-badge.bus { position: relative; background: #3DE0F5; }
.take-num { position: absolute; right: -9px; top: -8px; min-width: 20px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--ink); color: #3DE0F5; font: 800 10px/18px var(--body); font-style: normal; text-align: center; white-space: nowrap; }

/* Carte Autour : temps de passage en vert et gras sous les repères tram et bus */
.pbm.tramstop, .pbm.bus { flex-direction: column; gap: 3px; }
.pbm-time { display: flex; align-items: baseline; gap: 4px; padding: 1px 7px; border-radius: 9px; background: var(--lime); color: var(--ink); border: 2px solid var(--ink); font: 800 12px var(--body); font-style: normal; white-space: nowrap; box-shadow: 1px 1px 0 var(--ink); }
.pbm-time i { font: 700 10px var(--body); font-style: normal; opacity: .6; }
.pbm.bus > b { top: -9px; }

/* Popups « Y aller » : une info par ligne, lignes de bus en pastilles */
.pop-box { display: flex; flex-direction: column; gap: 4px; }
.go-pop span { color: var(--ink); opacity: .72; }
.go-pop .pop-lines { display: flex; flex-wrap: wrap; gap: 4px; opacity: 1; margin: 2px 0; }
.pop-lines i { font: 800 11px/1 var(--body); font-style: normal; padding: 4px 6px; border-radius: 7px; background: #3DE0F5; color: var(--ink); border: 1.5px solid var(--ink); }

/* Réglages : couleurs de la carte */
.seg-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; margin-bottom: 10px; background: var(--raised); border: 2.5px solid var(--ink); border-radius: 18px; }
.seg { display: inline-flex; border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; box-shadow: 2px 2px 0 var(--ink); }
.seg button { border: 0; background: var(--paper); color: var(--ink); font: 800 12px var(--body); padding: 7px 11px; cursor: pointer; }
.seg button + button { border-left: 2px solid var(--ink); }
.seg button[aria-checked="true"] { background: var(--lime); }

/* Réseau : un titre qui dit ce qu'on regarde (Autour = ce que je peux prendre maintenant ; Réseau = tout, partout) */

/* Vélos en libre-service (tous opérateurs) en vert comme les vélos en station : la couleur dit le mode */
.pbm.free.k-velo > span { background: var(--lime); }

/* Liste : la ligne (détail) et le bouton de marche (guidage) sont deux boutons distincts */
.take li { display: flex; align-items: center; gap: 6px; border-bottom: 1.5px solid #EEEAF8; }
.take li .take-main { flex: 1; min-width: 0; border-bottom: 0; }
.take li .take-go { width: 40px; height: 40px; padding: 0; border: 0; cursor: pointer; }
.take li:last-child { border-bottom: 0; }
/* Fiches de la carte : Horaires + Y aller côte à côte */
.pop-acts { display: flex; gap: 6px; margin-top: 6px; }
.pop-acts > * { flex: 1; min-height: 36px; justify-content: center; margin: 0 !important; }
.pop-acts .btn { display: inline-flex; align-items: center; font-size: 13px; padding: 0 10px; }
.go-pop span b { color: var(--ink); font-weight: 800; }
.bus-deps .letter.bus { min-width: 34px; }
.take li .take-go { background: var(--ink); border-radius: 10px; width: 36px; height: 36px; flex: none; }
.take-time { width: 78px !important; }
.take-time em { white-space: nowrap; font-size: 9.5px; }

/* Plan B quand ça coince : bandeau d'alerte, bouton « Bloqué dans le tram ? », carte Plan B d'abord */
.pb-alert { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 8px; padding: 8px 10px; border-radius: 14px; border: 2.5px solid var(--ink); background: var(--orange); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); text-align: left; cursor: pointer; }
.pb-alert .square { width: 34px; height: 34px; font-size: 17px; flex: none; }
.pb-alert > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pb-alert b { font: 800 14px var(--display); }
.pb-alert small { font-size: 12px; opacity: .8; }
.pb-alert-go { flex: none; font: 800 13px var(--body); background: var(--ink); color: var(--lime); padding: 6px 9px; border-radius: 10px; }
.stuck-btn { margin-left: auto; margin-right: 40px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font: 800 11px var(--body); padding: 4px 8px; border-radius: 10px; cursor: pointer; }
.pb-why { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 700 13px var(--body); color: var(--ink); }
.pb-why .square { width: 28px; height: 28px; font-size: 14px; flex: none; }
.splash .splash-tag { font: 800 15px var(--display); color: var(--lime); margin: 10px 0 4px; text-align: center; }

/* Fiche ligne : le plan en direct (rames ▼ dans un sens à gauche du tracé, ▲ dans l'autre à droite) */
.ll-legend { display: flex; justify-content: space-between; gap: 10px; font: 700 12px var(--body); color: var(--soft); margin-bottom: 4px; }
.ll-dir { font-style: normal; color: var(--text); }
.ll-sum { font-size: 13px; margin: 0 0 10px; color: var(--soft); }
.ll-sum b.late { color: var(--orange); }
.ll { position: relative; margin: 0 0 6px; }
.ll-rail { position: absolute; left: 61px; width: 8px; border-radius: 4px; background: var(--lc); border: 2px solid var(--ink); }
.ll-stops { list-style: none; margin: 0; padding: 0; }
.ll-stops li { display: flex; align-items: center; gap: 6px; padding-left: 140px; position: relative; } /* place pour une rame « +10 » de l'autre sens, sans cacher le nom */
.ll-dot { position: absolute; left: 58px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--paper); border: 2.5px solid var(--ink); z-index: 1; }
.ll-dot.end { width: 18px; height: 18px; margin-top: -9px; left: 56px; background: var(--lc); }
.ll-name { color: var(--text); font: 700 13px var(--body); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ll-rep { position: relative; flex: none; width: 22px; height: 22px; }
.ll-rep svg { width: 22px; height: 22px; overflow: visible; }
.ll-rep.tbc { opacity: .6; }
.ll-rep b { position: absolute; right: -6px; top: -6px; min-width: 14px; height: 14px; border-radius: 7px; background: var(--ink); color: var(--lime); font: 800 9px/14px var(--body); text-align: center; }
.ll-rame { position: absolute; z-index: 2; height: 22px; margin-top: -11px; display: inline-flex; align-items: center; gap: 2px; padding: 0 5px; border-radius: 8px; border: 2px solid var(--ink); font: 800 10px var(--body); color: var(--ink); background: var(--lime); box-shadow: 1px 1px 0 var(--ink); white-space: nowrap; }
.ll-rame.fwd { right: calc(100% - 56px); }
.ll-rame.back { left: 74px; }
.ll-rame b { font: 800 11px var(--body); }
.ll-rame.nd { background: var(--paper); }
.ll-rame.lt { background: #E9FF9E; }
.ll-rame.late { background: var(--orange); }
.ll-rame.vlate { background: var(--red); color: #fff; }
.ll-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--soft); }
.ll-rame.sample { position: static; margin: 0; }

/* Réseau : filtres en pictos seuls (le nom reste lu par les lecteurs d'écran), pour laisser la carte respirer */
.layer-toggles button { font-size: 0; gap: 0; padding: 4px; border-radius: 12px; }
.layer-toggles .lt-dot { width: 28px; height: 28px; border: 0; }
.layer-toggles .lt-dot svg { width: 24px; height: 24px; }
.layer-toggles button[aria-pressed="false"] { opacity: .55; }
.layer-toggles button[aria-pressed="false"] .lt-dot { filter: grayscale(1); }
/* crédits de la carte : discrets, repliés derrière le « i » */
.maplibregl-ctrl-attrib:not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-inner { display: none; }

/* Fiche station : départs trop proches pour y arriver à pied, grisés (même règle que « Tu peux prendre ») */
.walk-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--soft); margin: 0 0 8px; }
.walk-note .ico { width: 18px; height: 18px; stroke: var(--lime); flex: none; }

/* Plan B des fiches : l'item touché se déplie (détail + « Y aller ») */
.planb .pb-item { cursor: pointer; }
.planb .pb-item.open { outline: 2.5px solid var(--lime); outline-offset: 2px; }
.pb-more { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; font-size: 13px; }
.pb-more[hidden] { display: none; }
.pb-more .go { display: inline-flex; align-items: center; gap: 6px; }
.pb-more .go .ico { width: 18px; height: 18px; stroke: currentColor; }
.pop-acts .btn.ghost { color: var(--ink); background: var(--paper); border: 2px solid var(--ink); }

/* Visite : aperçu du galèromètre dans sa bulle */
.tour-meter { display: flex; gap: 3px; margin: 6px 0 8px; }
.tour-meter i { flex: 1; height: 10px; border-radius: 3px; background: #E4DFF5; border: 1.5px solid var(--ink); }
.tour-meter i.on { background: var(--orange); }
.tour-meter i.on:nth-child(-n+3) { background: var(--lime); }

/* Liste : détail d'un vélo ou d'une trottinette déplié sous sa ligne */
.take li { flex-wrap: wrap; }
.take-info { flex-basis: 100%; display: flex; flex-direction: column; gap: 3px; padding: 0 4px 10px 48px; font-size: 13px; color: var(--ink); }
.take-info[hidden] { display: none; }
.take-info b { font-weight: 800; }
.take-info .go { margin-top: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; }
.take-info .go .ico { width: 18px; height: 18px; stroke: currentColor; }
.take li.open .take-main { background: #F4F1FC; border-radius: 12px; }

/* Favoris : étoile sur les fiches ligne et station, flèches de la carte Réseau */
.fav { flex: none; width: 40px; height: 40px; margin-left: auto; border-radius: 13px; border: 2.5px solid var(--ink); background: var(--paper); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); vertical-align: middle; }
.fav svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.fav.on { background: var(--lime); }
.fav.on svg { fill: var(--ink); }
.hero-id .fav { margin-right: 46px; }
h1.with-fav { display: flex; align-items: center; gap: 6px; padding-right: 50px; }
h1.with-fav .fav { margin-left: auto; }
.fav-mark svg { width: 16px; height: 16px; fill: var(--lime); stroke: var(--ink); stroke-width: 1.5; }
.card-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 8px 0 2px; font: 800 13px var(--body); }
.card-nav button { width: 36px; height: 32px; border-radius: 10px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font: 800 16px var(--body); cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
.source svg { width: 13px; height: 13px; fill: var(--lime); stroke: var(--ink); stroke-width: 1.5; vertical-align: -2px; }

/* Plan linéaire : picto de rame, nez dans son sens de marche, qui glisse d'un relevé à l'autre */
.ll-rame { transition: top 9s linear; padding: 0 4px 0 2px; height: 26px; margin-top: -13px; }
.ll-pic { display: inline-flex; width: 20px; height: 20px; font-style: normal; }
.ll-pic svg { width: 20px; height: 20px; overflow: visible; }
.ll-rame.back .ll-pic, .ll-pic.back { transform: rotate(180deg); }
.ll-legend .ll-pic { width: 16px; height: 16px; vertical-align: -3px; }
.ll-legend .ll-pic svg { width: 16px; height: 16px; }
.ll-rame.sample .ll-pic { width: 16px; height: 16px; }
.ll-rame.sample .ll-pic svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .ll-rame { transition: none; } }

/* Messages sans potes : expliquer comment en avoir */
.no-pals { padding: 14px; border-radius: 18px; background: var(--raised); border: 2.5px solid var(--ink); }
.no-pals b { font: 800 15px var(--display); }
.no-pals p { margin: 6px 0 0; font-size: 13px; color: var(--soft); }

/* Tu peux prendre : le texte entier sur deux lignes au besoin, sans bouger l'alignement (badge, temps et bouton restent centrés) */
.take-txt b, .take-txt small { white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; line-height: 1.2; }
.take-main { align-items: center; }

/* Fiche station en panneau : une ligne par bloc, ses deux sens côte à côte, départs dans l'ordre */
.boards { display: flex; flex-direction: column; gap: 10px; }
.board { border: 2.5px solid var(--ink); border-radius: 16px; background: var(--paper); color: var(--ink); overflow: hidden; box-shadow: 2px 2px 0 var(--ink); }
.board header { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--lc); font: 800 14px var(--display); border-bottom: 2.5px solid var(--ink); }
.board header .letter { background: var(--paper); }
.board-sides { display: grid; grid-template-columns: 1fr 1fr; }
.board-side { padding: 8px 8px 10px; min-width: 0; }
.board-side + .board-side { border-left: 2px dashed #DDD7EE; }
.board-to { margin: 0 0 6px; font-size: 11px; color: #6B6680; line-height: 1.25; }
.board-to b { color: var(--ink); font-weight: 800; }
.board ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.board li { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.board-dest { font: 700 12px/1.15 var(--body); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board li b { flex: none; min-width: 46px; text-align: center; padding: 3px 6px; border-radius: 9px; font: 800 14px var(--display); background: #EEEAF8; border: 2px solid transparent; }
.board li b.rt { background: var(--lime); border-color: var(--ink); }
.board li b.late { background: var(--orange); }
.board li b small { font: 700 9px var(--body); margin-left: 1px; }
.board li:not(:first-child) b { opacity: .8; font-size: 13px; }
.board-none { font-size: 12px; color: #9A94B8; margin: 0; }

/* Guidage : consigne en cours, le reste estompé */
.walk-step { display: flex; align-items: center; gap: 12px; margin: 10px 0 6px; padding: 10px 12px; border-radius: 16px; background: var(--ink); color: var(--paper); }
.walk-step .step-arrow { flex: none; width: 40px; height: 40px; padding: 6px; border-radius: 12px; background: var(--lime); color: var(--ink); fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.walk-step div { display: flex; flex-direction: column; min-width: 0; }
.walk-step b { font: 800 20px var(--display); color: var(--lime); }
.walk-step span { font: 700 14px/1.25 var(--body); }
.walk-step small { font-size: 12px; opacity: .7; margin-top: 2px; }
body.walking .pbm:not(.dest), body.walking .tram, body.walking .crew { opacity: .25; transition: opacity .3s; }
body.walking .pbm.sel { z-index: 3; }

/* Station proche : sa plaque de lignes et son nom */
.pbm.tramstop .ts-plate { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: var(--paper); border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.pbm.tramstop .ts-plate i { width: 26px; height: 26px; border-radius: 8px; background: var(--lc); border: 2px solid var(--ink); font: 800 14px/22px var(--display); font-style: normal; text-align: center; color: var(--ink); }
.pbm.tramstop .ts-name { font: 800 11px var(--body); font-style: normal; color: var(--ink); background: var(--paper); padding: 1px 6px; border-radius: 7px; border: 1.5px solid var(--ink); white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.pbm.tramstop.sel .ts-plate { outline: 3px solid var(--pink); outline-offset: 2px; transform: scale(1.15); }

/* Rames : picto de tram dans la couleur de la ligne, flèche de sens, qui glisse le long du tracé */
button.tram .tp { position: relative; display: inline-flex; width: 22px; height: 22px; font-style: normal; }
button.tram .tp svg { width: 22px; height: 22px; overflow: visible; }
button.tram .tp-dir { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: none; font-style: normal; }
button.tram .tp-dir::before { content: ""; position: absolute; left: 50%; top: -3px; margin-left: -5px; border: 5px solid transparent; border-bottom: 7px solid #0C0A18; border-top: 0; }
button.tram { background: var(--paper); }
.compact button.tram.on-time, .calm button.tram.on-time { background: var(--lc); }
button.tram b { background: var(--lc); color: var(--ink); border: 1.5px solid var(--ink); }
/* vue d'ensemble : pas de picto (trop chargé), la lettre et le retard suffisent ; le picto apparaît en zoomant */
.compact button.tram .tp, .calm buttonbutton.tram .tp { display: none; }
/* pendant le guidage : mon perso plus petit, le point vert (ma position) bien visible */
body.walking .me .bubble { transform: scale(.72); transform-origin: 50% 100%; }
body.walking .me .pulse { width: 18px; height: 18px; }

/* Fiche d'une rame touchée sur la carte */
.tram-pop-head { display: flex; align-items: center; gap: 8px; }
.tram-pop-pic svg { width: 34px; height: 34px; }
.tram-pop-head div { display: flex; flex-direction: column; }
.tram-pop-delay { align-self: flex-start; margin: 4px 0; padding: 3px 8px; border-radius: 9px; border: 2px solid var(--ink); font: 800 12px var(--body); opacity: 1 !important; background: var(--lime); }
.tram-pop-delay.late { background: var(--orange); } .tram-pop-delay.vlate { background: var(--red); color: #fff !important; } .tram-pop-delay.nd { background: #EEEAF8; }
.tram-pop-reps { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 4px 8px; margin-top: 4px; }
.tram-pop-reps span { opacity: 1; }

/* Destination du guidage : jamais estompée, au-dessus de tout */
.maplibregl-marker:has(> .pbm.dest), .pbm.dest { z-index: 5; }
.pbm.dest { display: flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: none; opacity: 1 !important; }
.pbm.dest .dest-art { width: 46px; height: 46px; border-radius: 15px; background: var(--lime); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); display: flex; align-items: center; justify-content: center; }
.pbm.dest .dest-art svg { width: 36px; height: 36px; overflow: visible; }
.pbm.dest .ts-plate { display: flex; gap: 3px; padding: 4px; border-radius: 13px; background: var(--paper); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.pbm.dest .ts-plate i { width: 30px; height: 30px; border-radius: 9px; background: var(--lc); border: 2px solid var(--ink); font: 800 16px/26px var(--display); font-style: normal; text-align: center; color: var(--ink); }
.pbm.dest .ts-name { font: 800 12px var(--body); font-style: normal; color: var(--ink); background: var(--lime); padding: 2px 8px; border-radius: 8px; border: 2px solid var(--ink); white-space: nowrap; }

/* Fiche station immersive : l'abri du quai (toit et nom de la station), les écrans lumineux, le quai et ses rails */
.scene { position: relative; margin: 6px 0 14px; padding: 0 0 26px; }
.scene-roof { position: relative; z-index: 2; height: 30px; margin: 0 -4px; border-radius: 14px 14px 6px 6px; background: var(--ink); border: 2.5px solid var(--ink);
  box-shadow: 0 4px 0 rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; }
.scene-sign { padding: 2px 12px; border-radius: 8px; background: var(--paper); color: var(--ink); font: 800 13px var(--display); letter-spacing: .02em; border: 2px solid var(--ink); transform: translateY(-1px); }
.scene-poles { position: absolute; inset: 26px 10px 22px; display: flex; justify-content: space-between; z-index: 0; }
.scene-poles i { width: 8px; background: #3A3460; border: 2px solid var(--ink); border-radius: 3px; }
.scene-screens { position: relative; z-index: 1; margin: 8px 14px 0; }
.scene-quai { position: absolute; left: -16px; right: -16px; bottom: 0; height: 24px; background: #3A3460; border-top: 2.5px solid var(--ink); }
.scene-edge { position: absolute; left: 0; right: 0; top: 2px; height: 5px; background: repeating-linear-gradient(90deg, #FFD34D 0 14px, #0C0A18 14px 22px); }
.scene-rails { position: absolute; left: 0; right: 0; bottom: 4px; height: 6px; border-top: 2px solid #8C86B0; border-bottom: 2px solid #8C86B0; }
/* écrans lumineux : fond noir, texte ambre, minutes vertes en direct */
.boards.led .board { background: #0E0C1A; color: #FFD34D; border-color: #000; box-shadow: 0 0 0 3px #2A2648, 3px 3px 0 3px var(--ink); }
.boards.led .board header { background: #16132A; color: #F4F0FF; border-bottom-color: #000; }
.boards.led .board-to { color: #8C86B0; } .boards.led .board-to b { color: #FFD34D; }
.boards.led .board-dest { color: #FFD34D; font-family: var(--display); letter-spacing: .02em; }
.boards.led .board-side + .board-side { border-left-color: #2A2648; }
.boards.led .board li b { background: #1E1A36; color: #FFD34D; border-color: transparent; }
.boards.led .board li b.rt { background: #1E1A36; color: var(--lime); border-color: var(--lime); text-shadow: 0 0 6px rgba(198,255,61,.55); }
.boards.led .board li b.late { color: var(--orange); border-color: var(--orange); }
.boards.led .board-none { color: #5B567A; }

/* Rame en personnage : pas d'étiquette, juste le perso de la ligne, sa lettre en pastille et la flèche de sens */
button.tram.fun { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; width: auto !important; height: auto !important; border-radius: 0 !important; position: relative; transform: none; }
button.tram.fun .tp { width: var(--tram-near, 44px); height: var(--tram-near, 44px); display: inline-flex !important; filter: drop-shadow(2px 2px 0 #0C0A18); animation: tram-bob 1.6s ease-in-out infinite; }
button.tram.fun .tp svg { width: var(--tram-near, 44px); height: var(--tram-near, 44px); } /* taille réglée dans le Poste de commande */
button.tram.fun b { position: absolute; right: -7px; top: -6px; width: calc(var(--tram-near, 44px) * .42); height: calc(var(--tram-near, 44px) * .42); min-width: 15px; min-height: 15px; border-radius: 6px; font: 800 calc(var(--tram-near, 44px) * .27)/1 var(--display); display: flex !important; align-items: center; justify-content: center; }
button.tram.fun .tp-dir { width: calc(var(--tram-near, 44px) * 1.45); height: calc(var(--tram-near, 44px) * 1.45); margin: calc(var(--tram-near, 44px) * -.725) 0 0 calc(var(--tram-near, 44px) * -.725); }
@keyframes tram-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@media (prefers-reduced-motion: reduce) { button.tram.fun .tp { animation: none; } }
/* vue d'ensemble (dézoomée) : un perso plus petit, sans pastille */
.compact button.tram.fun .tp, .calm button.tram.fun .tp { display: inline-flex !important; width: var(--tram-far, 21px); height: var(--tram-far, 21px); }
.compact button.tram.fun .tp svg, .calm button.tram.fun .tp svg { width: var(--tram-far, 21px); height: var(--tram-far, 21px); }
.compact button.tram.fun b, .calm button.tram.fun b, .compact button.tram.fun .tp-dir, .calm button.tram.fun .tp-dir { display: none !important; }

/* Intérieur de la rame (toucher une rame) */
.cabin-pop .maplibregl-popup-content { padding: 8px; width: 280px; }
.cabin { position: relative; height: 170px; border-radius: 16px; border: 2.5px solid var(--ink); background: linear-gradient(#F4F0FF 0 62%, #CFC8EA 62%); overflow: hidden; }
.cabin-screen { position: absolute; left: 8px; right: 8px; top: 8px; height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: 10px; background: #0E0C1A; border: 2px solid var(--ink); }
.cabin-line { flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--lc); color: var(--ink); font: 800 13px/22px var(--display); text-align: center; border: 1.5px solid #000; }
.cabin-screen div { display: flex; flex-direction: column; min-width: 0; }
.cabin-screen small { font: 700 9px var(--body); color: #8C86B0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cabin-screen b { font: 800 12px var(--display); color: #FFD34D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cabin-windows { position: absolute; left: 10px; right: 10px; top: 54px; display: flex; gap: 8px; }
.cabin-windows i { flex: 1; height: 42px; border-radius: 9px; border: 2px solid var(--ink); }
.cabin-bar { position: absolute; left: 6px; right: 6px; top: 102px; height: 4px; border-radius: 2px; background: var(--lc); border: 1.5px solid var(--ink); }
.cabin-seats { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 8px; }
.seat { position: relative; flex: 1; height: 50px; }
.seat i { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; border-radius: 8px 8px 4px 4px; background: var(--lc); border: 2px solid var(--ink); }
.seat::before { content: ""; position: absolute; left: 3px; right: 3px; bottom: 18px; height: 26px; border-radius: 8px 8px 0 0; background: var(--lc); border: 2px solid var(--ink); filter: brightness(.9); }
.seat-rep { position: absolute; z-index: 1; left: 50%; bottom: 14px; width: 34px; height: 34px; margin-left: -17px; animation: tram-bob 1.8s ease-in-out infinite; }
.seat-rep svg { width: 34px; height: 34px; overflow: visible; }
.seat-rep b { position: absolute; right: -4px; top: -4px; min-width: 15px; height: 15px; border-radius: 8px; background: var(--ink); color: var(--lime); font: 800 9px/15px var(--body); text-align: center; }
.cabin-sticker { position: absolute; right: 8px; top: 50px; z-index: 2; width: 54px; height: 54px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: 800 18px/1 var(--display); color: var(--ink); background: var(--lime); border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); transform: rotate(-10deg); }
.cabin-sticker small { font: 800 9px var(--body); }
.cabin-sticker.late { background: var(--orange); } .cabin-sticker.vlate { background: var(--red); color: #fff; } .cabin-sticker.nd { background: #EEEAF8; } .cabin-sticker.lt { background: #E9FF9E; }
.cabin-tramy { position: absolute; left: 6px; top: 52px; width: 30px; height: 30px; z-index: 2; transform: rotate(6deg); }
.cabin-tramy svg { width: 30px; height: 30px; }
/* fenêtres de la rame : la ville de Bordeaux derrière, qui défile quand la rame roule (deux plans : parallaxe) */
.cabin { --near: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='34' viewBox='0 0 160 34'%3E%3Cg stroke='%230C0A18' stroke-width='1.6'%3E%0A%3Cpath d='M22 34V22' /%3E%3Ccircle cx='22' cy='17' r='9' fill='%235DBB63'/%3E%3Ccircle cx='17' cy='20' r='6' fill='%234CA552'/%3E%0A%3Cpath d='M92 34V8h8' fill='none'/%3E%3Ccircle cx='101' cy='9' r='2.6' fill='%23FFE14D'/%3E%0A%3Cpath d='M132 34V24' /%3E%3Ccircle cx='132' cy='19' r='7' fill='%236CC872'/%3E%3C/g%3E%0A%3Cpath d='M0 33h160' stroke='%230C0A18' stroke-width='2'/%3E%3C/svg%3E"); --far: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='34' viewBox='0 0 240 34'%3E%3Cg stroke='%230C0A18' stroke-width='1.4' stroke-linejoin='round'%3E%0A%3Cpath d='M0 12h34v22H0z' fill='%23EBDDB2'/%3E%3Cpath d='M-2 12l6-5h26l6 5z' fill='%238E9BB5'/%3E%0A%3Cpath d='M40 6h30v28H40z' fill='%23F3E8C8'/%3E%3Cpath d='M38 6l4-4h26l4 4z' fill='%238E9BB5'/%3E%0A%3Cpath d='M78 14h40v20H78z' fill='%23E4D29F'/%3E%3Cpath d='M76 14l8-6h28l8 6z' fill='%237F8CA8'/%3E%0A%3Cpath d='M126 9h26v25h-26z' fill='%23EFE3BE'/%3E%3Cpath d='M124 9l5-5h20l5 5z' fill='%238E9BB5'/%3E%0A%3Cpath d='M160 13h36v21h-36z' fill='%23EADBAE'/%3E%3Cpath d='M158 13l7-5h26l7 5z' fill='%238E9BB5'/%3E%0A%3Cpath d='M204 7h34v27h-34z' fill='%23F3E8C8'/%3E%3Cpath d='M202 7l5-4h28l5 4z' fill='%237F8CA8'/%3E%3C/g%3E%0A%3Cg fill='%235E7FB0'%3E%3Crect x='5' y='16' width='4' height='5' rx='1'/%3E%3Crect x='13' y='16' width='4' height='5' rx='1'/%3E%3Crect x='21' y='16' width='4' height='5' rx='1'/%3E%3Crect x='5' y='24' width='4' height='5' rx='1'/%3E%3Crect x='13' y='24' width='4' height='5' rx='1'/%3E%3Crect x='21' y='24' width='4' height='5' rx='1'/%3E%3Crect x='45' y='10' width='4' height='5' rx='1'/%3E%3Crect x='53' y='10' width='4' height='5' rx='1'/%3E%3Crect x='61' y='10' width='4' height='5' rx='1'/%3E%3Crect x='45' y='18' width='4' height='5' rx='1'/%3E%3Crect x='53' y='18' width='4' height='5' rx='1'/%3E%3Crect x='61' y='18' width='4' height='5' rx='1'/%3E%3Crect x='45' y='26' width='4' height='5' rx='1'/%3E%3Crect x='53' y='26' width='4' height='5' rx='1'/%3E%3Crect x='61' y='26' width='4' height='5' rx='1'/%3E%3Crect x='83' y='18' width='4' height='5' rx='1'/%3E%3Crect x='91' y='18' width='4' height='5' rx='1'/%3E%3Crect x='99' y='18' width='4' height='5' rx='1'/%3E%3Crect x='107' y='18' width='4' height='5' rx='1'/%3E%3Crect x='83' y='26' width='4' height='5' rx='1'/%3E%3Crect x='91' y='26' width='4' height='5' rx='1'/%3E%3Crect x='99' y='26' width='4' height='5' rx='1'/%3E%3Crect x='107' y='26' width='4' height='5' rx='1'/%3E%3Crect x='131' y='13' width='4' height='5' rx='1'/%3E%3Crect x='139' y='13' width='4' height='5' rx='1'/%3E%3Crect x='131' y='21' width='4' height='5' rx='1'/%3E%3Crect x='139' y='21' width='4' height='5' rx='1'/%3E%3Crect x='165' y='17' width='4' height='5' rx='1'/%3E%3Crect x='173' y='17' width='4' height='5' rx='1'/%3E%3Crect x='181' y='17' width='4' height='5' rx='1'/%3E%3Crect x='189' y='17' width='4' height='5' rx='1'/%3E%3Crect x='165' y='25' width='4' height='5' rx='1'/%3E%3Crect x='173' y='25' width='4' height='5' rx='1'/%3E%3Crect x='181' y='25' width='4' height='5' rx='1'/%3E%3Crect x='189' y='25' width='4' height='5' rx='1'/%3E%3Crect x='209' y='11' width='4' height='5' rx='1'/%3E%3Crect x='217' y='11' width='4' height='5' rx='1'/%3E%3Crect x='225' y='11' width='4' height='5' rx='1'/%3E%3Crect x='209' y='19' width='4' height='5' rx='1'/%3E%3Crect x='217' y='19' width='4' height='5' rx='1'/%3E%3Crect x='225' y='19' width='4' height='5' rx='1'/%3E%3Crect x='209' y='27' width='4' height='5' rx='1'/%3E%3Crect x='217' y='27' width='4' height='5' rx='1'/%3E%3Crect x='225' y='27' width='4' height='5' rx='1'/%3E%3C/g%3E%3C/svg%3E"); --sky: linear-gradient(160deg, #9FE3FF, #D6F2FF 60%, #FFFFFF); }
.cabin.night { --sky: linear-gradient(160deg, #1E1A44, #3A3470 65%, #574C8F); }
.cabin.quai { --near: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='34' viewBox='0 0 160 34'%3E%3Cg stroke='%230C0A18' stroke-width='1.6'%3E%0A%3Cpath d='M0 24h160v10H0z' fill='%23B9B3D2'/%3E%3Cpath d='M0 24h160' stroke-width='2'/%3E%3Cpath d='M0 26h160' stroke='%23FFE14D' stroke-width='2'/%3E%0A%3Cpath d='M30 24V4M110 24V4' fill='none'/%3E%3Cpath d='M20 4h100' stroke-width='2.4'/%3E%0A%3Crect x='56' y='12' width='12' height='12' rx='2' fill='%232B2650'/%3E%3C/g%3E%3C/svg%3E"); }
.cabin-windows i { background: var(--near) repeat-x 0 100% / 160px 34px, var(--far) repeat-x 0 100% / 240px 30px, var(--sky); background-color: #D6F2FF; }
.cabin.night .cabin-windows i { background-color: #2A2558; }
.cabin.roule .cabin-windows i { animation: cabin-pass 6s linear infinite; }
@keyframes cabin-pass { from { background-position: 0 100%, 0 100%, 0 0; } to { background-position: -480px 100%, -240px 100%, 0 0; } }
.cabin.roule .cabin-tramy { animation: cabin-bob .5s ease-in-out infinite alternate; }
@keyframes cabin-bob { to { transform: rotate(4deg) translateY(-2px); } }
.cabin-plate { position: absolute; left: 50%; top: 3px; transform: translateX(-50%); max-width: 70%; padding: 1px 7px; border-radius: 5px; background: #0E0C1A; color: #fff;
  border: 1.5px solid var(--ink); font: 800 10px/14px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cabin.arret .cabin-screen b { color: #FF9B5E; }
.cabin.quai .cabin-screen b { color: #C6FF3D; }
@media (prefers-reduced-motion: reduce) { .cabin.roule .cabin-windows i, .cabin.roule .cabin-tramy { animation: none; } }
.cabin-say { margin: 8px 2px 4px; font-size: 13px; color: var(--ink); }
.cabin-go { margin-top: 2px; min-height: 34px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--ink) !important; background: var(--paper) !important; border: 2px solid var(--ink) !important; }

/* Station plus gaie : ciel, soleil (ou lune), nuages, toit aux couleurs des lignes, perso sur le banc, tram qui arrive */
.scene { padding: 18px 10px 92px; border-radius: 20px; background: linear-gradient(#7FD3FF, #CFEFFF 70%); border: 2.5px solid var(--ink); overflow: hidden; }
body:not(.map-day) .scene { background: linear-gradient(#2B2560, #4A3F8F 75%); }
.scene-sun { position: absolute; right: 18px; top: 8px; width: 34px; height: 34px; border-radius: 50%; background: #FFE14D; border: 2.5px solid var(--ink); }
body:not(.map-day) .scene-sun { background: #F4F0FF; box-shadow: inset -9px -4px 0 #CFC8EA; }
.scene-cloud { position: absolute; height: 14px; border-radius: 10px; background: #FFFFFF; border: 2px solid var(--ink); opacity: .9; animation: cloud 24s linear infinite; }
.scene-cloud.c1 { width: 54px; top: 14px; left: -60px; } .scene-cloud.c2 { width: 38px; top: 34px; left: -60px; animation-delay: -11s; animation-duration: 30s; }
@keyframes cloud { to { transform: translateX(460px); } }
.scene-roof { margin: 8px -2px 0; height: 34px; border-radius: 16px 16px 8px 8px; background: var(--roof, var(--lc)); }
.scene-sign { font-size: 14px; }
.scene-poles { inset: 48px 22px 70px; }
.scene-screens { margin: 6px 6px 0; }
.scene-bench { position: absolute; left: 16px; bottom: 30px; display: flex; flex-direction: column; align-items: center; z-index: 2; }
.scene-bench i { width: 62px; height: 10px; border-radius: 4px; background: #C8742F; border: 2px solid var(--ink); }
.scene-me { width: 40px; height: 40px; margin-bottom: -6px; animation: tram-bob 2.2s ease-in-out infinite; }
.scene-me svg { width: 40px; height: 40px; }
.scene-quai { height: 30px; }
.scene-tram { position: absolute; right: -10px; bottom: 6px; width: 54px; height: 54px; animation: tram-in 6s ease-out infinite; }
.scene-tram svg { width: 54px; height: 54px; }
@keyframes tram-in { 0% { transform: translateX(120px); } 35%, 85% { transform: translateX(-30px); } 100% { transform: translateX(-30px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scene-cloud, .scene-tram, .scene-me { animation: none; } }
/* écrans : toujours lumineux, mais l'en-tête de chaque ligne dans sa couleur */
.boards.led .board header { background: var(--lc); color: var(--ink); }
.boards.led .board header .letter { background: var(--paper); }
.boards.led .board { border-radius: 14px; }

.tram-sheet { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: calc(var(--tabbar) + var(--safe-b) + 10px); max-width: 420px; margin: 0 auto; padding: 12px; border-radius: 22px;
  background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); animation: sheet-in .25s ease-out; }
.tram-sheet .card-x { position: absolute; right: -8px; top: -14px; }
.tram-sheet .cabin { height: 188px; }
@keyframes sheet-in { from { transform: translateY(30px); opacity: 0; } }
@media (min-width: 700px) { .tram-sheet { left: 16px; right: auto; width: 400px; bottom: 24px; } }

/* Station Le Vélo dessinée : totem au nom de la station, rangée de bornes (vélos, électriques, places libres, hors service) */
.mob-pop { gap: 8px; }
.dock-scene { position: relative; padding: 10px 10px 16px; border-radius: 16px; border: 2.5px solid var(--ink); background: linear-gradient(#CFEFFF, #F4FBFF 70%); overflow: hidden; }
body:not(.map-day) .dock-scene, body:not(.map-day) .ride-scene { background: linear-gradient(#2B2560, #4A3F8F 75%); }
.dock-totem { display: inline-flex; flex-direction: column; padding: 5px 10px; margin-bottom: 10px; border-radius: 10px; background: var(--lime); border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); transform: rotate(-2deg); }
.dock-totem span { font: 800 9px var(--body); text-transform: uppercase; letter-spacing: .08em; }
.dock-totem b { font: 800 14px var(--display); }
.dock-rack { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 5px; }
.dock { position: relative; width: 34px; height: 34px; border-radius: 9px; border: 2px solid var(--ink); background: var(--paper); display: flex; align-items: center; justify-content: center; }
.dock svg { width: 28px; height: 28px; overflow: visible; }
.dock.e { background: #F2FFD0; } .dock.e .bolt { position: absolute; right: -5px; top: -7px; width: 12px; height: 16px; }
.dock.free { background: none; border-style: dashed; border-color: #6B6680; }
.dock.hs { background: #CFC8EA; color: #6B6680; } .dock.hs i { font: 800 18px var(--display); font-style: normal; }
.dock.more { width: auto; padding: 0 8px; font: 800 12px var(--body); background: var(--ink); color: var(--lime); }
.dock-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: #8C86B0; border-top: 2.5px solid var(--ink); }
.mob-facts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fact { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 10px; border: 2px solid var(--ink); font: 700 12px var(--body); color: var(--ink); opacity: 1 !important; }
.fact b { font: 800 14px var(--display); }
.fact.lime { background: var(--lime); } .fact.yellow { background: #FFF3A6; } .fact.white { background: var(--paper); } .fact.grey { background: #CFC8EA; }
.fact .bolt { width: 10px; height: 14px; }
/* Vélo ou trottinette en libre-service : l'engin sur le trottoir, sa jauge de batterie */
.ride-scene { position: relative; height: 120px; border-radius: 16px; border: 2.5px solid var(--ink); background: linear-gradient(#7FD3FF, #CFEFFF 70%); overflow: hidden; }
.ride-sun { position: absolute; right: 14px; top: 10px; width: 26px; height: 26px; border-radius: 50%; background: #FFE14D; border: 2px solid var(--ink); }
body:not(.map-day) .ride-sun { background: #F4F0FF; box-shadow: inset -7px -3px 0 #CFC8EA; }
.ride-art { position: absolute; left: 50%; bottom: 14px; width: 84px; height: 84px; margin-left: -42px; animation: tram-bob 2s ease-in-out infinite; }
.ride-art svg { width: 84px; height: 84px; overflow: visible; }
.ride-op { position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 9px; background: var(--ink); color: var(--lime); font: 800 12px var(--display); }
.ride-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: repeating-linear-gradient(90deg, #8C86B0 0 26px, #7A74A0 26px 28px); border-top: 2.5px solid var(--ink); }
.battery { position: relative; display: inline-flex; align-items: center; width: 92px; height: 26px; border-radius: 7px; border: 2.5px solid var(--ink); background: var(--paper); overflow: hidden; opacity: 1 !important; }
.battery::after { content: ""; position: absolute; right: -6px; top: 6px; width: 4px; height: 10px; border-radius: 0 2px 2px 0; background: var(--ink); }
.battery i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--lime); }
.battery.mid i { background: #FFE14D; } .battery.low i { background: var(--red); }
.battery b { position: relative; width: 100%; text-align: center; font: 800 12px var(--display); color: var(--ink); }
.mob-walk { display: inline-flex; align-items: center; gap: 4px; font: 700 12px var(--body); color: var(--ink); opacity: .75; flex: 0 0 auto !important; min-height: 0 !important; }
.mob-walk .ico { width: 16px; height: 16px; stroke: currentColor; }
.mob-pop .go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.mob-pop .go .ico { width: 18px; height: 18px; stroke: currentColor; }
@media (prefers-reduced-motion: reduce) { .ride-art { animation: none; } }

.fact.orange { background: #FFD9C7; }
.lt-dot.moped { background: #FFD9C7; }
.pbm.free.k-scooter > span { background: #FFD9C7; }
.take-badge.scooter { background: #FFD9C7; }

/* Tram qu'on risque de rater à pied : le panneau reste tel quel, juste une petite étiquette « pas gagné » */
.deps b.miss, .board li b.miss { position: relative; }
.deps b.miss::after, .board li b.miss::after { content: "pas gagné"; position: absolute; left: 50%; top: 100%; transform: translate(-50%, 1px); white-space: nowrap;
  font: 800 8.5px/1 var(--body); padding: 2px 4px; border-radius: 5px; background: var(--orange); color: var(--ink); border: 1.5px solid var(--ink); text-decoration: none; }
.board li:has(b.miss) { margin-bottom: 8px; }
/* Autour : le prochain départ est toujours montré (même à quai, même trop tôt pour y être à pied), avec l'autocollant */
.pbm-time.miss, .dc-big.miss b { position: relative; }
.pbm-time.miss::after, .dc-big.miss b::after { content: "pas gagné"; position: absolute; white-space: nowrap; font: 800 8.5px/1 var(--body); padding: 2px 4px;
  border-radius: 5px; background: var(--orange); color: var(--ink); border: 1.5px solid var(--ink); transform: rotate(-6deg); box-shadow: 1px 1px 0 var(--ink); }
.pbm-time.miss::after { right: -10px; top: -9px; }
.dc-big.miss b::after { right: -14px; top: -10px; font-size: 11px; padding: 3px 6px; }
.dc-big.miss b { background: var(--paper); }

/* ----- Autour en cartes à swiper ----- */
.view-switch { margin-left: auto; margin-right: 44px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font: 800 11px var(--body); padding: 4px 9px; border-radius: 10px; cursor: pointer; }
.deck { position: relative; overflow: hidden; margin: 0 -4px; touch-action: pan-y; }
.deck-track { display: flex; will-change: transform; }
.dcard { flex: 0 0 100%; padding: 0 4px; box-sizing: border-box; user-select: none; }
.dcard > * { pointer-events: auto; }
.dscene { position: relative; height: 104px; border-radius: 16px; border: 2.5px solid var(--ink); overflow: hidden; background: linear-gradient(#7FD3FF, #CFEFFF 70%); }
body:not(.map-day) .dscene { background: linear-gradient(#2B2560, #4A3F8F 75%); }
.ds-me { position: absolute; left: 8px; bottom: 16px; width: 38px; height: 38px; z-index: 2; animation: ds-walk 4s ease-in-out infinite; }
.ds-me svg { width: 38px; height: 38px; }
@keyframes ds-walk { 0% { transform: translateX(0) translateY(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(var(--wx, 0)) translateY(-3px); }
  20%, 40%, 60%, 80% { transform: translateX(var(--wx, 0)) translateY(0); } 100% { transform: translateX(0); } }
.ds-me { --wx: 0; animation: ds-walk2 5s linear infinite; }
@keyframes ds-walk2 { 0% { transform: translate(0, 0); } 12% { transform: translate(14px, -3px); } 25% { transform: translate(28px, 0); } 37% { transform: translate(42px, -3px); }
  50% { transform: translate(56px, 0); } 62% { transform: translate(70px, -3px); } 75% { transform: translate(84px, 0); } 92%, 100% { transform: translate(96px, 0); opacity: .0; } }
.ds-path { position: absolute; left: 30px; right: 110px; bottom: 22px; height: 0; border-top: 3px dashed var(--lime); z-index: 1; filter: drop-shadow(1px 1px 0 #0C0A18); }
.ds-stop { position: absolute; right: 12px; bottom: 14px; width: 104px; height: 66px; }
.ds-roof { position: absolute; left: 0; right: 0; top: 0; height: 18px; border-radius: 8px 8px 4px 4px; background: var(--lc); border: 2px solid var(--ink); font: 800 9px/14px var(--display); text-align: center; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.ds-pole { position: absolute; left: 10px; top: 16px; bottom: 0; width: 5px; background: #3A3460; border: 1.5px solid var(--ink); } .ds-pole.r { left: auto; right: 10px; }
.ds-rails { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: #3A3460; border-top: 2.5px solid var(--ink); }
.ds-veh { position: absolute; right: -60px; bottom: 6px; width: 44px; height: 44px; z-index: 2; animation: ds-arrive 5s ease-out infinite; }
.ds-veh svg { width: 44px; height: 44px; overflow: visible; }
@keyframes ds-arrive { 0% { transform: translateX(0); } 55%, 100% { transform: translateX(-118px); } }
.ds-busstop { position: absolute; right: 70px; bottom: 14px; display: flex; flex-direction: column; align-items: center; }
.ds-sign { width: 30px; height: 30px; border-radius: 50%; background: #3DE0F5; border: 2.5px solid var(--ink); display: flex; align-items: center; justify-content: center; }
.ds-sign svg { width: 22px; height: 22px; }
.ds-signpole { width: 4px; height: 34px; background: var(--ink); }
.ds-num { position: absolute; top: -10px; right: -16px; padding: 1px 6px; border-radius: 8px; background: var(--ink); color: #3DE0F5; font: 800 10px var(--body); }
.ds-road { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: repeating-linear-gradient(90deg, #5B567A 0 22px, #FFFFFF 22px 34px, #5B567A 34px 56px); background-size: 100% 3px; background-repeat: no-repeat; background-position: 0 6px; background-color: #5B567A; border-top: 2.5px solid var(--ink); }
.ds-ride { position: absolute; right: 26px; bottom: 12px; width: 60px; height: 60px; z-index: 2; animation: tram-bob 1.8s ease-in-out infinite; }
.ds-ride svg { width: 60px; height: 60px; overflow: visible; }
.ds-street { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: repeating-linear-gradient(90deg, #8C86B0 0 26px, #7A74A0 26px 28px); border-top: 2.5px solid var(--ink); }
.dscene.ds-free .ds-path { right: 92px; }
.dc-body { padding: 8px 2px 2px; }
.dc-big { display: flex; align-items: baseline; gap: 6px; margin: 0; color: var(--ink); }
.dc-big small { font: 800 13px var(--body); }
.dc-big b { font: 800 44px/1 var(--display); color: var(--ink); background: var(--lime); padding: 0 10px; border-radius: 12px; border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.dc-big.now b { background: var(--orange); animation: tram-bob .8s ease-in-out infinite; }
.dc-what { margin: 6px 0 0; display: flex; flex-direction: column; }
.dc-what b { font: 800 15px/1.2 var(--display); color: var(--ink); }
.dc-what span { font-size: 12px; color: var(--paper-soft); }
.dc-what i { font-style: normal; font-weight: 800; color: var(--ink); }
.dc-acts { display: flex; gap: 8px; margin-top: 8px; }
.dc-acts .go { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; }
.dc-acts .go .ico { width: 18px; height: 18px; stroke: currentColor; }
.dc-acts .btn.ghost { color: var(--ink); background: var(--paper); border: 2px solid var(--ink); min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center; }
.deck-nav { position: absolute; top: 38px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font: 800 18px/22px var(--display); cursor: pointer; z-index: 3; }
.deck-nav.prev { left: 6px; } .deck-nav.next { right: 6px; } .deck-nav:disabled { opacity: 0; pointer-events: none; }
.deck-dots { display: flex; justify-content: center; gap: 5px; margin-top: 8px; }
.deck-dots i { width: 7px; height: 7px; border-radius: 4px; background: #DDD7EE; cursor: pointer; transition: width .2s; }
.deck-dots i.pb { background: #CFF6FB; }
.deck-dots i.on { width: 18px; background: var(--ink); }
@media (prefers-reduced-motion: reduce) { .ds-me, .ds-veh, .ds-ride, .dc-big.now b { animation: none; } }
/* ----- Arrêt de bus dessiné ----- */
.busscene { padding-top: 54px; }
.bs-pole { position: absolute; right: 18px; top: 8px; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; }
.bs-sign { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border-radius: 16px; background: #3DE0F5; border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.bs-sign svg { width: 26px; height: 26px; }
.bs-sign b { font: 800 11px var(--display); color: var(--ink); max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-pole i { width: 5px; height: 30px; margin-right: 14px; background: var(--ink); }
.scene-roof.bus { background: #3DE0F5; }
.scene-quai.road { background: #5B567A; }
.scene-tram.bus svg { width: 54px; height: 54px; overflow: visible; }
.bus-deps.led li { background: #0E0C1A; color: #FFD34D; border-color: #000; }
.bus-deps.led .dest { color: #FFD34D; font-family: var(--display); }
.bus-deps.led b { background: #1E1A36; color: #FFD34D; }
.bus-deps.led b.rt { color: var(--lime); border-color: var(--lime); background: #1E1A36; }

/* arrêt de bus : deux passages par ligne, la destination en entier sur deux lignes au besoin */
.bus-deps.led li b:nth-of-type(n+3) { display: none; }
.bus-deps.led .dest { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.15; font-size: 13px; }
.busscene .bs-pole { top: 6px; }

/* Pas de zoom de la page (iPhone : double toucher ou pincement hors de la carte la zoomait sans retour possible).
   La carte garde son propre zoom ; le texte reste agrandissable par les réglages d'accessibilité du téléphone. */
html, body { touch-action: manipulation; }
#panel, #card, .tabs, header.top, .chips, .layer-toggles, .tram-sheet, .tour { touch-action: pan-x pan-y; }
.deck { touch-action: pan-y; }

/* cartes : le gros chiffre du prochain départ, bien détaché du texte en dessous */
.dc-big { margin: 2px 0 16px; flex-wrap: wrap; row-gap: 4px; }
.dc-what { margin-top: 0; gap: 3px; }
.dc-leave { font-style: normal; font-weight: 800; color: var(--ink); background: #E9FF9E; padding: 1px 6px; border-radius: 6px; }
.dc-leave.now { background: var(--orange); }

/* cartes : le mode de transport bien visible (étiquette en haut de la scène, bordure aux couleurs du mode) */
.ds-wrap { position: relative; }
.ds-type { position: absolute; left: 8px; top: 8px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 14px;
  background: var(--mc); border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); transform: rotate(-2deg); }
.ds-type i { display: inline-flex; width: 28px; height: 28px; border-radius: 9px; background: var(--paper); border: 2px solid var(--ink); align-items: center; justify-content: center; }
.ds-type i svg { width: 24px; height: 24px; overflow: visible; }
.ds-type b { font: 800 15px var(--display); letter-spacing: .04em; color: var(--ink); }
.dcard .dscene { border-color: var(--ink); box-shadow: inset 0 0 0 4px var(--mc); }

/* cartes plus hautes et plus lisibles : « le tram D » en titre, la direction, puis le prochain départ en gros */
.dscene { height: 150px; }
.ds-me { bottom: 18px; width: 48px; height: 48px; } .ds-me svg { width: 48px; height: 48px; }
.ds-stop { width: 128px; height: 92px; } .ds-roof { height: 22px; font-size: 11px; line-height: 18px; }
.ds-veh { width: 58px; height: 58px; } .ds-veh svg { width: 58px; height: 58px; }
.ds-busstop { right: 84px; } .ds-sign { width: 38px; height: 38px; } .ds-sign svg { width: 28px; height: 28px; } .ds-signpole { height: 52px; }
.ds-ride { width: 84px; height: 84px; } .ds-ride svg { width: 84px; height: 84px; }
.ds-path { bottom: 26px; }
.dc-body { padding: 12px 4px 4px; }
.dc-title { display: block; font: 800 24px/1.1 var(--display) !important; color: var(--ink); }
.dc-to { display: block; margin-top: 2px; font: 800 15px/1.2 var(--body); color: var(--ink); opacity: .75; }
.dc-big { margin: 12px 0 12px !important; }
.dc-big b { font-size: 52px; }
.dc-info { margin: 0; font-size: 13px; color: var(--paper-soft); }
.deck-nav { top: 60px; }
/* tant que les cartes sont ouvertes, la carte du fond s'efface (voile sombre et léger flou) : l'œil va aux cartes */
body.deck-open #map::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(rgba(12,10,24,.15), rgba(12,10,24,.55) 70%); backdrop-filter: blur(1.5px) saturate(.8); -webkit-backdrop-filter: blur(1.5px) saturate(.8); transition: opacity .3s; }
body.deck-open .maplibregl-marker.me, body.deck-open .maplibregl-marker:has(> .crew) { z-index: 4; } /* soi et les autres carouleurs restent au-dessus du voile */
/* visite guidée : rien d'autre que la bulle et l'élément expliqué */
body.touring #map::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: rgba(12,10,24,.6); }
body.touring .maplibregl-marker, body.touring .chips, body.touring .layer-toggles, body.touring .tram-sheet, body.touring .install, body.touring .ask-visible { visibility: hidden; }
/* bulle de la visite au centre (rien à montrer) : la carte du bas s'efface aussi */
body.touring:has(.tour-bubble.center) #card, body.touring:has(.tour-bubble.center) .fab { opacity: .2; transition: opacity .25s; }

/* ----- Vue caméra (réalité augmentée « boussole ») ----- */
.ar-toggle { top: calc(186px + var(--safe-t)); display: none; }
body.planb-mode:not(.walking) .ar-toggle { display: flex; }
body.has-panel .ar-toggle { display: none !important; }
@media (min-width: 700px) { .ar-toggle { right: auto; left: calc(var(--col) - 60px); } }
.ar { position: fixed; inset: 0; z-index: 25; background: radial-gradient(circle at 50% 30%, #2B2560, #0C0A18 75%); overflow: hidden; touch-action: none; color: var(--paper); }
.ar-cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ar.no-cam .ar-cam { display: none; }
.ar-shade { position: absolute; inset: 0; background: linear-gradient(rgba(12,10,24,.35), transparent 30%, transparent 70%, rgba(12,10,24,.45)); pointer-events: none; }
.ar-labels { position: absolute; inset: 0; }
.arl { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 16px; background: var(--paper); color: var(--ink);
  border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); text-align: left; cursor: pointer; will-change: transform; transition: transform .15s linear; max-width: 230px; }
.arl::after { content: ""; position: absolute; left: 50%; bottom: -11px; margin-left: -7px; border: 7px solid transparent; border-top: 9px solid var(--ink); border-bottom: 0; }
.arl-pic { flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--c); border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; }
.arl-pic svg { width: 28px; height: 28px; overflow: visible; }
.arl-plate { display: flex; gap: 2px; } .arl-plate i { width: 15px; height: 15px; border-radius: 5px; background: var(--lc); border: 1.5px solid var(--ink); font: 800 9px/12px var(--display); font-style: normal; text-align: center; }
.arl.station .arl-pic { background: var(--paper); width: auto; padding: 0 4px; }
.arl-txt { display: flex; flex-direction: column; min-width: 0; }
.arl-txt b { font: 800 13px/1.15 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arl-txt small { font: 700 11px var(--body); color: var(--ink); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arl-txt em { font: 800 11px var(--body); font-style: normal; color: var(--ink); background: var(--lime); align-self: flex-start; padding: 0 5px; border-radius: 5px; margin-top: 1px; }
.arl.rame { background: var(--c); } .arl.rame .arl-pic { background: var(--paper); }
.ar-edges { position: absolute; left: 0; right: 0; top: 58%; pointer-events: none; } /* au-dessus du radar (en bas à gauche) */
.ar-edge { position: absolute; display: flex; flex-direction: column; align-items: center; max-width: 92px; padding: 6px 8px; border-radius: 14px; background: rgba(12,10,24,.75); color: var(--paper); border: 2px solid var(--lime); pointer-events: auto; cursor: pointer; }
.ar-edge.l { left: 8px; } .ar-edge.r { right: 8px; }
.ar-edge b { font: 800 22px/1 var(--display); color: var(--lime); }
.ar-edge span { font: 700 11px/1.15 var(--body); text-align: center; }
.ar-edge em { font: 800 10px var(--body); font-style: normal; color: var(--lime); }
.ar-top { position: absolute; left: 12px; right: 12px; top: calc(12px + var(--safe-t)); display: flex; align-items: center; justify-content: space-between; }
.ar-compass { padding: 5px 12px; border-radius: 12px; background: rgba(12,10,24,.7); border: 2px solid var(--ink); font: 800 13px var(--display); color: var(--lime); }
.ar-x { width: 44px; height: 44px; border-radius: 14px; background: var(--paper); border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ar-x svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.ar-radar { position: absolute; left: 14px; bottom: calc(18px + var(--safe-b)); width: 118px; height: 118px; border-radius: 50%; background: rgba(12,10,24,.72); border: 2.5px solid var(--lime);
  box-shadow: inset 0 0 0 28px rgba(198,255,61,.04), inset 0 0 0 29px rgba(198,255,61,.25); }
.ar-radar-dots { position: absolute; inset: 0; }
.ar-rd { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--c); border: 1.5px solid var(--ink); }
.ar-rd.rame { width: 11px; height: 11px; border-radius: 3px; }
.ar-me { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; } .ar-me svg { width: 22px; height: 22px; }
.ar-cone { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin-left: -34px; margin-top: -58px; border-left: 34px solid transparent; border-right: 34px solid transparent; border-top: 58px solid rgba(198,255,61,.18); transform-origin: 50% 100%; pointer-events: none; }
.ar-hint { position: absolute; left: 146px; right: 14px; bottom: calc(26px + var(--safe-b)); margin: 0; padding: 8px 10px; border-radius: 12px; background: rgba(12,10,24,.7); font: 700 12px/1.3 var(--body); }
.ar:not(.no-compass) .ar-hint { animation: ar-fade 1s 6s forwards; }
@keyframes ar-fade { to { opacity: 0; } }
.ar.no-compass .ar-hint::after { content: " Boussole indisponible : autorise l'orientation du téléphone pour placer les étiquettes."; color: var(--orange); }
.ar-intro { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(12,10,24,.82); }
.ar-intro-box { max-width: 340px; padding: 18px; border-radius: 22px; background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); text-align: center; display: flex; flex-direction: column; gap: 8px; }
.ar-intro-box h2 { margin: 0; font: 800 22px var(--display); }
.ar-intro-box p { margin: 0; font-size: 14px; }
.ar-intro-av svg { width: 64px; height: 64px; }
.ar-priv { font-size: 12px !important; opacity: .75; }
.ar-intro-box .go { min-height: 44px; justify-content: center; }
.ar-intro-box .btn.ghost { color: var(--ink); border: 2px solid var(--ink); background: var(--paper); min-height: 40px; }
body.ar-on .tram-sheet { z-index: 40; }

/* ----- Guidage en vue caméra ----- */
.walk-ar { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0 4px; min-height: 42px; border-radius: 14px; border: 2.5px solid var(--ink); background: var(--lime); color: var(--ink); font: 800 14px var(--body); box-shadow: 2px 2px 0 var(--ink); cursor: pointer; }
.walk-ar svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2.2; }
.ar.nav .ar-radar, .ar.nav .ar-edges { display: none; }
.ar.nav .ar-hint { left: 14px; }
.arn-step { position: absolute; left: 12px; right: 12px; top: calc(66px + var(--safe-t)); display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: var(--ink); color: var(--paper); border: 2.5px solid var(--lime); box-shadow: 3px 3px 0 #000; }
.arn-step div { display: flex; flex-direction: column; min-width: 0; }
.arn-step b { font: 800 22px var(--display); color: var(--lime); }
.arn-step span { font: 700 14px/1.25 var(--body); }
.arn-turn { flex: none; width: 44px; height: 44px; border-radius: 13px; background: var(--lime); color: var(--ink); font: 800 28px/44px var(--display); font-style: normal; text-align: center; }
.arn-floor { position: absolute; left: 0; right: 0; bottom: calc(80px + var(--safe-b)); height: 260px; perspective: 520px; pointer-events: none; }
.arn-arrow { position: absolute; left: 50%; bottom: 0; width: 150px; height: 240px; transform-origin: 50% 70%; transition: transform .2s linear; filter: drop-shadow(0 12px 0 rgba(0,0,0,.35)); }
.arn-arrow svg { width: 100%; height: 100%; }
.arn-arrow.turning svg path { fill: var(--orange); }
.arn-pin { pointer-events: none; transition: transform .2s linear, opacity .2s; background: var(--lime); }
.arn-pin.edge { opacity: .75 !important; }
.arn-pin .arl-pic { background: var(--paper); }

/* guidage allégé : la consigne, la vue caméra, l'arrêt ; la carte garde la place */
#card.walk-light { padding: 10px 12px; }
#card.walk-light .walk-step { margin: 0; padding: 8px 8px 8px 10px; }
#card.walk-light .walk-step .walk-art { flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ink); }
#card.walk-light .walk-step > div { flex: 1; }
#card.walk-light .walk-step b { font-size: 18px; }
.walk-x { flex: none; width: 36px; height: 36px; border-radius: 12px; border: 2px solid var(--paper); background: transparent; color: var(--paper); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.walk-x svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 3; stroke-linecap: round; fill: none; }
.walk-tools { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.walk-meta { flex: 1; min-width: 0; font: 700 13px var(--body); color: var(--ink); display: flex; flex-direction: column; }
.walk-meta small { font-size: 10px; font-weight: 600; opacity: .6; }
.walk-pill { flex: none; display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border-radius: 13px; border: 2.5px solid var(--ink); background: var(--paper); color: var(--ink); font: 800 13px var(--display); box-shadow: 2px 2px 0 var(--ink); cursor: pointer; }
.walk-pill.cam { background: var(--lime); }
.walk-pill svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2.2; }
.walk-pill:not(.cam) svg { fill: var(--ink); stroke: none; }

/* plan linéaire : « Tu es ici » au bout du nom, au niveau de la station la plus proche */
.ll-me { position: absolute; z-index: 3; right: 0; height: 28px; margin-top: -14px; display: inline-flex; align-items: center; gap: 4px; padding: 0 7px 0 2px;
  border-radius: 10px; background: var(--lime); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font: 800 11px var(--display); color: var(--ink); white-space: nowrap; transition: top .6s; }
.ll-me svg { width: 24px; height: 24px; }

/* partage et parrainage (Ton perso) */
.share-row { width: 100%; text-align: left; cursor: pointer; background: var(--lime); }
.share-row b { display: flex; flex-direction: column; flex: 1; }
.share-row small { font: 700 12px var(--body); opacity: .75; }
.share-row .row-art svg, .row-art.info-art svg { width: 26px; height: 26px; margin: 5px; }
.about-share { display: grid; gap: 8px; margin: 14px 0; }
.about-share .btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.about-share svg { width: 20px; height: 20px; }
/* les rames passent devant les plaques des stations et les repères vélos (une rame à quai restait cachée en zoomant) */
.maplibregl-marker:has(> button.tram) { z-index: 2; }

/* Ton perso › Tes points : l'historique des gains, par jour */
.ph-total { float: right; font: 800 14px var(--display); color: var(--lime); }
.points-hist { list-style: none; margin: 8px 0 0; padding: 0; }
.points-hist li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.points-hist .ph-day { grid-template-columns: 1fr auto; padding-top: 14px; border-bottom: 0; font: 800 13px var(--display); color: var(--paper-soft); }
.points-hist .ph-day b::first-letter { text-transform: uppercase; }
.points-hist .ph-day:first-child { padding-top: 4px; }
.ph-n { justify-self: start; padding: 2px 7px; border-radius: 9px; background: var(--lime); color: var(--ink); border: 2px solid var(--ink); font: 800 12px var(--display); }
.ph-why { min-width: 0; }
.points-hist time { font-size: 12px; color: var(--paper-soft); }
.ph-before .ph-n { background: var(--raised); color: var(--text); }
.ph-why { display: flex; align-items: center; gap: 6px; }
.ph-av { flex: none; width: 24px; height: 24px; border-radius: 8px; background: var(--paper); border: 2px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.ph-av svg { width: 20px; height: 20px; }

/* codes secrets : persos exclusifs marqués, tenues à choisir */
.av.secret { position: relative; }
.av.secret::after { content: "secret"; position: absolute; top: 4px; right: 4px; padding: 1px 5px; border-radius: 6px; background: var(--pink); color: var(--ink); border: 1.5px solid var(--ink); font: 800 9px var(--body); text-transform: uppercase; }
.secret-h { margin: 14px 0 6px; font: 800 14px var(--display); }
.outfits { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.outfit { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 14px; border: 2px solid var(--line); background: var(--raised); color: var(--text); cursor: pointer; }
.outfit[aria-pressed="true"] { border-color: var(--lime); background: var(--paper); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.outfit .mini svg { width: 44px; height: 44px; overflow: visible; }
.outfit small { font: 700 11px var(--body); text-align: center; }

/* boussole : visible dès que la carte est tournée ; un toucher remet le nord en haut */
.compass { right: 68px; }
.compass[hidden] { display: none; }
.compass svg { transition: transform .15s linear; stroke-width: 1.6; }
@media (min-width: 700px) { .compass { right: auto; left: calc(var(--col) - 112px); } }

/* simplification (18/10/2026) : 3 onglets, Signaler seulement près d'une ligne, plus de bouton jour/nuit sur la carte */
body:not(.can-report) .fab { display: none !important; }
.theme-toggle { display: none !important; }
.tab-me { position: relative; }
.tab-av { display: flex; width: 26px; height: 26px; }
.tab-av svg { width: 26px; height: 26px; overflow: visible; }
.tabs a[aria-current="page"] .tab-av { filter: drop-shadow(0 0 0 var(--lime)); transform: scale(1.08); }

/* perso vivant (18/10/2026) : il respire et cligne des yeux ; il sautille en marchant ; il dort la nuit si tu ne bouges plus */
.alive svg { animation: av-breathe 3.2s ease-in-out infinite; transform-origin: 50% 92%; overflow: visible; }
.alive .ey { animation: av-blink 4.6s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes av-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, .97); } }
@keyframes av-blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
body.walking .me .bubble.alive svg { animation: av-hop .5s ease-in-out infinite alternate; }
@keyframes av-hop { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-4px) rotate(3deg); } }
.bubble.sleepy svg { animation: av-sleep 4s ease-in-out infinite; }
.bubble.sleepy .ey { animation: none; transform: scaleY(.15); transform-box: fill-box; transform-origin: center; }
.bubble.sleepy::after { content: "z z"; position: absolute; right: -10px; top: -12px; font: 800 12px var(--display); color: var(--paper); text-shadow: 0 0 3px var(--ink); animation: av-zz 2.4s ease-in-out infinite; }
@keyframes av-sleep { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(-8deg) scale(.98); } }
@keyframes av-zz { 0% { opacity: 0; transform: translate(0, 4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -8px); } }
@media (prefers-reduced-motion: reduce) { .alive svg, .alive .ey, .bubble.sleepy::after { animation: none !important; } }

/* garde-robe et boutique */
.wr-row b, .game-row b { display: flex; flex-direction: column; flex: 1; }
.wr-row small, .game-row small { font: 700 12px var(--body); opacity: .7; }
.wr-row .row-art svg { width: 34px; height: 34px; }
.wr-stage { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; padding: 14px; border-radius: 22px; background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.wr-me { flex: none; width: 110px; height: 110px; display: flex; align-items: center; justify-content: center; border-radius: 26px; background: #EFEAFF; border: 2.5px solid var(--ink); }
.wr-me svg { width: 92px; height: 92px; }
.wr-bal { margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--ink) !important; }
.wr-bal b { font: 800 26px var(--display); }
.wr-bal small { font-size: 12px; opacity: .7; }
.wr-slots { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px; }
.wr-slots button { position: relative; flex: none; padding: 8px 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--raised); color: var(--text); font: 800 14px var(--display); cursor: pointer; }
.wr-slots button[aria-selected="true"] { background: var(--lime); color: var(--ink); border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.wr-slots button i { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); border: 2px solid var(--ink); }
.outfit.secret { border-color: var(--pink); }
.shop-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 22px; }
.shop-h small { font: 700 12px var(--body); color: var(--paper-soft); }
.shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.shop-it { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 16px; background: var(--raised); border: 2px solid var(--line); text-align: center; }
.shop-it.rare { border-color: var(--orange); background: linear-gradient(160deg, rgba(255,176,32,.18), var(--raised)); }
.shop-it .mini svg { width: 50px; height: 50px; overflow: visible; }
.shop-it b { font: 800 12px/1.2 var(--display); min-height: 2.4em; }
.shop-it .btn { width: 100%; padding: 7px 4px; font-size: 13px; }
.shop-rare { position: absolute; top: -8px; right: -4px; padding: 1px 6px; border-radius: 7px; background: var(--orange); color: var(--ink); border: 1.5px solid var(--ink); font: 800 9px var(--body); text-transform: uppercase; }
.points-hist .ph-buy .ph-n { background: var(--raised); color: var(--text); }
.shop-it .btn.lime { background: var(--lime); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }

/* ---------- Tramy Run (18/10/2026) ---------- */
.gm { position: fixed; inset: 0; z-index: 9000; background: #0C0A18; display: grid; place-items: center; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.gm canvas { display: block; touch-action: none; }
body.gm-on { overflow: hidden; }
body.gm-on .tabs { visibility: hidden; }
.gm-x { position: absolute; top: calc(env(safe-area-inset-top) + 12px); right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #0C0A18; background: #fff; display: grid; place-items: center; box-shadow: 0 3px 0 #0C0A18; cursor: pointer; }
.gm-x svg { width: 20px; height: 20px; fill: none; stroke: #0C0A18; stroke-width: 3; stroke-linecap: round; }
.gm-start, .gm-over { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(320px, calc(100% - 32px)); background: #fff; color: #0C0A18; border: 3px solid #0C0A18; border-radius: 22px; box-shadow: 0 6px 0 #0C0A18; padding: 20px 18px; text-align: center; display: grid; gap: 10px; pointer-events: none; }
.gm-over { pointer-events: auto; }
.gm-start b, .gm-over b { font-family: "Bricolage Grotesque", system-ui; font-weight: 800; font-size: 26px; line-height: 1.05; }
.gm-start span, .gm-over span { font-size: 14px; line-height: 1.45; }
.gm-start i, .gm-over i { font-style: normal; font-weight: 800; }
.gm-start small, .gm-over small { font-size: 12px; opacity: .7; }
.gm-start em { font-style: normal; font-weight: 800; background: #C6FF3D; border: 3px solid #0C0A18; border-radius: 999px; padding: 10px 14px; animation: gm-pulse 1.2s ease-in-out infinite; }
.gm-score { font-family: "Bricolage Grotesque", system-ui; font-weight: 800; font-size: 54px !important; line-height: 1 !important; }
.gm-over .go { justify-self: center; min-width: 160px; }
@keyframes gm-pulse { 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .gm-start em { animation: none; } }
.dc-game { display: flex; align-items: center; gap: 10px; width: 100%; margin: 2px 0 10px; padding: 8px 12px; border: 2.5px dashed var(--ink, #0C0A18); border-radius: 14px; background: transparent; color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.dc-game svg { width: 30px; height: 30px; flex: none; }
.dc-game b { font-weight: 800; }
.game-row .row-art svg { width: 30px; height: 30px; }

/* ---------- la scène du perso, la tirelire, les pièces (18/10/2026 soir) ---------- */
.stage { position: relative; height: 300px; margin: 4px 0 12px; border-radius: 28px; overflow: hidden; border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: #7FD6FF; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.stage.night { background: #1B1640; }
.st-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-me { position: absolute; left: 50%; bottom: 34px; width: 160px; height: 160px; transform: translateX(-50%); cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; }
.st-me:focus-visible { outline: 3px dashed var(--lime); outline-offset: 6px; border-radius: 30px; }
.st-shadow { position: absolute; left: 22%; right: 22%; bottom: -2px; height: 14px; border-radius: 50%; background: rgba(12,10,24,.28); animation: st-shadow 3.2s ease-in-out infinite; }
.st-act { position: absolute; inset: 0; display: block; transform-origin: 50% 100%; }
.st-body { position: absolute; inset: 0; display: block; }
.st-body svg { width: 100%; height: 100%; filter: drop-shadow(3px 4px 0 rgba(12,10,24,.25)); }
.st-tag { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.st-tag b { font: 800 19px var(--display); color: var(--ink); background: #fff; border: 2.5px solid var(--ink); border-radius: 12px; padding: 1px 12px; box-shadow: 2px 2px 0 var(--ink); max-width: 80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-tag small { margin-top: 3px; font: 700 11px var(--body); color: var(--ink); opacity: .75; }
.stage.night .st-tag small { color: #fff; }
.st-nav { position: absolute; top: 44%; z-index: 2; width: 42px; height: 42px; border-radius: 50%; border: 2.5px solid var(--ink); background: #fff; color: var(--ink); font: 800 26px/1 var(--display); box-shadow: 2px 2px 0 var(--ink); cursor: pointer; display: grid; place-items: center; padding-bottom: 3px; }
.st-nav.prev { left: 12px; } .st-nav.next { right: 12px; }
.st-nav:active { transform: translate(2px, 2px); box-shadow: none; }
.piggy { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 999px; background: #fff; color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); text-decoration: none; }
.piggy i { width: 38px; height: 33px; display: block; }
.piggy i svg { width: 100%; height: 100%; display: block; }
.piggy b { font: 800 20px var(--display); min-width: 2ch; text-align: right; }
.piggy > svg { width: 20px; height: 20px; }
.piggy.bump, #pts.bump { animation: pig-bump .25s ease-out; }
.piggy.pay i { animation: pig-shake .18s linear 6; }
.pts-coin { display: inline-flex; width: 18px; height: 18px; margin-right: -2px; }
.pts-coin svg { width: 100%; height: 100%; }
.fx-coin { position: fixed; z-index: 10000; width: 26px; height: 26px; pointer-events: none; will-change: transform; }
.fx-coin svg { width: 100%; height: 100%; display: block; }
.fx-spark, .fx-heart { position: fixed; z-index: 10000; pointer-events: none; width: 12px; height: 12px; background: var(--c); border: 2px solid var(--ink); }
.fx-spark { border-radius: 3px; transform: rotate(45deg); }
.fx-heart { width: 14px; height: 14px; border: 0; clip-path: path("M7 13 1.5 7.5A3.4 3.4 0 0 1 7 3a3.4 3.4 0 0 1 5.5 4.5z"); }
/* gestes du perso */
.st-act.do-hop { animation: st-hop .7s cubic-bezier(.3,.7,.4,1); }
.st-act.do-jump { animation: st-jump .8s cubic-bezier(.3,.7,.4,1); }
.st-act.do-wave { animation: st-wave 1s ease-in-out; }
.st-act.do-spin { animation: st-spin .9s ease-in-out; }
.st-act.do-look { animation: st-look 1.6s ease-in-out; }
.st-act.do-dance { animation: st-dance 1.4s ease-in-out; }
.st-body.out-l { transition: transform .16s ease-in, opacity .16s; transform: translateX(-140%) rotate(-20deg); opacity: 0; }
.st-body.out-r { transition: transform .16s ease-in, opacity .16s; transform: translateX(140%) rotate(20deg); opacity: 0; }
.st-body.in-r { animation: st-in-r .38s cubic-bezier(.2,1.4,.4,1); }
.st-body.in-l { animation: st-in-l .38s cubic-bezier(.2,1.4,.4,1); }
@keyframes st-hop { 0%, 100% { transform: none; } 20% { transform: scale(1.08, .9); } 50% { transform: translateY(-34px) scale(.95, 1.06); } 80% { transform: scale(1.06, .94); } }
@keyframes st-jump { 0%, 100% { transform: none; } 15% { transform: scale(1.15, .85); } 45% { transform: translateY(-70px) rotate(-8deg) scale(.95, 1.08); } 60% { transform: translateY(-60px) rotate(8deg); } 85% { transform: scale(1.1, .9); } }
@keyframes st-wave { 0%, 100% { transform: none; } 20%, 60% { transform: rotate(-9deg); } 40%, 80% { transform: rotate(9deg); } }
@keyframes st-spin { 0%, 100% { transform: none; } 50% { transform: scaleX(-1) translateY(-14px); } }
@keyframes st-look { 0%, 100% { transform: none; } 25%, 40% { transform: translateX(-16px) rotate(-4deg); } 60%, 75% { transform: translateX(16px) rotate(4deg); } }
@keyframes st-dance { 0%, 100% { transform: none; } 15% { transform: translateY(-12px) rotate(-10deg); } 30% { transform: rotate(0); } 45% { transform: translateY(-12px) rotate(10deg); } 60% { transform: rotate(0); } 75% { transform: translateY(-18px) scale(1.05); } }
@keyframes st-in-r { from { transform: translateX(120%) rotate(15deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes st-in-l { from { transform: translateX(-120%) rotate(-15deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes st-shadow { 50% { transform: scaleX(.92); } }
@keyframes pig-bump { 50% { transform: scale(1.14); } }
@keyframes pig-shake { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .st-act, .st-body, .st-shadow, .piggy i { animation: none !important; transition: none !important; } }
/* sous la scène : niveau et deux gros boutons */
.me-lvl { display: grid; gap: 5px; margin: 0 2px 14px; }
.me-lvl .lvl { font: 800 15px var(--display); }
.me-lvl small { font-size: 12px; color: var(--paper-soft); }
.me-play { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.big-btn { display: grid; justify-items: center; gap: 2px; padding: 12px 8px 10px; border-radius: 22px; border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); color: var(--ink); text-decoration: none; text-align: center; }
.big-btn:active { transform: translate(3px, 3px); box-shadow: none; }
.big-btn.dress { background: var(--pink); }
.big-btn.game { background: var(--lime); }
.big-btn i { width: 54px; height: 54px; display: block; }
.big-btn i svg { width: 100%; height: 100%; overflow: visible; }
.big-btn b { font: 800 19px var(--display); }
.big-btn small { font: 700 11px var(--body); opacity: .8; }
/* garde-robe en collection */
.wr-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; min-height: 48px; margin-bottom: 6px; }
.wr-act .go { flex: 1 1 60%; justify-content: center; }
.wr-act .go.buy { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; }
.wr-act .go.buy svg { width: 22px; height: 22px; }
.wr-act .go.buy.off { background: var(--raised); color: var(--text); border-color: var(--line); box-shadow: none; }
.wr-act .btn.ghost { flex: 0 1 auto; }
.wr-note { margin: 0; font-size: 13px; color: var(--paper-soft); text-align: center; }
.vitrine { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x mandatory; }
.vit { position: relative; flex: none; width: 104px; scroll-snap-align: start; display: grid; justify-items: center; gap: 4px; padding: 10px 6px 8px; border-radius: 18px; background: #fff; color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font: inherit; cursor: pointer; }
.vit.rare { background: linear-gradient(160deg, #FFE7A8, #fff 60%); }
.vit.got { opacity: .75; }
.vit.trying, .it.trying { outline: 3px solid var(--lime); outline-offset: 2px; }
.vit .mini svg { width: 56px; height: 56px; overflow: visible; }
.vit b { font: 800 12px/1.2 var(--display); min-height: 2.4em; }
.items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.it { position: relative; display: grid; justify-items: center; gap: 3px; padding: 10px 4px 8px; border-radius: 16px; border: 2px solid var(--line); background: var(--raised); color: var(--text); font: inherit; cursor: pointer; }
.it .mini svg { width: 50px; height: 50px; overflow: visible; }
.it b { font: 800 12px/1.2 var(--display); min-height: 2.4em; text-align: center; }
.it em { font: 700 11px var(--body); font-style: normal; opacity: .8; display: inline-flex; align-items: center; gap: 3px; }
.it-mine { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.it-mine[aria-pressed="true"] { background: var(--lime); box-shadow: 2px 2px 0 var(--ink); }
.it-shop { border-color: var(--orange); }
.it-later .mini, .it-secret .mini { filter: grayscale(1) brightness(.75); opacity: .55; }
.it-secret { border-style: dashed; border-color: var(--pink); }
.mini.q { width: 50px; height: 50px; display: grid; place-items: center; font: 800 30px var(--display); color: var(--pink); filter: none !important; opacity: 1 !important; }
.it-price { font-weight: 800 !important; opacity: 1 !important; }
.it-price svg, .vit .it-price svg { width: 14px; height: 14px; }
.vit em { font: 800 12px var(--body); font-style: normal; display: inline-flex; align-items: center; gap: 3px; }
.it-on { color: var(--ink); background: var(--lime); border-radius: 8px; padding: 0 6px; opacity: 1 !important; }
.it.new { animation: it-new .6s cubic-bezier(.2,1.6,.4,1); }
.it-new { position: absolute; top: -9px; left: 50%; transform: translateX(-50%) rotate(-4deg); padding: 1px 7px; border-radius: 7px; background: var(--pink); color: var(--ink); border: 1.5px solid var(--ink); font: 800 10px var(--body); white-space: nowrap; }
.wr-slots small { font: 700 10px var(--body); opacity: .7; }
@keyframes it-new { from { transform: scale(.6); } to { transform: none; } }
.me-lvl .lvl { color: var(--text); }
.stage { background: #E4DEFA; } .stage.night { background: #1E1A3D; }
.it-locked .mini { filter: grayscale(1) brightness(.75); opacity: .5; }
.it-locked { border-style: dashed; }
.it-lock { display: inline-flex; align-items: center; gap: 3px; }
.av.locked { opacity: .55; cursor: pointer; }
.av.locked svg { filter: grayscale(1) brightness(.7); }
.av.locked span { display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.av.locked span svg, .it-lock svg { width: 12px !important; height: 12px !important; filter: none !important; flex: none; }
.av.locked span { font-size: 12px; }
.wr-pick { flex: 1 1 100%; margin: 0; text-align: center; font-size: 14px; }
.wr-pick b { font: 800 16px var(--display); }
/* Tramy Run : classement */
/* les boutons du jeu (musique, sons, pause, quitter) passent devant toutes les cartes, qui leur laissent la place en haut */
.gm-x, .gm-pause, .gm-mus, .gm-snd { z-index: 6; }
.gm .gm-over, .gm .gm-pausebox { top: calc(50% + env(safe-area-inset-top) / 2 + 28px); max-height: calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 96px); overflow-y: auto; }
.gm-board { text-align: left; }
.gm-b-h { margin: 6px 0 4px; font: 800 15px var(--display); display: flex; justify-content: space-between; align-items: baseline; }
.gm-b-h small { font: 700 11px var(--body); opacity: .6; }
.gm-b { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.gm-b li { display: grid; grid-template-columns: 22px 30px 1fr auto; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 12px; background: #F3F0FF; font-size: 14px; }
.gm-b li.me { background: #C6FF3D; border: 2px solid #0C0A18; }
.gm-b li.sep { margin-top: 6px; }
.gm-b li:nth-child(1) .gm-rk { background: #FFE14D; } .gm-b li:nth-child(2) .gm-rk { background: #E4E4EE; } .gm-b li:nth-child(3) .gm-rk { background: #F2B27A; }
.gm-rk { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--display); border: 2px solid #0C0A18; background: #fff; }
.gm-b i { width: 30px; height: 30px; display: block; } .gm-b i svg { width: 100%; height: 100%; overflow: visible; }
.gm-b b { font: 800 14px var(--display) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-sc { font: 800 15px var(--display); }
.gm-b-empty { margin: 4px 0 0; font-size: 13px; opacity: .7; text-align: center; }
.gm-rank { font: 800 16px var(--display) !important; }
.nope { animation: nope .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes nope { 15%, 85% { transform: translateX(-3px); } 30%, 70% { transform: translateX(6px); } 45%, 55% { transform: translateX(-8px); } }
/* Moi › Le top 33 */
.top-row b { display: flex; flex-direction: column; flex: 1; }
.top-row small { font: 700 12px var(--body); opacity: .7; }
.top-row .row-art svg { width: 30px; height: 30px; }
.lb { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.lb li { display: grid; grid-template-columns: 30px 38px 1fr auto; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 16px; background: var(--raised); border: 2px solid var(--line); }
.lb li.podium { background: var(--paper); color: var(--ink); border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.lb li.me { background: var(--lime); color: var(--ink); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.lb-rk { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 800 13px var(--display); border: 2px solid var(--ink); background: var(--paper); color: var(--ink); }
.lb .p1 .lb-rk { background: #FFE14D; } .lb .p2 .lb-rk { background: #E4E4EE; } .lb .p3 .lb-rk { background: #F2B27A; }
.lb i { width: 38px; height: 38px; display: block; } .lb i svg { width: 100%; height: 100%; overflow: visible; }
.lb-who { display: flex; flex-direction: column; min-width: 0; }
.lb-who b { font: 800 15px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-who small { font: 700 11px var(--body); opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* (20/10/2026) le lieu de la course du jour tient sur une ligne */
.lb-sc { font: 800 18px var(--display); text-align: right; }
.lb-sc small { font: 700 10px var(--body); margin-left: 2px; opacity: .7; }
.lb-mine { text-align: center; font-size: 14px; }
.go.full { display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; } .go.full svg { width: 26px; height: 26px; }
.gm-more { justify-self: center; font: 800 14px var(--display); color: #0C0A18; text-decoration: underline; }
.gm-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; text-align: left; font-size: 13px; line-height: 1.35; }
.gm-rules li { display: grid; grid-template-columns: 12px 1fr; gap: 8px; align-items: start; }
.gm-rules i { width: 12px; height: 12px; margin-top: 3px; border-radius: 50%; background: var(--c); border: 2px solid #0C0A18; }
.gm-rules b { font: inherit; font-weight: 800; }
.it-miss { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%) rotate(-5deg); z-index: 2; width: max-content; max-width: 104%; padding: 3px 8px; border-radius: 9px; background: var(--pink); color: var(--ink); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font: 800 11px/1.2 var(--body); text-align: center; animation: it-new .45s cubic-bezier(.2,1.6,.4,1); }
.wr-note b { color: var(--pink); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 4px; }
.pager .btn { padding: 8px 12px; font-size: 13px; }
.pager .btn:disabled { opacity: .35; }
.pager span { font: 800 13px var(--display); color: var(--paper-soft); }
/* badges (niveaux) */
.badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.badges li { display: grid; justify-items: center; text-align: center; gap: 3px; padding: 12px 8px; border-radius: 18px; background: var(--raised); border: 2px solid var(--line); }
.badges li.got { background: var(--paper); color: var(--ink); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.badges li.cur { outline: 3px solid var(--lime); outline-offset: 2px; }
.badges li.off { opacity: .6; }
.bd-art svg { width: 64px; height: 64px; display: block; }
.badges b { font: 800 15px var(--display); }
.badges small { font-size: 12px; line-height: 1.3; opacity: .8; }
.badges em { font: 700 11px var(--body); font-style: normal; opacity: .75; margin-top: 2px; }
.badge.off { filter: grayscale(1); }
.lvl-badge { display: inline-block; width: 30px; height: 30px; vertical-align: middle; margin-right: 6px; }
.lvl-badge svg { width: 100%; height: 100%; }
.boom-badge { display: block; width: 110px; height: 110px; margin: 0 auto 4px; animation: it-new .6s cubic-bezier(.2,1.6,.4,1); }
.boom-badge svg { width: 100%; height: 100%; }
.gm-acts { display: flex; gap: 8px; justify-content: center; }
.gm-acts .go { min-width: 0; flex: 1; justify-content: center; }
.gm-share { display: inline-flex; align-items: center; gap: 6px; background: #FF4FA3; color: #0C0A18; border: 2.5px solid #0C0A18; box-shadow: 2px 2px 0 #0C0A18; font-weight: 800; }
.gm-share svg { width: 18px; height: 18px; }
.gm-rules li span { font-size: 13px !important; line-height: 1.4 !important; }
.gm-rules li b { font: 800 13px/1.4 var(--body) !important; }
.gm-start span b, .gm-over span b { font: inherit !important; font-weight: 800 !important; }

/* ---------- saisons (réglées dans l'admin) ---------- */
.logo { position: relative; }
.season-deco { position: absolute; left: -10px; top: -14px; width: 28px; height: 28px; transform: rotate(-14deg); pointer-events: none; }
.season-deco svg { width: 100%; height: 100%; display: block; fill: initial; stroke: initial; }
[data-season="noel"] .season-deco { left: -6px; top: -16px; transform: rotate(-22deg); }
.season-fx { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.season-fx i { position: absolute; left: var(--x); top: -40px; width: calc(18px * var(--s)); height: calc(18px * var(--s)); opacity: .85; animation: sfx-fall var(--d) linear infinite; animation-delay: var(--w); }
.season-fx.fly i { top: calc(8% + var(--x) * .25); left: -60px; width: calc(30px * var(--s)); height: calc(15px * var(--s)); animation-name: sfx-fly; }
.season-fx i svg { width: 100%; height: 100%; display: block; }
body.has-panel .season-fx, body.gm-on .season-fx { display: none; }
@keyframes sfx-fall { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(24px, 55vh) rotate(160deg); } 100% { transform: translate(-12px, 112vh) rotate(320deg); } }
@keyframes sfx-fly { 0% { transform: translate(0, 0); } 25% { transform: translate(30vw, -14px); } 50% { transform: translate(60vw, 10px); } 75% { transform: translate(90vw, -8px); } 100% { transform: translate(120vw, 0); } }
@media (prefers-reduced-motion: reduce) { .season-fx { display: none; } }
/* une touche de couleur de saison sur la barre d'onglets */
[data-season="halloween"] .tabs a[aria-current="page"] { color: #FF8A3D; }
[data-season="noel"] .tabs a[aria-current="page"], [data-season="valentin"] .tabs a[aria-current="page"] { color: #FF4FA3; }
[data-season="hiver"] .tabs a[aria-current="page"] { color: #3DE0F5; }
[data-season="vin"] .tabs a[aria-current="page"] { color: #E07AA5; } [data-season="marathon"] .tabs a[aria-current="page"] { color: #FFB020; } [data-season="foire"] .tabs a[aria-current="page"] { color: #3DE0F5; }
/* Tramy Run : l'atelier */
.gm-start .gm-shop-btn, .gm-over .gm-shop-btn, .gm-pausebox .gm-shop-btn { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 2px auto 0; padding: 9px 14px; border-radius: 999px; border: 2.5px solid #0C0A18; background: #FFFFFF; color: #0C0A18; font: 800 14px var(--display); box-shadow: 2px 2px 0 #0C0A18; cursor: pointer; }
.gm-shop-btn svg { width: 20px; height: 20px; }
.gm-shop { position: absolute; inset: calc(env(safe-area-inset-top) + 70px) 12px calc(env(safe-area-inset-bottom) + 16px); z-index: 5; display: flex; flex-direction: column; background: #FFFFFF; color: #0C0A18; border: 3px solid #0C0A18; border-radius: 22px; box-shadow: 0 6px 0 #0C0A18; overflow: hidden; }
.gm-shop-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px 4px; }
.gm-shop-h b { font: 800 24px var(--display); flex: 1; }
.gm-shop-bal { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: #FFE14D; border: 2px solid #0C0A18; font: 800 16px var(--display); }
.gm-shop-bal svg { width: 18px; height: 18px; } .gm-shop-bal i { font-style: normal; }
.gm-shop-x { width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid #0C0A18; background: #fff; font: 800 22px/1 var(--display); cursor: pointer; }
.gm-shop-lead { margin: 0 16px 8px; font-size: 13px; opacity: .7; }
.gm-shop ul { list-style: none; margin: 0; padding: 4px 12px 14px; overflow-y: auto; display: grid; gap: 8px; }
.gm-shop li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; background: #F3F0FF; border: 2px solid #0C0A18; }
.gm-up-ico { width: 40px; height: 40px; }
.gm-up-t { display: grid; gap: 2px; min-width: 0; }
.gm-up-t b { font: 800 15px var(--display); }
.gm-up-t small { font-size: 12px; line-height: 1.3; opacity: .75; }
.gm-pips { display: flex; gap: 4px; margin-top: 2px; }
.gm-pips i { width: 14px; height: 6px; border-radius: 3px; background: #D6CEF5; border: 1.5px solid #0C0A18; }
.gm-pips i.on { background: #C6FF3D; }
.gm-up-buy { display: grid; justify-items: center; gap: 1px; min-width: 76px; padding: 6px 8px; border-radius: 14px; border: 2.5px solid #0C0A18; background: #C6FF3D; color: #0C0A18; font: 800 15px var(--display); box-shadow: 2px 2px 0 #0C0A18; cursor: pointer; }
.gm-up-buy svg { width: 14px; height: 14px; display: inline; vertical-align: -2px; margin-right: 2px; }
.gm-up-buy small { font: 700 10px var(--body); opacity: .8; }
.gm-up-buy.off { background: #E4E0F2; }
.gm-up-max { font: 800 12px var(--body); font-style: normal; padding: 4px 8px; border-radius: 10px; background: #FFE14D; border: 2px solid #0C0A18; }
.seen-card { display: grid; gap: 8px; margin: 4px 0 14px; padding: 12px 14px; border-radius: 18px; background: var(--raised); border: 2px solid var(--line); }
.seen-card p { margin: 0; font-size: 14px; line-height: 1.4; }
.seen-card .seen-ok { color: var(--paper-soft); }
.gm-pause { position: absolute; top: calc(env(safe-area-inset-top) + 12px); right: 64px; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #0C0A18; background: #fff; display: grid; place-items: center; box-shadow: 0 3px 0 #0C0A18; cursor: pointer; }
.gm-pause svg { width: 18px; height: 18px; fill: #0C0A18; stroke: #0C0A18; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.gm-pausebox { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(300px, calc(100% - 32px)); display: grid; gap: 10px; padding: 20px 18px; text-align: center; background: #fff; color: #0C0A18; border: 3px solid #0C0A18; border-radius: 22px; box-shadow: 0 6px 0 #0C0A18; }
.gm-pausebox b { font: 800 28px var(--display); }
.gm-pausebox span { font-size: 14px; opacity: .7; }
.gm .gm-pausebox.gm-gestes { width: min(700px, calc(100% - 32px)); text-align: left; } /* (20/10/2026) les gestes du jeu, depuis la pause */
.gm-gestes > b { text-align: center; }
.gm-gestes .gx-card span { opacity: 1; font-size: 13px; }
.gm-gestes .gx-card b { font: 800 15px var(--display); }
.gm-pausebox .go, .gm-pausebox .btn { justify-content: center; width: 100%; }
.gm-pausebox .btn { background: #F3F0FF; color: #0C0A18; border: 2.5px solid #0C0A18; }
.gm-pausebox .btn.ghost { background: transparent; }
.st-avname { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 5px 12px; border-radius: 12px; background: var(--lime); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font: 800 18px var(--display); transform: rotate(-2deg); max-width: 55%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-tag small:empty { display: none; }
.it-buy { width: 100%; margin-top: 2px; padding: 7px 4px; border-radius: 12px; border: 2.5px solid var(--ink); background: var(--lime); color: var(--ink); font: 800 13px var(--display); box-shadow: 2px 2px 0 var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.it-buy svg { width: 14px; height: 14px; }
.it-buy.off { background: var(--raised); color: var(--text); border-color: var(--line); box-shadow: none; }
div.it, div.vit { cursor: pointer; }
/* persos d'un même arrêt : écartés de près, chacun touchable */
.crew.spread { gap: 4px; align-items: flex-end; }
.crew.spread .mini + .mini { margin-left: 0; }
.crew.spread .mini { transform: none !important; flex-direction: column; height: auto; padding: 2px 2px 3px; }
.crew .mini b { display: block; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 10px var(--display); color: var(--ink); }
.crew.spread .mini { width: auto; min-width: 34px; }
.gm-mus, .gm-snd { position: absolute; top: calc(env(safe-area-inset-top) + 12px); width: 44px; height: 44px; border-radius: 50%; border: 3px solid #0C0A18; background: #fff; display: grid; place-items: center; box-shadow: 0 3px 0 #0C0A18; cursor: pointer; }
.gm-snd { right: 116px; } .gm-mus { right: 168px; }
.gm-mus svg, .gm-snd svg { width: 20px; height: 20px; fill: #0C0A18; stroke: #0C0A18; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gm-mus svg .x, .gm-snd svg .x { stroke: #FF3B5C; stroke-width: 3; }
.gm-mus.off, .gm-snd.off { background: #E4E0F2; }
.gm-pause-audio { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gm-pause-audio .btn { font-size: 13px; padding: 8px 6px; }
.gm-pausebox .gm-pause-audio { opacity: 1; }
/* Tramy Run : l'intro « Sème l'averse ! » */
.gm-intro { position: absolute; inset: 0; z-index: 4; display: grid; place-content: safe center; justify-items: center; gap: 12px; padding: calc(env(safe-area-inset-top) + 64px) 24px calc(env(safe-area-inset-bottom) + 20px); text-align: center; overflow-y: auto;
  background: radial-gradient(circle at 50% 40%, #3A3470, #15122A 70%); color: #fff; animation: gi-in .35s ease-out; }
.gm-intro.out { animation: gi-out .28s ease-in forwards; }
.gi-scene { position: relative; width: 300px; height: 170px; overflow: hidden; }
@media (max-height: 760px) { .gi-scene { height: 120px; } .gi-cloud { width: 110px; } .gi-me { width: 56px; height: 56px; } .gi-t { font-size: 34px; } }
.gi-cloud { position: absolute; top: 4px; left: -10px; width: 140px; animation: gi-chase 2.4s ease-in-out infinite; }
.gi-cloud svg { width: 100%; height: auto; display: block; }
.gi-rain { position: absolute; left: 0; top: 70px; width: 160px; height: 100px; background: repeating-linear-gradient(105deg, transparent 0 9px, rgba(120,190,255,.8) 9px 11px); animation: gi-chase 2.4s ease-in-out infinite, gi-fall .35s linear infinite; mask-image: linear-gradient(transparent, #000 25%, #000 70%, transparent); }
.gi-me { position: absolute; right: 30px; bottom: 6px; width: 70px; height: 70px; animation: gi-run .32s ease-in-out infinite alternate; }
.gi-me svg { width: 100%; height: 100%; overflow: visible; }
.gi-t { font: 800 40px/1 var(--display); color: #C6FF3D; text-shadow: 3px 3px 0 #0C0A18; transform: rotate(-3deg); animation: gi-pop .5s .15s cubic-bezier(.2,1.6,.4,1) backwards; }
.gi-s { max-width: 300px; font-size: 16px; line-height: 1.4; opacity: .95; }
.gi-go { margin-top: 6px; font-style: normal; font: 800 15px var(--display); padding: 9px 16px; border-radius: 999px; background: #C6FF3D; color: #0C0A18; border: 3px solid #0C0A18; animation: gm-pulse 1.2s ease-in-out infinite; }
.gi-go { cursor: pointer; font-size: 18px; padding: 12px 26px; box-shadow: 3px 3px 0 #0C0A18; }
.gi-h { max-width: 300px; font-size: 13px; line-height: 1.4; opacity: .75; }
.gi-more { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.gi-more small { font: 800 13px var(--display); color: #FFE14D; }
.gi-more .gm-shop-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 2.5px solid #0C0A18; background: #FFFFFF; color: #0C0A18; font: 800 13px var(--display); box-shadow: 2px 2px 0 #0C0A18; cursor: pointer; }
.gi-more .gm-shop-btn svg { width: 18px; height: 18px; }
@keyframes gi-in { from { opacity: 0; } } @keyframes gi-out { to { opacity: 0; transform: scale(1.04); } }
@keyframes gi-chase { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(46px); } }
@keyframes gi-fall { to { background-position: -4px 22px; } }
@keyframes gi-run { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-10px) rotate(3deg); } }
@keyframes gi-pop { from { transform: scale(.3) rotate(-10deg); opacity: 0; } }
/* l'écran de fin arrive en douceur */
.gm-over { animation: over-in .55s cubic-bezier(.2,1.3,.4,1); }
.gm-over-k { font: 800 13px var(--body) !important; text-transform: uppercase; letter-spacing: .06em; color: #FF4FA3; }
.gm-over.record .gm-over-k { color: #E0A800; }
.gm-score.pop { animation: it-new .6s cubic-bezier(.2,1.8,.4,1); }
.gm-stats { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gm-stats i { display: grid; gap: 1px; padding: 8px 4px; border-radius: 12px; background: #F3F0FF; font-style: normal; font-size: 11px; line-height: 1.2; }
.gm-stats i b { font: 800 18px var(--display) !important; }
.gm-won { font: 800 14px var(--display) !important; color: #0C0A18; background: #FFE14D; border: 2px solid #0C0A18; border-radius: 999px; padding: 4px 12px; justify-self: center; }
@keyframes over-in { from { transform: translate(-50%, -30%) scale(.85); opacity: 0; } }
.gm-confetti { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.gm-confetti i { position: absolute; top: -20px; left: var(--x); width: 9px; height: 14px; background: var(--c); border: 1.5px solid #0C0A18; transform: rotate(var(--r)); animation: conf var(--d) var(--w) ease-in forwards; }
@keyframes conf { to { transform: translate(30px, 110vh) rotate(calc(var(--r) + 540deg)); } }
@media (prefers-reduced-motion: reduce) { .gi-cloud, .gi-rain, .gi-me, .gm-confetti { animation: none !important; } }

/* Tramy Run : missions du jour (intro et fin de partie), défi « Bats mon score », cartes postales (18/10/2026) */
.gi-missions { display: grid; gap: 5px; width: min(320px, 100%); text-align: left; margin-top: 2px; }
.gi-missions > b { font: 800 14px var(--display); color: #C6FF3D; display: flex; justify-content: space-between; }
.gi-missions > b small { color: #FFFFFF; opacity: .8; font: 700 12px var(--body); }
.gi-ghost { display: none; } .gi-ghost.on { display: grid; gap: 2px; padding: 8px 14px; border-radius: 14px; background: #FFE14D; color: #0C0A18; border: 3px solid #0C0A18; box-shadow: 3px 3px 0 #0C0A18; max-width: 320px; }
.gi-ghost b { font: 800 15px var(--display); } .gi-ghost span { font-size: 13px; }
.gm-missions { display: grid; gap: 5px; text-align: left; }
.gm-missions p { margin: 0; font: 800 14px var(--display); display: flex; justify-content: space-between; }
.gm-missions p small { opacity: .6; font: 700 12px var(--body) !important; }
.gm-chest { justify-self: center; font: 800 14px var(--display) !important; background: #FFB020; border: 2px solid #0C0A18; border-radius: 999px; padding: 5px 14px; box-shadow: 2px 2px 0 #0C0A18; animation: over-in .55s cubic-bezier(.2,1.3,.4,1); }
.gm-duel { font: 800 15px var(--display) !important; background: #F3F0FF; border-radius: 12px; padding: 6px 10px; }
.gm-duel.won { background: #FFE14D; border: 2px solid #0C0A18; }
.gm-cards { justify-self: center; font: 800 13px var(--display); color: #0C0A18; background: #FFF1D6; border: 2px solid #0C0A18; border-radius: 999px; padding: 5px 12px; text-decoration: none; }
.lb-tabs { margin: 0 0 12px; } .lb-tabs button { font-size: 14px; padding: 8px 16px; } .seg button[aria-selected="true"] { background: var(--lime); }
.lb-duel { padding: 6px 12px; font: 800 13px var(--display); border: 2px solid var(--ink); border-radius: 999px; background: #FFE14D; color: var(--ink); box-shadow: 2px 2px 0 var(--ink); cursor: pointer; }
.album-z { margin: 0 0 18px; } .album-z h2 { display: flex; align-items: baseline; gap: 8px; font: 800 18px var(--display); margin: 0 0 8px; }
.album-z h2::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--zc); border: 2px solid var(--ink); align-self: center; }
.album-z h2 small { font: 700 12px var(--body); color: var(--text); opacity: .6; }
.album-g { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pc { margin: 0; display: grid; gap: 4px; }
.pc-img { display: block; aspect-ratio: 3 / 2; border-radius: 12px; border: 2.5px solid var(--ink); overflow: hidden; background: #E6F7FF; box-shadow: 3px 3px 0 var(--ink); transform: rotate(-1deg); }
.pc:nth-child(2n) .pc-img { transform: rotate(1deg); }
.pc-img canvas { width: 100%; height: 100%; display: block; }
.pc.off .pc-img { display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--raised) 0 10px, transparent 10px 20px); border-style: dashed; box-shadow: none; }
.pc.off .pc-img b { font: 800 30px var(--display); color: var(--zc); }
.pc figcaption { font: 700 12px/1.25 var(--body); color: var(--text); }
.pc.off figcaption { opacity: .55; }

/* l'intérieur du tram : ce qui est signalé sur la ligne, et le chemin vers le plan (18/10/2026) */
.cabin-line-reps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.cabin-line-reps li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; background: #F3F0FF; color: var(--ink); font-size: 13px; line-height: 1.25; }
.cabin-line-reps li small { display: block; opacity: .65; font-size: 11.5px; }
.clr-art { flex: none; width: 28px; height: 28px; display: block; } .clr-art svg { width: 100%; height: 100%; }
.cabin-acts { display: grid; gap: 8px; margin-top: 10px; }
.cabin-acts .btn { width: 100%; text-align: center; justify-content: center; }
.ll-rame.you { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 10px; animation: gm-pulse 1.2s ease-in-out 4; }

/* Moi réorganisé et espace Tramy Run (18/10/2026) */
.me-h { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 10px; font: 800 18px var(--display); }
.me-h small { font: 700 12px var(--body); opacity: .65; }
a.me-lvl-link { display: grid; text-decoration: none; color: inherit; cursor: pointer; }
a.me-lvl-link .lvl { display: flex; align-items: center; gap: 8px; } a.me-lvl-link .row-end { margin-left: auto; }
a.me-lvl-link:active { transform: translate(2px, 2px); }
.hub-hero { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 22px; background: var(--lime); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.hub-tram { width: 56px; height: 56px; flex: none; } .hub-tram svg { width: 100%; height: 100%; overflow: visible; }
.hub-hero div { flex: 1; min-width: 0; display: grid; } .hub-hero b { font: 800 18px var(--display); } .hub-hero small { font: 700 12px var(--body); opacity: .75; }
.hub-play { flex: none; padding: 0 22px; font-size: 18px; background: var(--ink) !important; color: var(--lime) !important; }
.hub-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hub-list li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--raised); border: 2px solid rgba(255,255,255,.08); font-size: 14px; line-height: 1.3; }
.hub-list li em { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--ink); font: 800 12px var(--display); font-style: normal; }
.hub-list li b { font: 800 14px var(--display); color: var(--yellow, #FFE14D); white-space: nowrap; }
.hub-list li.ok { opacity: .7; } .hub-list li.ok em { background: var(--lime); font-size: 10px; }
.hub-list.earn li em { width: auto; min-width: 34px; padding: 0 6px; border-radius: 12px; background: var(--lime); }
.hub-bar { display: block; height: 7px; margin-top: 6px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.hub-bar i { display: block; height: 100%; background: var(--lime); border-radius: 4px; }
.hub-bar.big { height: 10px; margin: 0 0 10px; border: 2px solid var(--ink); background: #E6E1F5; }
.hub-note { margin: 8px 0 0; font-size: 12px; }
.defis-all { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.defis-all li { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; font-size: 13px; }
.defis-all li em { font: 800 12px var(--display); font-style: normal; opacity: .7; text-align: center; }
.defis-all li b { font: 700 12px var(--body); opacity: .8; }
.defis-all li.ok { background: rgba(198,255,61,.12); } .defis-all li.ok b { color: var(--lime); opacity: 1; }
.defis-all li.open { background: var(--raised); font-weight: 700; }
.defis-all li.next { opacity: .45; }
.hub-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0 8px; }
.hub-tile { display: grid; justify-items: start; gap: 2px; padding: 12px; border-radius: 18px; background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); text-decoration: none; text-align: left; font: inherit; cursor: pointer; }
.hub-tile:active { transform: translate(3px, 3px); box-shadow: none; }
.hub-tile span { width: 34px; height: 34px; display: block; } .hub-tile span svg { width: 100%; height: 100%; }
.hub-tile b { font: 800 15px var(--display); } .hub-tile small { font: 600 12px var(--body); opacity: .7; }
.badges li.next { outline: 2.5px dashed var(--lime); outline-offset: 2px; }
/* fin de partie : les défis */
.gm-defis { display: grid; gap: 5px; text-align: left; }
.gm-defis p { margin: 0; font: 800 14px var(--display); display: flex; justify-content: space-between; }
.gm-defis p small { opacity: .6; font: 700 12px var(--body) !important; }
a.me-lvl-link { padding: 12px 14px; border-radius: 18px; background: var(--raised); border: 2px solid rgba(255,255,255,.1); }
/* mode testeur : un bandeau discret, en haut au centre (touché : on quitte le mode) */
.tester-badge { position: fixed; z-index: 30; top: calc(env(safe-area-inset-top) + 6px); left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: #FF8A3D; color: #0C0A18; border: 2px solid #0C0A18; font: 800 11px var(--display); text-decoration: none; letter-spacing: .03em; text-transform: uppercase; }
/* Infos courtes : le site en avant (18/10/2026) */
.about-short .discover.big { padding: 16px; }
.about-short h2 { margin: 22px 0 10px; }
.about-keys { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.about-keys li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--raised); }
.about-keys li span { font-size: 13.5px; opacity: .85; line-height: 1.4; }
.about-links { display: flex; flex-wrap: wrap; gap: 8px; } .about-links .btn { flex: 1; justify-content: center; }
.row-link b small { display: block; }
a.me-lvl-link small { color: var(--text); opacity: .7; }
.about-links .btn svg { width: 20px; height: 20px; flex: none; }
.tester-badge { top: auto; bottom: calc(var(--tabbar) + var(--safe-b, 0px) + 8px); }
/* plan linéaire : les signalements bien visibles, en étiquettes à côté de l'arrêt (18/10/2026) */
.ll-reps { display: inline-flex; gap: 4px; flex: none; margin-left: auto; }
.ll .ll-rep { display: inline-flex; align-items: center; gap: 3px; width: auto; height: 24px; padding: 0 7px 0 2px; border-radius: 12px; background: #FFE3E8; color: var(--ink); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.ll .ll-rep svg { width: 20px; height: 20px; }
.ll .ll-rep em { font: 800 11px var(--body); font-style: normal; white-space: nowrap; }
.ll .ll-rep b { position: static; min-width: 16px; height: 16px; font: 800 10px/16px var(--body); margin-left: 1px; }
.ll .ll-rep.good { background: #E4FFC4; }
.ll .ll-rep.tbc { opacity: 1; border-style: dashed; box-shadow: none; }
@media (max-width: 380px) { .ll .ll-rep em { display: none; } .ll .ll-rep { padding-right: 3px; } }

.tester-badge { z-index: 9; } /* sous la carte du bas quand elle est ouverte */

/* Missions et défis en pastilles (18/10/2026) : un anneau qui se remplit autour du picto, une étiquette courte */
.mrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.mring { display: grid; justify-items: center; gap: 3px; text-align: center; min-width: 0; }
.mr-ring { --c: #C6FF3D; position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255,255,255,.14) 0); box-shadow: 0 0 0 2.5px #0C0A18; }
.mring.t2 .mr-ring { --c: #3DE0F5; } .mring.t3 .mr-ring { --c: #FF4FA3; }
.mr-ring > i { width: 44px; height: 44px; border-radius: 50%; background: #2B2650; display: grid; place-items: center; box-shadow: inset 0 0 0 2.5px #0C0A18; }
.mr-ring > i svg { width: 26px; height: 26px; }
.mring b { font: 800 12px/1.15 var(--display); max-width: 100%; overflow-wrap: anywhere; }
.mring small { font: 800 11px var(--display); color: #FFE14D; }
.mring.done { opacity: .75; } .mring.done small { color: #C6FF3D; }
.mr-ok { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; background: #C6FF3D; color: #0C0A18; display: grid; place-items: center; box-shadow: 0 0 0 2.5px #0C0A18; font-style: normal; }
.mr-ok svg { width: 13px; height: 13px; }
.mring.fresh { opacity: 1; } .mring.fresh .mr-ring { animation: mr-pop .6s cubic-bezier(.2,1.6,.4,1) both, mr-glow 1.4s ease-in-out .6s 3; }
@keyframes mr-pop { from { transform: scale(.6); } } @keyframes mr-glow { 50% { box-shadow: 0 0 0 2.5px #0C0A18, 0 0 0 7px rgba(198,255,61,.45); } }
/* sur fond clair (fin de partie) */
.gm-over .mr-ring { background: conic-gradient(var(--c) calc(var(--p) * 1%), #E6E1F5 0); }
.gm-over .mr-ring > i { background: #FFFFFF; }
.gm-over .mring small { color: #0C0A18; } .gm-over .mring.done small { color: #2F9A63; }
.gi-missions { gap: 8px !important; }
.gi-missions .mrow { margin-top: 2px; }
.gi-missions .gi-defi { display: flex !important; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(255,225,77,.14); font: 600 12.5px/1.25 var(--body); color: #FFFFFF; text-align: left; }
.gi-defi i { width: 22px; height: 22px; flex: none; display: block; } .gi-defi i svg { width: 100%; height: 100%; }
.gi-defi span { font: 800 12px var(--display); color: #FFE14D; white-space: nowrap; }
.gi-defi b { font: 600 12.5px/1.25 var(--body); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* fin de partie : missions en pastilles, défis en badges (18/10/2026) */
.gm-over .gm-missions, .gm-over .gm-defis { display: grid; gap: 8px; padding: 10px; border-radius: 16px; background: #F3F0FF; }
.gm-over .mring b { font-size: 11.5px !important; line-height: 1.15 !important; }
.gm-over .mring small { font-size: 11px !important; opacity: 1 !important; }
.dfpills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.dfpill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: #FFE14D; border: 2px solid #0C0A18; box-shadow: 2px 2px 0 #0C0A18; font: 800 12px var(--display); animation: mr-pop .6s cubic-bezier(.2,1.6,.4,1) both; }
.dfpill i { width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; display: grid; place-items: center; box-shadow: inset 0 0 0 2px #0C0A18; } .dfpill i svg { width: 16px; height: 16px; }
.dfnext { display: flex; align-items: center; gap: 10px; text-align: left; }
.dfnext i { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #FFFFFF; display: grid; place-items: center; box-shadow: inset 0 0 0 2.5px #0C0A18; } .dfnext i svg { width: 22px; height: 22px; }
.gm-over .dfnext span { font: 600 12.5px/1.3 var(--body) !important; flex: 1; min-width: 0; }
.gm-over .dfnext span b { display: block; font: 800 11px var(--display) !important; color: #7A5CD6; text-transform: uppercase; letter-spacing: .04em; }
.gm-over .dfnext em { font: 800 13px var(--display); font-style: normal; white-space: nowrap; }
/* espace Tramy Run : cartes, pastilles, coffre, parcours des défis (18/10/2026) */
.hub-card { margin: 16px 0 0; padding: 14px; border-radius: 22px; background: var(--raised); border: 2px solid rgba(255,255,255,.08); }
.hub-card > .me-h { margin: 0 0 12px; }
.mrow.big .mr-ring { width: 70px; height: 70px; } .mrow.big .mr-ring > i { width: 54px; height: 54px; } .mrow.big .mr-ring > i svg { width: 32px; height: 32px; }
.mrow.big .mring b { font-size: 13px; }
.hub-chest { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 8px 12px; border-radius: 14px; background: rgba(255,176,32,.14); font-size: 13px; line-height: 1.3; }
.hub-chest .chest-art { width: 34px; height: 34px; flex: none; } .hub-chest .chest-art svg { width: 100%; height: 100%; }
.hub-chest.open .chest-art { animation: mr-pop .6s cubic-bezier(.2,1.6,.4,1) both; }
.chest-dots { display: flex; gap: 4px; margin-left: auto; } .chest-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.2); box-shadow: 0 0 0 1.5px #0C0A18; } .chest-dots i.on { background: #FFB020; }
.dftrack { display: flex; align-items: center; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.dftrack::-webkit-scrollbar { display: none; }
.dflink { flex: 1 0 10px; height: 4px; background: rgba(255,255,255,.18); border-radius: 2px; }
.dfnode { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 800 13px var(--display); color: var(--text); background: #2B2650; box-shadow: 0 0 0 2.5px #0C0A18; border: 0; padding: 0; }
.dfnode svg { width: 16px; height: 16px; }
.dfnode.ok { background: var(--lime); color: #0C0A18; }
.dfnode.open { background: #FFE14D; color: #0C0A18; animation: mr-glow 2s ease-in-out infinite; }
.dfnode.lock { opacity: .45; }
.dfopen { display: grid; gap: 8px; margin-top: 6px; }
.dfcard { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.dfc-ic { width: 40px; height: 40px; border-radius: 50%; background: #FFE14D; display: grid; place-items: center; box-shadow: inset 0 0 0 2.5px #0C0A18; } .dfc-ic svg { width: 26px; height: 26px; }
.dfc-t { display: grid; gap: 1px; min-width: 0; } .dfc-t small { font: 800 11px var(--display); color: #7A5CD6; text-transform: uppercase; letter-spacing: .04em; } .dfc-t b { font: 700 13.5px/1.25 var(--body); }
.dfc-t .hub-bar { background: #E6E1F5; } .dfc-t small:last-child { color: var(--ink); opacity: .6; text-transform: none; letter-spacing: 0; }
.dfcard em { font: 800 15px var(--display); font-style: normal; }
.dfgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 8px; margin-top: 10px; justify-items: center; }
.dfnode.sm { width: 32px; height: 32px; font-size: 12px; cursor: pointer; }
.mr-ring > i { background: #FFFFFF; } /* les pictos à traits noirs restent lisibles sur fond sombre */
/* pause : ce qu'on a réussi pendant la partie (18/10/2026) */
.gm-run { display: grid; gap: 6px; margin-top: 4px; padding: 10px; border-radius: 14px; background: #F3F0FF; text-align: left; }
.gm-run > p { margin: 0; font: 800 13px var(--display); }
.gm-run-it { display: flex; align-items: center; gap: 8px; font: 600 12.5px/1.25 var(--body); }
.gm-run-it > i { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #FFE14D; display: grid; place-items: center; box-shadow: inset 0 0 0 2px #0C0A18; } .gm-run-it > i svg { width: 20px; height: 20px; }
.gm-run-it small { display: block; font: 800 10.5px var(--display); color: #7A5CD6; text-transform: uppercase; letter-spacing: .04em; }
.gm-run-none { margin: 4px 0 0; font-size: 12.5px; opacity: .7; }
/* listes repliées par défaut (18/10/2026) : album par quartier, tous les défis */
.sum-n { font: 700 12px var(--body); opacity: .6; margin-left: 6px; }
details.album-z { margin: 0 0 8px; } details.album-z > summary { display: flex; align-items: center; gap: 8px; }
.az-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--zc); border: 2px solid var(--ink); flex: none; }
details.album-z .album-g { margin-top: 10px; }

/* écran de fin en deux temps (18/10/2026) : plein écran illustré, comme l'intro */
.gm .gm-over.splash { left: 0; top: 0; right: 0; bottom: 0; transform: none; width: auto; max-height: none; border: 0; border-radius: 0; box-shadow: none;
  background: radial-gradient(circle at 50% 32%, #3A3470, #15122A 72%); color: #FFFFFF; display: grid; place-content: safe center; justify-items: center; overflow-y: auto;
  padding: calc(env(safe-area-inset-top) + 70px) 20px calc(env(safe-area-inset-bottom) + 20px); }
.gm-over.splash.record { background: radial-gradient(circle at 50% 32%, #5A3F99, #15122A 72%); }
.go-step { display: grid; gap: 10px; justify-items: center; text-align: center; width: min(340px, 100%); animation: over-in .5s cubic-bezier(.2,1.3,.4,1); }
.go-step[hidden] { display: none; }
.go-scene { display: block; } .go-art { margin: 0 auto; }
.gi-me.wet svg { filter: saturate(.7); } .gi-me.cheer { animation: gi-run .25s ease-in-out infinite alternate; }
.gm-over.splash .gm-over-k { color: #FF8AC6 !important; } .gm-over.splash.record .gm-over-k { color: #FFE14D !important; }
.gm-over.splash .go-title { font: 800 30px/1.05 var(--display) !important; color: #FFFFFF; }
.gm-over.splash .go-title small { font: 700 15px var(--body); opacity: .7; }
.gm-over.splash .gm-score { font: 800 64px/1 var(--display); color: #C6FF3D; text-shadow: 4px 4px 0 #0C0A18; }
.gm-over.splash .gm-stats.four { grid-template-columns: repeat(4, 1fr) !important; width: 100%; }
.gm-over.splash .gm-stats i { background: rgba(255,255,255,.1); color: #FFFFFF; }
.gm-over.splash .gm-stats i b { color: #FFE14D; font-size: 17px !important; }
.go-duel { font: 700 13px var(--body); color: #FFE14D; }
.go-next { min-width: 200px; font-size: 18px; margin-top: 6px; background: #C6FF3D !important; color: #0C0A18 !important; border: 3px solid #0C0A18; box-shadow: 3px 3px 0 #0C0A18; }
.gm-over.splash .gm-board { width: 100%; padding: 10px; border-radius: 18px; background: #FFFFFF; color: #0C0A18; }
.gm-over.splash .gm-more { color: #FFFFFF; }
.gm-over.splash .gm-acts { width: 100%; }
.go-next { display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 0 28px; }

/* (18/10/2026) garde-fous contre les débordements : une liste en grille s'élargissait pour un texte qui ne passe pas
   à la ligne (« … (app fermée) ») et toute la fiche glissait sur le côté. Les colonnes peuvent rétrécir, et aucun
   volet ne défile plus jamais à l'horizontale. */
.pals { grid-template-columns: minmax(0, 1fr); }
.pals li, .pals a { min-width: 0; }
#panel { overflow-x: hidden; }
#panel > * { max-width: 100%; }
#panel > .hero, #panel > .tr-splash { max-width: none; } /* les en-têtes bord à bord : leurs marges négatives doivent pouvoir déborder */
/* écran de fin : la scène a sa place à elle (le nuage ne passe plus sur le texte), et Quitter sous les boutons */
.gm-over.splash .go-art { height: 150px; width: 300px; margin-bottom: 8px; }
.gm-over.splash .go-art .gi-cloud { top: 0; width: 120px; }
.gm-over.splash .go-art .gi-rain { top: 58px; height: 80px; }
.gm-over.splash .go-art .gi-me { bottom: 4px; }
.go-quit { width: 100%; color: #FFFFFF !important; border-color: rgba(255,255,255,.4) !important; background: transparent !important; }
.gm-over.splash .go-scene { display: block; position: relative; }
.gm-over.splash .go-art { display: block; position: relative; overflow: hidden; }
/* « Encore une chance ? » (18/10/2026) */
.gm-revive { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 7; width: min(300px, calc(100% - 32px)); display: grid; gap: 10px; padding: 20px 18px; text-align: center;
  background: #FFFFFF; color: #0C0A18; border: 3px solid #0C0A18; border-radius: 22px; box-shadow: 0 6px 0 #0C0A18; animation: over-in .4s cubic-bezier(.2,1.3,.4,1); }
.gm-revive b { font: 800 24px var(--display); } .gm-revive span { font-size: 14px; line-height: 1.4; }
.gm-rv-bar { display: block; height: 8px; border-radius: 4px; background: #E6E1F5; overflow: hidden; } .gm-rv-bar em { display: block; height: 100%; background: #FF4FA3; animation: rv-time 5s linear forwards; }
@keyframes rv-time { from { width: 100%; } to { width: 0; } }
/* espace Tramy Run : la grande carte « Jouer » en haut, les options juste dessous (18/10/2026) */
.hub-hero.big { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 0 0 16px; overflow: hidden; text-decoration: none; color: var(--ink);
  background: radial-gradient(circle at 50% 30%, #3A3470, #15122A 75%); }
.hh-scene { position: relative; display: block; height: 150px; overflow: hidden; }
.hh-cloud { position: absolute; top: 10px; left: 18px; width: 120px; animation: gi-chase 2.4s ease-in-out infinite; } .hh-cloud svg { width: 100%; height: auto; display: block; }
.hh-rain { position: absolute; left: 22px; top: 62px; width: 130px; height: 80px; background: repeating-linear-gradient(105deg, transparent 0 9px, rgba(120,190,255,.8) 9px 11px); animation: gi-chase 2.4s ease-in-out infinite, gi-fall .35s linear infinite; mask-image: linear-gradient(transparent, #000 25%, #000 70%, transparent); }
.hh-me { position: absolute; right: 26%; bottom: 8px; width: 74px; height: 74px; animation: gi-run .32s ease-in-out infinite alternate; } .hh-me svg { width: 100%; height: 100%; overflow: visible; }
.hh-txt { display: grid; gap: 2px; padding: 0 16px; color: #FFFFFF; text-align: center; } .hh-txt b { font: 800 20px var(--display); } .hh-txt small { font: 700 12.5px var(--body); opacity: .8; }
.hub-hero.big .hub-play { justify-self: center; min-width: 200px; height: 52px; font-size: 20px; background: var(--lime) !important; color: var(--ink) !important; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.hub-hero.big + .hub-tiles { margin-top: 12px; }

/* Tramy Run en paysage (18/10/2026) : « tourne ton téléphone » en portrait, et des écrans qui tiennent en largeur */
/* (20/10/2026) le sens du téléphone, sur l'écran de départ : droit ou couché, et comment changer */
.gi-orient { display: flex; align-items: center; gap: 10px; max-width: 340px; margin: 4px auto 0; padding: 8px 12px; border-radius: 14px; background: rgba(12,10,24,.82); color: #FFFFFF; font-size: 13px; line-height: 1.35; text-align: left; }
.gi-orient[hidden] { display: none; }
.gi-orient b { color: #C6FF3D; }
.go-ph { flex: none; width: 16px; height: 26px; border: 2.5px solid #C6FF3D; border-radius: 5px; position: relative; animation: goPh 2.4s ease-in-out infinite; }
.go-ph::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 2px; margin-left: -2px; border-radius: 2px; background: #C6FF3D; }
.go-ph.land { animation-name: goPhL; }
@keyframes goPh { 0%, 45% { transform: rotate(0); } 60%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@keyframes goPhL { 0%, 45% { transform: rotate(-90deg); } 60%, 85% { transform: rotate(0); } 100% { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) { .go-ph { animation: none; } }
.gm-rotate { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 0 28px; text-align: center;
  background: radial-gradient(circle at 50% 40%, #3A3470, #15122A 72%); color: #FFFFFF; }
.gm-rotate[hidden] { display: none; }
.gm-rotate b { font: 800 26px var(--display); color: #C6FF3D; } .gm-rotate span { max-width: 300px; font-size: 15px; line-height: 1.4; opacity: .9; }
.gr-phone { width: 60px; height: 100px; border: 5px solid #FFFFFF; border-radius: 14px; position: relative; animation: gr-turn 2.2s ease-in-out infinite; opacity: 1 !important; }
.gr-phone::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 14px; height: 4px; margin-left: -7px; border-radius: 2px; background: #FFFFFF; }
@keyframes gr-turn { 0%, 25% { transform: rotate(0); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .gr-phone { animation: none; transform: rotate(-90deg); } }
.gm.land .gm-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-content: center; justify-content: center; padding: 12px 70px; }
.gm.land .gm-intro > * { grid-column: 1; }
.gm.land .gm-intro > .gi-ghost, .gm.land .gm-intro > .gi-missions { grid-column: 2; }
.gm.land .gm-intro > .gi-missions { grid-row: 1 / span 6; align-self: center; }
.gm.land .gi-scene { height: 100px; } .gm.land .gi-t { font-size: 30px; } .gm.land .gi-s { font-size: 14px; }
.gm.land .gm-over.splash { padding: 14px 70px; }
.gm.land .gm-over.splash .go-art { height: 90px; } .gm.land .gm-over.splash .gm-score { font-size: 48px; }
.gm.land .go-step.s2 { width: min(560px, 100%); grid-template-columns: 1fr 1fr; column-gap: 20px; align-items: start; }
.gm.land .go-step.s2 > .gm-board { grid-column: 2; grid-row: 1 / span 5; }
.gm.land .gm-shop { inset: calc(env(safe-area-inset-top) + 64px) 12% 12px; }
/* pendant Tramy Run, le paysage est permis (le reste de caroule se tient en portrait) */
body.gm-on .rotate { display: none !important; }
.gi-power { font: 700 13px var(--body); color: #FFFFFF; opacity: .9; } .gi-power b { color: #C6FF3D; font: 800 14px var(--display); }

/* ---------- la course en direct entre potes (18/10/2026) ---------- */
.hub-tile.race { background: #FFE14D; }
.race-pals, .race-lobby { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.race-pal, .race-lobby li { width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; align-items: center; padding: 8px 12px; border-radius: 16px; background: var(--paper); color: var(--ink); border: 2.5px solid var(--ink); text-align: left; font: inherit; }
.race-pal { cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.race-pal[aria-pressed="true"] { background: var(--lime); }
.race-pal i, .race-lobby i { grid-row: 1 / span 2; width: 44px; height: 44px; display: block; } .race-pal i svg, .race-lobby i svg { width: 100%; height: 100%; }
.race-pal b, .race-lobby b { font: 800 15px var(--display); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.race-pal small, .race-lobby small { font-size: 12px; opacity: .7; }
.race-lobby li.empty { opacity: .5; border-style: dashed; } .race-lobby li.empty i { border-radius: 50%; background: rgba(12,10,24,.08); }
.race-invite { position: fixed; z-index: 9500; left: 12px; right: 12px; top: calc(env(safe-area-inset-top) + 10px); display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 18px; background: #FFE14D; color: #0C0A18; border: 3px solid #0C0A18; box-shadow: 0 5px 0 #0C0A18; animation: race-in .3s ease-out; }
.race-invite i { width: 40px; height: 40px; } .race-invite i svg { width: 100%; height: 100%; }
.race-invite span { display: grid; min-width: 0; } .race-invite b { font: 800 14px var(--display); } .race-invite small { font-size: 12px; }
.race-invite .go { padding: 8px 12px; font-size: 14px; }
.race-x { width: 32px; height: 32px; border: 0; background: none; font: 800 22px var(--display); color: #0C0A18; cursor: pointer; }
@keyframes race-in { from { transform: translateY(-120%); } to { transform: none; } }
.gi-racers { display: flex; gap: 14px; justify-content: center; }
.gi-racers i { display: grid; justify-items: center; gap: 2px; font-style: normal; } .gi-racers i svg { width: 40px; height: 40px; } .gi-racers b { font: 800 12px var(--display); }
.gi-count { font: 800 64px var(--display); color: #C6FF3D; -webkit-text-stroke: 3px #0C0A18; min-height: 70px; line-height: 1; }
.gm.land .gm-intro > .gi-racers, .gm.land .gm-intro > .gi-count { grid-column: 2; }
.gm.land .gm-intro > .gi-racers { grid-row: 2; } .gm.land .gm-intro > .gi-count { grid-row: 3 / span 2; align-self: center; justify-self: center; }
.gm-race { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 7; width: min(340px, calc(100% - 32px)); max-height: calc(100% - 24px); overflow-y: auto; display: grid; gap: 8px; padding: 18px; text-align: center; background: #fff; color: #0C0A18; border: 3px solid #0C0A18; border-radius: 22px; box-shadow: 0 6px 0 #0C0A18; }
.gm-race .go-title { font: 800 26px var(--display); } .gm-race > small { font-size: 13px; opacity: .7; }
.gr-rank { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 6px; }
.gr-rank li { display: grid; grid-template-columns: 26px 36px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 14px; background: #F2EEFF; text-align: left; }
.gr-rank li.first { background: #FFE14D; } .gr-rank li.me { outline: 3px solid #0C0A18; }
.gr-rank em { font: 800 18px var(--display); font-style: normal; } .gr-rank i { width: 36px; height: 36px; } .gr-rank i svg { width: 100%; height: 100%; }
.gr-rank b { font: 800 15px var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gr-rank span { font: 700 13px var(--body); }
.gr-rem { margin: 0; font: 800 14px var(--display); color: #9B6BFF; }
.gm-race .gm-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gm.land .gm-race { width: min(560px, calc(100% - 140px)); }
.gm-wait { position: absolute; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 6; }
.gm-wait .btn { background: #FFFFFF; color: #0C0A18; border: 3px solid #0C0A18; box-shadow: 0 4px 0 #0C0A18; font-weight: 800; padding: 10px 18px; border-radius: 14px; }
.gm.land .gr-rank { grid-template-columns: 1fr 1fr; }

/* ---------- Tramy Run : l'écran d'accueil plein écran (18/10/2026) ---------- */
.big-btn.game { position: relative; }
.game-tag { position: absolute; top: -9px; right: 10px; padding: 2px 9px; border-radius: 10px; background: #FF4FA3; color: #fff; border: 2px solid var(--ink); font: 800 11px var(--display); font-style: normal; text-transform: uppercase; letter-spacing: .6px; transform: rotate(6deg); box-shadow: 2px 2px 0 var(--ink); }
.panel.tramy { top: 0; border-radius: 0; border-top: 0; padding-top: 0; z-index: 19; } /* sous la barre d'onglets, au-dessus du reste */
.panel.tramy::before { display: none; }
.panel.tramy > .close { position: fixed; top: calc(var(--safe-t) + 12px); z-index: 3; }
.tr-splash { position: relative; margin: 0 -16px 16px; min-height: calc(100dvh - var(--tabbar) - var(--safe-b)); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: calc(var(--safe-t) + 56px) 22px 30px; text-align: center; color: #fff; overflow: hidden;
  background: radial-gradient(120% 70% at 50% 25%, #4A3F8F, #1B1638 60%, #0C0A18); }
/* la scène en haut, le texte en bas : rien ne passe sur le perso */
.tr-sky { position: relative; align-self: stretch; flex: 1; min-height: 230px; margin: 0 -22px 4px; pointer-events: none; }
.tr-city { position: absolute; left: 0; bottom: 14%; width: 200%; height: 30%; display: flex; animation: tr-scroll 14s linear infinite; } .tr-city svg { width: 50%; height: 100%; display: block; }
.tr-rails { position: absolute; left: 0; right: 0; bottom: calc(14% - 14px); height: 14px; background: repeating-linear-gradient(90deg, #0C0A18 0 6px, transparent 6px 26px) bottom / 100% 8px no-repeat, linear-gradient(#5A5480, #5A5480) top / 100% 4px no-repeat; animation: tr-rail .6s linear infinite; }
.tr-tram { position: absolute; bottom: 14%; left: -30%; width: 84px; height: 84px; animation: tr-tram 7s linear infinite 1.2s; } .tr-tram svg { width: 100%; height: 100%; }
.tr-cloud { position: absolute; top: 4%; left: 6%; width: 36%; max-width: 180px; animation: tr-chase 2.6s ease-in-out infinite; } .tr-cloud svg { width: 100%; height: auto; display: block; }
.tr-rain { position: absolute; top: calc(4% + 64px); left: 8%; width: 34%; max-width: 170px; bottom: 16%; background: repeating-linear-gradient(105deg, transparent 0 10px, rgba(120,190,255,.85) 10px 12px); animation: tr-chase 2.6s ease-in-out infinite, gi-fall .35s linear infinite; mask-image: linear-gradient(transparent, #000 20%, #000 70%, transparent); }
.tr-me { position: absolute; bottom: 14%; left: 54%; width: 96px; height: 96px; animation: tr-hop .5s cubic-bezier(.3, 0, .5, 1) infinite alternate; } .tr-me svg { width: 100%; height: 100%; overflow: visible; }
.tr-can { position: absolute; bottom: calc(14% + 140px); left: calc(70% + var(--i) * 9%); width: 18px; height: 22px; border-radius: 5px 5px 8px 8px; background: repeating-linear-gradient(90deg, #A0522D 0 4px, #8B4513 4px 6px); border: 2px solid #0C0A18; animation: tr-can 2.8s linear infinite calc(var(--i) * -.7s); }
.tr-tag { position: relative; padding: 4px 12px; border-radius: 12px; background: #FF4FA3; border: 2.5px solid #0C0A18; font: 800 12px var(--display); text-transform: uppercase; letter-spacing: .8px; transform: rotate(-3deg); box-shadow: 2px 2px 0 #0C0A18; }
.tr-title { position: relative; font: 800 54px/0.95 var(--display); letter-spacing: -1.5px; color: #C6FF3D; -webkit-text-stroke: 3px #0C0A18; paint-order: stroke fill; text-shadow: 0 5px 0 #0C0A18; animation: tr-pop .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.tr-punch { position: relative; max-width: 330px; font: 700 16px/1.4 var(--body); }
.tr-go { position: relative; min-width: 230px; height: 58px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; background: #C6FF3D !important; color: #0C0A18 !important; border: 3px solid #0C0A18; box-shadow: 0 5px 0 #0C0A18; text-decoration: none; animation: tr-beat 1.6s ease-in-out infinite; }
.tr-best { position: relative; font: 700 12.5px var(--body); opacity: .8; }
.tr-more { position: relative; margin-top: 10px; display: grid; justify-items: center; gap: 2px; font: 700 12px var(--body); opacity: .75; }
.tr-more i { width: 14px; height: 14px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(45deg); animation: tr-down 1.2s ease-in-out infinite; }
@keyframes tr-scroll { to { transform: translateX(-50%); } }
@keyframes tr-rail { to { background-position: -26px bottom, 0 top; } }
@keyframes tr-tram { 0% { left: -30%; } 60%, 100% { left: 130%; } }
@keyframes tr-chase { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(14%); } }
@keyframes tr-hop { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-34px) rotate(5deg); } }
@keyframes tr-can { from { transform: translateX(0) rotate(0); } to { transform: translateX(-260px) rotate(-30deg); } }
@keyframes tr-pop { from { transform: scale(.4) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tr-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes tr-down { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(5px) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .tr-splash *, .tr-splash { animation: none !important; } }
/* une partie seule part toute seule : 3, 2, 1 (pas de bouton « C'est parti ! ») */
.gm-intro.auto > :not(.gi-scene):not(.gi-t):not(.gi-ghost):not(.gi-count):not(.gi-power):not(.gi-orient) { display: none; }
.gm.land .gm-intro.auto { grid-template-columns: minmax(0, 1fr); }
.gm.land .gm-intro.auto > * { grid-column: 1; grid-row: auto; }
/* pendant Tramy Run : aucun menu du téléphone (sélection, « Rechercher sur le web », aperçu d'image) */
.gm, .gm * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.gm img, .gm svg, .gm canvas { -webkit-user-drag: none; }
body.gm-on { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }
/* (19/10/2026) les boutons du jeu ont toujours leurs couleurs : jamais de texte blanc sur blanc ou noir sur noir
   (un .btn sans couleur prend celle du téléphone, un .btn.ghost celle du thème de l'app) */
.gm .btn { background: #FFFFFF; color: #0C0A18; border: 2.5px solid #0C0A18; }
.gm-revive .btn.ghost, .gm-race .btn.ghost, .gm-pausebox .btn.ghost, .gm-shop .btn.ghost { background: #FFFFFF; color: #0C0A18; border-color: #0C0A18; box-shadow: none; }
.gm-over .btn.ghost, .gm-intro .btn.ghost { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,.5); box-shadow: none; }
.gm .btn.gm-share { background: #FF4FA3; color: #0C0A18; }
.gm .go { color: #C6FF3D; }
.gm-over .gm-acts .go { background: #C6FF3D; color: #0C0A18; border: 3px solid #0C0A18; box-shadow: 3px 3px 0 #0C0A18; } /* Rejouer se voit sur le fond sombre */
.maplibregl-popup { z-index: 8; } /* (19/10/2026) une fenêtre ouverte sur la carte (écrire à un pote, Y aller…) passe devant les trams et tous les repères */
/* (19/10/2026) les 3 défis en cours : dans la pause, et seuls dans l'espace Tramy Run */
.gm-run-it > span { flex: 1; min-width: 0; }
.gm-run-it.ok > i { background: #C6FF3D; }
.gm-run-it > u { flex: none; text-decoration: none; font: 800 12px var(--display); color: #0C0A18; background: #FFE14D; border-radius: 10px; padding: 2px 7px; }
.gm-dbar { display: block; height: 6px; margin-top: 4px; border-radius: 3px; background: #E6E1F5; overflow: hidden; } .gm-dbar b { display: block; height: 100%; background: #9B6BFF; }
.dfcard.new { box-shadow: 0 0 0 3px #FFE14D, 3px 3px 0 3px var(--ink); } .dfcard.new .dfc-t > small:first-child { color: #FF4FA3; }
.dfhint { margin-top: 8px; font-size: 12.5px; }
.hub-chest .chest-name { display: block; font: 800 14px var(--display); }
/* en paysage, la pause sur deux colonnes : les boutons à gauche, les 3 défis à droite (tout se voit sans défiler) */
.gm.land .gm-pausebox { width: min(660px, calc(100% - 140px)); grid-template-columns: 1fr 1.25fr; column-gap: 16px; align-items: start; max-height: calc(100% - 70px); }
.gm.land .gm-pausebox > * { grid-column: 1; }
.gm.land .gm-pausebox:not(.gm-gestes) { gap: 7px; padding: 14px 18px; } .gm.land .gm-pausebox:not(.gm-gestes) > b { font-size: 24px; } /* (20/10/2026) 4 boutons : tout tient sans défiler */
.gm.land .gm-pausebox .go, .gm.land .gm-pausebox .btn { min-height: 0; padding-block: 8px; }
.gm.land .gm-pausebox > .gm-run { grid-column: 2; grid-row: 1 / span 5; margin-top: 0; }
.gm.land .gm-pausebox > .gm-run + .gm-run { grid-row: 6 / span 2; }
.gm.land .gm-pausebox > .gm-run-none { grid-column: 2; grid-row: 1 / span 5; }
.gm.land .gm-pausebox.gm-gestes { grid-template-columns: 1fr; width: min(760px, calc(100% - 40px)); } /* les gestes : toute la largeur, 4 par ligne */
.gm.land .gm-pausebox.gm-gestes .gx-grid { grid-template-columns: repeat(4, 1fr); }
.gm.land .gm-pausebox.gm-gestes > .go { justify-self: center; width: auto; padding-inline: 40px; }
/* (19/10/2026) dans le choix du perso, il cligne plus souvent, parfois deux fois de suite : il a l'air vivant */
.st-body.alive .ey { animation: st-blink 4.2s infinite; }
@keyframes st-blink { 0%, 60%, 66%, 92%, 100% { transform: scaleY(1); } 62%, 64.5% { transform: scaleY(.1); } 63% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@media (prefers-reduced-motion: reduce) { .st-body.alive .ey { animation: none !important; } }
/* (19/10/2026) les expressions de la bouche : dessinées par stage.js (makeFace), plus d'étirement de la bouche */
.expr { animation: expr-in .12s ease-out; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes expr-in { from { transform: scale(.6); opacity: 0; } }
/* (19/10/2026) l'accueil de Tramy Run aux couleurs de la saison : une étiquette « Édition … » ; Halloween a son habillage complet */
.tr-season { position: relative; padding: 5px 14px; border-radius: 12px; background: #FFB020; color: #0C0A18; border: 2.5px solid #0C0A18; font: 800 13px var(--display); transform: rotate(3deg); box-shadow: 2px 2px 0 #0C0A18; }
.tr-splash.season-halloween { background: radial-gradient(120% 70% at 50% 22%, #FF8A3D 0%, #8E3B8C 32%, #2A1240 62%, #0C0A18); }
.tr-splash.season-halloween .tr-title { color: #FF8A3D; }
.tr-splash.season-halloween .tr-tag { background: #9B6BFF; }
.tr-splash.season-halloween .tr-season { background: #FF8A3D; }
.tr-splash.season-halloween .tr-go { background: #FF8A3D !important; }
.tr-splash.season-halloween .tr-city svg path { fill: #1A0E2A; }
.tr-splash.season-halloween .tr-can { border-radius: 50%; width: 22px; height: 20px; background: radial-gradient(circle at 50% 35%, #FFB020, #FF8A3D 60%, #C85A1A); } /* des citrouilles à la place des canelés */
.tr-moon { position: absolute; right: 12%; top: 8%; width: 70px; height: 70px; border-radius: 50%; background: #FFE9B0; box-shadow: 0 0 40px rgba(255,233,176,.6); }
.tr-bats { position: absolute; inset: 0; }
.tr-bats i { position: absolute; top: calc(14% + var(--i) * 7%); left: -40px; width: 46px; height: 23px; animation: tr-bat calc(5s + var(--i) * 1.3s) linear infinite calc(var(--i) * -1.7s); }
.tr-bats svg { width: 100%; height: 100%; animation: tr-flap .25s ease-in-out infinite alternate; }
@keyframes tr-bat { to { transform: translateX(calc(100vw + 80px)) translateY(-20px); } }
@keyframes tr-flap { to { transform: scaleY(.55); } }
/* (19/10/2026) les navettes fluviales (Bato 1, 2, 3) : pastille bleu Garonne, de l'eau au lieu de la route */
.letter.bus.boat { background: #2F7DD9; color: #FFFFFF; }
.ds-road.water, .scene-quai.road.water { background: repeating-linear-gradient(90deg, #3DA5FF 0 18px, #5BB8FF 18px 36px) !important; }
/* (19/10/2026) les filtres de l'onglet Réseau : lisibles (picto + nom), sur une ligne qui défile ; le filtre Bateaux */
.layer-toggles { right: 70px; overflow-x: auto; scrollbar-width: none; padding: 2px 4px 6px 0; }
.layer-toggles::-webkit-scrollbar { display: none; }
.layer-toggles button { flex: none; font-size: 0; gap: 0; padding: 3px; border-radius: 13px; background: var(--paper); color: var(--ink); } /* pictos seuls (le nom reste pour les lecteurs d'écran), mais bien contrastés */
.layer-toggles button[aria-pressed="false"] { opacity: 1; background: rgba(21,18,42,.82); color: #FFFFFF; border-color: rgba(255,255,255,.35); }
.layer-toggles button[aria-pressed="false"] .lt-dot { filter: none; opacity: .6; }
.layer-toggles .lt-dot { width: 30px; height: 30px; border-radius: 10px; }
.layer-toggles .lt-dot svg { width: 25px; height: 25px; }
.lt-dot.boat { background: #7FC8FF; }
/* un bateau sur la Garonne */
.boat-mk { display: flex; align-items: center; gap: 2px; padding: 2px 6px 2px 2px; border-radius: 12px; border: 2px solid #0C0A18; background: #FFFFFF; box-shadow: 2px 2px 0 #0C0A18; cursor: pointer; }
.boat-mk svg { width: 26px; height: 26px; } .boat-mk b { font: 800 11px var(--display); color: #0C0A18; }
/* Bateau en personnage, comme les rames : pas d'étiquette, le perso qui tangue et son nom en pastille.
   Taille réglée dans le Poste de commande (--boat-near de près, --boat-far en vue d'ensemble). */
.boat-mk.fun { position: relative; display: block; padding: 0; gap: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.boat-mk.fun .bp { display: inline-flex; width: var(--boat-near, 44px); height: var(--boat-near, 44px); filter: drop-shadow(2px 2px 0 #0C0A18); transform-origin: 50% 85%; animation: boat-sway 1.8s ease-in-out infinite alternate; }
@keyframes boat-sway { from { transform: rotate(-5deg) translateY(0); } to { transform: rotate(5deg) translateY(-1.5px); } }
.boat-mk.fun .bp svg { width: 100%; height: 100%; }
.boat-mk.fun b { position: absolute; right: calc(var(--boat-near, 44px) * -.2); top: calc(var(--boat-near, 44px) * -.12); min-width: calc(var(--boat-near, 44px) * .42); height: calc(var(--boat-near, 44px) * .42); padding: 0 3px; box-sizing: border-box;
  border-radius: 6px; background: #2F7DD9; color: #FFFFFF; border: 1.5px solid #0C0A18; font: 800 calc(var(--boat-near, 44px) * .25)/1 var(--display); display: flex; align-items: center; justify-content: center; }
.compact .boat-mk.fun .bp, .calm .boat-mk.fun .bp { width: var(--boat-far, 21px); height: var(--boat-far, 21px); }
.compact .boat-mk.fun b, .calm .boat-mk.fun b { display: none; }
@media (prefers-reduced-motion: reduce) { .boat-mk.fun .bp { animation: none; } }

/* à bord d'une navette fluviale : hublots ronds, l'eau qui file, le ponton à l'arrêt, une bouée au mur */
.cabin.boat { background: linear-gradient(#EAF4FF 0 62%, #B7CCE4 62%); --near: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='34' viewBox='0 0 80 34'%3E%3Cpath d='M0 20q10-5 20 0t20 0 20 0 20 0V34H0z' fill='%233F8FD8' stroke='%230C0A18' stroke-width='1.6'/%3E%3Cpath d='M8 27q6-3 12 0M46 29q6-3 12 0' fill='none' stroke='%23BFE6FF' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cabin.boat.quai { --near: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='34' viewBox='0 0 160 34'%3E%3Cpath d='M0 24q10-4 20 0t20 0 20 0 20 0 20 0 20 0 20 0 20 0V34H0z' fill='%233F8FD8' stroke='%230C0A18' stroke-width='1.6'/%3E%3Cg stroke='%230C0A18' stroke-width='1.6'%3E%3Cpath d='M-2 15h164v8H-2z' fill='%23C9A46A'/%3E%3Cpath d='M20 15v8M50 15v8M80 15v8M110 15v8M140 15v8' /%3E%3Crect x='34' y='9' width='6' height='6' rx='2' fill='%232B2650'/%3E%3Crect x='118' y='9' width='6' height='6' rx='2' fill='%232B2650'/%3E%3Cpath d='M70 15V3h22v12' fill='%23FFFFFF'/%3E%3C/g%3E%3Cpath d='M74 7h14' stroke='%232F7DD9' stroke-width='2.4'/%3E%3C/svg%3E"); }
.cabin.boat .cabin-windows { justify-content: space-around; padding: 0 44px 0 40px; animation: boat-rock 3.4s ease-in-out infinite alternate; }
.cabin.boat .cabin-windows i { flex: none; width: 58px; height: 58px; border-radius: 50%; border: 3px solid #9AA3B5; box-shadow: 0 0 0 2px var(--ink);
  background: var(--near) repeat-x 0 100% / 80px 34px, var(--far) repeat-x 0 calc(100% - 9px) / 240px 26px, var(--sky); background-color: #D6F2FF; }
.cabin.boat.quai .cabin-windows i { background-size: 160px 34px, 240px 26px, auto; }
.cabin.boat.roule .cabin-windows i { animation: boat-pass 6s linear infinite; }
.cabin.boat.arret .cabin-windows i, .cabin.boat.quai .cabin-windows i { animation: boat-lap 2.4s ease-in-out infinite alternate; }
@keyframes boat-pass { from { background-position: 0 100%, 0 calc(100% - 9px), 0 0; } to { background-position: -320px 100%, -240px calc(100% - 9px), 0 0; } }
@keyframes boat-lap { from { background-position: 0 100%, 0 calc(100% - 9px), 0 0; } to { background-position: -10px 98%, 0 calc(100% - 9px), 0 0; } }
@keyframes boat-rock { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
.cabin.boat .cabin-plate { top: auto; bottom: -24px; }
.cabin.boat .seat::before { display: none; }
.cabin.boat .seat i { height: 16px; border-radius: 5px; }
.boat-buoy { position: absolute; right: 8px; top: 52px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid var(--ink);
  background: radial-gradient(circle, #EAF4FF 0 34%, var(--ink) 35% 41%, transparent 42%), conic-gradient(#F2453D 0 25%, #fff 0 50%, #F2453D 0 75%, #fff 0); transform: rotate(-12deg); }
.cabin.boat .cabin-screen b { color: #7FC8FF; }
.cabin.boat.quai .cabin-screen b { color: #C6FF3D; } .cabin.boat.arret .cabin-screen b { color: #FF9B5E; }
@media (prefers-reduced-motion: reduce) { .cabin.boat .cabin-windows, .cabin.boat .cabin-windows i { animation: none !important; } }
.cabin.boat .cabin-bar { top: 142px; }
.cabin.boat .cabin-seats { bottom: 6px; } .cabin.boat .seat { height: 26px; }

/* (19/10/2026) plan de la ligne : la même rame que sur la carte, sa flèche de sens de marche, un bouton pour monter à bord */
button.ll-rame { cursor: pointer; font: inherit; color: inherit; padding: 0 5px 0 3px; height: 34px; margin-top: -17px; gap: 3px; }
.ll-fun { position: relative; display: inline-flex; width: 26px; height: 26px; font-style: normal; filter: drop-shadow(1px 1px 0 #0C0A18); }
.ll-fun svg { width: 26px; height: 26px; overflow: visible; }
.ll-dir { position: absolute; left: 50%; margin-left: -7px; width: 0; height: 0; border: 7px solid transparent; filter: drop-shadow(0 0 1.5px #0C0A18); }
.ll-rame.fwd .ll-dir { bottom: -16px; border-top: 10px solid #FFFFFF; border-bottom: 0; }
.ll-rame.back .ll-dir { top: -16px; border-bottom: 10px solid #FFFFFF; border-top: 0; }
.ll-legend .ll-dir { display: none; }
button.ll-rame:active { transform: scale(.94); }
.ll-rame.sample { height: 28px; margin: 0 2px; vertical-align: middle; }
.ll-rame.sample .ll-fun, .ll-rame.sample .ll-fun svg { width: 20px; height: 20px; }
.ll-legend .ll-rame.sample { background: var(--paper); }
/* (19/10/2026) Ton perso : sous un perso à acheter du carrousel, le bouton pour l'acheter */
.av-buybar { display: grid; gap: 6px; justify-items: center; margin: 12px 0 4px; text-align: center; }
.av-buybar[hidden] { display: none; }
.av-buybar .av-buy { width: auto; min-width: 70%; padding: 12px 18px; font-size: 16px; }
.av-buybar small { font-size: 12px; opacity: .7; }

/* (19/10/2026) écran de fin : les cartes postales gagnées, en carrousel */
.gm-over .pc-viewer { position: relative; margin: 2px auto 0; width: min(360px, 86vw, calc((100dvh - 230px) * 1.5)); min-width: 200px; max-width: 100%; }
/* (20/10/2026) le carrousel ne prend jamais la largeur des images (plus de 1 000 px) : il reste à la taille de l'écran ; à la souris, on le fait glisser */
.gm-over .pc-slider { cursor: grab; } .gm-over .pc-slider.drag { cursor: grabbing; scroll-snap-type: none; }
.gm-over .pc-slide, .gm-over .pc-card { min-width: 0; } .gm-over .pc-slide figcaption { max-width: 100%; overflow-wrap: anywhere; }
.gm-over .pc-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 0; }
.gm-over .pc-slider::-webkit-scrollbar { display: none; }
.gm-over .pc-slide { flex: 0 0 100%; scroll-snap-align: center; margin: 0; padding: 6px 10px 2px; display: grid; gap: 6px; justify-items: center; }
.gm-over .pc-card { width: 100%; aspect-ratio: 3 / 2; border: 3px solid #0C0A18; border-radius: 12px; overflow: hidden; background: var(--zc); box-shadow: 4px 4px 0 #0C0A18;
  transform: rotate(-2deg); animation: pc-in .7s cubic-bezier(.2,1.4,.4,1) both; }
.gm-over .pc-slide:nth-child(even) .pc-card { transform: rotate(2deg); }
.gm-over .pc-card canvas { display: block; width: 100%; height: 100%; }
.gm-over .pc-slide figcaption { display: grid; gap: 1px; }
.gm-over .pc-slide figcaption b { font-size: 17px; line-height: 1.15; }
.gm-over .pc-slide figcaption small { font-weight: 800; color: var(--zc); opacity: 1; filter: brightness(.75); text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
.gm-over .pc-nav { position: absolute; top: 34%; width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid #0C0A18; background: #FFFFFF; color: #0C0A18; font: 800 20px/1 var(--display); box-shadow: 2px 2px 0 #0C0A18; cursor: pointer; }
.gm-over .pc-nav.prev { left: -6px; } .gm-over .pc-nav.next { right: -6px; }
.gm-over .pc-dots { display: flex; justify-content: center; gap: 6px; }
.gm-over .pc-dots i { width: 8px; height: 8px; border-radius: 50%; background: #0C0A18; opacity: .25; transition: opacity .2s, transform .2s; }
.gm-over .pc-dots i.on { opacity: 1; transform: scale(1.25); }
.gm-over .pc-bonus { font-weight: 800; opacity: 1 !important; color: #2F9A63; }
@keyframes pc-in { from { transform: translateY(40px) rotate(-14deg) scale(.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gm-over .pc-card { animation: none; } }
.gm-over.splash .pc-dots i { background: #FFFFFF; }

/* (19/10/2026) « Sur la carte » : le repère de l'élément montré */
.focus-pin-m { z-index: 6; }
.focus-pin { position: relative; display: grid; justify-items: center; gap: 4px; cursor: pointer; animation: fp-drop .5s cubic-bezier(.2,1.4,.4,1); }
.focus-pin .fp-label { padding: 4px 10px; border-radius: 999px; background: var(--lime, #C6FF3D); color: #0C0A18; border: 2.5px solid #0C0A18; box-shadow: 2px 2px 0 #0C0A18; font: 800 13px var(--display); white-space: nowrap; }
.focus-pin .fp-dot { position: relative; z-index: 1; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #FFFFFF; border: 3px solid #0C0A18; box-shadow: 2px 2px 0 #0C0A18; }
.focus-pin .fp-dot svg { width: 30px; height: 30px; transform: rotate(45deg); }
.focus-pin .fp-ring { position: absolute; bottom: -8px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; border: 3px solid var(--lime, #C6FF3D); animation: fp-ring 1.6s ease-out infinite; }
@keyframes fp-drop { from { transform: translateY(-40px); opacity: 0; } }
@keyframes fp-ring { from { transform: scale(.5); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .focus-pin, .focus-pin .fp-ring { animation: none; } }

/* (20/10/2026) classement de fin de partie : le jour du record sous le surnom */
.gm-b .gm-day { display: block; font: 600 11px var(--body); opacity: .6; }

/* (20/10/2026) la course du jour : carte d'accès, page, cartes d'or, couronne */
.hub-daily { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 14px; border-radius: 18px; background: linear-gradient(135deg, #FFE98A, #FFC83D); color: #0C0A18; border: 2.5px solid #0C0A18; box-shadow: 3px 3px 0 #0C0A18; text-decoration: none; }
.hub-daily b { display: block; font: 800 18px var(--display); } .hub-daily small { display: block; font-size: 13px; opacity: .8; } .hub-daily > i { font-style: normal; font-size: 26px; font-weight: 800; }
.hd-ico .crown { width: 40px; height: 30px; }
.crown { width: 18px; height: 14px; vertical-align: -1px; }
.dl-day { font-size: 15px; opacity: .6; font-weight: 700; }
.dl-score { margin: 4px 0 2px; font-size: 14px; } .dl-score b { font: 800 18px var(--display); } .dl-place { display: block; margin: 0 0 10px; font-size: 13px; opacity: .7; }
.dl-go { margin: 6px 0 14px; }
.pc.gold .pc-img { display: block; padding: 6px; border-radius: 14px; background: linear-gradient(135deg, #FFF3B0, #E8B021 45%, #FFE27A 60%, #B8860B); box-shadow: 0 0 0 2.5px #0C0A18, 0 0 18px rgba(255,200,40,.55); }
.pc.gold .pc-img canvas { display: block; width: 100%; height: auto; border-radius: 9px; }
.pc.gold figcaption b { display: block; color: #E8B021; } .pc.gold figcaption small { font-size: 12px; opacity: .75; }
.dl-gold { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.go-duel.dl { color: #FFD23F; }
/* les 3 pouvoirs du jour, présentés comme dans l'atelier */
.dl-pw { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.dl-pw li { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; background: #F3F0FF; color: #0C0A18; border: 2px solid #0C0A18; }

/* (20/10/2026) la carte d'or du gagnant de la course du jour, révélée à l'ouverture de l'app */
.gold-rv { position: fixed; inset: 0; z-index: 105; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 40%, #3A2A6E, #0C0A18 70%); color: #FFFFFF; animation: grvIn .35s ease-out; overflow: hidden; }
.gold-rv.out { animation: grvOut .3s ease-in forwards; }
@keyframes grvIn { from { opacity: 0; } } @keyframes grvOut { to { opacity: 0; transform: scale(1.04); } }
.grv-rays { position: absolute; left: 50%; top: 42%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; background: repeating-conic-gradient(rgba(255,210,63,.16) 0 9deg, transparent 9deg 18deg); animation: grvSpin 18s linear infinite; }
@keyframes grvSpin { to { transform: rotate(360deg); } }
.grv-box { position: relative; display: grid; justify-items: center; gap: 8px; width: min(360px, 100%); text-align: center; }
.grv-crown .crown { width: 74px; height: 56px; filter: drop-shadow(0 0 14px rgba(255,210,63,.8)); animation: grvDrop .9s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes grvDrop { from { transform: translateY(-60vh) rotate(-30deg); } }
.grv-t { font: 800 26px var(--display); color: #FFD23F; animation: grvPop .5s .5s both; } .grv-s { opacity: .8; animation: grvPop .5s .6s both; }
@keyframes grvPop { from { opacity: 0; transform: scale(.6); } }
.grv-card { width: 230px; perspective: 900px; margin: 6px 0; }
.grv-in { position: relative; transform-style: preserve-3d; animation: grvFlip 1s 1s cubic-bezier(.4,1.4,.5,1) both; }
@keyframes grvFlip { from { transform: rotateY(180deg) scale(.8); } to { transform: rotateY(0) scale(1); } }
.grv-front, .grv-back { backface-visibility: hidden; }
.grv-back { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 16px; transform: rotateY(180deg); background: linear-gradient(135deg, #FFF3B0, #E8B021 45%, #FFE27A 60%, #B8860B); box-shadow: 0 0 0 2.5px #0C0A18; }
.grv-back .crown { width: 90px; height: 68px; }
.grv-front .dl-gold { grid-template-columns: 1fr; } .grv-front figcaption { color: #FFFFFF; }
.grv-p { font-size: 14px; line-height: 1.45; opacity: .92; animation: grvPop .5s 1.8s both; }
.grv-acts { display: flex; gap: 10px; animation: grvPop .5s 2s both; }
.grv-conf { position: fixed; z-index: 1; } .grv-conf i { --w: 1.2s; }
@media (prefers-reduced-motion: reduce) { .gold-rv *, .gold-rv { animation: none !important; } }
.dl-share { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 8px; font-size: 13px; line-height: 1.4; opacity: .9; } .dl-share input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: #C6FF3D; }