/* ==========================================================================
   Accueil guidé — la bulle d'Anatole posée sur l'élément dont elle parle
   Composant : js/components/guidedTour.js
   ========================================================================== */

/* Le halo : un trou dans un voile. L'ombre portée fait le voile, donc rien
   n'intercepte les clics — l'écran reste utilisable pendant la visite. */
.tour-halo{
  position:fixed;z-index:60;
  border-radius:16px;
  box-shadow:0 0 0 9999px rgba(20,20,19,.52);
  pointer-events:none;
  transition:top var(--motion-ui) var(--ease-standard),left var(--motion-ui) var(--ease-standard),
    width var(--motion-ui) var(--ease-standard),height var(--motion-ui) var(--ease-standard);
}
.tour-halo.is-full{inset:0;width:auto;height:auto;border-radius:0;box-shadow:none;background:rgba(20,20,19,.44)}

/* Toutes les bulles ont LA MÊME largeur maximale et LES MÊMES marges, où
   qu'elles se posent — 360 px, et 12 px de part et d'autre quand l'écran est
   plus étroit. Une bulle qui s'élargit en bas d'écran et rétrécit ailleurs
   donne l'impression de deux composants différents.

   La hauteur est bornée : une bulle ne grandit pas indéfiniment. C'est le
   TEXTE qui défile dans sa zone, et le pied — « Passer », « Suivant » —
   reste à sa place, toujours atteignable sans défiler. */
.tour-bubble{
  position:fixed;z-index:61;
  display:grid;gap:12px;
  grid-template-rows:minmax(0,1fr) auto auto;
  width:min(360px,calc(100vw - 24px));
  max-height:min(70vh,520px);
  margin:0;padding:16px;
  border:0;border-radius:var(--radius-card);
  background:var(--color-text);
  color:var(--color-on-dark);
  box-shadow:0 18px 44px rgba(20,20,19,.32);
}
/* Repli si le navigateur ne connaît pas `popover` : la bulle reste posée. */
.tour-bubble.is-fallback{display:grid}
.tour-bubble:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
.tour-say{display:flex;align-items:flex-start;gap:10px;min-height:0;overflow-y:auto}
/* Jamais plus petit que le corps de texte de l'application (16 px). */
.tour-bubble .coach-bubble-text{margin:0;font-size:1rem;line-height:1.45}

/* La flèche, pointée sur la cible. */
.tour-bubble::after{
  content:'';position:absolute;left:var(--tour-arrow,50%);
  width:12px;height:12px;margin-left:-6px;
  background:var(--color-text);transform:rotate(45deg);
}
.tour-bubble.is-below::after{top:-6px}
.tour-bubble.is-above::after{bottom:-6px}
.tour-bubble:not(.is-below):not(.is-above)::after{display:none}
/* Ancrée en bas : quand la bulle ne tient ni sous la cible ni au-dessus, elle
   se pose en bas de l'écran sur toute la largeur. Pas de flèche — c'est le
   halo qui désigne —, et une hauteur bornée pour qu'un texte long défile dans
   la bulle au lieu de déborder de l'écran. */
/* Ancrée en bas : même largeur que partout ailleurs, centrée. Le défilement
   reste dans la zone de texte, pas sur la bulle entière. */
.tour-bubble.is-docked{
  max-height:min(60vh,420px);
}
.tour-bubble.is-docked::after{display:none}
/* Tant qu'une bulle est ancrée, le document garde autant de place libre en
   bas : le contenu peut défiler au-dessus d'elle au lieu de rester dessous,
   hors d'atteinte. Le voile de la visite ne bloque pas les clics — on peut se
   servir de la page pendant qu'Anatole parle —, encore faut-il pouvoir
   atteindre ce qu'on vise. */
body.tour-docked{padding-bottom:var(--tour-dock,0px)}

.tour-choices:empty{display:none}
.tour-choices{display:grid;gap:8px}
.tour-choice{
  display:grid;gap:2px;
  min-height:48px;padding:10px 12px;
  border:1px solid rgba(250,249,245,.28);border-radius:var(--radius-button);
  background:transparent;color:var(--color-on-dark);
  text-align:left;cursor:pointer;
}
/* `strong{color:var(--color-text)}` de base.css repeindrait le libellé en
   encre, sur un aplat d'encre : on hérite de la bulle. */
.tour-choice strong{color:inherit;font-size:1rem;font-weight:600}
/* Le détail d'un choix et le compteur restent secondaires : ce sont des
   repères, pas le message. Ils ne portent aucune information qu'on perdrait
   en ne les lisant pas. */
.tour-choice span{color:rgba(250,249,245,.78);font-size:.875rem;line-height:1.35}
.tour-choice:hover,.tour-choice:focus-visible{border-color:var(--color-accent);background:rgba(200,96,62,.18)}

.tour-link{display:inline-block;min-height:44px;padding-block:12px;color:rgba(250,249,245,.78);font-size:.85rem;text-decoration:underline;text-underline-offset:4px}
.tour-link:hover,.tour-link:focus-visible{color:var(--color-on-dark)}
.tour-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tour-count{color:rgba(250,249,245,.6);font-family:var(--font-mono);font-size:.72rem;font-variant-numeric:tabular-nums}
.tour-count:empty{display:none}
.tour-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.tour-skip{min-height:44px;padding-inline:4px;color:rgba(250,249,245,.72);font-size:.85rem;text-decoration:underline;text-underline-offset:4px}
.tour-skip:hover,.tour-skip:focus-visible{color:var(--color-on-dark)}
/* Sur l'aplat d'encre de la bulle, un bouton principal en encre disparaît :
   il passe en terre cuite foncée (5,17:1 sur crème). `width` est rappelé :
   à 560 px, .button passe en pleine largeur, ce qui n'a pas de sens ici. */
.tour-next{min-height:44px;width:max-content;padding-inline:16px;border-color:transparent;
  background:var(--color-accent-deep);color:var(--color-on-dark)}
/* Au survol on fonce, on n'éclaircit pas : crème sur #C8603E tombe à 3,83:1,
   sous l'AA, et ce bouton reçoit le focus dès qu'une bulle s'ouvre. */
.tour-next:hover,.tour-next:focus-visible{background:var(--color-accent-strong)}

/* Le fond du premier lancement : la bulle parle, l'écran se tait. Il reste
   utilisable si la visite ne démarre pas — d'où le bouton de sortie. */
.onboarding-stage{display:grid;justify-items:center;gap:18px;text-align:center}
.onboarding-stage h1{max-width:16ch;font-size:clamp(1.8rem,5vw,2.6rem);letter-spacing:-.03em;text-wrap:balance}
.onboarding-stage .hero-lede{max-width:34ch;color:var(--color-secondary)}
.onboarding-mark{display:grid;place-items:center}
.onboarding-bypass{width:max-content}

/* La proposition de visite pour les comptes d'avant : une carte dans le flux,
   pas une bulle flottante — elle n'interrompt rien. */
.tour-offer{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.tour-offer .coach-bubble-text{flex:1 1 220px}
.tour-offer-actions{display:flex;gap:8px;margin-left:auto}

@media(max-width:560px){
  .tour-bubble{padding:14px}
  .tour-offer-actions{margin-left:0;width:100%}
  .tour-offer-actions>*{flex:1 1 0}
}
@media(prefers-reduced-motion:reduce){
  .tour-halo{transition:none}
}