/* ===== Thème nuit : fond sombre, accents orange et violet ===== */
:root {
  --bg: #140d20;
  --surface: #1f1631;
  --surface-2: #2a1f40;
  --line: #3b2d57;
  --text: #f7f1ff;
  --muted: #c9bddf;
  --orange: #ff8a1f;
  --orange-2: #ffa54d;
  --violet: #8b5cf6;
  --violet-2: #a98bff;
  --green: #22c55e;
  --red: #f05252;
  --radius: 18px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 17px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body.mode-family { overflow: hidden; overscroll-behavior: none; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
p { margin: 0 0 .6em; }
code { background: var(--surface-2); padding: 2px 6px; border-radius: 6px; font-size: .85em; word-break: break-all; }
.hidden { display: none !important; }
.small { font-size: .88rem; color: var(--muted); }
.muted { color: var(--muted); }
.loading { text-align: center; margin-top: 40vh; font-size: 1.3rem; }

/* ----- Boutons : gros, utilisables avec des gants ----- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 56px; padding: 0 20px; border-radius: 16px; border: 2px solid transparent;
  font: inherit; font-weight: 700; font-size: 1.05rem; color: var(--text); text-decoration: none;
  cursor: pointer; user-select: none; transition: transform .08s, filter .15s; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:focus-visible, .icon-btn:focus-visible, .vp:focus-visible, .switch:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.btn-orange { background: var(--orange); color: #1b0d00; }
.btn-violet { background: var(--violet); color: #fff; }
.btn-ghost { background: var(--surface-2); border-color: var(--line); }
.btn-danger { background: #3a1620; border-color: #7a2a3a; color: #ffd5dc; }
.btn-xl { min-height: 64px; font-size: 1.15rem; width: 100%; }
.btn-sq { width: 64px; min-width: 64px; padding: 0; font-size: 1.5rem; }
.btn-sm { min-height: 44px; padding: 0 12px; font-size: .92rem; border-radius: 12px; }
.icon-btn { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--line);
  background: rgba(31,22,49,.92); color: var(--text); font-size: 1.4rem; cursor: pointer; flex: none; }

/* ----- Carte plein écran ----- */
#map { position: fixed; inset: 0; background: #0d0915; z-index: 0; }
.dark-tiles { filter: invert(1) hue-rotate(195deg) brightness(.85) contrast(.9) saturate(.6); }
.leaflet-control-attribution { background: rgba(20,13,32,.7) !important; color: var(--muted) !important; font-size: 10px; }
.leaflet-control-attribution a { color: var(--violet-2) !important; }
.leaflet-container { font: inherit; }
.demo-flag { position: fixed; bottom: calc(var(--safe-bottom) + 4px); right: 8px; z-index: 1200;
  background: var(--violet); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .1em; padding: 2px 10px; border-radius: 99px; }

.topbar { position: fixed; top: calc(var(--safe-top) + 10px); left: 10px; right: 10px; z-index: 1000; display: flex; gap: 8px; align-items: center; }
.topbar .icon-btn { flex: 0 0 auto; }
@media (max-width: 420px) {
  .topbar { gap: 6px; left: 8px; right: 8px; }
  .topbar .icon-btn { width: 46px; height: 46px; font-size: 1.25rem; }
  .counter { min-height: 46px; padding: 5px 12px; }
  .counter-text { font-size: .9rem; }
}
.counter { flex: 1 1 auto; min-width: 0; min-height: 52px; display: flex; flex-direction: column; justify-content: center; gap: 5px;
  padding: 6px 16px; border-radius: 26px; background: rgba(31,22,49,.94); border: 2px solid var(--line); font-weight: 800; }
.counter-text { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress { display: block; height: 7px; border-radius: 9px; background: var(--surface-2); overflow: hidden; }
.progress-bar { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--orange), var(--orange-2)); border-radius: 9px; transition: width .5s; }

.safety { position: fixed; top: calc(var(--safe-top) + 72px); left: 10px; right: 10px; z-index: 990;
  display: flex; gap: 8px; align-items: center; padding: 8px 8px 8px 14px; border-radius: 14px;
  background: rgba(139,92,246,.95); color: #fff; font-size: .9rem; font-weight: 600; }
.safety.collapsed span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.safety-x { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(0,0,0,.25); color: #fff; font-size: 1rem; cursor: pointer; }
body.has-trip .safety { display: none; }

.tripbar { position: fixed; top: calc(var(--safe-top) + 72px); left: 10px; right: 10px; z-index: 995;
  padding: 12px; border-radius: var(--radius); background: rgba(31,22,49,.97); border: 2px solid var(--orange); box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.tripbar.arrived { border-color: var(--green); }
.trip-text { font-size: 1.05rem; margin-bottom: 10px; }
.trip-actions { display: flex; gap: 8px; }
.trip-actions .btn { flex: 1; min-height: 52px; padding: 0 10px; font-size: .98rem; }
.trip-actions .btn-sq { flex: none; width: 52px; min-width: 52px; }
.tripbar.arrived #tripPassed { animation: pulse 1.2s infinite; }

.bottombar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  padding: 10px 10px calc(var(--safe-bottom) + 8px); background: linear-gradient(transparent, rgba(20,13,32,.92) 30%); }
.bottom-row { display: flex; gap: 8px; }
.bottom-row .btn-xl { flex: 1; }
.footer-note { font-size: .72rem; color: var(--muted); margin: 6px 4px 0; line-height: 1.3; text-align: center; }
.geo-msg { display: flex; gap: 8px; align-items: center; margin: 8px 0 0; padding: 6px 6px 6px 12px; background: #3a2a10; border-radius: 12px; font-size: .82rem; line-height: 1.3; }
.geo-msg span { flex: 1; }
.geo-x { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(0,0,0,.3); color: #fff; cursor: pointer; }

/* Légende repliable */
.legend { margin: 0 0 8px; background: rgba(31,22,49,.95); border: 2px solid var(--line); border-radius: 14px; }
.legend summary { min-height: 48px; font-size: .9rem; font-variant-numeric: tabular-nums; display: flex; align-items: center; padding: 0 14px; font-weight: 700; cursor: pointer; list-style: none; }
.legend summary::-webkit-details-marker { display: none; }
.legend summary::before { content: "▸"; margin-right: 8px; transition: transform .2s; }
.legend[open] summary::before { transform: rotate(90deg); }
.legend ul { list-style: none; margin: 0; padding: 0 12px 4px; display: grid; gap: 6px; }
.legend li { display: flex; align-items: center; gap: 10px; font-size: .92rem; }
.legend .small { padding: 0 14px 10px; margin: 4px 0 0; }
.legend-pk { width: 40px; height: 40px; display: grid; place-items: center; flex: none; }

/* Bulle « Vous êtes chez… ? » */
.here-bubble { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; padding: 12px;
  border-radius: var(--radius); background: var(--surface); border: 2px solid var(--green); box-shadow: 0 8px 24px rgba(0,0,0,.5);
  animation: rise .3s ease-out; }
.here-bubble span { flex: 1 1 100%; font-size: 1.02rem; }
.here-bubble .btn-orange { flex: 1; }

/* ----- Citrouilles : 4 états ----- */
.pk-icon { background: none; border: 0; }
.pk { position: relative; width: 52px; height: 52px; display: grid; place-items: center;
  transition: transform .5s ease, opacity .5s ease, filter .5s ease; }
.pk svg { position: relative; z-index: 2; overflow: visible; transition: transform .5s ease;
  filter: drop-shadow(0 2px 2px rgba(40,15,0,.55)); }
/* couleurs pilotées par le CSS : fondu de 0,5 s quand le statut change */
.pk .pk-body, .pk .pk-body-mid { fill: #ff7a1a; transition: fill .5s ease; }
.pk .pk-body-mid { fill: #ff8f2e; }
.pk .pk-stem { fill: #3f8f3a; transition: fill .5s ease; }
.pk .pk-outline { stroke: rgba(90,35,0,.55); transition: stroke .5s ease; }
.pk .pk-face { transition: opacity .5s ease; }
/* 1. ouverte, non visitée : halo lumineux qui pulse doucement */
.pk-halo { position: absolute; inset: 2px; border-radius: 50%; z-index: 1; opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(circle, rgba(255,170,60,.85) 0%, rgba(255,138,31,.45) 45%, rgba(255,138,31,0) 70%); }
.pk-open:not(.pk-visited) .pk-halo { opacity: 1; animation: halo 2.4s ease-in-out infinite; }
/* 2. ouverte, déjà visitée : un peu plus petite, badge vert ✓, pas de halo */
.pk-visited svg { transform: scale(.8); }
.pk-check { position: absolute; right: 5px; bottom: 6px; z-index: 3; width: 21px; height: 21px; border-radius: 50%;
  background: #16a34a; color: #fff; font: 900 13px/17px system-ui, sans-serif; text-align: center;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.5); transform: scale(0); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.pk-visited .pk-check { transform: scale(1); }
/* 3. fermée, non visitée : grise, désaturée, plus transparente, petite lune */
.pk-closed .pk-body { fill: #8d8899; }
.pk-closed .pk-body-mid { fill: #9d98a8; }
.pk-closed .pk-stem { fill: #5e5a66; }
.pk-closed .pk-outline { stroke: rgba(30,30,40,.5); }
.pk-closed .pk-face { opacity: .3; }
.pk-closed { opacity: .72; filter: saturate(.4); }
.pk-moon { position: absolute; right: 2px; top: 2px; z-index: 3; font-size: 15px; line-height: 1; opacity: 0;
  transition: opacity .5s ease; filter: drop-shadow(0 0 2px #fff); }
.pk-closed:not(.pk-visited) .pk-moon { opacity: 1; }
/* 4. fermée, déjà visitée : grise + badge vert ✓ (géré par les règles ci-dessus) */
.pk-closed.pk-visited { opacity: .85; }
/* destination en cours : anneau violet animé */
.pk-ring { position: absolute; inset: -3px; border-radius: 50%; z-index: 1; border: 4px solid #8b5cf6; opacity: 0;
  box-shadow: 0 0 12px rgba(139,92,246,.8); pointer-events: none; }
.pk-target .pk-ring { opacity: 1; animation: ringv 1.6s ease-out infinite; }
.pk-target { z-index: 5; }
/* apparition / disparition en direct */
.pk-appear { animation: appear .7s cubic-bezier(.3,1.6,.5,1) both; }
.pk-leave { animation: leave .45s ease-in forwards; }
/* légende : pas d'animation */
.pk-static .pk-halo { animation: none; }
.legend-pk { width: 40px; height: 40px; display: grid; place-items: center; flex: none; }
.legend-pk .pk { transform: scale(.78); }
.pk-bad svg { filter: drop-shadow(0 0 4px var(--red)); }
.pk-num { position: absolute; top: -4px; right: -4px; z-index: 4; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px;
  background: var(--violet); color: #fff; font-size: 12px; font-weight: 800; line-height: 22px; text-align: center; }
.pk:focus-visible, .leaflet-marker-icon:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; border-radius: 50%; }
@keyframes halo { 0%, 100% { transform: scale(.85); opacity: .65; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes ringv { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.45); opacity: 0; } }
@keyframes appear { 0% { transform: scale(0) translateY(-20px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes leave { to { transform: scale(0); opacity: 0; } }

/* Bandeau hors ligne */
.offline { position: fixed; left: 50%; transform: translateX(-50%); top: calc(var(--safe-top) + 70px); z-index: 1300;
  max-width: calc(100% - 24px); padding: 8px 14px; border-radius: 12px; background: #3a1620; border: 2px solid #f05252;
  color: #ffd5dc; font-size: .9rem; font-weight: 700; text-align: center; }

/* ----- Fiche maison (bas de l'écran) ----- */
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; max-height: 85vh; overflow: auto;
  padding: 10px 16px calc(var(--safe-bottom) + 16px); background: var(--surface); border-top: 2px solid var(--orange);
  border-radius: 24px 24px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.6); transform: translateY(110%); transition: transform .25s ease-out; }
.sheet.open { transform: translateY(0); }
.sheet-grip { width: 48px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 12px; }
.sheet-kicker { color: var(--orange-2); font-weight: 800; text-transform: uppercase; font-size: .85rem; letter-spacing: .04em; }
.sheet-title { font-size: 1.6rem; }
.sheet-dist { font-size: 1.1rem; color: var(--muted); }
.sheet-visited { color: #8ff0b0; font-weight: 800; font-size: 1.2rem; }
.sheet-actions { display: grid; gap: 10px; margin-top: 14px; }

/* ----- Calques plein écran ----- */
.overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(10,6,18,.92); display: flex; align-items: flex-start; justify-content: center; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: calc(var(--safe-top) + 16px) 16px calc(var(--safe-bottom) + 16px); overflow: auto; animation: fade .2s; }
.overlay > * { margin-block: auto; flex-shrink: 0; }
.card { width: 100%; max-width: 480px; background: var(--surface); border: 2px solid var(--line); border-radius: 24px; padding: 22px; display: grid; gap: 10px; }
.card.center { text-align: center; }
.card h2 { font-size: 1.5rem; }
.big-emoji { font-size: 4rem; }
.next-addr { font-size: 1.3rem; font-weight: 800; color: var(--orange-2); }
.info-list { padding-left: 1.1em; margin: 0; display: grid; gap: 8px; }
.safety-inline { background: var(--violet); color: #fff; padding: 10px 12px; border-radius: 12px; font-weight: 700; }
.menu .btn { justify-content: flex-start; text-align: left; }

/* Vote des enfants */
.overlay-vote { align-items: stretch; }
.vote { width: 100%; max-width: 520px; margin: auto; display: grid; gap: 14px; }
.vote-addr { text-align: center; color: var(--muted); margin: 0; }
.vote-title { text-align: center; font-size: 1.8rem; margin: 0; }
.vote-row { background: var(--surface); border: 2px solid var(--line); border-radius: 20px; padding: 12px; }
.vote-label { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.vote-label b { display: block; font-size: 1.25rem; }
.vote-label small { color: var(--muted); font-size: .9rem; }
.vote-emoji { font-size: 2.4rem; }
.vote-pumpkins { display: flex; justify-content: space-between; gap: 4px; }
.vp { flex: 1; min-width: 0; height: 60px; border: 0; border-radius: 14px; background: var(--surface-2); font-size: 2rem; cursor: pointer;
  filter: grayscale(1) brightness(.6); transition: transform .12s, filter .12s; }
.vp.on { filter: none; background: #3d2410; transform: scale(1.06); }
.vote-actions { display: grid; gap: 10px; }

/* Remerciement : citrouille qui saute */
.overlay-thanks, .overlay-party { flex-direction: column; text-align: center; }
.thanks h2 { font-size: 1.8rem; margin-top: 10px; }
.jump { display: inline-block; animation: jump .55s ease-in-out infinite alternate; transform-origin: bottom center; }
.party { position: relative; z-index: 2; }
.confetti { position: fixed; top: -20px; width: 10px; height: 16px; border-radius: 3px; z-index: 1; animation: fall 2.6s linear infinite; }

/* ----- Page habitant ----- */
.host, .admin { max-width: 720px; margin: 0 auto; padding: calc(var(--safe-top) + 20px) 16px calc(var(--safe-bottom) + 30px); display: grid; gap: 16px; }
.host-kicker { color: var(--orange-2); font-weight: 800; margin: 0; }
.host-address { font-size: 1.9rem; margin: 0; }
.switch { width: 100%; min-height: 46vh; border-radius: 32px; border: 4px solid var(--orange-2); cursor: pointer;
  background: radial-gradient(circle at 50% 35%, #ffb066, var(--orange) 60%, #c95e00); color: #1b0d00;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px;
  box-shadow: 0 0 40px rgba(255,138,31,.45); transition: background .25s, box-shadow .25s; font: inherit; }
.switch.off { background: radial-gradient(circle at 50% 35%, #5d5670, #3d3749 70%); border-color: #6b6478; color: #f1eef7; box-shadow: none; }
.switch-label { font-size: 1.9rem; font-weight: 900; }
.switch-sub { font-size: 1rem; opacity: .8; }
.btn.done { background: #183a26; color: #b8f5cd; }
.host-groups h2, .host-stats h2 { font-size: 1.3rem; }
.groups { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.groups li { background: var(--surface); border: 2px solid var(--line); border-radius: 16px; padding: 16px; font-size: 1.15rem; }
.groups li.soon { border-color: var(--orange); background: #2e1c12; }
.groups li .when { color: var(--orange-2); font-weight: 800; }
.groups li.empty { color: var(--muted); font-size: 1rem; }
.host-stats { background: linear-gradient(135deg, #2a1f40, #3a1f2a); border-radius: 20px; padding: 18px; text-align: center; }
.stat-big { font-size: 1.4rem; font-weight: 900; }
.stat-strong { font-size: 1.15rem; color: var(--orange-2); font-weight: 800; }
body.flash { animation: flash 1.2s; }

/* ----- Page organisateur ----- */
body.mode-admin { overflow: auto; }
.admin-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-head h1 { margin: 0; }
.warn { background: #3a2a10; border-radius: 12px; padding: 10px 14px; margin: 0; font-size: .92rem; }
.warn.demo { background: #2a1f50; }
.panel { background: var(--surface); border: 2px solid var(--line); border-radius: 20px; padding: 16px; display: grid; gap: 12px; }
.panel h2 { margin: 0; font-size: 1.3rem; }
.count { color: var(--muted); font-weight: 600; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.kpi { background: var(--surface-2); border-radius: 14px; padding: 10px; text-align: center; }
.kpi b { display: block; font-size: 1.6rem; color: var(--orange-2); }
.kpi span { font-size: .85rem; color: var(--muted); }
.toggle { display: flex; gap: 12px; align-items: flex-start; background: var(--surface-2); padding: 12px; border-radius: 14px; cursor: pointer; }
.toggle input { width: 28px; height: 28px; flex: none; accent-color: var(--orange); }
.input { width: 100%; min-height: 52px; padding: 10px 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--bg); color: var(--text); font: inherit; }
.input:focus { outline: none; border-color: var(--orange); }
textarea.input { resize: vertical; }
.input-xl { font-size: 1.2rem; }
.lbl { font-weight: 700; }
.house-list { display: grid; gap: 10px; }
.house { background: var(--surface-2); border-radius: 16px; padding: 12px; display: grid; gap: 10px; border: 2px solid transparent; }
.house.closed { opacity: .8; }
.house-main { display: flex; gap: 10px; align-items: center; }
.house h3 { margin: 0 0 2px; font-size: 1.1rem; }
.house-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { display: inline-block; padding: 1px 10px; border-radius: 99px; font-size: .8rem; font-weight: 800; margin-right: 6px; }
.pill-on { background: var(--orange); color: #1b0d00; }
.pill-off { background: #4a4552; color: #eee; }
.modal, .confirm { position: fixed; inset: 0; z-index: 3000; background: rgba(10,6,18,.85); display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 20px 12px; }
.confirm { z-index: 3500; align-items: center; }
.modal-box { width: 100%; max-width: 680px; background: var(--surface); border: 2px solid var(--line); border-radius: 22px; padding: 18px; display: grid; gap: 12px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.modal-actions .btn-xl { width: auto; flex: 1; }
.minimap { height: 300px; border-radius: 16px; overflow: hidden; border: 2px solid var(--line); }
.minimap-tall { height: 360px; }
.geo-status { margin: 0; font-weight: 600; }
.geo-status.ok { color: #8ff0b0; } .geo-status.meh { color: #ffd27a; } .geo-status.bad { color: #ff9aa8; }
.bulk-rows { display: grid; gap: 6px; max-height: 260px; overflow: auto; }
.bulk-row { display: grid; grid-template-columns: 28px 28px 1fr auto; gap: 8px; align-items: center; background: var(--surface-2); padding: 8px 10px; border-radius: 12px; font-size: .95rem; }
.bulk-row input { width: 22px; height: 22px; accent-color: var(--orange); }
.bulk-row .num { background: var(--violet); color: #fff; border-radius: 11px; text-align: center; font-weight: 800; font-size: .8rem; }
.bulk-row.none { border: 2px solid var(--red); }
.bulk-row em { color: var(--muted); }
.bulk-row .st { font-size: .85rem; white-space: nowrap; }
.prizes { display: grid; gap: 10px; }
.prize { background: linear-gradient(135deg, #3a2410, #2a1f40); border-radius: 16px; padding: 12px 14px; }
.prize-name { font-weight: 900; color: var(--orange-2); margin: 0 0 4px; }
.prize-addr { font-size: 1.15rem; font-weight: 700; margin: 0; }
.results-table summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { color: var(--muted); }

/* ----- Toast ----- */
#toast { position: fixed; left: 50%; bottom: calc(var(--safe-bottom) + 230px); transform: translate(-50%, 20px); z-index: 4000;
  max-width: calc(100% - 32px); background: #fff; color: #1b0d00; font-weight: 700; padding: 12px 18px; border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; text-align: center; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
body.mode-host #toast, body.mode-admin #toast { bottom: calc(var(--safe-bottom) + 24px); }

/* ----- Animations ----- */
@keyframes jump { from { transform: translateY(0) scale(1.05, .95); } to { transform: translateY(-38px) scale(.97, 1.03); } }
@keyframes ring { 0% { transform: scale(.8); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes pulse { 50% { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(255,138,31,.35); } }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(20px); opacity: 0; } }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); } }
@keyframes flash { 30% { background: #3a2410; } }
@media (prefers-reduced-motion: reduce) {
  .jump, .confetti, .tripbar.arrived #tripPassed, .pk-halo, .pk-ring, .pk-appear, .pk-leave, .show-avatar, .badge-pop.pop { animation: none !important; }
  .pk, .pk svg, .pk .pk-body, .pk .pk-body-mid, .pk .pk-stem, .pk-check { transition: none !important; }
}
@media (min-width: 700px) {
  .sheet { left: 50%; right: auto; width: 520px; transform: translate(-50%, 110%); }
  .sheet.open { transform: translate(-50%, 0); }
  .bottombar { max-width: 560px; left: 50%; transform: translateX(-50%); }
}

/* ===== Fonction 6 : groupes et badges ===== */
.avatar-btn { font-size: 1.6rem; }
.avatar-btn.has-prize { border-color: #ffd23f; box-shadow: 0 0 14px rgba(255,210,63,.7); }
.group-setup .avatars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.av { aspect-ratio: 1; min-height: 56px; border-radius: 16px; border: 3px solid var(--line); background: var(--surface-2); font-size: 2rem; cursor: pointer; }
.av.on { border-color: var(--orange); background: #3d2410; transform: scale(1.06); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 150px; overflow: auto; }
.chip { min-height: 40px; padding: 0 12px; border-radius: 99px; border: 2px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-size: .9rem; cursor: pointer; }
.chip:active { border-color: var(--orange); }
.overlay-show { flex-direction: column; }
.show-group { width: 100%; max-width: 480px; text-align: center; display: grid; gap: 14px; }
.show-avatar { font-size: 9rem; line-height: 1.1; animation: jump .7s ease-in-out infinite alternate; }
.show-name { font-size: clamp(2rem, 10vw, 3.2rem); color: var(--orange-2); margin: 0; }
.show-badges { font-size: 1.3rem; font-weight: 800; }
.badge-pop { position: fixed; left: 12px; right: 12px; top: calc(var(--safe-top) + 140px); z-index: 1500; display: flex; gap: 12px; align-items: center;
  padding: 14px 16px; border-radius: 20px; background: linear-gradient(135deg, #4b2a8f, #8b5cf6); color: #fff; font-size: 1.05rem;
  border: 3px solid #ffd23f; box-shadow: 0 10px 40px rgba(0,0,0,.6); cursor: pointer; }
.badge-pop.pop { animation: popIn .6s cubic-bezier(.2,1.6,.4,1); }
.pop-emoji { font-size: 2.2rem; flex: none; }
.album-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.album-slot { display: grid; justify-items: center; gap: 2px; padding: 12px 8px; border-radius: 16px; background: var(--surface-2); border: 2px dashed var(--line); text-align: center; opacity: .55; }
.album-slot.got { opacity: 1; border: 2px solid #ffd23f; background: #33243f; }
.slot-emoji { font-size: 2.2rem; }
.album-slot:not(.got) .slot-emoji { filter: grayscale(1); }
.slot-label { font-size: .85rem; font-weight: 700; }
.slot-count { font-size: .8rem; color: var(--orange-2); font-weight: 800; }
.badge-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: .92rem; max-height: 180px; overflow: auto; }
.badge-list li { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; }
.claim { text-align: center; background: linear-gradient(135deg, #3a2410, #2a1f40); border: 2px solid #ffd23f; border-radius: 18px; padding: 14px; }
.claim-code { font-size: 3.4rem; font-weight: 900; letter-spacing: .25em; color: #ffd23f; margin: 0; font-variant-numeric: tabular-nums; }
.code { font-weight: 900; color: #ffd23f; letter-spacing: .1em; }
.palmares h3 { margin: 10px 0 0; }
/* Page habitant : groupes récents et badges */
.host-recent h2 { font-size: 1.3rem; margin-bottom: .2em; }
.recent { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.recent li.empty { color: var(--muted); background: var(--surface); border-radius: 16px; padding: 14px; }
.recent-item { background: var(--surface); border: 2px solid var(--line); border-radius: 18px; overflow: hidden; }
.recent-item.open { border-color: var(--violet); }
.recent-head { width: 100%; min-height: 72px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: none; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.recent-avatar { font-size: 2.4rem; }
.recent-name { flex: 1; display: grid; }
.recent-name b { font-size: 1.15rem; }
.recent-name small { color: var(--muted); }
.recent-chev { font-size: 1.3rem; color: var(--muted); }
.badge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 12px 12px; }
.badge-btn { min-height: 84px; display: grid; justify-items: center; align-content: center; gap: 2px; padding: 8px; border-radius: 16px;
  border: 2px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; text-align: center; }
.badge-btn small { font-weight: 400; color: var(--muted); font-size: .75rem; }
.badge-btn.on { border-color: #ffd23f; background: #3a2a10; box-shadow: 0 0 12px rgba(255,210,63,.4); }
.badge-emoji { font-size: 1.9rem; }
.badge-grid .badge-btn:last-child:nth-child(odd) { grid-column: span 2; }
.contact { background: var(--surface); border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: .92rem; margin: 0; }
.contact a { color: var(--orange-2); }
@keyframes popIn { from { transform: scale(.4) translateY(-30px); opacity: 0; } }

/* Menu compact sur petits écrans */
@media (max-height: 700px) { .menu .btn-xl { min-height: 52px; font-size: 1rem; } .menu { gap: 8px; padding: 18px; } }

.groups .g-avatar { font-size: 1.5rem; vertical-align: -3px; }

/* Choix du groupe : listes défilantes, aucune saisie libre */
.group-setup .avatars { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); max-height: 186px; overflow-y: auto; padding: 4px; }
.group-setup .chips { max-height: 210px; overflow-y: auto; padding: 4px; }
.chip.on { border-color: var(--orange); background: #3d2410; color: #fff; font-weight: 800; }
.pick-preview { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px; border-radius: 16px;
  background: var(--surface-2); border: 2px solid var(--orange); font-size: 1.15rem; text-align: center; }
.pick-preview span { font-size: 2.6rem; line-height: 1; }

/* Nom Halloween de la maison */
.host-name { background: var(--surface); border: 2px solid var(--violet); border-radius: 20px; padding: 14px; display: grid; gap: 8px; text-align: center; }
.host-name-label { margin: 0; color: var(--violet-2); font-weight: 800; }
.host-name-value { margin: 0; font-size: 1.35rem; font-weight: 900; }
.sheet-addr { display: block; font-size: 1rem; font-weight: 600; color: var(--muted); margin-top: 4px; }
.pk-tooltip { white-space: normal !important; width: max-content; max-width: 200px; background: var(--surface) !important; color: var(--text) !important; border: 2px solid var(--orange) !important;
  border-radius: 12px !important; padding: 6px 10px !important; box-shadow: 0 6px 18px rgba(0,0,0,.45) !important; font: inherit; }
.pk-tooltip.leaflet-tooltip-left::before { border-left-color: var(--orange) !important; }
.pk-tooltip.leaflet-tooltip-right::before { border-right-color: var(--orange) !important; }
.pk-tip { text-align: center; line-height: 1.3; }
.pk-tip b { font-size: 1rem; }
.pk-tip span { font-size: .85rem; color: var(--muted); }
.pk-tip small { font-size: .78rem; }
.house h3 .nick { color: var(--violet-2); font-weight: 700; font-size: .95rem; }

/* ===== Interrupteur ON / OFF de l'habitant ===== */
.toggle-card { display: grid; gap: 16px; justify-items: center; padding: 20px 18px; border-radius: 28px;
  background: radial-gradient(circle at 50% 0%, #4a2a10, var(--surface) 70%); border: 3px solid var(--orange);
  box-shadow: 0 0 30px rgba(255,138,31,.35); transition: background .4s, border-color .4s, box-shadow .4s; }
.toggle-card.off { background: var(--surface); border-color: #6b6478; box-shadow: none; }
.toggle-head { display: flex; align-items: center; gap: 14px; width: 100%; }
.toggle-pk { flex: none; display: grid; place-items: center; }
.toggle-title { margin: 0; font-size: 1.5rem; font-weight: 900; line-height: 1.15; }
.toggle-state { margin: 4px 0 0; font-size: 1rem; color: var(--muted); }
.toggle-state b { color: var(--text); }
.toggle-state { opacity: .55; }
.toggle-state.active { opacity: 1; }
#hLabelOn.active b:first-child { color: var(--orange-2); }
#hLabelOff { margin-top: 2px; font-size: .92rem; }
.onoff { position: relative; width: min(100%, 300px); height: 96px; border-radius: 48px; border: 3px solid rgba(255,255,255,.25);
  background: #4a4552; cursor: pointer; padding: 0; touch-action: pan-y; transition: background .3s, box-shadow .3s; }
.onoff.on { background: linear-gradient(90deg, #ff8a1f, #ffb066); box-shadow: 0 0 22px rgba(255,138,31,.6); }
.onoff-text { position: absolute; top: 50%; transform: translateY(-50%); font-size: 1.9rem; font-weight: 900; letter-spacing: .08em; transition: opacity .25s; }
.onoff-on { left: 30px; color: #2a1600; opacity: 0; }
.onoff-off { right: 26px; color: #e9e6ef; }
.onoff.on .onoff-on { opacity: 1; }
.onoff.on .onoff-off { opacity: 0; }
.onoff-knob { position: absolute; top: 5px; left: 5px; width: 80px; height: 80px; border-radius: 50%; background: #f3f0f7;
  display: grid; place-items: center; box-shadow: 0 4px 10px rgba(0,0,0,.4); transition: left .3s cubic-bezier(.3,1.4,.5,1), background .3s; }
.onoff.on .onoff-knob { left: calc(100% - 85px); background: #fff7ee; }
.onoff:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }
.toggle-hint { margin: 0; font-size: .9rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .onoff-knob, .onoff, .toggle-card { transition: none; } }
.host-name-value .muted { font-size: 1rem; font-weight: 600; }

/* Organisateur : les liens */
.links-panel .link-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: var(--surface-2); border-radius: 14px; padding: 10px 12px; }
.links-panel .link-row > div { flex: 1 1 260px; min-width: 0; }
.links-panel code { display: block; margin-top: 4px; overflow-wrap: anywhere; }

/* Panneau du bas qui se range + flèche pour le rappeler */
.bottombar { transition: transform .35s ease, opacity .35s ease; }
.bottombar.tucked { transform: translateY(calc(100% + 12px)); opacity: 0; pointer-events: none; }
.bar-tab { position: fixed; left: 50%; bottom: calc(var(--safe-bottom) + 12px); transform: translateX(-50%); z-index: 1001;
  width: 64px; height: 52px; border-radius: 26px; border: 3px solid var(--orange-2); background: rgba(31,22,49,.95);
  color: var(--orange-2); font-size: 1.5rem; font-weight: 900; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.5);
  animation: tabIn .35s ease-out; }
.bar-tab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@keyframes tabIn { from { transform: translate(-50%, 30px); opacity: 0; } }
@media (min-width: 700px) {
  .bottombar.tucked { transform: translate(-50%, calc(100% + 12px)); }
}
@media (prefers-reduced-motion: reduce) { .bottombar, .bar-tab { transition: none; animation: none; } }

/* ----- Activation de la position ----- */
.geo-card .btn-xl { width: 100%; }
.geo-steps li { line-height: 1.4; }
#btnMe.geo-off { position: relative; background: #5a1d2a; animation: geoPulse 1.6s ease-in-out infinite; }
#btnMe.geo-off::after { content: "!"; position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--orange); color: #1a0f00; font: 800 .8rem/20px system-ui; text-align: center; }
@keyframes geoPulse { 50% { box-shadow: 0 0 0 6px rgba(255,140,30,.35); } }
@media (prefers-reduced-motion: reduce) { #btnMe.geo-off { animation: none; } }

/* ----- Impression de la carte ----- */
#printSheet { position: fixed; left: -10000px; top: 0; width: 190mm; background: #fff; color: #111; }
#printMapBox { width: 190mm; height: 165mm; border: 1px solid #999; }
.ps-pin span { display: block; width: 26px; height: 26px; border-radius: 50%; background: #ff7a00; color: #fff; border: 2px solid #3a1d00;
  font: 800 13px/22px Arial, sans-serif; text-align: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
@media print {
  @page { size: A4 portrait; margin: 10mm; }
  html, body { background: #fff !important; height: auto !important; overflow: visible !important; }
  body > *:not(#printSheet) { display: none !important; }
  #printSheet { position: static; display: block; font-family: Arial, sans-serif; }
  #printSheet h1 { font-size: 20pt; margin: 0 0 2mm; color: #111; }
  .ps-sub { margin: 0 0 3mm; font-size: 11pt; }
  .ps-list { columns: 2; column-gap: 8mm; font-size: 9.5pt; margin: 4mm 0 3mm; padding-left: 6mm; }
  .ps-list li { break-inside: avoid; margin-bottom: 1mm; }
  .ps-note { font-size: 9.5pt; border-top: 1px solid #ccc; padding-top: 2mm; }
  .ps-foot { font-size: 8pt; color: #555; }
  #printMapBox { break-inside: avoid; }
}

/* ----- Raccourci / installation ----- */
.install-offer { position: fixed; left: 12px; right: 12px; top: calc(var(--safe-top) + 64px); z-index: 1500; display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 2px solid var(--orange); border-radius: 18px; padding: 10px 10px 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: fade .25s; }
.install-offer img { border-radius: 12px; flex-shrink: 0; }
.install-offer span { flex: 1; font-size: .9rem; line-height: 1.25; }
.install-offer .btn { flex-shrink: 0; padding: 10px 14px; }
.install-x { background: none; border: 0; color: var(--muted, #bbb); font-size: 1.1rem; padding: 6px; cursor: pointer; }
.install-help { z-index: 2600; }
.ios-share { display: inline-block; padding: 0 6px; border: 1.5px solid currentColor; border-radius: 6px; font-weight: 800; }
.shortcut-btn { width: 100%; margin-top: 8px; }
@media (min-width: 640px) { .install-offer { left: auto; width: 420px; } }
.group-setup p.center { text-align: center; margin: 0; }

/* ----- Organisateur : éditions et historique ----- */
table.hist td:not(:first-child), table.hist th:not(:first-child) { text-align: right; }
table.hist th:nth-child(2), table.hist td:nth-child(2) { color: var(--orange-2); font-weight: 700; }
.hist-year { margin: 6px 0; }
.hist-year summary { cursor: pointer; font-weight: 700; min-height: 40px; display: flex; align-items: center; }
.hist-year ul { margin: 4px 0 8px; padding-left: 1.2em; }
#bNewEdition { width: 100%; margin-top: 10px; }
.edition-times { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.edition-times .lbl { display: grid; gap: 4px; }
.edition-warn { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; font-size: .9rem; }
.edition-warn p { margin: 4px 0; }
table.hist { font-size: .85rem; }
table.hist td:first-child { white-space: normal; min-width: 7.5em; }
table.hist th { white-space: normal; }
.edition-now { background: var(--surface-2); border-radius: 14px; padding: 12px; margin-bottom: 10px; }
.edition-now p { margin: 2px 0 8px; }
.edition-name { font-size: 1.2rem; font-weight: 800; color: var(--orange-2); }

/* ----- Inscriptions ----- */
.register h1 { margin-bottom: 4px; }
.reg-edition { color: var(--muted); margin-top: 0; }
.reg-choices { display: grid; gap: 12px; margin: 14px 0; }
.reg-card { display: grid; gap: 6px; text-align: left; background: var(--surface); border: 2px solid var(--line); border-radius: 20px;
  padding: 16px; color: inherit; text-decoration: none; font: inherit; cursor: pointer; }
.reg-card:hover, .reg-card:focus-visible { border-color: var(--orange); }
.reg-card b { font-size: 1.2rem; }
.reg-card span:last-child { color: var(--muted); font-size: .92rem; }
.reg-emoji { font-size: 2.2rem; }
.register .minimap { height: 260px; border-radius: 14px; margin: 6px 0; }
.register .check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; margin: 10px 0; }
.register .check input { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.reg-link code { display: block; word-break: break-all; background: var(--surface-2); padding: 10px; border-radius: 10px; font-size: .8rem; text-align: left; }
.reg-mine { background: var(--surface-2); padding: 10px 12px; border-radius: 12px; }
.kids { display: flex; align-items: center; gap: 12px; justify-content: center; }
.kid-btn { width: 52px; min-height: 48px; font-size: 1.5rem; padding: 0; }
#kNum { min-width: 8em; text-align: center; }
.stat-reg { background: var(--surface-2); border-radius: 12px; padding: 8px 12px; font-size: .92rem; }
.new-reg { background: #3a2a10; border: 1.5px solid var(--orange); border-radius: 14px; padding: 10px 12px; margin: 8px 0; }
.new-reg p { margin: 0 0 8px; }
.pill-new { background: var(--orange); color: #1b0d00; }
.pill-self { background: var(--surface-2); }