/**
 * vs-tutorial.css — styles du mode "Tutoriel / Démo guidée" (Naomi Video Studio).
 * Fichier totalement isolé : toutes les classes sont préfixées `vs-tut-` pour ne jamais entrer en
 * collision avec les classes existantes de video-studio.css. N'écrase, ne redéfinit et ne modifie
 * aucune règle existante.
 *
 * COULEUR D'ACCENT DU TUTORIEL — volontairement différente de la charte Naomi (doré #e8a33d) :
 * un bleu/cyan (#4da3ff / #8ecbff) est utilisé pour tous les éléments propres à la démo guidée
 * (halo, bulle, boutons, flèche), afin de les distinguer immédiatement des vrais éléments dorés
 * de l'interface (ex. le bouton réel "Créer ma vidéo"). Aucune couleur de video-studio.css n'est
 * modifiée — uniquement les règles isolées de ce fichier.
 */

.vs-tut-launch-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px; margin: 0 0 14px;
  border: 1.5px solid rgba(77,163,255,.55);
  background: radial-gradient(ellipse at center, rgba(77,163,255,.18) 0%, rgba(77,163,255,.06) 55%, #050608 90%);
  color: #8ecbff; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12.5px;
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.vs-tut-launch-btn:hover { border-color: #4da3ff; box-shadow: 0 0 14px rgba(77,163,255,.22); }
.vs-tut-launch-btn:focus-visible { outline: 2px solid #4da3ff; outline-offset: 2px; }

/* Zone transparente plein écran : capte les clics en dehors de la bulle pour empêcher toute
   interaction avec la vraie interface tant que le tutoriel est ouvert (aucune action métier
   possible pendant la démo). Le fond assombri visible autour de l'élément mis en évidence est
   produit par le box-shadow de .vs-tut-highlight ci-dessous (effet "spotlight"), pas par cette
   couche, qui reste donc invisible (transparent) elle-même. */
.vs-tut-overlay {
  position: fixed; inset: 0; z-index: 9990; background: transparent; display: none;
}
.vs-tut-overlay.show { display: block; }

/* Cadre de mise en évidence : contour bleu/cyan (couleur du tutoriel, distincte du doré du site)
   + halo, et un immense box-shadow qui assombrit tout le reste de l'écran (effet spotlight) sans
   avoir besoin d'un calque séparé par-dessus la page. */
.vs-tut-highlight {
  position: fixed; z-index: 9991; display: none; pointer-events: none;
  border: 2px solid #4da3ff; border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.62), 0 0 18px rgba(77,163,255,.55);
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}
.vs-tut-highlight.show { display: block; }

.vs-tut-bubble {
  position: fixed; z-index: 9992; display: none;
  width: min(320px, calc(100vw - 28px));
  background: #12161f; border: 1px solid #232a38; border-radius: 14px;
  padding: 16px 18px 14px; box-shadow: 0 12px 32px rgba(0,0,0,.5);
  font-family: 'Inter', sans-serif; color: #e8e6df;
}
.vs-tut-bubble.show { display: block; }

.vs-tut-close {
  position: absolute; top: 8px; right: 10px; width: 26px; height: 26px; border-radius: 8px;
  border: none; background: transparent; color: #8b93a3; font-size: 18px; line-height: 1; cursor: pointer;
}
.vs-tut-close:hover { color: #e8e6df; background: #171c27; }

.vs-tut-step-indicator {
  margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .02em;
  color: #4da3ff; text-transform: uppercase;
}
.vs-tut-title { margin: 0 0 6px; font-size: 15.5px; font-weight: 700; color: #e8e6df; padding-right: 20px; }
.vs-tut-text { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: #8b93a3; }

.vs-tut-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vs-tut-nav-btns { display: flex; gap: 8px; }

.vs-tut-btn {
  border-radius: 8px; border: 1.5px solid #232a38; background: #171c27; color: #e8e6df;
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; padding: 8px 12px; cursor: pointer;
  transition: border-color .15s ease, opacity .15s ease;
}
.vs-tut-btn:hover { border-color: #4da3ff; }
.vs-tut-btn:disabled { opacity: .4; cursor: default; }
.vs-tut-btn:disabled:hover { border-color: #232a38; }
.vs-tut-btn-primary {
  border-color: rgba(77,163,255,.55);
  background: radial-gradient(ellipse at center, rgba(77,163,255,.22) 0%, rgba(77,163,255,.08) 50%, #050608 85%);
  color: #8ecbff;
}
.vs-tut-btn-primary:hover { border-color: #4da3ff; box-shadow: 0 0 14px rgba(77,163,255,.22); }
.vs-tut-btn-quit { background: transparent; }
/* .vs-tut-quit-group : simple marqueur (aucune règle propre nécessaire, le bouton garde le style
   .vs-tut-btn-quit ci-dessus) — conservé pour lisibilité/évolutions futures du regroupement visuel. */

/* "À retenir" : rappel court, visuellement distinct du texte explicatif principal. */
.vs-tut-retain {
  margin: 0 0 14px; padding: 8px 10px; font-size: 12px; line-height: 1.4; color: #8ecbff;
  background: rgba(77,163,255,.08); border-left: 2.5px solid #4da3ff; border-radius: 4px;
}

/* Bouton "Réécouter" (voix) : discret, aligné avec les autres boutons de navigation. */
.vs-tut-btn-replay {
  padding: 8px 10px; font-size: 14px; line-height: 1;
}
.vs-tut-btn-replay:hover { border-color: #4da3ff; }

/* Flèche SVG plein écran reliant deux éléments réels (ex. import photo → bande de photos).
   Purement visuelle, ne capte aucun clic ; masquée par défaut, affichée seulement pour les
   étapes qui en définissent une (voir config `arrow` dans vs-tutorial.js). */
.vs-tut-arrow-svg {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: 9992;
  pointer-events: none; display: none; overflow: visible;
}
.vs-tut-arrow-svg.show { display: block; }
.vs-tut-arrow-line {
  stroke: #4da3ff; stroke-width: 2.5; stroke-dasharray: 6 4; opacity: .85;
}

/* --- Responsive : la bulle reste toujours entièrement visible (largeur bornée par vw ci-dessus,
   position recalculée en JS à chaque redimensionnement). Sur petit écran, actions empilées. --- */
@media (max-width: 480px) {
  .vs-tut-actions { flex-direction: column-reverse; align-items: stretch; }
  .vs-tut-nav-btns { justify-content: space-between; }
  .vs-tut-btn-quit { text-align: center; }
}