/* ===================================================================
   VISITE GUIDÉE — portée depuis ORIZON Docs (elle-même issue d'ORIZON Care) :
   même mécanique, mêmes gestes, pour qu'un utilisateur qui connaît un produit
   de la suite ne réapprenne rien dans l'autre. Seules les couleurs suivent
   les jetons d'ORIZON Pay.

   Le survol est ancré sur les VRAIS éléments de l'écran (`data-guide`) :
   une aide écrite à côté se périme au premier changement d'interface,
   une aide ancrée dessus disparaît avec l'élément qu'elle décrivait.
   =================================================================== */
.guide-voile { position: fixed; inset: 0; z-index: 9000; display: none; }
.guide-voile.ouvert { display: block; }

/* Le « trou » : on n'assombrit pas l'élément visé, on assombrit tout le reste
   au moyen d'une ombre portée démesurée. Aucun découpage à calculer. */
.guide-trou {
  position: fixed; border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(35, 31, 32, .66);   /* voile : noir charte */
  transition: top .22s ease, left .22s ease, width .22s ease, height .22s ease;
  pointer-events: none;
  outline: 3px solid #EDE947; outline-offset: 0;      /* jaune de la charte */
}

.guide-carte {
  position: fixed; width: min(23rem, calc(100vw - 1rem)); box-sizing: border-box;
  background: var(--surface, #fff); color: #231F20;              /* noir charte */
  font-family: "Futura","Futura PT","Century Gothic","Avenir Next","Trebuchet MS",system-ui,sans-serif;
  border-radius: 14px; padding: 1rem 1.15rem 1.05rem;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
  transition: top .22s ease, left .22s ease;
}
.guide-compteur { margin: 0 0 .35rem; font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mut, #64748b); font-weight: 700; }
.guide-titre { margin: 0 0 .5rem; font-size: 1.1rem; line-height: 1.25; font-weight: 700; }
/* Filet jaune sous le titre : le geste du flyer (« Des paiements plus simples »). */
.guide-titre::after { content: ""; display: block; width: 36px; height: 4px;
  border-radius: 2px; background: #EDE947; margin-top: .45rem; }
.guide-texte { margin: 0 0 .9rem; font-size: .94rem; line-height: 1.55; color: var(--mut, #64748b); }

.guide-actions { display: flex; align-items: center; gap: .5rem; }
.guide-espace { flex: 1; }
/* 44 px : cible tactile confortable — la page publique se joue au téléphone. */
.guide-actions button { font: inherit; font-size: .9rem; cursor: pointer; min-height: 44px;
  border-radius: 10px; padding: .45rem .95rem; border: 1px solid var(--line, #e8edf4);
  background: transparent; color: inherit; }
/* 🪤 `.guide-actions button` (0,1,1) battait `.guide-suivant` (0,1,0) : le bouton
   principal sortait BLANC, fond transparent — défaut hérité d'ORIZON Docs. On
   qualifie par le conteneur pour que la couleur d'action l'emporte. */
.guide-actions .guide-passer { color: var(--mut, #64748b); }
/* Vert de MARQUE (#33B04A en 2ACI) + texte NOIR charte : 5,8:1. Le blanc sur ce vert
   ne donne que 2,8:1, sous le seuil de lisibilité. */
.guide-actions .guide-suivant { background: var(--brand, #33B04A); border-color: var(--brand, #33B04A);
  color: #231F20; font-weight: 700; }
.guide-actions button:focus-visible { outline: 2px solid #231F20; outline-offset: 2px; }

/* Icône « revoir la visite » dans le bandeau vert public. Discrète par nature :
   on la trouve quand on la cherche, elle n'attire pas l'oeil. */
.guide-rejouer { width: 38px; height: 38px; border-radius: 50%; padding: 0; flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--brand-ink, #fff) 45%, transparent);
  background: transparent; color: var(--brand-ink, #fff);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.guide-rejouer:hover { background: color-mix(in srgb, var(--brand-ink, #fff) 12%, transparent); }
.guide-rejouer:focus-visible { outline: 2px solid var(--brand-ink, #fff); outline-offset: 2px; }
.guide-rejouer[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .guide-trou, .guide-carte { transition: none; }
}