/* ============================================================
   The Pulse - Carte interactive de l'écosystème (page /map et
   widget compact PulseMap). Tout est piloté par les variables de
   base.css : aucune couleur en dur en dehors des blancs de trait.
   ============================================================ */

.pulse-map-page {
    max-width: 1600px;
    margin: 0 auto;
    font-family: var(--font-body);
    color: var(--text-primary);
}

/* ---------- En-tête : titre + KPI ---------- */
.pm-header {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 1.25rem;
}
.pm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.5rem;
}
.pm-title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(1.9rem, 2.8vw, 2.6rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    margin: 0 0 0.5rem;
    color: var(--text-primary);
}
.pm-subtitle {
    color: var(--text-secondary);
    font-size: 0.98rem;
    margin: 0;
    max-width: 62ch;
}

.pm-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}
.pm-kpi {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
@media (hover: hover) {
    .pm-kpi:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px var(--shadow-color);
    }
}
.pm-kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.pm-kpi-icon.accent { background: var(--accent-subtle); color: var(--accent); }
.pm-kpi-icon.secondary,
.pm-kpi-icon.info { background: var(--secondary-subtle); color: var(--secondary); }
.pm-kpi-icon.tertiary { background: var(--tertiary-subtle); color: var(--tertiary); }
.pm-kpi-body { min-width: 0; }
.pm-kpi-value {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.pm-kpi-label {
    font-size: 0.72rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ---------- Squelettes de chargement ---------- */
.pm-skel {
    display: inline-block;
    min-width: 3.5em;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-card-hover) 50%, var(--bg-surface) 75%);
    background-size: 200% 100%;
    animation: pmShimmer 1.4s ease infinite;
    color: transparent !important;
    user-select: none;
}
@keyframes pmShimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* ---------- Barre de contrôles ---------- */
.pm-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 14px;
    padding: 0.7rem 0.9rem;
    margin-bottom: 1rem;
}
.pm-seg {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
}
.pm-seg-btn {
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.pm-seg-btn:hover { color: var(--text-primary); }
.pm-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pm-seg-btn[aria-pressed="true"] {
    background: var(--bg-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}
.pm-seg-btn:disabled { opacity: 0.6; cursor: progress; }
.pm-seg-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.pm-seg-dot.funding { background: var(--secondary); }
.pm-seg-dot.founders { background: var(--tertiary); }

.pm-field {
    position: relative;
    min-width: 200px;
    margin: 0;
}
.pm-field > i {
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-muted);
    font-size: 0.72rem;
}
.pm-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    padding: 0.5rem 2.2rem 0.5rem 0.8rem;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color var(--transition-fast);
}
.pm-select:hover { border-color: var(--border-hover); }
.pm-select:focus { outline: 2px solid var(--accent-glow); outline-offset: 1px; border-color: var(--accent); }
.pm-select:disabled { opacity: 0.6; cursor: progress; }

.pm-reset {
    border: 1px solid var(--border-primary);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 10px;
    padding: 0.5rem 0.85rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.pm-reset:hover { color: var(--text-primary); border-color: var(--border-hover); background: var(--bg-surface); }
.pm-reset:disabled { opacity: 0.6; cursor: progress; }

.pm-note {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.pm-note[hidden] { display: none; }

/* ---------- Disposition : classement + scène carte ---------- */
.pm-body {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    grid-template-areas: "rail stage";
    gap: 1rem;
    align-items: stretch;
}
.pm-stage {
    grid-area: stage;
    position: relative;
    isolation: isolate;
    height: calc(100vh - 240px);
    min-height: 520px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-primary);
    background: var(--bg-card);
}
.pm-map {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Classement des villes */
.pm-rail {
    grid-area: rail;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 14px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}
.pm-rail-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.pm-rail-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}
.pm-rail-metric {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-top: 0.15rem;
}
.pm-rail-toggle {
    display: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--border-primary);
    background: var(--bg-surface);
    color: var(--text-secondary);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}
.pm-rail.is-open .pm-rail-toggle i { transform: rotate(180deg); }
.pm-rank {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    overflow-y: auto;
    min-height: 0;
}
.pm-rank-item {
    width: 100%;
    display: grid;
    grid-template-columns: 1.4rem minmax(0, 1fr);
    gap: 0.5rem;
    align-items: center;
    padding: 0.45rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.pm-rank-item:hover { background: var(--bg-surface); }
.pm-rank-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pm-rank-item.is-active { background: var(--accent-subtle); border-color: var(--accent); }
.pm-rank-n {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
}
.pm-rank-body { min-width: 0; }
.pm-rank-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}
.pm-rank-name {
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pm-rank-value {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 0.8rem;
}
.pm-rank-bar {
    display: block;
    height: 6px;
    border-radius: 4px;
    background: var(--bg-surface);
    overflow: hidden;
}
.pm-rank-bar > span {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--accent);
    transition: width var(--transition-smooth);
}
.pm-rank-empty {
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 0.5rem;
}

/* ---------- Légende ---------- */
.pm-legend {
    position: absolute;
    left: 12px;
    bottom: 28px;
    z-index: 800;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 0.65rem 0.8rem;
    box-shadow: var(--shadow-md);
    font-size: 0.75rem;
    color: var(--text-secondary);
    max-width: 230px;
}
.pm-legend[hidden] { display: none; }
.pm-legend-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}
.pm-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pm-legend svg { display: block; overflow: visible; }
.pm-legend svg circle { fill-opacity: 0.16; stroke-width: 1; }
.pm-legend svg line { stroke: var(--border-hover); stroke-dasharray: 2 2; }
.pm-legend svg text { fill: var(--text-secondary); font-size: 10px; font-family: var(--font-body); }
.pm-legend-hint { margin-top: 0.4rem; color: var(--text-muted); font-size: 0.7rem; line-height: 1.35; }
.pm-legend-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.45rem;
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.75rem;
}
.pm-legend-link:hover { color: var(--accent-hover); text-decoration: underline; }

/* ---------- Chargement / erreur ---------- */
.pm-loading {
    position: absolute;
    inset: 0;
    z-index: 850;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.pm-loading[hidden] { display: none; }
.pm-loading-map {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-card-hover) 50%, var(--bg-surface) 75%);
    background-size: 200% 100%;
    animation: pmShimmer 1.6s ease infinite;
    opacity: 0.9;
}
.pm-loading-text {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
}
.pm-loading-soft {
    background: transparent;
    pointer-events: none;
    justify-content: flex-start;
    padding-top: 12px;
}
.pm-loading-soft .pm-loading-map { display: none; }
.pm-loading-error { color: var(--danger); border-color: var(--danger); pointer-events: auto; }
.pm-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--border-primary);
    border-top-color: var(--accent);
    animation: pmSpin 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes pmSpin { to { transform: rotate(360deg); } }
.pm-retry {
    border: 1px solid var(--border-primary);
    background: var(--bg-surface);
    color: var(--text-primary);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    margin-left: 0.25rem;
}
.pm-retry:hover { border-color: var(--border-hover); }

/* ---------- Panneau latéral (détail ville) ---------- */
.pm-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 360px;
    max-width: 100%;
    z-index: 900;
    background: var(--bg-card);
    border-left: 1px solid var(--border-primary);
    box-shadow: -12px 0 32px var(--shadow-color);
    transform: translateX(105%);
    transition: transform var(--transition-base), visibility var(--transition-base);
    display: flex;
    flex-direction: column;
    visibility: hidden;
}
.pm-panel.is-open { transform: none; visibility: visible; }
.pm-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.1rem 1.1rem 0.9rem;
    border-bottom: 1px solid var(--border-primary);
}
.pm-panel-eyebrow {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 600;
}
.pm-panel-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0.15rem 0 0.5rem;
    color: var(--text-primary);
}
.pm-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
}
.pm-chip small { color: var(--text-muted); font-weight: 500; font-size: 0.7rem; }
.pm-chip-region { background: var(--accent-subtle); border-color: transparent; color: var(--accent); }
.pm-panel-close {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--border-primary);
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.pm-panel-close:hover { color: var(--text-primary); border-color: var(--border-hover); }
.pm-panel-body {
    padding: 1rem 1.1rem 1.25rem;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.pm-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}
.pm-tile {
    background: var(--bg-surface);
    border: 1px solid var(--border-primary);
    border-left-width: 3px;
    border-left-color: var(--border-hover);
    border-radius: 12px;
    padding: 0.7rem 0.8rem;
    min-width: 0;
}
.pm-tile.accent { border-left-color: var(--accent); }
.pm-tile.secondary { border-left-color: var(--secondary); }
.pm-tile.tertiary { border-left-color: var(--tertiary); }
.pm-tile-value {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.2;
    color: var(--text-primary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.pm-tile-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}
.pm-section-title {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0 0 0.55rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-primary);
}
.pm-section-title i { color: var(--text-muted); font-size: 0.8rem; }
.pm-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pm-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.pm-list a {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
    padding: 0.45rem 0.5rem;
    border-radius: 10px;
    border: 1px solid transparent;
    color: inherit;
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.pm-list a:hover { background: var(--bg-surface); border-color: var(--border-primary); }
.pm-logo {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: #ffffff;
    border: 1px solid var(--border-primary);
    object-fit: contain;
    padding: 3px;
}
.pm-logo-fallback {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--accent-subtle);
    color: var(--accent);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pm-list-text { min-width: 0; display: flex; flex-direction: column; }
.pm-list-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pm-list-sub {
    font-size: 0.74rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pm-list-amount {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--secondary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.pm-list-na { color: var(--text-muted); font-weight: 500; }
.pm-empty { color: var(--text-muted); font-size: 0.85rem; margin: 0; }
.pm-panel-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    background: var(--accent);
    color: #05261B;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background var(--transition-fast), transform var(--transition-fast);
}
.pm-panel-cta:hover { background: var(--accent-hover); color: #05261B; transform: translateY(-1px); }

/* ---------- Surcharges Leaflet (thème) ---------- */
.pulse-map-leaflet .leaflet-container {
    background: var(--bg-surface);
    font-family: var(--font-body);
}
.pulse-map-leaflet .leaflet-bar {
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-sm);
    border-radius: 10px;
    overflow: hidden;
}
.pulse-map-leaflet .leaflet-bar a {
    background: var(--bg-card);
    color: var(--text-primary);
    border-bottom-color: var(--border-primary);
}
.pulse-map-leaflet .leaflet-bar a:hover { background: var(--bg-surface); }
.pulse-map-leaflet .leaflet-bar a.leaflet-disabled { color: var(--text-muted); background: var(--bg-card); }
.pulse-map-leaflet .leaflet-control-attribution {
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 10px;
    border-radius: 8px 0 0 0;
    padding: 2px 6px;
}
.pulse-map-leaflet .leaflet-control-attribution a { color: var(--text-secondary); }
.leaflet-tooltip.pm-tip {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    padding: 0.5rem 0.7rem;
    font-family: var(--font-body);
    line-height: 1.3;
}
.leaflet-tooltip-top.pm-tip::before { border-top-color: var(--border-primary); }
.leaflet-tooltip-bottom.pm-tip::before { border-bottom-color: var(--border-primary); }
.leaflet-tooltip-left.pm-tip::before { border-left-color: var(--border-primary); }
.leaflet-tooltip-right.pm-tip::before { border-right-color: var(--border-primary); }
.pm-tip-city { font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; }
.pm-tip-value { font-size: 0.82rem; color: var(--text-primary); font-weight: 600; margin-top: 0.1rem; }
.pm-tip-sub { font-size: 0.75rem; color: var(--text-secondary); }
.pm-tip-hint { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.25rem; }
.leaflet-marker-icon.pm-city-label {
    background: none !important;
    border: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: visible;
}
.pm-city-label span {
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-primary);
    text-shadow: 0 0 3px var(--bg-primary), 0 0 6px var(--bg-primary), 0 1px 2px var(--bg-primary);
    pointer-events: none;
}

/* ---------- Mode compact (widget page d'accueil) ---------- */
.pm-compact {
    position: relative;
    isolation: isolate;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-primary);
    background: var(--bg-card);
    min-height: 260px;
}
.pm-compact .pm-legend {
    padding: 0.5rem 0.65rem;
    max-width: 200px;
    bottom: 22px;
    font-size: 0.72rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
    /* Title and KPI strip stack: four tiles side by side need the full width */
    .pm-header { grid-template-columns: 1fr; gap: 1rem; }
    .pm-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pm-kpi-value { font-size: 1.2rem; }
    .pm-kpi-label { font-size: 0.66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 1199.98px) {
    .pm-body { grid-template-columns: 240px minmax(0, 1fr); }
}
@media (max-width: 991.98px) {
    .pm-header { grid-template-columns: 1fr; gap: 1rem; }
    .pm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pm-controls { flex-direction: column; align-items: stretch; }
    .pm-seg { width: 100%; }
    .pm-seg-btn { flex: 1; justify-content: center; }
    .pm-field { min-width: 0; width: 100%; }
    .pm-note { margin-left: 0; }
    .pm-body { grid-template-columns: 1fr; grid-template-areas: "stage" "rail"; }
    .pm-stage { height: 64vh; min-height: 420px; }
    .pm-rail-toggle { display: inline-flex; }
    .pm-rail .pm-rank { display: none; }
    .pm-rail.is-open .pm-rank { display: flex; }
    .pm-rail-head { margin-bottom: 0; }
    .pm-rail.is-open .pm-rail-head { margin-bottom: 0.75rem; }
    .pm-panel {
        top: auto;
        left: 0;
        right: 0;
        width: 100%;
        height: 72%;
        border-left: 0;
        border-top: 1px solid var(--border-primary);
        border-radius: 16px 16px 0 0;
        transform: translateY(105%);
        box-shadow: 0 -12px 32px var(--shadow-color);
    }
    .pm-panel.is-open { transform: none; }
    .pm-panel::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: var(--border-hover);
        transform: translateX(-50%);
    }
    .pm-panel-head { padding-top: 1.35rem; }
    .pm-legend { bottom: 22px; max-width: 180px; font-size: 0.7rem; }
}
@media (max-width: 575.98px) {
    .pm-kpis { gap: 0.5rem; }
    .pm-kpi { padding: 0.7rem 0.8rem; gap: 0.6rem; }
    .pm-kpi-icon { display: none; }
    .pm-kpi-value { font-size: 1.15rem; }
    .pm-stage { min-height: 380px; border-radius: 12px; }
    .pm-legend svg { display: none; }
    .pm-tiles { gap: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .pm-panel, .pm-rank-bar > span, .pm-kpi, .pm-panel-cta { transition: none; }
    .pm-skel, .pm-loading-map, .pm-spinner { animation: none; }
}

/* ---------- 3D globe view ---------- */
.pm-globe { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 50% 55%, rgba(242,106,33,0.14), transparent 62%), linear-gradient(180deg, #1B1B1F, #0F0F12); cursor: grab; overflow: hidden; }
[data-theme="dark"] .pm-globe { background: radial-gradient(ellipse at 50% 55%, rgba(242,106,33,0.16), transparent 62%), linear-gradient(180deg, #131315, #0E0E10); }
.pm-globe:active { cursor: grabbing; }
.pm-view-seg { margin-left: auto; }
.pg-tip { font-family: var(--font-body); background: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-primary);
    border-radius: 10px; padding: 0.45rem 0.7rem; font-size: 0.78rem; box-shadow: 0 8px 24px var(--shadow-color); display: flex; flex-direction: column; gap: 0.15rem; }
.pg-tip strong { font-size: 0.86rem; } .pg-tip span { color: var(--text-secondary); }
@media (max-width: 991.98px) { .pm-view-seg { margin-left: 0; } }