/* Tutoriel de première connexion (js/tutoriel.js) : projecteur sur la coquille + carte d'explication en
   panneau plein (valeurs de .dialogue). Jetons dans ../assets/tokens.css. Mouvement coupé sous
   prefers-reduced-motion. */
.tuto { position: fixed; inset: 0; z-index: 150; }
.tuto-fond { position: absolute; inset: 0; display: none; background: var(--voile-fond); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); pointer-events: none; }
.tuto.tuto-centre .tuto-fond { display: block; }
.tuto-cadre {
  position: absolute; border-radius: var(--rayon-3); box-shadow: var(--anneau-projecteur); pointer-events: none;
  transition: top var(--duree-normale) var(--expo), left var(--duree-normale) var(--expo), width var(--duree-normale) var(--expo), height var(--duree-normale) var(--expo);
}
.tuto-cadre[hidden] { display: none; }

.tuto-carte {
  position: absolute; width: min(380px, calc(100vw - 32px)); padding: 20px 22px 16px; border-radius: var(--rayon-4);
  background: var(--panneau); border: 1px solid var(--trait); box-shadow: var(--ombre-flottante), var(--trait-lumiere); color: var(--encre);
  animation: tuto-entree var(--duree-normale) var(--expo) both;
}
.tuto-carte:focus { outline: none; }
.tuto-compteur { font-size: var(--taille-etiquette); font-weight: var(--graisse-moyenne); color: var(--encre-2); font-variant-numeric: tabular-nums; }
.tuto-carte h2 { margin-top: 6px; font-size: 22px; line-height: 1.15; letter-spacing: -0.03em; color: var(--encre); }
.tuto-texte { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--encre-2); text-wrap: pretty; }
.tuto-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.tuto-passer {
  margin-left: auto; padding: 6px 0; border: 0; background: none; font-size: var(--taille-petit); color: var(--encre-2);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; transition: color var(--duree-rapide) var(--courbe);
}
.tuto-passer:hover { color: var(--encre); }
@keyframes tuto-entree { from { opacity: 0; transform: translateY(8px); } }

/* Écran étroit : la carte se colle en bas, au-dessus du rail replié en barre basse */
@media (max-width: 900px) {
  .tuto-carte { left: 16px; right: 16px; top: auto; bottom: calc(96px + env(safe-area-inset-bottom)); width: auto; }
  .tuto.tuto-centre .tuto-carte { bottom: 50%; translate: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .tuto-cadre, .tuto-passer { transition: none !important; }
  .tuto-carte { animation: none !important; }
}