/* À l'abordage : style arcade. Rouge, gris, noir, bleu nuit. */

:root {
  --bg: #0a0e1c;
  --bg2: #10162e;
  --panel: rgba(14, 19, 40, 0.92);
  --panel2: #161d3b;
  --ligne: #27305a;
  --rouge: #e8283b;
  --rouge2: #ff4d5e;
  --rouge-sombre: #8f1222;
  --bleu: #1b2a5c;
  --gris: #8a93b0;
  --texte: #eef1fa;
  --or: #ffcf33;
  --vert: #3ddc84;
  --accent: #e8283b;
  --accent2: #ff4d5e;
  --tab-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --display: 'Bungee', 'Rubik', system-ui, sans-serif;
  --corps: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--texte); font-family: var(--corps); font-size: 15px; overscroll-behavior: none; }
body { overflow: hidden; }
#app { height: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { opacity: 0.55; cursor: default; }
a { color: inherit; }
.hidden { display: none !important; }
.muted { color: var(--gris); }
.center { text-align: center; }
.row { display: flex; align-items: flex-end; }
.gap { gap: 10px; }
.grow { flex: 1; }
.w80 { width: 80px; flex: none; }
small { font-size: 0.78em; }
.note { font-size: 0.8rem; color: var(--gris); line-height: 1.4; }

/* ---------- titres arcade ---------- */
.logo {
  font-family: var(--display); font-size: clamp(2.4rem, 12vw, 4rem); margin: 0; letter-spacing: 0.02em;
  color: #fff; position: relative; transform: skewX(-8deg);
  text-shadow: 0 1px 0 #ffb3bb, 0 2px 0 var(--rouge), 0 3px 0 var(--rouge), 0 4px 0 var(--rouge-sombre), 0 5px 0 var(--rouge-sombre), 0 6px 0 #4a0710, 0 10px 18px rgba(232, 40, 59, 0.55);
}
.titre-arcade { font-family: var(--display); font-weight: 400; letter-spacing: 0.02em; color: #fff; text-shadow: 0 2px 0 var(--rouge), 0 4px 0 var(--rouge-sombre), 0 0 18px rgba(232, 40, 59, 0.45); transform: skewX(-6deg); }
.sur-titre { margin: 0; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent2); font-weight: 700; }

.spin { width: 22px; height: 22px; border: 3px solid rgba(255, 255, 255, 0.15); border-top-color: var(--rouge); border-radius: 50%; display: inline-block; animation: tourne 0.8s linear infinite; vertical-align: middle; }
@keyframes tourne { to { transform: rotate(360deg); } }
.ecran-charge, .charge-page { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.charge-page { height: 160px; }

/* ---------- boutons (arcade : relief + enfoncement) ---------- */
.btn {
  border: 0; border-radius: 12px; padding: 12px 16px; font-weight: 800; letter-spacing: 0.03em; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s; text-decoration: none; user-select: none;
}
.btn:active:not(:disabled) { transform: translateY(3px); }
.btn-red { background: linear-gradient(180deg, var(--rouge2), var(--rouge)); color: #fff; box-shadow: 0 4px 0 var(--rouge-sombre), 0 8px 18px rgba(232, 40, 59, 0.35); }
.btn-red:active:not(:disabled) { box-shadow: 0 1px 0 var(--rouge-sombre), 0 3px 8px rgba(232, 40, 59, 0.3); }
.btn-ghost { background: rgba(255, 255, 255, 0.06); color: var(--texte); border: 1px solid var(--ligne); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4); }
.btn-danger { background: linear-gradient(180deg, #4a1220, #2c0a13); color: #ff8a96; border: 1px solid #6a1a2a; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5); }
.btn-big { width: 100%; padding: 16px; font-size: 1.05rem; font-family: var(--display); font-weight: 400; letter-spacing: 0.04em; margin-top: 14px; }
.btn-sm { padding: 6px 10px; font-size: 0.8rem; border-radius: 9px; }
.lien-danger { color: #ff7a88 !important; background: none !important; border: 0 !important; box-shadow: none !important; font-weight: 500; margin-top: 8px; }

/* ---------- formulaires ---------- */
label { display: block; font-size: 0.8rem; color: var(--gris); font-weight: 500; margin: 10px 0 0; }
input, textarea, select {
  display: block; width: 100%; margin-top: 5px; padding: 12px 13px; border-radius: 11px; border: 1px solid var(--ligne); background: #0b1024; color: var(--texte);
  font: inherit; font-size: 16px; outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
input[type='date'], input[type='datetime-local'] { color-scheme: dark; }
.label { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); margin: 16px 0 8px; font-weight: 700; }

.seg { display: flex; background: #0b1024; border: 1px solid var(--ligne); border-radius: 12px; padding: 4px; gap: 4px; }
.seg button { flex: 1; border: 0; background: none; padding: 9px; border-radius: 9px; font-weight: 700; color: var(--gris); }
.seg button.on { background: var(--panel2); color: #fff; box-shadow: inset 0 -2px 0 var(--accent); }
.seg-sm button { padding: 6px; font-size: 0.82rem; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.chips button { border: 1px solid var(--ligne); background: rgba(255, 255, 255, 0.04); border-radius: 99px; padding: 7px 12px; font-size: 0.82rem; font-weight: 600; }
.chips button.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- écran de connexion (synthwave) ---------- */
.auth { position: relative; min-height: 100%; height: 100%; overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: 24px 16px calc(24px + var(--safe-b)); }
.synth { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #1d1640 0%, #0a0e1c 60%); z-index: 0; }
.synth-sun { position: absolute; left: 50%; top: 34%; width: 260px; height: 260px; transform: translate(-50%, -50%); border-radius: 50%; background: linear-gradient(180deg, #ffcf33 0%, #ff4d5e 55%, #8f1222 100%); filter: drop-shadow(0 0 40px rgba(255, 77, 94, 0.6));
  opacity: 0.85; }
.synth-sun::after { content: ''; position: absolute; inset: 55% 0 0; background: repeating-linear-gradient(180deg, transparent 0 9px, #0a0e1c 9px 13px); }
.synth-grid { position: absolute; left: -50%; right: -50%; bottom: -10%; height: 55%; transform: perspective(300px) rotateX(62deg); transform-origin: bottom;
  background-image: linear-gradient(rgba(232, 40, 59, 0.75) 2px, transparent 2px), linear-gradient(90deg, rgba(232, 40, 59, 0.75) 2px, transparent 2px); background-size: 48px 48px; animation: grille 1.2s linear infinite;
  -webkit-mask-image: linear-gradient(to top, #000 30%, transparent); mask-image: linear-gradient(to top, #000 30%, transparent); }
@keyframes grille { to { background-position: 0 48px; } }
.auth-box { position: relative; z-index: 1; width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--ligne); border-radius: 22px; padding: 26px 20px 22px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06); margin-top: 18vh; }
.auth-box .logo { text-align: center; font-size: 2.6rem; }
.tagline { text-align: center; color: var(--gris); margin: 10px 0 18px; }
.tagline span { display: block; font-family: var(--display); color: var(--or); font-size: 0.8rem; margin-top: 4px; animation: clignote 1.2s steps(2) infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.auth-form { margin-top: 6px; }
.pick-mini { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; }
.pick-mini img { width: 64px; height: 64px; border-radius: 16px; background: linear-gradient(#2a3150, #141a30); border: 2px solid var(--rouge); }

/* ---------- modales ---------- */
#modals { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.modal-back { position: absolute; inset: 0; background: rgba(3, 5, 12, 0.7); display: flex; align-items: flex-end; justify-content: center; pointer-events: auto; opacity: 0; transition: opacity 0.2s; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.modal-back.show { opacity: 1; }
.modal { position: relative; width: 100%; max-width: 460px; max-height: 88vh; overflow-y: auto; background: linear-gradient(180deg, #161d3b, #0e1328); border: 1px solid var(--ligne); border-bottom: 0; border-radius: 22px 22px 0 0;
  padding: 22px 18px calc(22px + var(--safe-b)); transform: translateY(40px); transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2); box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.5); }
.modal-back.show .modal { transform: none; }
.modal p { white-space: pre-line; line-height: 1.45; }
@media (min-width: 600px) { .modal-back { align-items: center; } .modal { border-radius: 22px; border-bottom: 1px solid var(--ligne); } }
.modal-x { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.07); color: var(--gris); font-size: 0.9rem; }
.modal-title { margin: 0 40px 10px 0; font-size: 1.3rem; }
.modal .row { margin-top: 14px; }
.modal .row .btn { flex: 1; }
.big-num { font-family: var(--display); font-size: 3rem; text-align: center; margin: 10px 0; color: var(--accent); text-shadow: 0 0 20px var(--accent); }

/* sélecteur d'avatar */
.av-stage { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.av-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ligne); background: rgba(255, 255, 255, 0.05); font-size: 1.8rem; line-height: 1; }
.av-hero { position: relative; width: 210px; height: 230px; display: flex; align-items: flex-end; justify-content: center; }
.av-hero img { width: 200px; height: 200px; margin-bottom: 16px; position: relative; z-index: 1; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.5)); }
.av-hero img.pop { animation: pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.4); }
@keyframes pop { from { transform: scale(0.8) translateY(10px); opacity: 0.3; } }
.av-socle { position: absolute; bottom: 0; width: 170px; height: 34px; border-radius: 50%; border: 3px solid var(--rouge); background: radial-gradient(ellipse, rgba(232, 40, 59, 0.5), transparent 70%); box-shadow: 0 0 24px var(--rouge), inset 0 0 14px var(--rouge); }
.av-nom { text-align: center; font-family: var(--display); color: var(--or); margin: 12px 0 8px; }
.av-thumbs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.av-thumbs button { width: 58px; height: 58px; padding: 0; border-radius: 14px; border: 2px solid transparent; background: linear-gradient(#2a3150, #141a30); overflow: hidden; }
.av-thumbs button.on { border-color: var(--rouge); background: linear-gradient(var(--rouge2), var(--rouge-sombre)); box-shadow: 0 0 14px rgba(232, 40, 59, 0.6); }
.av-thumbs img { width: 100%; height: 100%; }

/* ---------- toasts ---------- */
#toasts { position: fixed; top: calc(8px + var(--safe-t)); left: 0; right: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 12px; }
.toast { max-width: 440px; width: 100%; padding: 12px 16px; border-radius: 14px; background: #1a2245; border: 1px solid var(--ligne); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); font-weight: 500; transform: translateY(-20px); opacity: 0; transition: all 0.3s; }
.toast.show { transform: none; opacity: 1; }
.toast-success { border-color: #2f8f5c; background: linear-gradient(90deg, #12301f, #1a2245); }
.toast-error { border-color: var(--rouge); background: linear-gradient(90deg, #3a0d16, #1a2245); }
.toast-gold { border-color: var(--or); background: linear-gradient(90deg, #3a2c05, #1a2245); color: #ffe9a0; font-weight: 700; }
.toast-event { border-color: #5aa0ff; background: linear-gradient(90deg, #0d2347, #1a2245); }

/* ---------- jeu : carte plein écran ---------- */
.jeu { position: fixed; inset: 0; }
#map { position: absolute; inset: 0; background: var(--bg); }
#map.placement canvas { cursor: crosshair; }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(5, 7, 16, 0.65) 100%); }
.maplibregl-ctrl-attrib { background: rgba(10, 14, 28, 0.6) !important; color: var(--gris) !important; font-size: 10px; }
.maplibregl-ctrl-attrib a { color: var(--gris) !important; }
.maplibregl-ctrl-bottom-right { bottom: calc(var(--tab-h) + var(--safe-b) + 2px); }
.maplibregl-ctrl-attrib-button { filter: invert(1); }

.hud { position: absolute; top: 0; left: 0; right: 0; padding: calc(10px + var(--safe-t)) 10px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; pointer-events: none; z-index: 5; }
.hud > * { pointer-events: auto; }
.hud-moi { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--ligne); border-radius: 16px; padding: 5px 10px 5px 5px; text-align: left; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); max-width: 62vw; }
.hud-av { width: 44px; height: 44px; border-radius: 12px; overflow: hidden; background: linear-gradient(#2a3150, #141a30); border: 2px solid var(--accent); flex: none; }
.hud-av img { width: 100%; height: 100%; }
.hud-info { display: flex; flex-direction: column; min-width: 0; }
.hud-pseudo { font-weight: 800; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-rang { font-size: 0.7rem; color: var(--gris); }
.xp { display: block; height: 6px; width: 96px; background: #0b1024; border-radius: 6px; overflow: hidden; margin-top: 4px; border: 1px solid #222a50; }
.xp i { display: block; height: 100%; background: linear-gradient(90deg, var(--or), #ff8a3d); box-shadow: 0 0 8px var(--or); border-radius: 6px; transition: width 0.6s; }
.xp.grand { width: 100%; height: 10px; margin: 8px 0 4px; }
.hud-lvl { font-family: var(--display); font-size: 0.72rem; color: var(--or); background: #2a2208; border: 1px solid #6b5410; padding: 4px 6px; border-radius: 8px; white-space: nowrap; }
.hud-droite { display: flex; gap: 8px; align-items: center; }
.hud-pts { background: var(--panel); border: 1px solid var(--ligne); border-radius: 12px; padding: 9px 10px; font-size: 0.72rem; color: var(--gris); font-weight: 700; white-space: nowrap; }
.hud-pts b { font-family: var(--display); color: #fff; font-size: 0.95rem; font-weight: 400; }
.hud-bell { position: relative; width: 44px; height: 44px; border-radius: 13px; border: 1px solid var(--ligne); background: var(--panel); display: grid; place-items: center; }
.hud-bell svg { width: 22px; fill: var(--texte); }
.badge { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--rouge); color: #fff; font-size: 0.7rem; font-weight: 800; display: grid; place-items: center; padding: 0 5px; box-shadow: 0 0 10px var(--rouge); }

.live-pill { position: absolute; left: 50%; transform: translateX(-50%); top: calc(70px + var(--safe-t)); z-index: 4; background: var(--panel); border: 1px solid var(--ligne); border-radius: 99px; padding: 6px 12px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 8px var(--vert); margin-right: 6px; animation: pulse 1.6s infinite; vertical-align: middle; }
@keyframes pulse { 50% { opacity: 0.4; } }

.outils { position: absolute; right: 10px; top: calc(112px + var(--safe-t)); display: flex; flex-direction: column; gap: 8px; z-index: 4; }
.outil { width: 58px; padding: 8px 0 6px; border-radius: 14px; border: 1px solid var(--ligne); background: var(--panel); display: flex; flex-direction: column; align-items: center; gap: 3px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45); transition: transform 0.08s; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.outil:active { transform: translateY(3px); box-shadow: none; }
.outil svg { width: 22px; height: 22px; fill: var(--texte); }
.outil span { font-size: 0.62rem; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: 0.04em; }
.outil.actif { background: linear-gradient(180deg, var(--rouge2), var(--rouge)); border-color: var(--rouge2); box-shadow: 0 4px 0 var(--rouge-sombre), 0 0 18px rgba(232, 40, 59, 0.7); }
.outil.actif svg { fill: #fff; }
.outil.actif span { color: #fff; }
#b-session.actif svg { animation: pulse 1.2s infinite; }
.outil.charge svg { animation: tourne 1s linear infinite; }

.actions-bas { position: absolute; left: 0; right: 0; bottom: calc(var(--tab-h) + var(--safe-b) + 12px); display: flex; justify-content: center; align-items: center; gap: 10px; z-index: 4; padding: 0 12px; pointer-events: none; }
.actions-bas > * { pointer-events: auto; }
.btn-numero { font-family: var(--display); font-weight: 400; font-size: 1.15rem; padding: 15px 26px; border-radius: 18px; letter-spacing: 0.04em; box-shadow: 0 6px 0 var(--rouge-sombre), 0 0 30px rgba(232, 40, 59, 0.55); }
.btn-numero span { font-size: 1.5rem; line-height: 0; }
.btn-numero:active { box-shadow: 0 2px 0 var(--rouge-sombre), 0 0 20px rgba(232, 40, 59, 0.5); transform: translateY(4px); }
.en-zone .actions-bas, .en-heat .actions-bas { display: none; }
.en-zone .outils, .en-zone .live-pill { display: none; }

.place-banner { position: absolute; left: 12px; right: 12px; top: calc(70px + var(--safe-t)); z-index: 6; background: linear-gradient(90deg, #0d2347, #1a2245); border: 1px solid #5aa0ff; border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; animation: pulse 2s infinite; }

.tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--tab-h) + var(--safe-b)); padding-bottom: var(--safe-b); display: flex; background: linear-gradient(180deg, rgba(14, 19, 40, 0.96), #070a16); border-top: 1px solid var(--ligne); z-index: 20; }
.tabbar button { flex: 1; border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--gris); position: relative; }
.tabbar svg { width: 24px; height: 24px; fill: currentColor; transition: transform 0.2s; }
.tabbar span { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; }
.tabbar button.on { color: #fff; }
.tabbar button.on svg { transform: translateY(-2px) scale(1.1); fill: var(--rouge); filter: drop-shadow(0 0 6px var(--rouge)); }
.tabbar button.on::before { content: ''; position: absolute; top: -1px; left: 25%; right: 25%; height: 3px; border-radius: 0 0 3px 3px; background: var(--rouge); box-shadow: 0 0 10px var(--rouge); }

/* ---------- marqueurs sur la carte ---------- */
.pin-joueur { display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.pin-av { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; border: 3px solid #5aa0ff; background: linear-gradient(#2a3150, #141a30); box-shadow: 0 0 0 3px rgba(90, 160, 255, 0.25), 0 6px 14px rgba(0, 0, 0, 0.6); }
.pin-av img { width: 100%; height: 100%; }
.pin-joueur.moi .pin-av { border-color: var(--rouge); box-shadow: 0 0 0 3px rgba(232, 40, 59, 0.3), 0 0 18px rgba(232, 40, 59, 0.6); }
.pin-nom { margin-top: 3px; background: rgba(10, 14, 28, 0.85); border: 1px solid var(--ligne); padding: 2px 7px; border-radius: 8px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.pin-nom b { color: var(--or); }
.pin-moi { width: 18px; height: 18px; border-radius: 50%; background: #3aa0ff; border: 3px solid #fff; box-shadow: 0 0 0 8px rgba(58, 160, 255, 0.25), 0 0 14px #3aa0ff; }
.pin-event { position: relative; border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; }
.pin-event-ico { width: 38px; height: 38px; border-radius: 12px 12px 12px 2px; transform: rotate(-45deg); background: linear-gradient(135deg, var(--or), #ff8a3d); display: grid; place-items: center; font-size: 1.1rem; color: #3a2000; box-shadow: 0 0 16px rgba(255, 207, 51, 0.7); }
.pin-event-ico { line-height: 1; }
.pin-event-txt { margin-top: 6px; background: rgba(10, 14, 28, 0.9); border: 1px solid #6b5410; color: var(--or); padding: 2px 8px; border-radius: 8px; font-size: 0.72rem; font-weight: 700; max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pin-event-ring { position: absolute; top: 0; left: 50%; width: 38px; height: 38px; margin-left: -19px; border-radius: 50%; border: 2px solid var(--or); animation: onde 1.8s infinite; }
@keyframes onde { from { transform: scale(0.8); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }

/* ---------- panneau de zone (sous-map) ---------- */
.sheet {
  --za: var(--accent); --zb: var(--accent2);
  position: absolute; left: 0; right: 0; bottom: calc(var(--tab-h) + var(--safe-b)); max-height: 50vh; overflow-y: auto; z-index: 10;
  background: linear-gradient(180deg, color-mix(in srgb, var(--za) 14%, #0e1328), #0b1024 160px); border-top: 2px solid var(--za); border-radius: 22px 22px 0 0;
  padding: 6px 16px 20px; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6), 0 -2px 24px color-mix(in srgb, var(--za) 45%, transparent); animation: monte 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.1); transition: max-height 0.3s;
}
.sheet.reduit { max-height: 150px; overflow: hidden; }
@keyframes monte { from { transform: translateY(100%); } }
.sheet-poignee { display: block; margin: 4px auto 6px; width: 54px; height: 6px; border-radius: 3px; border: 0; background: rgba(255, 255, 255, 0.25); padding: 0; }
.zone-tete { display: flex; justify-content: space-between; align-items: center; }
.zone-diff { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; display: flex; align-items: center; gap: 6px; }
.diff-facile { color: #3ddc84; } .diff-moyen { color: #ffcf33; } .diff-difficile { color: #ff4d5e; }
.stars { display: inline-flex; gap: 3px; }
.stars i { width: 12px; height: 12px; background: rgba(255, 255, 255, 0.15); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.stars i.on { background: currentColor; filter: drop-shadow(0 0 4px currentColor); }
.zone-nom { font-family: var(--display); font-weight: 400; font-size: 1.7rem; margin: 10px 0 0; color: #fff; text-shadow: 0 2px 0 var(--za), 0 0 22px var(--za); transform: skewX(-6deg); }
.zone-surnom { margin: 2px 0 10px; color: var(--zb); font-weight: 700; font-size: 0.9rem; }
.zone-prog { display: flex; align-items: center; gap: 10px; }
.zone-prog b { font-family: var(--display); font-weight: 400; color: var(--za); }
.barre { flex: 1; height: 10px; border-radius: 6px; background: #0b1024; border: 1px solid #222a50; overflow: hidden; }
.barre i { display: block; height: 100%; background: linear-gradient(90deg, var(--za, var(--accent)), var(--zb, var(--accent2))); box-shadow: 0 0 10px var(--za, var(--accent)); transition: width 0.5s; }
.tampon { display: inline-block; margin: 14px 0 0; padding: 6px 14px; border: 3px solid var(--or); color: var(--or); font-family: var(--display); font-size: 1.1rem; border-radius: 8px; transform: rotate(-6deg); box-shadow: 0 0 18px rgba(255, 207, 51, 0.5), inset 0 0 12px rgba(255, 207, 51, 0.3); animation: tampon 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.6); }
.tampon.petit { position: absolute; right: 8px; bottom: 8px; font-size: 0.65rem; padding: 3px 7px; border-width: 2px; margin: 0; }
@keyframes tampon { from { transform: scale(2.4) rotate(-6deg); opacity: 0; } }
.lore { margin: 14px 0 4px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 12px; }
.lore summary { font-weight: 700; color: var(--zb); cursor: pointer; }
.lore p { margin: 8px 0 0; line-height: 1.5; color: #c9cfe6; font-style: italic; }
.sous-titre { font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris); margin: 20px 0 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.sous-titre small { letter-spacing: 0; text-transform: none; font-weight: 500; color: #6b7699; }
.defis { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.defi { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ligne); }
.defi div { flex: 1; }
.defi b { display: block; }
.defi p { margin: 3px 0 0; font-size: 0.85rem; color: var(--gris); line-height: 1.35; }
.defi-btn { flex: none; width: 58px; height: 46px; border-radius: 12px; border: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--za) 80%, #fff), var(--za)); color: #0a0e1c; font-family: var(--display); font-size: 0.85rem; box-shadow: 0 4px 0 color-mix(in srgb, var(--za) 50%, #000); }
.defi-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--za) 50%, #000); }
.defi.fait { border-color: color-mix(in srgb, var(--za) 50%, transparent); background: color-mix(in srgb, var(--za) 10%, transparent); }
.defi.fait b { text-decoration: line-through; text-decoration-color: var(--za); }
.defi.fait .defi-btn { background: #0b1024; color: var(--za); border: 2px solid var(--za); box-shadow: none; font-size: 1.2rem; }
.vainqueurs { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-joueur { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--ligne); border-radius: 99px; padding: 3px 10px 3px 3px; font-weight: 600; font-size: 0.85rem; }
.chip-joueur img { width: 26px; height: 26px; border-radius: 50%; background: #1b2240; }

/* ---------- heatmap ---------- */
.heat-panel { position: absolute; left: 10px; right: 10px; bottom: calc(var(--tab-h) + var(--safe-b) + 10px); z-index: 5; background: var(--panel); border: 1px solid var(--ligne); border-radius: 18px; padding: 12px; max-height: 40vh; overflow-y: auto; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.heat-tete { display: flex; justify-content: space-between; align-items: center; font-family: var(--display); font-size: 0.8rem; color: #ff8a3d; }
.heat-panel .chips { margin: 8px 0; }
.heat-panel .chips button { padding: 5px 9px; font-size: 0.75rem; }
.heat-top { margin-top: 10px; }
.classement-zones { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.classement-zones li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; cursor: pointer; }
.cz-nom { font-weight: 700; font-size: 0.85rem; }
.cz-barre { grid-column: 1; height: 7px; background: #0b1024; border-radius: 4px; overflow: hidden; }
.cz-barre i { display: block; height: 100%; border-radius: 4px; }
.classement-zones b { grid-row: 1 / span 2; grid-column: 2; font-family: var(--display); font-weight: 400; align-self: center; font-size: 1.1rem; }
.classement-zones small { grid-column: 1; color: var(--gris); }

/* ---------- pages plein écran ---------- */
.page { position: absolute; left: 0; right: 0; top: 0; bottom: calc(var(--tab-h) + var(--safe-b)); z-index: 15; overflow-y: auto; padding: calc(18px + var(--safe-t)) 16px 30px;
  background: radial-gradient(ellipse at 50% -10%, #241a4a 0%, transparent 55%), linear-gradient(rgba(39, 48, 90, 0.25) 1px, transparent 1px) 0 0 / 100% 32px, var(--bg); animation: fondu 0.25s; -webkit-overflow-scrolling: touch; }
@keyframes fondu { from { opacity: 0; transform: translateY(8px); } }
.page > * { max-width: 620px; margin-left: auto; margin-right: auto; }
.page-tete { margin-bottom: 14px; }
.page-tete h2 { font-size: 1.8rem; margin: 6px 0 6px; }
.bloc { background: rgba(14, 19, 40, 0.8); border: 1px solid var(--ligne); border-radius: 18px; padding: 4px 14px 14px; margin-top: 14px; }
.bloc .row input { margin: 0; }
.bloc .row .btn { flex: none; padding: 12px 14px; }
.reglages { display: flex; flex-direction: column; gap: 8px; }
.reglages .btn { justify-content: flex-start; }

/* sélection des maps */
.grille-zones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; perspective: 900px; }
.carte-zone { position: relative; text-align: left; border: 1px solid color-mix(in srgb, var(--za) 50%, transparent); border-radius: 18px; padding: 14px 12px 12px; min-height: 168px; display: flex; flex-direction: column; overflow: hidden;
  background: radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--za) 35%, transparent), transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--zc) 90%, #fff 4%), #0a0e1c);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.5), 0 0 22px color-mix(in srgb, var(--za) 20%, transparent); transform: rotateX(6deg); transition: transform 0.2s; }
.carte-zone::after { content: ''; position: absolute; inset: auto -20% -40% -20%; height: 70%; background: linear-gradient(color-mix(in srgb, var(--za) 50%, transparent) 1px, transparent 1px) 0 0 / 100% 12px, linear-gradient(90deg, color-mix(in srgb, var(--za) 50%, transparent) 1px, transparent 1px) 0 0 / 12px 100%; transform: perspective(200px) rotateX(60deg); opacity: 0.35; pointer-events: none; }
.carte-zone:active { transform: rotateX(0) scale(0.97); }
.cz-diff { display: flex; align-items: center; gap: 6px; color: var(--za); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; }
.cz-titre { font-family: var(--display); font-size: 1.05rem; margin-top: 10px; color: #fff; text-shadow: 0 2px 0 color-mix(in srgb, var(--za) 70%, #000); line-height: 1.15; }
.cz-sous { font-size: 0.75rem; color: var(--zb); font-weight: 700; margin-top: 4px; }
.cz-bas { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; position: relative; z-index: 1; }
.cz-bas b { font-size: 0.8rem; }
.cz-pts { font-size: 0.7rem; color: var(--gris); margin-top: 4px; position: relative; z-index: 1; }
.carte-zone.complete { border-color: var(--or); box-shadow: 0 6px 0 rgba(0, 0, 0, 0.5), 0 0 22px rgba(255, 207, 51, 0.35); }

/* podium */
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin: 34px 0 10px; perspective: 600px; }
.pod { flex: 1; max-width: 120px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pod-av { position: relative; width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(#2a3150, #141a30); border: 3px solid #9aa3c2; overflow: visible; }
.pod-av img { width: 100%; height: 100%; border-radius: 50%; }
.pod-1 .pod-av { width: 78px; height: 78px; border-color: var(--or); box-shadow: 0 0 20px rgba(255, 207, 51, 0.6); }
.pod-3 .pod-av { border-color: #cd7f32; }
.couronne { position: absolute; top: -26px; left: 50%; transform: translateX(-50%) rotate(-8deg); color: var(--or); font-size: 1.6rem; text-shadow: 0 0 10px var(--or); }
.pod-nom { margin-top: 6px; font-size: 0.85rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-score { font-size: 0.75rem; color: var(--gris); margin-bottom: 6px; }
.pod-bloc { width: 100%; border-radius: 10px 10px 0 0; display: grid; place-items: center; font-family: var(--display); font-size: 1.8rem; color: rgba(255, 255, 255, 0.9); transform: rotateX(18deg); transform-origin: bottom;
  background: linear-gradient(180deg, #3a4470, #1b2240); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.18), 0 10px 0 #0c1126; }
.pod-1 .pod-bloc { height: 110px; background: linear-gradient(180deg, var(--rouge2), var(--rouge-sombre)); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.3), 0 10px 0 #4a0710, 0 0 30px rgba(232, 40, 59, 0.4); }
.pod-2 .pod-bloc { height: 80px; }
.pod-3 .pod-bloc { height: 58px; }
.pod.vide { opacity: 0.4; }

/* listes */
.liste { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.liste li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); }
.liste li > span:not(.rang) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.liste li.moi { background: rgba(232, 40, 59, 0.12); border: 1px solid rgba(232, 40, 59, 0.4); }
.liste b { font-size: 0.85rem; white-space: nowrap; }
.rang { font-family: var(--display); color: var(--gris); width: 22px; text-align: center; }
.mini-av { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(#2a3150, #141a30); flex: none; }

/* stats */
.stats4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.stats4 > div { background: rgba(14, 19, 40, 0.85); border: 1px solid var(--ligne); border-radius: 14px; padding: 10px 4px; text-align: center; }
.stats4 b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.3rem; color: #fff; }
.stats4 span { font-size: 0.66rem; color: var(--gris); }

/* journal */
.journal { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-direction: column; gap: 8px; }
.journal li { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: rgba(14, 19, 40, 0.85); border: 1px solid var(--ligne); cursor: pointer; }
.journal li.num { border-left: 3px solid var(--rouge); }
.j-ico { font-size: 1.4rem; width: 32px; text-align: center; }
.j-txt { flex: 1; min-width: 0; }
.j-txt b { display: block; }
.j-txt small { color: var(--gris); }
.j-txt i { font-style: normal; font-weight: 700; }
.tag { font-size: 0.7rem; font-weight: 700; padding: 4px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); color: var(--gris); white-space: nowrap; }
.tag-ok { background: rgba(61, 220, 132, 0.15); color: var(--vert); }
.tag-non { background: rgba(232, 40, 59, 0.12); color: #ff8a96; }
.tag-live { font-size: 0.7rem; font-weight: 800; color: #fff; background: var(--rouge); padding: 2px 6px; border-radius: 6px; margin-left: 6px; }
.vide-msg { padding: 30px 0; line-height: 1.6; }

/* fenêtres de saisie */
.pos-info { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 12px; font-size: 0.9rem; line-height: 1.4; }
.pos-info .spin { width: 16px; height: 16px; border-width: 2px; margin-right: 6px; }
.choix2, .choix3 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choix3 { grid-template-columns: repeat(3, 1fr); }
.choix2 button, .choix3 button { border: 2px solid var(--ligne); background: rgba(255, 255, 255, 0.04); border-radius: 14px; padding: 14px 8px; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 1.4rem; }
.choix2 button { font-size: 0.95rem; }
.choix3 b { font-size: 0.78rem; }
.choix2 button.on, .choix3 button.on { border-color: var(--rouge); background: rgba(232, 40, 59, 0.14); box-shadow: 0 0 16px rgba(232, 40, 59, 0.35); }
.drapeau.fr { width: 34px; height: 24px; border-radius: 4px; background: linear-gradient(90deg, #1f4fbf 33%, #fff 33% 66%, var(--rouge) 66%); }
.globe { font-size: 1.5rem; line-height: 24px; }
.prive { margin-top: 16px; padding: 4px 12px 12px; border-radius: 14px; border: 1px dashed #3a4470; background: rgba(0, 0, 0, 0.2); }
.prive-titre { margin: 10px 0 0; font-weight: 700; font-size: 0.85rem; }
.prive-titre small { color: var(--gris); font-weight: 400; }
.kbd { display: inline-block; border: 1px solid var(--ligne); border-radius: 6px; padding: 0 6px; background: rgba(255, 255, 255, 0.06); }
.charte { padding-left: 20px; line-height: 1.5; }
.charte li { margin-bottom: 10px; color: #c9cfe6; }
.charte b { color: #fff; }

/* profil */
.profil { display: flex; gap: 16px; align-items: center; margin-bottom: 4px; }
.profil-av { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.profil-av img { width: 104px; height: 104px; border-radius: 26px; background: linear-gradient(#2a3150, #141a30); border: 3px solid var(--rouge); box-shadow: 0 0 24px rgba(232, 40, 59, 0.4); }
.profil-info { flex: 1; min-width: 0; }
.profil-info h2 { font-family: var(--display); font-weight: 400; margin: 0; font-size: 1.5rem; overflow: hidden; text-overflow: ellipsis; }
.profil-info .rang { width: auto; text-align: left; font-family: var(--corps); color: var(--or); font-weight: 700; margin: 4px 0 0; }
.tag-crew { color: var(--or); font-weight: 800; }
.code-crew { background: rgba(255, 207, 51, 0.08); border: 1px dashed #6b5410; border-radius: 12px; padding: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.code-crew b { font-family: var(--display); color: var(--or); letter-spacing: 0.15em; font-weight: 400; font-size: 1.1rem; }
.creer { margin-top: 12px; }
.creer summary { color: var(--gris); cursor: pointer; font-weight: 600; }
.creer .btn { margin-top: 10px; }
.notifs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.notifs li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); font-size: 0.88rem; }
.notifs small { color: var(--gris); white-space: nowrap; }
.notifs .n-zone { border-left: 3px solid var(--or); }
.notifs .n-event { border-left: 3px solid #5aa0ff; }

/* ---------- célébration de map complétée ---------- */
.celebration { position: fixed; inset: 0; z-index: 70; background: radial-gradient(circle, color-mix(in srgb, var(--za) 35%, #05070f), #05070f 70%); display: grid; place-items: center; animation: fondu 0.3s; overflow: hidden; }
.celeb-box { text-align: center; position: relative; z-index: 1; padding: 20px; }
.celeb-petit { font-family: var(--display); color: var(--or); letter-spacing: 0.2em; animation: clignote 0.8s steps(2) infinite; margin: 0; }
.celebration h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 11vw, 3.6rem); margin: 10px 0; color: #fff; transform: skewX(-8deg); text-shadow: 0 3px 0 var(--za), 0 6px 0 #000, 0 0 40px var(--za); animation: tampon 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.6); }
.celeb-zone { font-size: 1.3rem; font-weight: 800; color: var(--za); margin: 0 0 8px; }
.celeb-box .btn { margin-top: 20px; padding: 14px 30px; }
.confettis i { position: absolute; top: -20px; left: var(--x); width: 9px; height: 16px; background: var(--c); animation: tombe 2.6s var(--d) linear infinite; border-radius: 2px; }
@keyframes tombe { to { transform: translateY(110vh) rotate(720deg); } }

/* grands écrans : on centre l'interface façon téléphone */
@media (min-width: 900px) {
  .actions-bas { bottom: calc(var(--tab-h) + 20px); }
  .sheet { left: auto; right: 90px; width: 440px; border-radius: 22px; bottom: calc(var(--tab-h) + 16px); border: 1px solid var(--ligne); border-top: 2px solid var(--za); }
  .heat-panel { right: auto; width: 380px; }
}

/* ---------- lot 2 : nom, démo, onglets, sous-maps 3D, métros ---------- */
.logo small { display: block; font-size: 0.42em; letter-spacing: 0.12em; color: var(--or); text-shadow: 0 2px 0 #6b5410, 0 0 14px rgba(255, 207, 51, 0.5); margin-bottom: -4px; }
.btn-demo { width: 100%; margin-bottom: 14px; border-color: var(--or); color: var(--or); font-family: var(--display); font-weight: 400; animation: pulse 2s infinite; }
.btn-demo small { font-family: var(--corps); color: var(--gris); }
.seg-page { margin-bottom: 16px; }
.seg-page button { padding: 11px; font-size: 0.95rem; }
.cz-ico { position: absolute; right: 10px; top: 8px; font-size: 1.7rem; filter: drop-shadow(0 0 8px var(--za)); }
.bandeau-verrou { width: 100%; margin-top: 10px; justify-content: center; text-align: center; white-space: normal; border-color: var(--or); color: var(--or); }

/* panneau flottant au-dessus de chaque sous-map */
.embleme { --za: var(--rouge); border: 0; background: none; padding: 0; cursor: pointer; }
.emb-in { display: flex; flex-direction: column; align-items: center; animation: flotte 3s ease-in-out infinite; }
.embleme.cache, .metro.cache { visibility: hidden !important; pointer-events: none; }
.emb-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 1.45rem; background: linear-gradient(160deg, color-mix(in srgb, var(--za) 55%, #0a0e1c), #0a0e1c); border: 2px solid var(--za);
  box-shadow: 0 0 18px color-mix(in srgb, var(--za) 70%, transparent), inset 0 2px 0 rgba(255, 255, 255, 0.25); transform: perspective(120px) rotateX(14deg); }
.emb-txt { margin-top: 4px; display: flex; flex-direction: column; align-items: center; background: rgba(6, 9, 20, 0.88); border: 1px solid color-mix(in srgb, var(--za) 60%, transparent); border-radius: 9px; padding: 3px 8px; white-space: nowrap; }
.emb-txt b { font-family: var(--display); font-weight: 400; font-size: 0.66rem; color: #fff; letter-spacing: 0.04em; text-shadow: 0 0 8px var(--za); }
.emb-txt i { font-style: normal; font-size: 0.6rem; color: var(--za); font-weight: 700; display: flex; align-items: center; gap: 4px; }
.emb-txt .stars i { width: 8px; height: 8px; }
.embleme.complete .emb-ico { border-color: var(--or); box-shadow: 0 0 22px rgba(255, 207, 51, 0.8); }
.embleme.complete .emb-txt i { color: var(--or); }
.emb-pied { width: 2px; height: 14px; background: linear-gradient(var(--za), transparent); }
@keyframes flotte { 50% { transform: translateY(-5px); } }

/* stations de métro mises en avant */
.metro { pointer-events: none; }
.metro-in { display: flex; align-items: center; gap: 5px; transition: transform 0.3s; transform-origin: 11px center; }
.metro-m { width: 22px; height: 22px; border-radius: 50%; background: #13245a; border: 2px solid #fff; color: #fff; font-weight: 800; font-size: 0.72rem; display: grid; place-items: center; box-shadow: 0 0 10px rgba(90, 160, 255, 0.6); }
.metro-txt { display: flex; align-items: center; gap: 4px; background: rgba(6, 9, 20, 0.88); border: 1px solid #2c3a70; border-radius: 8px; padding: 2px 6px; }
.metro-txt b { font-size: 0.7rem; white-space: nowrap; }
.lignes { display: flex; gap: 2px; }
.lignes i { font-style: normal; min-width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; font-size: 0.55rem; font-weight: 800; padding: 0 2px; }
.metro.actif { z-index: 3; }
.metro.actif .metro-in { transform: scale(1.2); }
.metro.actif .metro-m { background: var(--accent); border-color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 18px var(--accent); animation: pulse 1.6s infinite; }
.metro.actif .metro-txt { border-color: var(--accent); }
.en-heat .metro, .en-heat .embleme { opacity: 0.25; }

/* vue de loin : panneaux des sous-maps plus compacts */
.loin .emb-in { zoom: 0.8; }
.loin .emb-txt i { display: none; }
.loin .pin-av { width: 36px; height: 36px; }
.loin .pin-nom { display: none; }
.loin .pin-event-txt { display: none; }

/* bandeau en haut de l'écran pour revenir à la carte de Paris depuis une sous-map */
.retour-paris { display: none; position: absolute; left: 10px; right: 10px; top: calc(66px + var(--safe-t)); z-index: 6; border: 1px solid var(--accent); border-radius: 14px; padding: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, #0a0e1c), #0a0e1c); color: #fff; font-family: var(--display); font-size: 0.95rem; letter-spacing: 0.04em;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5), 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent); align-items: center; justify-content: center; gap: 8px; }
.retour-paris span { font-size: 1.5rem; line-height: 0.6; }
.retour-paris:active { transform: translateY(2px); }
.en-zone .retour-paris { display: flex; }