/* Scène « Les aides s’effacent » — Formation. À plat : traits, aplats, bordures fines. Classes préfixées an-.
   Sur cette page, var(--accent) vaut la couleur d’EX’FORM : aucune teinte n’est codée ici. */
.an-fen, .an-champ, .an-btn, .an-coche, .an-aide, .an-pas, .an-curseur { position: absolute; left: 0; top: 0; }

/* La fenêtre et ses champs */
.an-fen { border-radius: 14px; background: var(--surface); border: 1px solid var(--line-fort); overflow: hidden; }
.an-barre { display: flex; align-items: center; gap: 6px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.an-barre i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-fort); }
.an-champ { display: flex; align-items: center; padding: 0 14px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line-fort); }
.an-champ.an-actif::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--accent); }
.an-nom { position: absolute; left: 1px; bottom: 100%; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1; white-space: nowrap; }
.an-val { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; will-change: opacity; }
.an-btn { display: grid; place-items: center; border-radius: 8px; background: var(--accent); color: var(--sur-accent); font-size: 15px; font-weight: 700; line-height: 1; will-change: transform; }

/* Les aides : une bulle au trait, reliée à son champ */
.an-aide { opacity: 0; will-change: transform, opacity; }
.an-bulle { position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 5px; border-radius: var(--r-pilule); border: 2px solid var(--accent); font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1; white-space: nowrap; }
.an-bulle b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--sur-accent); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
.an-lien { position: absolute; background: var(--accent); transform-origin: 0 50%; }
.an-bout { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--accent); }

/* Le témoin final (temps fort) : une pastille en aplat, dans la couleur de la page ; elle bat une fois, pilotée par le JS */
.an-coche { display: flex; align-items: center; gap: 2px; padding-right: 16px; border-radius: var(--r-pilule); background: var(--accent); opacity: 0; font-size: 13.5px; font-weight: 700; color: var(--sur-accent); line-height: 1; white-space: nowrap; will-change: transform, opacity; }
.an-coche svg { width: var(--d); height: var(--d); flex: none; }
.an-coche path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }

/* Le passage en cours : trois points */
.an-pas { display: flex; gap: 10px; margin: -4px 0 0 -22px; }
.an-pas i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--line-fort); }
.an-pas b { position: absolute; inset: 0; border-radius: 50%; background: var(--accent); opacity: 0; }

/* Le curseur : la pointe de la flèche est son point d’appui */
.an-curseur { width: 30px; height: 30px; overflow: visible; transform-origin: 16.7% 10.4%; will-change: transform; }
.an-curseur path { fill: var(--ink); stroke: var(--surface); stroke-width: 1.5; stroke-linejoin: round; }

/* Thème sombre : l’accent s’éclaircit, le texte posé dessus passe en foncé */
:root[data-theme="dark"] .an-btn, :root[data-theme="dark"] .an-bulle b, :root[data-theme="dark"] .an-coche { color: var(--bg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .an-btn, :root:not([data-theme="light"]) .an-bulle b, :root:not([data-theme="light"]) .an-coche { color: var(--bg); }
}

/* Relief : la fenêtre est le support ; ses champs, son bouton et le témoin sont posés dessus ; les aides flottent au-dessus
   (un calque qu’on retire) ; le curseur est l’objet tenu en main, au-dessus de tout. */
.an-champ, .an-btn, .an-coche { translate: 0 0 calc(12px * var(--relief)); }
.an-aide { translate: 0 0 calc(26px * var(--relief)); }
.an-curseur { translate: 0 0 calc(56px * var(--relief)); }

/* Petit écran : mêmes éléments, tailles propres à la composition compacte ; le trait des bulles descend vers le champ */
.an-compact .an-fen { border-radius: 12px; }
.an-compact .an-champ { padding: 0 11px; border-radius: 7px; }
.an-compact .an-nom { font-size: 10.5px; margin-bottom: 12px; }
.an-compact .an-val { font-size: 14px; }
.an-compact .an-btn { font-size: 13px; border-radius: 7px; }
.an-compact .an-bulle { gap: 5px; padding: 0 9px 0 3px; border-width: 1.5px; font-size: 11px; }
.an-compact .an-bulle b { width: 14px; height: 14px; font-size: 10px; }
.an-compact .an-lien { transform-origin: 50% 0; }
.an-compact .an-bout { width: 6px; height: 6px; margin: -3px; }
.an-compact .an-coche { gap: 0; padding-right: 11px; font-size: 11.5px; }
.an-compact .an-curseur { width: 24px; height: 24px; }
/* Relief compact : les bulles sont dans la fenêtre, tout près de son bord haut et de leur champ ; elles restent à la hauteur
   des champs (plus haut, la première dépasserait de la fenêtre). Seul le curseur se détache nettement. */
.an-compact .an-champ, .an-compact .an-btn, .an-compact .an-coche, .an-compact .an-aide { translate: 0 0 calc(8px * var(--relief)); }
.an-compact .an-curseur { translate: 0 0 calc(36px * var(--relief)); }