/* ===== Visite guidee : spotlight + bulles ===== */

#tour-root { position: fixed; inset: 0; z-index: 9000; display: none; }
#tour-root.on { display: block; }

/* Le voile sombre est cree par une ombre geante autour du trou :
   un seul element, pas de 4 panneaux a synchroniser. */
#tour-hole {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(4, 7, 12, .78);
  border: 2px solid var(--accent);
  transition: all .32s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
#tour-hole.center { border-color: transparent; box-shadow: 0 0 0 9999px rgba(4, 7, 12, .84); }
#tour-hole::after {
  content: ''; position: absolute; inset: -2px; border-radius: 12px;
  box-shadow: 0 0 22px rgba(56, 189, 248, .55);
}
#tour-hole.center::after { display: none; }

/* Capte les clics pour que rien ne soit actionnable pendant la visite */
#tour-catch { position: fixed; inset: 0; }

#tour-tip {
  position: fixed;
  width: min(370px, calc(100vw - 32px));
  background: linear-gradient(165deg, #19202e, #12161f);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
  transition: all .32s cubic-bezier(.4, 0, .2, 1);
}
#tour-tip .arrow {
  position: absolute; width: 12px; height: 12px;
  background: #19202e; border: 1px solid var(--border-2);
  transform: rotate(45deg);
}
#tour-tip .arrow.top    { top: -7px;    border-right: none; border-bottom: none; }
#tour-tip .arrow.bottom { bottom: -7px; border-left: none;  border-top: none; }
#tour-tip .arrow.left   { left: -7px;   border-right: none; border-top: none; }
#tour-tip .arrow.right  { right: -7px;  border-left: none;  border-bottom: none; }

#tour-tip .t-step {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--accent); font-weight: 700; margin-bottom: 7px;
}
#tour-tip h3 { font-size: 16px; font-weight: 700; margin-bottom: 7px; line-height: 1.35; }
#tour-tip p  { font-size: 13px; color: #a8b2c4; line-height: 1.6; }
#tour-tip p b { color: var(--text); font-weight: 600; }

#tour-tip .t-foot {
  display: flex; align-items: center; gap: 9px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
}
#tour-dots { display: flex; gap: 5px; margin-right: auto; }
#tour-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--border-2);
  transition: .25s; display: block;
}
#tour-dots i.on   { background: var(--accent); width: 18px; border-radius: 3px; }
#tour-dots i.past { background: #2f4258; }

#tour-tip button {
  border: none; border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700;
  padding: 9px 15px; transition: .15s;
}
#tour-tip .b-next { background: linear-gradient(135deg, var(--accent), var(--blue)); color: #04121e; }
#tour-tip .b-next:hover { filter: brightness(1.1); }
#tour-tip .b-prev { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }
#tour-tip .b-prev:hover { border-color: var(--border-2); }
#tour-tip .b-skip {
  background: none; color: var(--muted); padding: 9px 6px; font-weight: 600;
}
#tour-tip .b-skip:hover { color: var(--text); }

/* Bouton d'aide dans la barre du haut */
.tour-btn {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer;
  display: grid; place-items: center; transition: .15s;
  font-family: inherit; font-size: 13px; font-weight: 700; padding: 0;
}
.tour-btn:hover { color: var(--accent); border-color: var(--accent); background: rgba(56,189,248,.1); }

@media (max-width: 680px) {
  #tour-tip { width: calc(100vw - 24px); }
  #tour-tip .arrow { display: none; }
}