/* La visite guidée (js/tour.js) : la page assombrie, la zone montrée découpée et cerclée de miel, l'abeille guide et
   sa bulle sur papier. */

.tour-hole {
  position: fixed;
  z-index: 900;
  border: 2px solid var(--honey);
  box-shadow: 0 0 0 9999px rgba(8, 6, 4, 0.78);
  pointer-events: none;
  transition: top 0.35s cubic-bezier(0.3, 0.7, 0.2, 1), left 0.35s cubic-bezier(0.3, 0.7, 0.2, 1),
    width 0.35s cubic-bezier(0.3, 0.7, 0.2, 1), height 0.35s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.tour-box {
  position: fixed;
  z-index: 901;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: min(460px, calc(100vw - 32px));
  opacity: 0;
  transition: opacity 0.2s, top 0.35s cubic-bezier(0.3, 0.7, 0.2, 1), left 0.35s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.tour-box.is-on {
  opacity: 1;
}
.tour-bee {
  flex: none;
  width: 150px;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.6));
  animation: tour-hover 2.6s ease-in-out infinite;
}
@keyframes tour-hover {
  50% {
    transform: translateY(-6px) rotate(-3deg);
  }
}
.tour-bubble {
  position: relative;
  flex: 1;
  padding: 16px 18px 14px;
  background: var(--parchment);
  color: #2a2017;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}
.tour-bubble::before {
  content: "";
  position: absolute;
  bottom: 26px;
  left: -10px;
  border: 10px solid transparent;
  border-right-color: var(--parchment);
  border-left: 0;
}
.tour-count {
  color: #8a6a3a;
  font: 800 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tour-title {
  margin: 2px 0 6px;
  color: #1b140d;
  font: 900 1.2rem "Roboto Condensed", sans-serif;
}
.tour-text {
  margin: 0 0 12px;
  font-size: 0.95rem;
  line-height: 1.45;
}
.tour-text b {
  color: #1b140d;
}
.tour-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tour-skip {
  margin-right: auto;
  padding: 0;
  border: 0;
  background: none;
  color: #7a6a55;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}
.tour-prev,
.tour-next {
  padding: 7px 14px;
  font: 700 0.92rem Roboto, sans-serif;
  cursor: pointer;
}
.tour-prev {
  border: 1px solid #c9b48f;
  background: none;
  color: #4d3d2a;
}
.tour-next {
  border: 0;
  background: #1b140d;
  color: var(--parchment);
}
.tour-next:focus-visible,
.tour-prev:focus-visible,
.tour-skip:focus-visible {
  outline: 2px solid var(--honey);
  outline-offset: 2px;
}
@media (max-width: 560px) {
  .tour-bee {
    width: 96px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tour-hole,
  .tour-box {
    transition: none;
  }
  .tour-bee {
    animation: none;
  }
}

/* Le bouton « Comment ça marche ? » : un onglet fixé sur le bord droit de la page, qui reste à l'écran quand on
   descend — l'abeille qui déborde, un fond miel léger, ce qu'il lance écrit dessous ; le survol l'éclaire. */
/* L'onglet d'aide : replié (l'abeille seule dépasse du bord) pour ne jamais couvrir la page ; il se déplie au survol
   ou au clavier, et reste déplié quand l'écran a la place de chaque côté de la page (2 160 px et plus).
   Son plan : au-dessus des en-têtes des pages (501, posés sur le grain de la page à 500), sinon il passe sous le
   paysage quand l'écran est peu haut ; sous le menu (600) et le bandeau du vote (599). */
.tour-help {
  position: fixed;
  z-index: 550;
  top: 58%;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-height: 58px;
  padding: 10px 12px 10px 64px;
  border: 1px solid rgba(221, 162, 62, 0.55);
  border-right: 0;
  background: linear-gradient(110deg, rgba(221, 162, 62, 0.24), rgba(23, 19, 15, 0.96) 70%);
  color: var(--cream);
  text-align: left;
  box-shadow: -8px 10px 24px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.tour-help img {
  position: absolute;
  bottom: -4px;
  left: -10px;
  width: 78px;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6));
  animation: tour-hover 2.6s ease-in-out infinite;
}
.tour-help > span {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  transition: max-width 0.25s, opacity 0.2s, margin 0.25s;
}
.tour-help > i {
  width: 0;
  overflow: hidden;
  transition: width 0.25s;
}
.tour-help:hover > span,
.tour-help:focus-visible > span {
  max-width: 300px;
  margin: 0 12px 0 8px;
  opacity: 1;
}
.tour-help:hover > i,
.tour-help:focus-visible > i {
  width: 14px;
}
.tour-help b {
  display: block;
  font: 900 1rem/1.15 "Roboto Condensed", sans-serif;
  letter-spacing: 0.02em;
}
.tour-help small {
  display: block;
  color: var(--text-soft);
  font-size: 0.8rem;
}
.tour-help > i {
  color: var(--honey);
}
.tour-help:hover,
.tour-help:focus-visible {
  border-color: var(--honey);
  background: linear-gradient(110deg, rgba(221, 162, 62, 0.34), rgba(23, 19, 15, 0.96) 70%);
  outline: none;
  transform: translateX(-4px);
}
/* La visite en cours : l'onglet s'efface */
.is-touring .tour-help {
  opacity: 0;
  pointer-events: none;
}
/* Sur téléphone, une grande surface qu'on manipule occupe l'écran (le visualiseur de la Carte, un circuit) : l'onglet
   s'efface le temps qu'elle passe, sinon il couvre ce qu'on essaie de faire glisser (21 oct. 2026 ; `layout/tour.js`
   pose la classe). Il revient dès qu'on a fait défiler plus loin. */
.tour-help.is-away {
  opacity: 0;
  pointer-events: none;
}
@media (min-width: 2160px) {
  .tour-help {
    padding: 12px 16px 12px 86px;
  }
  .tour-help img {
    left: -14px;
    width: 96px;
  }
  .tour-help > span {
    max-width: 300px;
    margin: 0 12px 0 0;
    opacity: 1;
  }
  .tour-help > i {
    width: 14px;
  }
}
/* Petit écran : l'abeille seule, en bas à gauche (en bas à droite, c'est « remonter ») */
@media (max-width: 700px) {
  .tour-help {
    top: auto;
    right: auto;
    bottom: 14px;
    left: 0;
    padding: 8px 12px 8px 70px;
    border-right: 1px solid rgba(221, 162, 62, 0.55);
    border-left: 0;
    transform: none;
  }
  .tour-help img {
    left: -6px;
    width: 74px;
  }
  .tour-help small,
  .tour-help > i {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tour-help,
  .tour-help > span,
  .tour-help > i {
    transition: none;
  }
  .tour-help img {
    animation: none;
  }
}