/* Schéma « Le mur de graphiques » — guide tableau de bord. À plat : traits et aplats. Classes préfixées gm-. */
.gm-tuile, .gm-tige, .gm-pointe, .gm-action { position: absolute; left: 0; top: 0; }

/* Un mini-graphique : une tuile au trait. Les neuf qui s’effacent ne gardent que leur contour. */
.gm-tuile { width: 64px; height: 88px; border: 1px solid var(--line-fort); border-radius: 10px; color: var(--muted); will-change: transform, opacity; }
.gm-garde { z-index: 3; }
.gm-fond { position: absolute; inset: 0; border-radius: 9px; background: var(--bg); }
.gm-tuile svg { position: absolute; left: -1px; top: -1px; max-width: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gm-vif { color: var(--accent); opacity: 0; }
.gm-base { stroke-width: 1; opacity: .5; }
.gm-barre { stroke-width: 5; stroke-linecap: butt; }
.gm-piste { stroke-width: 4; opacity: .3; }
.gm-arc { stroke-width: 4; stroke-linecap: butt; }

/* Du graphique à l’action */
.gm-tige { z-index: 2; height: 2px; border-radius: 1px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.gm-pointe { z-index: 2; opacity: 0; }
.gm-pointe svg { max-width: none; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gm-action { z-index: 2; display: grid; place-items: center; width: 104px; height: 32px; border-radius: var(--r-pilule); background: var(--accent-fonce); color: var(--sur-accent); font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap; opacity: 0; will-change: transform, opacity; }