/* Couleurs : quatre ciels qui suivent l'heure de Manille (attribut data-sky sur <html>) */
:root, :root[data-sky="jour"] {
  --sea: #e7edef;
  --land: #fbfaf6;
  --coast: #cbd4d4;
  --route: #13383c;
  --ink: #16282b;
  --muted: #6c7a7a;
  --sun: #d9622b;
  --glass: rgba(251, 250, 246, .82);
  --shadow: rgba(19, 56, 60, .35);
  --grain: .07;
  --display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.22, .8, .24, 1);
}
:root[data-sky="aube"] {
  --sea: #ece6ee; --land: #fdf8f3; --coast: #dccfd6; --route: #2f3550; --ink: #1f2235; --muted: #7a7287;
  --sun: #e0663a; --glass: rgba(253, 248, 243, .82); --shadow: rgba(47, 53, 80, .32);
}
:root[data-sky="dore"] {
  --sea: #f1e3d3; --land: #fffaf2; --coast: #e2cdb5; --route: #47291a; --ink: #2b1d14; --muted: #8a6f5c;
  --sun: #d4541f; --glass: rgba(255, 250, 242, .82); --shadow: rgba(71, 41, 26, .32);
}
:root[data-sky="nuit"] {
  --sea: #0e2229; --land: #17323a; --coast: #2a4c54; --route: #efe6d6; --ink: #f2ede4; --muted: #93a9aa;
  --sun: #f08a4b; --glass: rgba(23, 50, 58, .78); --shadow: rgba(0, 0, 0, .6); --grain: .1;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: var(--sea); color: var(--ink); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; transition: background-color 2s, color 2s; }
button { font: inherit; color: inherit; }

/* Grain de papier, très léger, sur toute la page */
body::after { content: ''; position: fixed; inset: 0; z-index: 1500; pointer-events: none; opacity: var(--grain); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.map { position: fixed; inset: 0; background: var(--sea); transition: filter 1.2s var(--ease), transform 1.4s var(--ease), background-color 2s; }
.leaflet-container { background: var(--sea); font-family: var(--sans); }
.land { fill: var(--land); stroke: var(--coast); transition: fill 2s, stroke 2s; }
/* Tuiles OpenStreetMap adoucies : gris très clair posé sur la couleur des terres, pour retrouver le rendu épuré */
.leaflet-container.is-osm { background: var(--land); }
.osm-tiles { filter: grayscale(1) contrast(1.1); opacity: .38 !important; }
:root[data-sky="nuit"] .osm-tiles { filter: grayscale(1) invert(1) contrast(.85); opacity: .32 !important; }
.leaflet-control-attribution { background: var(--glass) !important; font-size: 10px; color: var(--muted); border-radius: 6px 0 0 0; }
.leaflet-control-attribution:empty { display: none; }
.leaflet-control-attribution a { color: inherit; }
body.locked .map { filter: blur(6px) saturate(.8); transform: scale(1.04); }

/* En-tête : simple texte posé sur la mer */
.m-top { position: fixed; top: 0; left: 0; right: 0; z-index: 500; display: flex; justify-content: space-between;
  align-items: flex-start; gap: 16px; padding: max(22px, env(safe-area-inset-top)) 28px 48px;
  background: linear-gradient(var(--sea) 35%, transparent); pointer-events: none; transition: background 2s; }
.m-top > * { pointer-events: auto; }
.m-eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .22em; font-size: .68rem; font-weight: 600; color: var(--sun); }
.m-brand h1 { font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.02; margin: 4px 0 4px; letter-spacing: -.035em; }
.m-sub { margin: 0; color: var(--muted); font-size: .95rem; }
.m-sky { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 5px 12px 5px 8px; border-radius: 99px; font-size: .8rem; color: var(--muted);
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.m-sky b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.sky-ico { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--sun);
  background: color-mix(in srgb, var(--sun) 14%, transparent); }
:root[data-sky="nuit"] .sky-ico { color: #f6dfa6; background: rgba(246, 223, 166, .12); }
/* Apparition de l'en-tête au chargement */
.m-brand > * { animation: rise .9s var(--ease) both; }
.m-brand > :nth-child(2) { animation-delay: .08s; }
.m-brand > :nth-child(3) { animation-delay: .16s; }
.m-brand > :nth-child(4) { animation-delay: .26s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

.m-nav { display: flex; align-items: center; gap: 6px; padding-top: 4px; }
.m-nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9rem; padding: 8px 14px; border-radius: 99px;
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.m-nav a:hover { background: var(--land); }
.m-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.m-icon:hover { background: var(--land); }
.m-icon.on { background: var(--route); color: var(--land); }

/* Tracé */
.seg { fill: none; stroke: var(--route); stroke-linecap: round; stroke-linejoin: round; transition: stroke 2s; }
.seg-todo { stroke-opacity: .28; }
.seg-glow { stroke: var(--land); stroke-opacity: .9; }

/* Étapes */
.pin-wrap { background: none; border: 0; }
.pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--s, 1)); width: 14px; height: 14px;
  border-radius: 50%; padding: 0; border: 1.5px solid var(--route); background: var(--land); cursor: pointer;
  transition: transform .35s var(--ease), background .3s, opacity .5s, box-shadow .35s; }
.pin::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; } /* zone de clic confortable */
.pin.done { background: var(--route); }
.pin.todo { border-color: color-mix(in srgb, var(--route) 45%, transparent); }
.pin.current { background: var(--sun); border-color: var(--sun); --s: 1.15; }
.pin.current::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid var(--sun); animation: pulse 2.4s var(--ease) infinite; }
.pin:hover, .pin.active { --s: 1.45; }
/* Étape lointaine (Paris, Doha) : distance rappelée dans le panneau */
.p-far { margin: 6px 0 0; font-size: .85rem; color: var(--sun); font-weight: 600; }
/* Étape du jour survolé dans le ruban */
.pin.hint { --s: 1.7; box-shadow: 0 0 0 6px color-mix(in srgb, var(--sun) 25%, transparent); }
.pin:focus-visible { outline: 2px solid var(--sun); outline-offset: 4px; }
@keyframes pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.4); opacity: 0; } }
.pin-label { position: absolute; left: 50%; top: 50%; transform: translate(14px, -50%); white-space: nowrap; pointer-events: none;
  font: 600 .7rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--route);
  text-shadow: 0 0 3px var(--land), 0 0 3px var(--land), 0 0 6px var(--land); transition: opacity .5s; }
.pin-wrap.left .pin-label { transform: translate(calc(-100% - 14px), -50%); }
.pin-wrap.is-todo .pin-label { color: var(--muted); }
.pin-wrap.hidden .pin, .pin-wrap.hidden .pin-label { opacity: 0; }
.pin-wrap.nolabel .pin-label { opacity: 0; }
.pin-wrap.nolabel:hover .pin-label, .pin-wrap.nolabel:has(.pin.active) .pin-label, .pin-wrap.nolabel:has(.pin.hint) .pin-label { opacity: 1; z-index: 2; }

/* Véhicule en mouvement */
.vehicle { background: none; border: 0; }
.vehicle span { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; display: grid; place-items: center;
  border-radius: 50%; background: var(--land); color: var(--route); box-shadow: 0 2px 10px var(--shadow), 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }

/* Dock du bas : en ce moment, kilomètres, ruban des jours */
.m-dock { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); z-index: 500; width: min(680px, calc(100vw - 32px));
  padding: 14px 18px 12px; border-radius: 22px; background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 50px -20px var(--shadow), 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
  transform: translate(-50%, 24px); opacity: 0; pointer-events: none; transition: opacity .7s var(--ease), transform .7s var(--ease), background-color 2s; }
.m-dock.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.dock-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.dock-now { display: flex; align-items: center; gap: 12px; border: 0; background: none; padding: 2px 4px 2px 2px; cursor: pointer; border-radius: 12px; min-width: 0; }
.dock-now:hover strong { color: var(--sun); }
.dock-now .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sun); position: relative; flex: none; }
.dock-now .dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--sun); animation: pulse 2.4s var(--ease) infinite; }
.dock-now .txt { text-align: left; line-height: 1.2; min-width: 0; }
.dock-now small { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-now strong { display: block; font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; transition: color .25s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-km { flex: none; margin: 0; text-align: right; font-size: .78rem; color: var(--muted); line-height: 1.2; white-space: nowrap; }
.dock-km strong { font-family: var(--display); font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 2px; }
.dock-km small { display: block; font-size: .7rem; }
.m-dock.counting .dock-km strong { color: var(--sun); }

.dock-ribbon { position: relative; margin-top: 12px; }
.dock-ribbon[hidden] { display: none; }
.dock-days { display: grid; grid-template-columns: repeat(var(--n, 28), 1fr); align-items: end; height: 34px; }
.dd { position: relative; height: 100%; border: 0; padding: 0; background: none; cursor: pointer; display: flex; align-items: flex-end; justify-content: center; }
.dd i { display: block; width: 2px; height: 9px; border-radius: 2px; background: color-mix(in srgb, var(--route) 22%, transparent);
  transition: height .35s var(--ease), background .3s, width .2s; animation: grow .6s var(--ease) both; animation-delay: calc(var(--d) * 18ms); }
@keyframes grow { from { transform: scaleY(0); transform-origin: bottom; } }
.dd.past i { background: color-mix(in srgb, var(--route) 55%, transparent); }
.dd.has i { height: 20px; background: var(--route); }
.dd.has i::before { content: ''; position: absolute; left: 50%; bottom: 20px; width: 6px; height: 6px; margin: 0 0 3px -3px; border-radius: 50%; background: var(--route); }
.dd.future.has i, .dd.future.has i::before { background: color-mix(in srgb, var(--route) 40%, transparent); }
.dd.today i { height: 28px; width: 3px; background: var(--sun); }
.dd.today i::before { content: ''; position: absolute; left: 50%; bottom: 28px; width: 8px; height: 8px; margin: 0 0 3px -4px; border-radius: 50%; background: var(--sun); }
.dd:hover i, .dd.on i { width: 4px; background: var(--sun); }
.dd:hover i::before, .dd.on i::before { background: var(--sun); }
.dd:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; border-radius: 4px; }
/* Ruban pendant l'animation d'ouverture : tout est éteint, les jours s'allument au passage du curseur */
.dock-days.playing .dd:not(.lit) i { height: 9px; width: 2px; background: color-mix(in srgb, var(--route) 18%, transparent); }
.dock-days.playing .dd:not(.lit) i::before { opacity: 0; }
.dd i::before { transition: opacity .3s; }
.dd-cursor { position: absolute; top: -2px; left: 0; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--sun);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sun) 25%, transparent); opacity: 0; transition: opacity .4s; pointer-events: none; }
.dd-cursor.show { opacity: 1; }
.dock-now.arrive .txt { animation: arrive .45s var(--ease); }
@keyframes arrive { from { opacity: 0; transform: translateY(6px); } }
.dock-ends { display: flex; justify-content: space-between; margin-top: 6px; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

/* Bulle d'un jour */
.dock-tip { position: absolute; bottom: calc(100% + 14px); left: 0; width: 250px; padding: 12px; border-radius: 16px; background: var(--land);
  box-shadow: 0 20px 50px -18px var(--shadow), 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
  opacity: 0; transform: translateY(6px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.dock-tip.show { opacity: 1; transform: none; }
.dock-tip::after { content: ''; position: absolute; top: 100%; left: var(--arrow, 50%); margin-left: -7px; border: 7px solid transparent; border-top-color: var(--land); }
.tip-head { margin: 0 0 8px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.tip-head b { color: var(--sun); }
.tip-post { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; text-decoration: none; color: var(--ink); padding: 4px; margin: 0 -4px; border-radius: 10px; font-weight: 600; font-size: .92rem; line-height: 1.25; }
.tip-post + .tip-post { margin-top: 4px; }
.tip-post:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--sun); }
.tip-post img, .tip-noimg { width: 56px; height: 56px; border-radius: 9px; object-fit: cover; display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--route); }
.tip-empty { margin: 0; color: var(--muted); font-size: .9rem; }

/* Légende */
.m-legend { position: fixed; left: 28px; bottom: max(28px, env(safe-area-inset-bottom)); z-index: 450; display: grid; gap: 6px;
  font-size: .78rem; color: var(--muted); opacity: 0; transition: opacity 1s var(--ease); }
.m-legend.show { opacity: 1; }
.m-legend div { display: flex; align-items: center; gap: 8px; }
.m-legend svg { color: var(--route); }

/* Zoom */
.leaflet-control-zoom { border: 0 !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent) !important; border-radius: 12px !important; overflow: hidden; margin: 0 28px 28px 0 !important; }
.leaflet-control-zoom a { background: var(--glass) !important; backdrop-filter: blur(10px); color: var(--ink) !important; border-color: color-mix(in srgb, var(--ink) 8%, transparent) !important;
  width: 36px !important; height: 36px !important; line-height: 34px !important; font-weight: 400 !important; }

/* Panneau d'étape */
.m-panel { position: fixed; z-index: 600; top: 24px; right: 24px; bottom: 24px; width: 400px; max-width: calc(100vw - 48px);
  background: var(--land); border-radius: 22px; box-shadow: 0 30px 80px -30px var(--shadow), 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
  overflow-y: auto; overscroll-behavior: contain; padding: 34px 30px 30px;
  transform: translateX(calc(100% + 40px)); transition: transform .6s var(--ease), background-color 2s; }
.m-panel.open { transform: none; }
.m-handle { display: none; }
.m-close { position: sticky; float: right; top: 0; margin: -18px -14px 0 0; width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: color-mix(in srgb, var(--ink) 6%, transparent); display: grid; place-items: center; cursor: pointer; z-index: 2; }
.m-close:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); }
/* Tampon de l'étape : il « tombe » sur la page à l'ouverture */
.p-stamp { float: right; width: 96px; height: 96px; margin: 26px -4px 4px 12px; color: var(--sun); opacity: .85; transform: rotate(-12deg); mix-blend-mode: multiply; }
:root[data-sky="nuit"] .p-stamp { mix-blend-mode: screen; }
.p-stamp.todo { color: var(--muted); opacity: .55; }
.p-stamp.done { color: var(--route); opacity: .7; }
.m-panel.open .p-stamp { animation: stamp .55s cubic-bezier(.3, 1.6, .5, 1) .25s both; }
@keyframes stamp { from { opacity: 0; transform: rotate(-30deg) scale(1.7); } 60% { opacity: .9; } }
.p-kicker { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.p-kicker svg { color: var(--route); }
.p-name { font-family: var(--display); font-weight: 700; font-size: 2.4rem; line-height: 1.02; margin: 10px 0 8px; letter-spacing: -.04em; overflow-wrap: anywhere; }
.p-dates { margin: 0; color: var(--muted); }
.p-note { margin: 16px 0 0; color: color-mix(in srgb, var(--ink) 82%, var(--land)); clear: both; }
.p-gmaps { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: .88rem; color: var(--muted); text-decoration: none; border-bottom: 1px solid currentColor; }
.p-gmaps:hover { color: var(--ink); }
.p-days { display: grid; gap: 14px; margin: 28px 0 0; clear: both; }
.day { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center; text-decoration: none; color: inherit; border-radius: 14px; padding: 6px; margin: -6px; transition: background .25s; }
.day:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.day-img { width: 88px; height: 88px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 8%, transparent) center/cover no-repeat; display: grid; place-items: center; font-family: var(--display); color: var(--route); }
.day small { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.day strong { display: block; font-family: var(--display); font-weight: 600; font-size: 1.2rem; line-height: 1.2; margin-top: 3px; }
.day .tag { display: inline-block; font-size: .65rem; letter-spacing: .1em; padding: 1px 7px; border-radius: 99px; background: color-mix(in srgb, var(--sun) 12%, transparent); color: var(--sun); margin-left: 6px; vertical-align: 1px; }
.p-empty { margin: 28px 0 0; padding: 22px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 4%, transparent); color: var(--muted); text-align: center; clear: both; }
.p-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 34px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.p-nav button { border: 0; background: none; cursor: pointer; padding: 6px 0; color: var(--muted); font-size: .85rem; text-align: left; }
.p-nav button:last-child { text-align: right; }
.p-nav button b { display: block; color: var(--ink); font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.p-nav button:hover b { color: var(--sun); }

/* Question d'entrée */
.gate { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--sea) 60%, transparent) 20%, color-mix(in srgb, var(--sea) 20%, transparent)); transition: opacity .9s var(--ease); }
.gate.leaving { opacity: 0; pointer-events: none; }
.gate-card { width: min(520px, 100%); text-align: center; transition: transform .9s var(--ease); }
.gate.leaving .gate-card { transform: translateY(-24px); }
.gate-card h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, 4.6vw, 2.6rem); line-height: 1.12; margin: 14px 0 34px; letter-spacing: -.03em; }
.gate-field { display: flex; align-items: center; gap: 8px; border-bottom: 1.5px solid var(--route); max-width: 380px; margin: 0 auto; transition: border-color .3s; }
.gate-field input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 12px 4px; font: 500 1.25rem var(--display); color: var(--ink); text-align: center; outline: 0; }
.gate-field input::placeholder { color: color-mix(in srgb, var(--ink) 35%, transparent); }
.gate-field button { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--route); color: var(--land); cursor: pointer; display: grid; place-items: center; transition: transform .25s var(--ease), background .25s; }
.gate-field button:hover { transform: translateX(3px); }
.gate-msg { min-height: 3em; margin: 18px 0 0; color: var(--muted); }
.gate.wrong .gate-field { border-color: var(--sun); animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.gate-stamp { font-size: 2.4rem; line-height: 1; margin: 0 0 10px; display: inline-block; transform: rotate(-8deg); }
.gate.wrong .gate-stamp { animation: wobble .5s; }
@keyframes wobble { 30% { transform: rotate(-22deg) scale(1.15); } 65% { transform: rotate(10deg); } }
.gate-lead { margin: 10px 0 0; color: var(--muted); }
.gate-count { min-height: 1.2em; margin: 22px 0 0; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sun); }
.gate-card h2#gateQ { margin-top: 6px; }
.gate-card h2.swap { animation: swapq .45s var(--ease); }
@keyframes swapq { from { opacity: 0; transform: translateY(10px) rotate(-1deg); } }
.gate-other { margin-top: 4px; border: 1px dashed color-mix(in srgb, var(--ink) 30%, transparent); background: transparent; color: var(--ink);
  font: 500 .95rem var(--sans); padding: 10px 18px; border-radius: 999px; cursor: pointer; transition: background .25s, transform .25s var(--ease); }
.gate-other:hover { background: color-mix(in srgb, var(--land) 70%, transparent); transform: rotate(-2deg); }
@media (prefers-reduced-motion: reduce) { .gate-card h2.swap, .gate.wrong .gate-stamp { animation: none; } }

/* Écrans moyens : la légende laisse la place au dock */
@media (max-width: 1080px) { .m-legend { display: none; } }

/* Mobile */
@media (max-width: 720px) {
  .m-top { padding: max(16px, env(safe-area-inset-top)) 18px 32px; }
  .m-sub { display: none; }
  .m-sky { margin-top: 8px; font-size: .75rem; }
  .sky-txt { display: none; }
  .leaflet-control-zoom { display: none; }
  .m-dock { bottom: max(12px, env(safe-area-inset-bottom)); width: calc(100vw - 24px); padding: 12px 14px 10px; border-radius: 20px; }
  .dock-now strong { font-size: 1.05rem; }
  .dock-km strong { font-size: 1.25rem; }
  .km-lbl { display: none; }
  .dock-now small { letter-spacing: .1em; }
  .dock-tip { width: min(250px, 100%); }
  .m-panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 72vh; border-radius: 24px 24px 0 0;
    padding: 30px 22px max(28px, env(safe-area-inset-bottom)); transform: translateY(105%); }
  .m-handle { display: block; position: absolute; top: 10px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 18%, transparent); }
  .p-name { font-size: 2rem; }
  .p-stamp { width: 80px; height: 80px; margin-top: 20px; }
}
/* Très petits téléphones */
@media (max-width: 360px) {
  .m-top { padding-left: 14px; padding-right: 14px; gap: 10px; }
  .m-brand h1 { font-size: 1.3rem; }
  .m-nav { gap: 2px; }
  .m-nav a { padding: 6px 9px; font-size: .85rem; }
  .m-icon { width: 31px; height: 31px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}