/* ======================================================================
 *  Pulpe! — Tour guidé interactif
 *  Système indépendant superposé à l'UI. Aucune modification des pages.
 * ====================================================================== */

/* Overlay principal + mask SVG (permet le "trou" lumineux sur la cible) */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
}
.tour-overlay.tour-on {
  opacity: 1;
  pointer-events: auto;
}

/* Backdrop utilisé uniquement quand il n'y a PAS de cible (étapes centrées).
   Quand une cible est définie, c'est l'anneau qui projette l'obscurcissement
   via un énorme box-shadow : l'intérieur reste 100 % transparent. */
.tour-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 22, 40, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.tour-backdrop.tour-backdrop--visible {
  opacity: 1;
  pointer-events: auto;
}

/* Anneau lumineux + trou transparent autour de la zone ciblée */
.tour-ring {
  position: absolute;
  pointer-events: none;
  background: transparent;
  border-radius: 16px;
  box-shadow:
    0 0 0 9999px rgba(10, 22, 40, 0.75),
    0 0 0 4px rgba(99, 102, 241, 0.55),
    0 0 40px 8px rgba(99, 102, 241, 0.35);
  transition:
    top .4s cubic-bezier(.22,1,.36,1),
    left .4s cubic-bezier(.22,1,.36,1),
    width .4s cubic-bezier(.22,1,.36,1),
    height .4s cubic-bezier(.22,1,.36,1),
    border-radius .4s cubic-bezier(.22,1,.36,1),
    opacity .3s ease;
  animation: tour-ring-pulse 2s ease-in-out infinite;
}
.tour-ring.tour-ring--hidden {
  opacity: 0;
  pointer-events: none;
}

@keyframes tour-ring-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 9999px rgba(10, 22, 40, 0.75),
      0 0 0 4px rgba(99, 102, 241, 0.55),
      0 0 40px 8px rgba(99, 102, 241, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 9999px rgba(10, 22, 40, 0.75),
      0 0 0 6px rgba(129, 140, 248, 0.6),
      0 0 56px 12px rgba(167, 139, 250, 0.4);
  }
}

/* Bulle d'info */
.tour-bubble {
  position: absolute;
  width: min(380px, calc(100vw - 32px));
  max-width: 380px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 20px 60px rgba(10, 22, 40, 0.3);
  color: #0a1628;
  transition: opacity .3s ease, transform .3s ease,
    top .4s cubic-bezier(.22,1,.36,1),
    left .4s cubic-bezier(.22,1,.36,1);
  z-index: 2;
}
.tour-bubble.tour-bubble--enter {
  animation: tour-bubble-in .4s cubic-bezier(.22,1,.36,1) both;
}
.tour-bubble.tour-bubble--center {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

@keyframes tour-bubble-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.tour-bubble.tour-bubble--center.tour-bubble--enter {
  animation: tour-bubble-in-center .4s cubic-bezier(.22,1,.36,1) both;
}
@keyframes tour-bubble-in-center {
  from { opacity: 0; transform: translate(-50%, -45%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

/* Flèche directionnelle de la bulle */
.tour-bubble-arrow {
  position: absolute;
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(99, 102, 241, 0.15);
  transform: rotate(45deg);
  z-index: -1;
}
.tour-bubble--top .tour-bubble-arrow {
  bottom: -9px;
  left: 50%;
  margin-left: -8px;
  border-top: 0;
  border-left: 0;
}
.tour-bubble--bottom .tour-bubble-arrow {
  top: -9px;
  left: 50%;
  margin-left: -8px;
  border-bottom: 0;
  border-right: 0;
}
.tour-bubble--right .tour-bubble-arrow {
  left: -9px;
  top: 50%;
  margin-top: -8px;
  border-top: 0;
  border-right: 0;
}
.tour-bubble--left .tour-bubble-arrow {
  right: -9px;
  top: 50%;
  margin-top: -8px;
  border-bottom: 0;
  border-left: 0;
}
.tour-bubble--center .tour-bubble-arrow {
  display: none;
}

/* Contenu de la bulle */
.tour-step-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(99, 102, 241, 0.1);
  color: #4338CA;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 100px;
  border: 1px solid rgba(99, 102, 241, 0.18);
  margin-bottom: 12px;
}

.tour-title {
  font-family: "Fraunces", serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: #0a1628;
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
}

.tour-text {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: #4B5563;
  margin: 0 0 16px 0;
}

/* Barre de progression (8 segments) */
.tour-progress {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
}
.tour-progress-seg {
  flex: 1;
  height: 4px;
  border-radius: 100px;
  background: rgba(99, 102, 241, 0.12);
  transition: background .3s ease;
}
.tour-progress-seg.tour-progress-seg--done {
  background: linear-gradient(90deg, #4338CA, #818CF8);
}

/* Actions */
.tour-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.tour-actions-left {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tour-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.tour-btn {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tour-btn:focus-visible {
  outline: 2px solid #6366F1;
  outline-offset: 2px;
}
.tour-btn--ghost {
  background: transparent;
  color: #6B7280;
  font-size: 12px;
  padding: 7px 10px;
}
.tour-btn--ghost:hover {
  background: rgba(99, 102, 241, 0.06);
  color: #4338CA;
}
.tour-btn--skip {
  background: transparent;
  color: #9CA3AF;
  font-size: 12px;
  padding: 7px 10px;
}
.tour-btn--skip:hover {
  color: #4B5563;
  text-decoration: underline;
}
.tour-btn--primary {
  background: linear-gradient(135deg, #4338CA, #6366F1);
  color: #ffffff;
  font-size: 13px;
  padding: 9px 16px;
  box-shadow: 0 6px 18px rgba(67, 56, 202, 0.28);
}
.tour-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(67, 56, 202, 0.38);
}
.tour-btn--primary:active {
  transform: translateY(0);
}

/* Empêche clic sur l'élément "highlighté" pendant le tour (le ring capte) */
.tour-target-locked {
  pointer-events: none;
}
/* Si l'élément ciblé doit ressortir graphiquement, on ajoute un z-index boost */
.tour-target-focus {
  position: relative;
  z-index: 9998;
}

/* Pop-up "Revoir le tour ?" en bas à droite */
.tour-revisit {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: min(320px, calc(100vw - 32px));
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 14px;
  padding: 16px 18px 14px;
  box-shadow: 0 12px 40px rgba(10, 22, 40, 0.15);
  z-index: 9900;
  animation: tour-revisit-in .5s cubic-bezier(.22,1,.36,1) both;
  font-family: "Inter", sans-serif;
}
.tour-revisit.tour-revisit--leaving {
  animation: tour-revisit-out .25s ease both;
}

@keyframes tour-revisit-in {
  from { opacity: 0; transform: translate(20px, 20px); }
  to { opacity: 1; transform: translate(0, 0); }
}
@keyframes tour-revisit-out {
  from { opacity: 1; transform: translate(0, 0); }
  to { opacity: 0; transform: translate(20px, 20px); }
}

.tour-revisit-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.tour-revisit-ico {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, #4338CA, #6366F1);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 15px;
  box-shadow: 0 6px 14px rgba(67, 56, 202, 0.3);
}
.tour-revisit-body {
  flex: 1;
  min-width: 0;
}
.tour-revisit-title {
  font-family: "Fraunces", serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  color: #0a1628;
  margin: 0 0 2px 0;
}
.tour-revisit-text {
  font-size: 12px;
  line-height: 1.5;
  color: #6B7280;
  margin: 0;
}
.tour-revisit-close {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #9CA3AF;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: background .15s ease, color .15s ease;
}
.tour-revisit-close:hover {
  background: rgba(99, 102, 241, 0.08);
  color: #4338CA;
}

.tour-revisit-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.tour-revisit-actions .tour-btn--primary {
  font-size: 12px;
  padding: 7px 14px;
}
.tour-revisit-actions .tour-btn--skip {
  font-size: 11px;
  padding: 6px 8px;
}

/* Responsive — mobile */
@media (max-width: 640px) {
  .tour-bubble {
    left: 16px !important;
    right: 16px;
    width: auto;
    max-width: none;
    padding: 18px 18px;
  }
  .tour-bubble.tour-bubble--center {
    left: 50% !important;
  }
  .tour-bubble--left .tour-bubble-arrow,
  .tour-bubble--right .tour-bubble-arrow {
    display: none;
  }
  .tour-title { font-size: 18px; }
  .tour-text { font-size: 12.5px; }
  .tour-revisit {
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
  }
}