/* La montée d'offre, après le moment plein écran (montee.css) : le film de bienvenue dans sa boîte (js/film-bienvenue.js,
   dossier/27 N1) et la visite démonstrative (js/deblocage.js, N2), qui joue sur le vrai bloc « verrouillé → débloqué ».
   Seuls transform et opacity bougent. Sous prefers-reduced-motion, deblocage.js ne pose rien (l'état débloqué est déjà
   là) et rien ne bouge ici. Jetons dans ../assets/tokens.css. */

/* ---------- Le film de bienvenue : « Passer », toujours visible ---------- */
/* Au-dessus du film, même quand il passe en plein écran sur un téléphone (film.css : `.film.est-plein`, 2147483000). */
.film-passer {
  position: absolute; right: 16px; top: 16px; z-index: 2147483001; min-height: 40px; padding: 0 18px; border: 0; border-radius: var(--rayon-pilule, 999px);
  background: var(--voile-2); color: var(--encre); font: inherit; font-size: var(--taille-petit); font-weight: var(--graisse-moyenne);
  box-shadow: var(--trait-lumiere); cursor: pointer;
}
.film-passer:hover { background: var(--voile-4); }
.film-passer:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--anneau-focus); }
@media (forced-colors: active) { .film-passer:focus-visible { outline: 2px solid CanvasText; } }

/* ---------- La carte de la visite : la valeur avant → après ---------- */
.tuto-valeurs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; font-size: var(--taille-petit); line-height: 1.4; }
.tuto-avant { color: var(--encre-2); text-decoration: line-through; text-decoration-color: var(--trait-fort); }
.tuto-fleche { color: var(--bleu-texte); }
.tuto-apres { padding: 3px 10px; border-radius: var(--rayon-pilule, 999px); border: 1px solid var(--bleu-trait); background: var(--bleu-voile); color: var(--encre); }
/* La visite mène à l'écran de l'étape : le temps d'y arriver, la carte reste, ses boutons attendent. */
.tuto.tuto-attente .tuto-carte { opacity: 0.6; }

/* ---------- Le vrai bloc, verrouillé puis débloqué ---------- */
.debloc-hote { position: relative; }
.debloc-cache { opacity: 0; transform: translateY(10px); }
.debloc-glisse.debloc-cache { transform: translateX(-28px); }
.debloc-montre {
  transition: opacity var(--duree-normale) var(--expo) calc(var(--debloc-i, 0) * 50ms), transform 520ms var(--expo) calc(var(--debloc-i, 0) * 50ms);
}

/* Le cadenas, au centre du bloc (en haut d'un grand bloc, là où l'œil arrive) : son anse se lève, il s'efface. */
.debloc-verrou {
  position: absolute; left: 50%; top: min(50%, 200px); z-index: 4; display: grid; place-items: center; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%; background: var(--panneau); border: 1px solid var(--bleu-trait); box-shadow: var(--ombre-flottante); color: var(--encre);
  pointer-events: none; transition: opacity 240ms var(--courbe) 120ms, transform 360ms var(--expo) 120ms;
}
.debloc-verrou .ic { width: 22px; height: 22px; }
.debloc-verrou .ic path { transition: transform 200ms var(--expo); }
.debloc-verrou.ouvert .ic path { transform: translateY(-3px); }
.debloc-verrou.ouvert { opacity: 0; transform: scale(1.4); }

/* Sources : la ligne réelle sous sa jumelle floue (faux libellé, « Solo ») ; la jumelle cède, la ligne apparaît. */
.debloc-ligne { position: relative; }
.debloc-jumelle {
  position: absolute; inset: 0; display: grid; grid-template-columns: inherit; align-items: center; gap: inherit; pointer-events: none;
  transition: opacity 280ms var(--courbe), transform 360ms var(--expo);
}
.debloc-voilee > :not(.debloc-jumelle) { opacity: 0; transition: opacity 360ms var(--expo) 80ms; }
.debloc-ouvre > :not(.debloc-jumelle) { opacity: 1; }
.debloc-ouvre > .debloc-jumelle { opacity: 0; transform: translateX(12px); }

/* Questions : le compteur « N sur M » en bleu le temps qu'il compte ; un badge qui compte quand rien d'autre ne le montre. */
.debloc-compte { color: var(--bleu-texte); font-variant-numeric: tabular-nums; }
.debloc-badge { margin-left: 8px; font-variant-numeric: tabular-nums; }

/* Sans mouvement : rien ne se cache, rien ne bouge (deblocage.js ne pose déjà rien). */
@media (prefers-reduced-motion: reduce) {
  .debloc-cache, .debloc-voilee > :not(.debloc-jumelle) { opacity: 1 !important; transform: none !important; }
  .debloc-jumelle, .debloc-verrou, .debloc-badge { display: none !important; }
  .debloc-montre, .debloc-jumelle, .debloc-verrou, .debloc-verrou .ic path, .debloc-voilee > * { transition: none !important; }
}