.mm-plan { display: grid; gap: 1.4rem; }
.mm-plan-regle { margin: 0; padding: 1rem 1.2rem; background: var(--wp--preset--color--dore-pale); border-left: 4px solid var(--wp--preset--color--accent); border-radius: 6px; }

.mm-plan-cadre { display: grid; gap: 1.2rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1100px) { .mm-plan-cadre { grid-template-columns: minmax(0, 2.2fr) minmax(260px, 1fr); } }
.mm-plan-svg { background: var(--wp--preset--color--brume); border: 1px solid var(--wp--preset--color--trait); border-radius: 12px; padding: .6rem; }
.mm-plan-svg svg { display: block; width: 100%; height: auto; cursor: grab; touch-action: pan-y; user-select: none; }
.mm-plan-svg.zoome svg { touch-action: none; }
.mm-plan-attente { color: var(--wp--preset--color--gris); margin: 1rem; }

/* --k = 1 / zoom : les textes et marqueurs gardent la même taille à l'écran ; --l adoucit l'épaisseur des traits */
.mm-plan-svg svg { --k: 1; --l: 1; }
.mm-plan-svg .contour { fill: var(--wp--preset--color--dore-pale); stroke: var(--wp--preset--color--sauge); stroke-width: calc(3px * var(--k)); stroke-linejoin: round; }
.mm-plan-svg .ligne { fill: none; stroke-width: calc(12px * var(--l)); stroke-linecap: round; stroke-linejoin: round; }
.mm-plan-svg .ville { fill: var(--wp--preset--color--gris); }
.mm-plan-svg .zone-clic { fill: transparent; stroke: none; }
.mm-plan-svg .zone-clic-ligne { fill: none; stroke: transparent; stroke-width: calc(44px * var(--k)); stroke-linecap: round; }

.mm-plan-svg .ligne.meuse, .mm-plan-pastille.meuse { stroke: #FEDC53; background: #FEDC53; }
.mm-plan-svg .ligne.sambre, .mm-plan-pastille.sambre { stroke: #D9822B; background: #D9822B; }
.mm-plan-svg .ligne.ourthe, .mm-plan-pastille.ourthe { stroke: #8FB06B; background: #8FB06B; }
.mm-plan-svg .ligne.ambleve, .mm-plan-pastille.ambleve { stroke: #7FB8C9; background: #7FB8C9; }
.mm-plan-svg .ligne.lesse, .mm-plan-pastille.lesse { stroke: #C99BD0; background: #C99BD0; }
.mm-plan-svg .ligne.semois, .mm-plan-pastille.semois { stroke: #D9574A; background: #D9574A; }
.mm-plan-svg .ligne.escaut, .mm-plan-pastille.escaut { stroke: #5FB7A6; background: #5FB7A6; }
.mm-plan-svg .ligne.dendre, .mm-plan-pastille.dendre { stroke: #D98FB5; background: #D98FB5; }

.mm-plan-svg .voie, .mm-plan-svg .autre, .mm-plan-svg .plan-eau, .mm-plan-svg .station { cursor: pointer; outline: none; }
.mm-plan-svg .voie:hover .ligne, .mm-plan-svg .voie.actif .ligne { stroke-width: calc(20px * var(--l)); }
.mm-plan-svg .trait-autre { fill: none; stroke: #7FA3B8; stroke-width: calc(7px * var(--l)); stroke-dasharray: calc(18px * var(--l)) calc(14px * var(--l)); stroke-linecap: round; }
.mm-plan-svg .autre:hover .trait-autre, .mm-plan-svg .autre.actif .trait-autre { stroke: #BFE0F0; stroke-width: calc(11px * var(--l)); }

.mm-plan-svg .etiquette { font-size: calc(34px * var(--k)); paint-order: stroke; stroke: var(--wp--preset--color--dore-pale); stroke-width: calc(8px * var(--k)); pointer-events: none; }
.mm-plan-svg .nom-ville { fill: var(--wp--preset--color--gris); }
.mm-plan-svg .nom-village { fill: var(--wp--preset--color--gris); }
.mm-plan-svg .nom-voie { fill: var(--wp--preset--color--blanc); font-weight: 700; }
.mm-plan-svg .nom-autre { fill: #9CC0D4; font-style: italic; }
.mm-plan-svg .nom-eau { fill: #9CCBEA; }
.mm-plan-svg .nom-station { fill: var(--wp--preset--color--blanc); }
.mm-plan-svg .station.maison .nom-station { fill: var(--wp--preset--color--jaune); }
.mm-plan-svg .niveau { fill: var(--wp--preset--color--accent); font-weight: 700; }
.mm-plan-svg .station.hausse .niveau { fill: #F0A24B; }
.mm-plan-svg .station.baisse .niveau { fill: var(--wp--preset--color--olive-clair); }

.mm-plan-svg .point-eau { fill: #4F9BD0; stroke: var(--wp--preset--color--blanc); stroke-width: calc(5px * var(--k)); }
.mm-plan-svg .plan-eau:hover .point-eau, .mm-plan-svg .plan-eau:focus .point-eau, .mm-plan-svg .plan-eau.actif .point-eau { fill: var(--wp--preset--color--jaune); }
.mm-plan-svg .point { fill: var(--wp--preset--color--fond); stroke: var(--wp--preset--color--blanc); stroke-width: calc(6px * var(--k)); }
.mm-plan-svg .anneau { fill: none; stroke: var(--wp--preset--color--jaune); stroke-width: calc(4px * var(--k)); stroke-dasharray: calc(6px * var(--k)) calc(8px * var(--k)); }
.mm-plan-svg .station:hover .point, .mm-plan-svg .station:focus .point, .mm-plan-svg .station.actif .point { fill: var(--wp--preset--color--jaune); }

.mm-plan-outils { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; padding: .3rem .4rem .7rem; font-size: .875rem; }
.mm-plan-zoom { margin-left: auto; display: flex; gap: .3rem; }
.mm-plan-zoom button { font: inherit; font-size: 1.1rem; line-height: 1; width: 2.2rem; height: 2.2rem; cursor: pointer; color: var(--wp--preset--color--blanc); background: var(--wp--preset--color--fond); border: 1px solid var(--wp--preset--color--sauge); border-radius: 6px; }
.mm-plan-zoom button:hover { border-color: var(--wp--preset--color--accent); }
.mm-plan-aide { margin: .5rem .4rem 0; font-size: .8125rem; color: var(--wp--preset--color--gris); }

.mm-plan-fiche { background: var(--wp--preset--color--brume); border: 1px solid var(--wp--preset--color--sauge); border-radius: 12px; padding: 1.1rem 1.2rem; }
.mm-plan-fiche h3 { margin: 0 0 .3rem; font-size: 1.4rem; }
.mm-plan-fiche-ligne { margin: 0 0 .8rem; font-size: .9rem; color: var(--wp--preset--color--gris); }
.mm-plan-fiche .mm-riv-valeur { margin: 0; font-size: 2.2rem; line-height: 1.1; color: var(--wp--preset--color--accent); }
.mm-plan-fiche .mm-riv-valeur small { font-size: .9rem; color: var(--wp--preset--color--gris); }
.mm-plan-fiche .mm-riv-tendance { margin: .2rem 0 .6rem; font-size: .95rem; }
.mm-plan-fiche .mm-riv-tendance.hausse { color: #F0A24B; }
.mm-plan-fiche .mm-riv-tendance.baisse { color: var(--wp--preset--color--olive-clair); }
.mm-plan-fiche .mm-riv-debit { margin: 0 0 .6rem; font-size: .95rem; }
.mm-plan-fiche .mm-riv-graphique { width: 100%; height: 70px; display: block; }
.mm-plan-fiche .mm-riv-graphique path { fill: none; stroke: var(--wp--preset--color--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.mm-plan-fiche .mm-riv-graphique .zone { fill: var(--wp--preset--color--accent); fill-opacity: .12; stroke: none; }
.mm-plan-fiche .mm-riv-heure { margin: .4rem 0 0; font-size: .75rem; color: var(--wp--preset--color--gris); }
.mm-plan-fiche .mm-riv-attente { color: var(--wp--preset--color--gris); margin: 0; }
.mm-plan-fiche .mm-riv-attente + .mm-riv-attente { margin-top: .6rem; }
.mm-plan-lignes { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.mm-plan-ligne { margin: 0; font-size: .95rem; }
.mm-plan-pastille { display: inline-block; width: 1.6rem; height: .5rem; border-radius: 4px; margin-right: .5rem; vertical-align: middle; }
.mm-plan-autres, .mm-plan-avertissement { margin: 0; font-size: .875rem; color: var(--wp--preset--color--gris); }