.app-container {
    max-width: 1280px; margin: 0 auto; padding: 2rem 1.5rem;
    display: flex; flex-direction: column; gap: 1.5rem;
}

.hidden { display: none !important; }

/* ---------- Mode tabs (Météorites / Bulles roses) ---------- */
.mm-mode-tabs {
    display: flex; gap: .6rem; background: rgba(0,0,0,.2);
    border-radius: 16px; padding: .4rem; align-self: flex-start;
}
.mm-mode-btn {
    display: flex; align-items: center; gap: .5rem;
    padding: .65rem 1.1rem; border-radius: 12px; border: none;
    background: transparent; color: var(--text-muted);
    font-family: var(--font-heading); font-weight: 700; font-size: .9rem;
    cursor: pointer; transition: all .18s ease;
}
.mm-mode-btn:hover { color: var(--text-main); }
.mm-mode-btn.active {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: var(--bg-darker); box-shadow: 0 4px 14px rgba(0,242,254,.3);
}
@media (max-width: 560px) {
    .mm-mode-tabs { align-self: stretch; }
    .mm-mode-btn { flex: 1 1 auto; justify-content: center; font-size: .8rem; padding: .6rem .5rem; }
}

/* ---------- Layout ---------- */
.mm-main {
    display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 1.5rem; align-items: start;
}
@media (max-width: 900px) {
    .mm-main { grid-template-columns: 1fr; }
}

.card {
    background: var(--bg-card); backdrop-filter: blur(12px);
    border: 1px solid var(--border-color); border-radius: 20px;
    padding: 1.3rem; box-shadow: var(--shadow-md);
}
.card h2 {
    font-family: var(--font-heading); font-size: .95rem; font-weight: 700;
    color: var(--text-highlight); display: flex; align-items: center; gap: .5rem;
    margin-bottom: 1rem;
}
.card h2 i { color: var(--primary); }

.mm-map-card { display: flex; flex-direction: column; gap: 1rem; position: relative; }

/* ---------- Zone tabs ---------- */
.mm-zone-tabs { display: flex; gap: .5rem; flex-wrap: wrap; }
.mm-zone-btn {
    flex: 1 1 auto; min-width: 130px; display: flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .6rem .8rem; border-radius: 10px; border: 1px solid var(--border-color);
    background: rgba(255,255,255,.03); color: var(--text-muted);
    font-family: var(--font-body); font-weight: 600; font-size: .82rem; cursor: pointer;
    transition: all .15s ease;
}
.mm-zone-btn:hover { border-color: var(--border-color-active); color: var(--text-main); }
.mm-zone-btn.active {
    background: rgba(0,242,254,.12); border-color: var(--border-color-active); color: var(--primary);
}

.mm-hint { color: var(--text-muted); font-size: .82rem; margin: 0; }

/* ---------- Map canvas ---------- */
/* Le conteneur épouse la taille réelle de l'image (les points sont
   positionnés en % de ce conteneur) et l'image est plafonnée à la hauteur
   de l'écran : une carte en portrait (Forêt, Champ de fleurs) ne doit pas
   obliger à scroller pour la voir en entier. */
.mm-canvas-wrap {
    position: relative; width: fit-content; max-width: 100%; margin: 0 auto;
    border-radius: 14px; overflow: hidden;
    background: #05202f; line-height: 0;
}
.mm-canvas-wrap img {
    display: block; width: auto; height: auto; max-width: 100%;
    max-height: max(380px, calc(100vh - 240px)); user-select: none;
}
.mm-points { position: absolute; inset: 0; }

.mm-point {
    position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px;
    border-radius: 50%; border: 2px solid rgba(255,255,255,.65);
    background: rgba(255,255,255,.14); cursor: pointer; padding: 0;
    box-shadow: 0 0 0 3px rgba(0,0,0,.15);
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.mm-point:hover { transform: scale(1.18); border-color: #fff; background: rgba(255,255,255,.3); }
.mm-point:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.mm-point.filled { border-color: rgba(20,25,35,.55); box-shadow: 0 0 0 3px rgba(0,0,0,.25), 0 0 10px rgba(0,0,0,.35); }
.mm-point.filled:hover { transform: scale(1.1); }

/* Bubble mode: shown on the FULL island map (54 real spots), so points
   are scaled down to half the normal marker size to keep the map
   readable and clicks precise despite the density.
   (named mm-point-bubble, NOT "bubble" — that class already exists
   globally in shared.css for the animated floating ocean decor, and
   colliding with it made these markers float up and away). */
.mm-point-bubble {
    width: 12px; height: 12px; margin: -6px 0 0 -6px;
    border-width: 1px; box-shadow: 0 0 0 1.5px rgba(0,0,0,.15);
}
.mm-point-bubble.filled {
    background: radial-gradient(circle at 32% 30%, #ffd6ec, #ff6fb5 70%);
    border-color: rgba(255,255,255,.85);
    box-shadow: 0 0 0 1.5px rgba(255,111,181,.25), 0 0 8px rgba(255,111,181,.65);
}

/* ---------- Point popover (color menu) ---------- */
.mm-popover {
    position: absolute; z-index: 20; background: var(--bg-dark);
    border: 1px solid var(--border-color-active); border-radius: 14px;
    padding: .8rem; box-shadow: var(--shadow-lg); width: 168px;
}
.mm-popover-title { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .6rem; font-weight: 700; }
.mm-popover-swatches { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .7rem; }
.mm-swatch-btn {
    width: 30px; height: 30px; border-radius: 50%; padding: 0;
    border: 2px solid rgba(255,255,255,.25); cursor: pointer; transition: transform .12s, border-color .12s;
}
.mm-swatch-btn:hover { transform: scale(1.15); border-color: rgba(255,255,255,.7); }
.mm-swatch-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.mm-popover-clear {
    width: 100%; padding: .45rem; border-radius: 8px; border: 1px solid rgba(255,23,68,.25);
    background: rgba(255,23,68,.08); color: var(--danger); font-size: .76rem; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.mm-popover-clear:hover { background: var(--danger); color: #fff; }

/* ---------- Side panel ---------- */
.mm-side { display: flex; flex-direction: column; gap: 1.2rem; }
.mm-field { margin-bottom: 1rem; }
.mm-field label { display: block; font-size: .78rem; color: var(--text-muted); margin-bottom: .35rem; font-weight: 600; }
.mm-field input[type="date"] {
    width: 100%; font-family: var(--font-body); font-size: .85rem; padding: .55rem .7rem;
    border-radius: 8px; border: 1px solid var(--border-color); background: rgba(255,255,255,.03); color: var(--text-main);
}
.mm-week-label { margin-top: .4rem; font-size: .76rem; color: var(--primary); font-weight: 600; }

.mm-legend { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.1rem; }
.mm-legend-row { display: flex; align-items: center; gap: .55rem; font-size: .8rem; color: var(--text-muted); }
.mm-legend-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.3); flex-shrink: 0; }

.mm-actions { display: flex; flex-direction: column; gap: .6rem; }
.mm-actions .btn { width: 100%; justify-content: center; }

.mm-help-card ol { padding-left: 1.1rem; display: flex; flex-direction: column; gap: .55rem; }
.mm-help-card li { font-size: .82rem; color: var(--text-muted); line-height: 1.4; }
.mm-help-card b { color: var(--text-main); }