.mm-wrap { max-width: 960px; margin: 0 auto; font-family: inherit; }

.mm-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mm-days { display: flex; flex-wrap: wrap; gap: 4px; overflow-x: auto; }
.mm-day-btn { border: 1px solid #ccc; background: #fff; border-radius: 6px; padding: 4px 10px; font-size: 13px; cursor: pointer; }
.mm-day-btn.is-active { background: #1f5fa8; color: #fff; border-color: #1f5fa8; }
.mm-periods { display: flex; gap: 4px; }
.mm-period-btn { border: 1px solid #ccc; background: #fff; border-radius: 6px; padding: 4px 12px; font-size: 13px; cursor: pointer; }
.mm-period-btn.is-active { background: #f5a623; color: #fff; border-color: #f5a623; }

.mm-map { width: 100%; height: 520px; border-radius: 8px; }
.mm-map .leaflet-control-attribution a[href*="leaflet"] { display: none; }
/* Corrige les fines lignes entre tuiles OSM (arrondi sous-pixel du
   navigateur) en forçant un compositing GPU sur chaque tuile, sans
   toucher à leur taille/alignement (contrairement à un scale/margin par
   tuile, qui désaligne la grille au fil des lignes/colonnes). */
.mm-map .leaflet-tile { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); }
.mm-icon { display: flex; align-items: center; justify-content: center; background: transparent; border: none; pointer-events: none; }
.mm-badge { display: flex; flex-direction: column; align-items: center; gap: 1px; background: #fff; border: 2px solid #fff; border-radius: 14px; padding: 4px 8px; box-shadow: 0 3px 10px rgba(0,0,0,.3); font-weight: 700; font-size: 13px; white-space: nowrap; cursor: pointer; pointer-events: auto; transition: transform .12s ease; line-height: 1.1; }
.mm-badge:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(0,0,0,.4); z-index: 10000; }
.mm-badge .mm-badge-top { display: flex; align-items: center; gap: 4px; }
.mm-badge .mm-emoji { font-size: 17px; line-height: 1; }
.mm-badge .mm-city-name { font-weight: 600; font-size: 10px; color: #555; }
.mm-loading { text-align: center; padding: 20px; color: #777; }

.mm-popup { font-size: 13px; text-align: center; }
.mm-popup strong { display: block; font-size: 15px; margin-bottom: 2px; }
.mm-popup .mm-popup-period { color: #777; font-size: 11px; margin-top: 2px; }
.mm-popup .mm-popup-details { display: flex; gap: 10px; justify-content: center; margin-top: 4px; font-size: 12px; color: #555; }

.mm-months table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.mm-months th { background: #1f5fa8; color: #fff; padding: 8px; text-align: left; }
.mm-months td { padding: 8px; border-bottom: 1px solid #eee; }
.mm-stars { color: #f5a623; letter-spacing: 1px; }
.mm-stars .off { color: #ddd; }

.mm-cities { margin-top: 16px; }
.mm-cities ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; list-style: none; padding: 0; }
.mm-cities a { text-decoration: none; color: #1f5fa8; font-weight: 600; }
.mm-cities a:hover { text-decoration: underline; }

.mm-footer-version { font-size: 11px; color: #999; text-align: right; margin-top: 8px; }