/* ==========================================================================
   Tour « spotlight » (moteur générique tour.js). Overlay one-shot d'onboarding :
   un dim plein écran assombrit tout sauf le trou posé sur la cible, plus une carte
   explicative. Dim assombri via --tour-scrim (scrim LOCAL plus sombre que le global,
   cf. .tour) ; réutilise le token --accent et la pilule .pill.
   z-index : au-dessus de la nav (1000), des écrans verrouillés (1050) et des
   dialogs (1100) car l'onboarding est l'expérience modale de premier plan.
   ========================================================================== */
.tour { position: fixed; inset: 0; z-index: 1200; --tour-scrim: rgba(0,0,0,.76); }

/* Scrim transparent : capte les clics (fond non cliquable pendant le tour). */
.tour-scrim { position: absolute; inset: 0; }

/* Spotlight (Option 1) : rect à la taille de la cible. La box-shadow géante assombrit
   tout autour (scrim local plus sombre, cf. --tour-scrim) ; un fin anneau accent (2px)
   colle la cible et un halo doux « respire » lentement pour attirer l'œil sans agiter.
   Le trou reste net (pas de blur) et son border-radius est aligné sur la cible par
   tour.js (pill => pill, FAB rond => rond). Le 10px ci-dessous n'est qu'un fallback. */
.tour-spot {
  position: fixed;
  border-radius: 10px; /* fallback ; écrasé par tour.js pour coller à la forme de la cible */
  pointer-events: none; /* clic « traverse » vers le scrim (capté), la cible n'est pas activable */
  box-shadow:
    0 0 0 9999px var(--tour-scrim),
    0 0 0 2px rgba(var(--accent-rgb), .95),
    0 0 16px 3px rgba(var(--accent-rgb), .35);
  animation: tour-pulse 2.4s ease-in-out infinite;
  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
}
@keyframes tour-pulse {
  0%, 100% { box-shadow: 0 0 0 9999px var(--tour-scrim), 0 0 0 2px rgba(var(--accent-rgb), .95), 0 0 12px 2px rgba(var(--accent-rgb), .30); }
  50%      { box-shadow: 0 0 0 9999px var(--tour-scrim), 0 0 0 2px rgba(var(--accent-rgb), 1),   0 0 22px 5px rgba(var(--accent-rgb), .55); }
}
/* Réduction d'animations : anneau + halo doux STATIQUES (la cible reste marquée), pas de pulse. */
.tour-spot.no-anim { animation: none; box-shadow: 0 0 0 9999px var(--tour-scrim), 0 0 0 2px rgba(var(--accent-rgb), .95), 0 0 16px 3px rgba(var(--accent-rgb), .40); transition: none; }

/* Carte : positionnée en inline par le moteur (top/left). Largeur bornée mobile. */
.tour-card {
  position: fixed;
  width: min(320px, calc(100vw - 24px));
  box-sizing: border-box;
  padding: 1rem 1.15rem 0.9rem;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.tour-card:focus { outline: none; }

.tour-step {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
}
.tour-title { margin: 0 0 0.35rem; font-size: 1.05rem; line-height: 1.25; }
.tour-desc { margin: 0 0 0.9rem; font-size: 0.9rem; line-height: 1.45; color: var(--text-secondary); }

.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.tour-next { flex: 0 0 auto; }
/* « Passer » : lien discret, pas un bouton plein (action secondaire). */
.tour-skip {
  flex: 0 0 auto;
  background: none;
  border: none;
  padding: 0.25rem 0.15rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-decoration: underline;
  cursor: pointer;
}
.tour-skip:hover { color: var(--text-primary); }

@media (prefers-reduced-motion: reduce) {
  .tour-spot { animation: none; box-shadow: 0 0 0 9999px var(--tour-scrim), 0 0 0 2px rgba(var(--accent-rgb), .95), 0 0 16px 3px rgba(var(--accent-rgb), .40); transition: none; }
}

/* P2 : à 0 bac le hubnav est masqué ; le tour le révèle LE TEMPS du guide pour éclairer
   les sous-onglets. On le sort du flux (position:absolute) pour que #tab-bac ne descende
   PAS (sinon le CTA « premier bac » sauterait à la fermeture du tour). left/right calés sur
   le padding inline de .app-view (1.25rem, cf. 03-shell.css) pour que la barre peekée occupe
   EXACTEMENT la position horizontale de son état normal en flux, pas le viewport ; top laissé
   à auto => position verticale statique conservée. Pas de transform sur .app-view : ça
   piégerait les descendants position:fixed (cf. 03-shell.css). */
.app-view:has(.hubnav.is-tour-peek) { position: relative; }
.hubnav.is-tour-peek { position: absolute; left: 1.25rem; right: 1.25rem; z-index: 5; }
/* .app-view resserre son padding inline à 0.9rem sous 480px (cf. 11-calendar.css) : on suit. */
@media (max-width: 480px) {
  .hubnav.is-tour-peek { left: 0.9rem; right: 0.9rem; }
}