/* Scène « L’existant migre » — Intégration. À plat : traits, aplats, aucune ombre colorée. Classes préfixées mg-. */
.mg-src, .mg-ctrl, .mg-dest, .mg-barre, .mg-repere, .mg-sage, .mg-comp, .mg-case, .mg-puce, .mg-tag, .mg-compte { position: absolute; left: 0; top: 0; }
.mg-src, .mg-ctrl, .mg-dest, .mg-compte { opacity: 0; }
.mg-src, .mg-dest { will-change: transform, opacity; }

/* Les sources : des fichiers d’avant, dessinés au trait. Le groupe .mg-plein (les aplats) s’efface quand elles se vident. */
.mg-src svg { display: block; overflow: visible; }
.mg-src .f { fill: var(--bg-doux); }
.mg-src .f2 { fill: var(--line); }
.mg-src .c, .mg-src .t, .mg-src .t2 { fill: none; stroke: var(--line-fort); stroke-width: 1; }
.mg-src .t2 { stroke: var(--line); }
.mg-src text { fill: var(--muted); font-size: 11px; font-weight: 700; dominant-baseline: central; }
.mg-src text.m { text-anchor: middle; font-weight: 600; }
.mg-src.vide .c { stroke-dasharray: 4 3; }

/* Le contrôle : une barrière au trait et ses trois repères, qui prennent la couleur du verdict au passage d’une ligne */
.mg-barre, .mg-repere { border-radius: 1px; background: var(--ink); }
.mg-titre { position: absolute; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1; white-space: nowrap; }
.mg-repere.ok { background: var(--accent); }
.mg-repere.non { background: var(--ambre); }

/* La destination : un cadre net */
.mg-sage { box-sizing: border-box; border: 2px solid var(--accent-fonce); border-radius: 10px; background: var(--surface); overflow: hidden; }
.mg-sage-t { display: flex; align-items: center; padding: 0 10px; background: var(--accent-fonce); color: #fff; font-size: 13px; font-weight: 700; line-height: 1; }
.mg-comp { box-sizing: border-box; }
.mg-comp.sep { border-top: 1px solid var(--line); }
.mg-comp-n { display: flex; align-items: center; gap: 6px; height: 24px; padding: 2px 18px 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1; }
.mg-comp b { font-weight: 700; }
.mg-nb { margin-left: auto; color: var(--ink); font-size: 17px; font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.mg-case { box-sizing: border-box; border: 1px dashed var(--line-fort); border-radius: 6px; }

/* Une ligne de données. Avant le contrôle : terne. Après : nette. */
.mg-puce { box-sizing: border-box; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line-fort); color: var(--text); font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.mg-m { width: 8px; height: 8px; flex: none; background: var(--muted); }
.mg-m.k0 { border-radius: 50%; }
.mg-m.k1 { border-radius: 2px; }
.mg-m.k2 { border-radius: 1px; transform: rotate(45deg) scale(.86); }
.mg-comp .mg-m { background: var(--accent); }
.mg-val { margin-left: auto; width: 20px; height: 4px; border-radius: 2px; background: var(--line-fort); flex: none; }
.mg-puce.vol { box-shadow: var(--flottant); z-index: 3; }
.mg-puce.net { color: var(--ink); }
.mg-puce.net .mg-m { background: var(--accent); }

/* Les exceptions : en ambre. Le doublon le temps de fusionner, la fiche incomplète pour de bon. */
.mg-puce.alerte { border-color: var(--ambre); }
.mg-puce.alerte .mg-m { background: var(--ambre); }
.mg-trou { display: inline-block; box-sizing: border-box; width: 9px; height: 11px; margin-left: 4px; border: 1px dashed currentColor; border-radius: 2px; vertical-align: -2px; }
.mg-puce.trou .mg-val { box-sizing: border-box; height: 8px; background: transparent; border: 1px dashed var(--line-fort); }
.mg-puce.trou.alerte .mg-val, .mg-puce.trou.alerte .mg-trou { border-color: var(--ambre); }
.mg-tag { padding: 4px 9px; border-radius: var(--r-pilule); background: var(--surface); border: 1px solid var(--ambre); color: var(--ambre-texte); font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap; opacity: 0; z-index: 4; }

/* Le compteur de rapprochement */
.mg-compte { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: var(--r-pilule); background: var(--surface); border: 1px solid var(--line-fort); color: var(--muted); font-size: 11.5px; font-weight: 700; line-height: 1; white-space: nowrap; }
.mg-compte b { color: var(--ink); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mg-coche { width: 16px; height: 16px; max-width: none; flex: none; }
.mg-coche rect { fill: none; stroke: var(--line-fort); stroke-width: 1.5; }
.mg-coche path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
/* Temps fort : tout est rapproché, le compteur passe en aplat d’accent (case blanche, coche d’accent) */
.mg-compte.ok { background: var(--accent-fonce); border-color: var(--accent-fonce); color: #fff; }
.mg-compte.ok b { color: #fff; }
.mg-compte.ok .mg-coche rect { fill: #fff; stroke: #fff; }
.mg-compte.ok .mg-coche path { stroke: var(--accent-fonce); }

/* Relief : les anciennes sources sont à plat ; Sage est un casier posé ; la barrière est debout ; une ligne est posée
   (dans sa source, dans sa case) et se soulève le temps du trajet ; les étiquettes d’exception restent au-dessus d’elle. */
.mg-dest { translate: 0 0 calc(8px * var(--relief)); }
.mg-ctrl { translate: 0 0 calc(14px * var(--relief)); }
.mg-puce { translate: 0 0 calc(8px * var(--relief)); transition: translate var(--d-2) var(--c-trajet); }
.mg-puce.vol { translate: 0 0 calc(36px * var(--relief)); }
.mg-compte { translate: 0 0 calc(22px * var(--relief)); }
.mg-tag { translate: 0 0 calc(44px * var(--relief)); }

/* Petit écran : flux de haut en bas, compartiments côte à côte, lignes réduites à leur libellé */
.mg-compact .mg-puce { gap: 4px; padding: 0 5px; border-radius: 5px; font-size: 11px; }
.mg-compact .mg-m { width: 6px; height: 6px; }
.mg-compact .mg-val { display: none; }
.mg-compact .mg-trou { width: 8px; height: 10px; margin-left: 3px; }
.mg-compact .mg-sage { border-radius: 8px; }
.mg-compact .mg-sage-t { padding: 0 8px; font-size: 11.5px; }
.mg-compact .mg-comp.sep { border-top: 0; border-left: 1px solid var(--line); }
.mg-compact .mg-comp-n { height: 19px; padding: 2px 8px 0; gap: 4px; font-size: 10.5px; letter-spacing: 0; text-transform: none; }
.mg-compact .mg-nb { font-size: 13px; }
.mg-compact .mg-case { border-radius: 5px; }
.mg-compact .mg-tag { padding: 3px 7px; font-size: 10.5px; }
.mg-compact .mg-compte { gap: 6px; padding: 4px 10px 4px 6px; font-size: 10.5px; }
.mg-compact .mg-coche { width: 14px; height: 14px; }
.mg-compact .mg-compte b { font-size: 14px; }
.mg-compact .mg-puce.vol { translate: 0 0 calc(28px * var(--relief)); }
.mg-compact .mg-tag { translate: 0 0 calc(34px * var(--relief)); }