/* Schéma « Les sept cases » — guide « Les 7 questions ». À plat : aplats et traits. Classes préfixées gc-.
   Cadre de conception 320 × 320 (affiché vers 0,92 sur bureau : aucun texte sous 12 px ici). */
.gc-compteur, .gc-filet, .gc-repere, .gc-ligne { position: absolute; left: 0; top: 0; }

.gc-compteur { left: 40px; top: 20px; font-size: 14px; font-weight: 600; line-height: 26px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: pre; }
.gc-compteur b { font-size: 22px; font-weight: 700; color: var(--ink); }
.gc-compteur.gc-fini b { color: var(--accent-texte); }
.gc-filet { left: 40px; top: 52px; width: 240px; height: 1px; background: var(--line); }

/* La case en cours : un aplat qui glisse de ligne en ligne, avec le même trait d’accent que le sommaire */
.gc-repere { left: 26px; width: 268px; height: 30px; border-radius: 8px; background: var(--bg-doux); will-change: transform, opacity; }
.gc-repere::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: var(--accent); }

.gc-ligne { left: 40px; height: 30px; display: flex; align-items: center; white-space: nowrap; }
.gc-num { width: 12px; text-align: center; font-size: 12px; font-weight: 700; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; }
.gc-case { position: relative; flex: none; width: 20px; height: 20px; margin-left: 12px; border-radius: 6px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-fort); }
.gc-plein { position: absolute; inset: 0; border-radius: 6px; background: var(--accent-fonce); opacity: 0; will-change: transform, opacity; }
.gc-case svg { position: absolute; inset: 0; width: 20px; height: 20px; fill: none; stroke: var(--sur-accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.gc-lib { margin-left: 12px; font-size: 14px; font-weight: 600; line-height: 1; color: var(--ink); opacity: .55; }