/* Guide de location / visite guidée (voir docs/PRODUCT_TOUR.md).
   Le guide a sa propre couleur d'accent (vert turquoise), distincte du rouge Kipimo et du bleu
   Pro, pour qu'on reconnaisse d'un coup d'œil l'espace d'aide. Polices et rayons : ceux de l'app. */

:root {
  --tour-accent: #3ed6d0;        /* turquoise : icônes, barre de progression */
  --tour-accent-dark: #0f766e;   /* texte et boutons : le blanc reste lisible dessus */
  --tour-accent-darker: #0b5f58; /* survol des boutons */
  --tour-accent-light: #e3f8f7;  /* fond de l'onglet */
  --tour-accent-hover: #cdf1ef;  /* fond de l'onglet au survol */
}

/* Onglet « Guide » de la barre latérale : même gabarit que .sidebar-link (padding, rayon,
   police), mais teinté pour ressortir des autres onglets. */
.sidebar-link--guide {
  margin-top: 14px;
  background: var(--tour-accent-light);
  color: var(--tour-accent-dark);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  font-family: inherit;   /* un <button> n'hérite pas de la police et de l'interligne comme un lien */
  line-height: 1.5;
}
.sidebar-link--guide i { color: var(--tour-accent); line-height: 1; } /* comme les icônes des autres onglets */
.sidebar-link--guide:hover { background: var(--tour-accent-hover); color: var(--tour-accent-dark); }

/* Pastille de secours : sur mobile, la barre latérale est cachée. */
.product-tour__pill {
  display: none; align-items: center; gap: 0.4rem;
  position: fixed; bottom: 36px; left: 12px; z-index: 1040;
  padding: 0.35rem 0.8rem;
  background: var(--tour-accent-light); color: var(--tour-accent-dark);
  border: 1px solid var(--tour-accent); border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.product-tour__pill i { color: var(--tour-accent); }

/* Panneau : à droite de la barre latérale sur ordinateur, pleine largeur sur mobile. */
.product-tour__panel {
  position: fixed; bottom: 24px; left: 236px; z-index: 1041;
  width: 300px; max-width: calc(100vw - 32px);
  border-radius: 0.875rem;
}
.product-tour__panel[hidden] { display: none; }
.product-tour__panel .progress-bar { background: var(--tour-accent) !important; }
.product-tour__panel .btn-primary { background: var(--tour-accent-dark); border-color: var(--tour-accent-dark); }
.product-tour__panel .btn-primary:hover { background: var(--tour-accent-darker); border-color: var(--tour-accent-darker); }

/* Mobile : la barre latérale est cachée, la pastille se pose à gauche du bouton rond du
   menu (centré en bas) et le panneau prend la largeur de l'écran. Même seuil que la
   barre latérale (application.bootstrap.scss). */
@media (max-width: 768px) {
  .product-tour__pill { display: inline-flex; }
  .product-tour__panel {
    bottom: 92px; left: 12px; right: 12px;
    width: auto; max-width: none; max-height: 70vh; overflow-y: auto;
  }
}

/* Bulle Driver.js aux couleurs de Kipimo */
.driver-popover.kipimo-tour {
  font-family: inherit; border-radius: 0.875rem; padding: 1rem 1.1rem;
  color: #1a1a2e; border: 1px solid #ebebeb;
}
.driver-popover.kipimo-tour .driver-popover-title { font-family: inherit; font-weight: 700; font-size: 1rem; }
.driver-popover.kipimo-tour .driver-popover-description { font-family: inherit; font-size: 0.85rem; color: #4b5563; }
.driver-popover.kipimo-tour .driver-popover-progress-text { color: #6b7280; font-size: 0.75rem; }
.driver-popover.kipimo-tour .driver-popover-footer button {
  font-family: inherit; font-weight: 600; font-size: 0.8rem;
  border-radius: 0.625rem; padding: 0.35rem 0.8rem; text-shadow: none;
  border: 1px solid #d1d5db; background: #fff; color: #1a1a2e;
}
.driver-popover.kipimo-tour .driver-popover-footer .driver-popover-next-btn {
  background: var(--tour-accent-dark); border-color: var(--tour-accent-dark); color: #fff;
}
.driver-popover.kipimo-tour .product-tour__quit {
  display: block; margin-top: 0.6rem; padding: 0; border: 0; background: none;
  font-size: 0.75rem; color: #6b7280; text-decoration: underline; cursor: pointer;
}

/* Mobile : la bulle ne dépasse jamais de l'écran. */
@media (max-width: 768px) {
  .driver-popover.kipimo-tour { max-width: calc(100vw - 24px); min-width: 0; width: calc(100vw - 24px); }
}