/* TiKamp — aide intégrée : bulles d'aide (.tk-bulle), visite guidée (#tk-tour-*),
   menu du bouton « ? » (#tikamp-help-*). Une seule feuille pour les trois espaces
   (gestion, hôte, campeur). Palette : celle du produit (CONVENTIONS.md §6), avec
   repli en dur pour les pages qui ne définissent pas les variables. Échelle 4/8 px. */

/* ── Bulle d'aide (composant unique : public/js/tk-bulle.js) ─────────────── */
.tk-bulle {
  /* Bouton de 44 × 44 px (cible tactile réelle, WCAG 2.5.5) ; les marges négatives lui
     donnent l'encombrement du repère de 20 px, pour ne pas écarter les lignes. */
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: -12px -12px -12px -6px; padding: 0; flex: none;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-2, #3A453F);
  cursor: pointer; vertical-align: middle; text-transform: none; letter-spacing: 0;
  -webkit-tap-highlight-color: transparent;
}
.tk-bulle[hidden] { display: none; }
/* Repère visuel : pastille « ? » de 20 px (dessinée ici : le bouton n'ajoute aucun caractère au texte voisin). */
.tk-bulle::before {
  content: "?"; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 20px; height: 20px; border: 1px solid var(--border-2, #C9D1C7); border-radius: 50%;
  background: var(--surface, #fff); color: inherit;
  font: 700 12px/1 Inter, -apple-system, system-ui, sans-serif;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.tk-bulle:hover::before { border-color: var(--primary, #0F7C3C); color: var(--primary, #0F7C3C); }
.tk-bulle[aria-expanded="true"]::before { background: var(--primary, #0F7C3C); border-color: var(--primary, #0F7C3C); color: #fff; }
.tk-bulle:focus-visible { outline: none; }
.tk-bulle:focus-visible::before { outline: 2px solid var(--accent, #F3A724); outline-offset: 2px; }
th .tk-bulle, label .tk-bulle, h2 .tk-bulle, h3 .tk-bulle, summary .tk-bulle { font-weight: 700; }

.tk-bulle-pop {
  /* Au-dessus des fenêtres du produit (10001) et des messages (10010). */
  position: fixed; z-index: 10020; box-sizing: border-box;
  width: max-content; max-width: min(320px, calc(100vw - 32px));
  padding: 12px 40px 12px 16px; border-radius: 12px;
  background: #14241B; color: #fff;
  font: 400 14px/1.5 Inter, -apple-system, system-ui, sans-serif; text-align: left;
  box-shadow: 0 12px 32px rgba(10, 15, 10, .28);
  opacity: 0; transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
}
.tk-bulle-pop.on { opacity: 1; transform: none; }
.tk-bulle-pop strong { display: block; margin: 0 0 4px; font-weight: 600; font-size: 14px; color: #fff; }
.tk-bulle-pop p { margin: 0; color: #E4ECE6; white-space: pre-line; }
.tk-bulle-pop a { display: inline-block; margin-top: 8px; padding: 4px 0; color: #8FE3B0; font-weight: 600; }
.tk-bulle-fermer {
  position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 8px; background: transparent; color: #C9D6CD;
  font: 400 20px/1 Inter, system-ui, sans-serif; cursor: pointer;
}
.tk-bulle-fermer::after { content: ""; position: absolute; inset: -6px; }
.tk-bulle-fermer:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.tk-bulle-fermer:focus-visible, .tk-bulle-pop a:focus-visible { outline: 2px solid var(--accent, #F3A724); outline-offset: 2px; }

/* ── Visite guidée (moteur : public/js/tk-visite.js) ─────────────────────── */
#tk-tour-scrim { position: fixed; inset: 0; z-index: 9490; background: transparent; cursor: pointer; }
#tk-tour-hole {
  position: fixed; z-index: 9500; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(10, 15, 10, .6), 0 0 0 2px var(--accent, #F3A724) inset;
  transition: top .22s ease, left .22s ease, width .22s ease, height .22s ease;
}
#tk-tour-hole.tk-vide { box-shadow: 0 0 0 9999px rgba(10, 15, 10, .6); }
#tk-tour-card {
  position: fixed; z-index: 9501; box-sizing: border-box;
  width: 344px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow: auto;
  padding: 20px; border-radius: 16px; background: #fff; color: #0A0F0A;
  font-family: Inter, -apple-system, system-ui, sans-serif;
  box-shadow: 0 12px 36px rgba(10, 15, 10, .3);
}
#tk-tour-card.tk-sheet {
  left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; max-height: 62dvh;
  border-radius: 16px 16px 0 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
}
#tk-tour-card.tk-center { top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(456px, calc(100vw - 32px)); }
#tk-tour-card .tk-tour-step { display: block; margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: #6B7670; white-space: nowrap; }
#tk-tour-card h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.3; font-weight: 700; color: #0A0F0A; }
#tk-tour-card p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.55; color: #3A453F; max-width: 62ch; }
#tk-tour-card ul.tk-tour-groups { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#tk-tour-card ul.tk-tour-groups li { font-size: 14px; line-height: 1.5; color: #3A453F; padding-left: 12px; border-left: 3px solid #E6F4EB; }
#tk-tour-card ul.tk-tour-groups strong { display: block; color: #0A0F0A; font-weight: 600; }
#tk-tour-card .tk-tour-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; }
#tk-tour-card .tk-tour-gauche { display: flex; align-items: center; gap: 4px; }
#tk-tour-card button {
  min-height: 44px; padding: 8px 16px; border-radius: 10px; font: inherit; font-weight: 600; font-size: 14px;
  cursor: pointer; border: 1px solid #DDE2DA; background: #fff; color: #0A0F0A;
  transition: background-color .16s ease, border-color .16s ease;
}
#tk-tour-card button:hover { background: #F4F6F2; }
#tk-tour-card button.tk-primary { background: #0F7C3C; border-color: #0F7C3C; color: #fff; }
#tk-tour-card button.tk-primary:hover { background: #0A5F2D; border-color: #0A5F2D; }
#tk-tour-card button.tk-link { border-color: transparent; background: none; color: #3A453F; text-decoration: underline; text-underline-offset: 3px; padding: 8px; }
#tk-tour-card button.tk-link:hover { color: #0A0F0A; background: none; }
#tk-tour-card button:disabled { opacity: .4; cursor: default; }
#tk-tour-card button:focus-visible { outline: 2px solid #F3A724; outline-offset: 2px; }
@media (max-width: 380px) { #tk-tour-card button { padding: 8px 12px; } }

/* ── Bouton « ? » et son menu (public/js/help-button.js, tk-aide-menu.js) ── */
#tikamp-help-btn {
  position: fixed; right: 24px; bottom: 84px; z-index: 9002;
  width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0;
  background: #14241B; color: #fff; cursor: pointer;
  font: 800 19px/1 Inter, -apple-system, system-ui, sans-serif;
  box-shadow: 0 4px 12px rgba(10, 15, 10, .35);
  transition: transform .2s ease, background-color .16s ease;
}
#tikamp-help-btn:hover { transform: scale(1.06); background: #0F7C3C; }
#tikamp-help-btn:focus-visible { outline: 3px solid #F3A724; outline-offset: 3px; }
#tikamp-help-menu {
  position: fixed; right: 24px; bottom: 136px; z-index: 9003; box-sizing: border-box;
  width: 296px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 160px); overflow: auto;
  padding: 8px; border-radius: 14px; background: #fff; color: #0A0F0A;
  font-family: Inter, -apple-system, system-ui, sans-serif;
  box-shadow: 0 8px 32px rgba(10, 15, 10, .18); border: 1px solid #E8EBE6;
  animation: tkAideIn .18s ease-out;
}
#tikamp-help-menu[hidden] { display: none; }
#tikamp-help-menu .tk-aide-titre { margin: 8px 12px 4px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: #6B7670; }
#tikamp-help-menu [role="menuitem"] {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; box-sizing: border-box;
  padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; color: #0A0F0A;
  font: 500 14px/1.35 inherit; font-family: inherit; text-align: left; cursor: pointer;
  transition: background-color .12s ease;
}
#tikamp-help-menu [role="menuitem"]:hover, #tikamp-help-menu [role="menuitem"]:focus-visible { background: #F1F5F2; }
#tikamp-help-menu [role="menuitem"]:focus-visible { outline: 2px solid #F3A724; outline-offset: -2px; }
#tikamp-help-menu .tk-aide-ico { flex: none; display: inline-flex; width: 20px; height: 20px; color: #0F7C3C; }
#tikamp-help-menu .tk-aide-sep { height: 1px; margin: 4px 8px; background: #E8EBE6; }
/* Aide sur l'écran courant : panneau ancré au bouton « ? ». */
#tikamp-help-panel {
  position: fixed; right: 24px; bottom: 136px; z-index: 9003; box-sizing: border-box;
  width: 344px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 160px); overflow: auto;
  padding: 16px 44px 16px 16px; border-radius: 14px; background: #fff; color: #0A0F0A;
  font-family: Inter, -apple-system, system-ui, sans-serif;
  box-shadow: 0 8px 32px rgba(10, 15, 10, .18); border: 1px solid #E8EBE6;
  animation: tkAideIn .18s ease-out;
}
#tikamp-help-panel h3 { margin: 0 0 8px; font-size: 16px; line-height: 1.3; }
#tikamp-help-panel p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.55; color: #3A453F; }
#tikamp-help-panel .tk-aide-liens { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
#tikamp-help-panel .tk-aide-liens a, #tikamp-help-panel .tk-aide-liens button {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none;
  color: #0F7C3C; font: 600 14px/1.3 inherit; font-family: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
#tikamp-help-panel .tk-aide-fermer {
  position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; border: 0; border-radius: 10px;
  background: transparent; color: #3A453F; font-size: 22px; line-height: 1; cursor: pointer;
}
#tikamp-help-panel .tk-aide-fermer:hover { background: #F1F5F2; }
#tikamp-help-panel :focus-visible { outline: 2px solid #F3A724; outline-offset: 2px; border-radius: 6px; }
@keyframes tkAideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Page sans bouton de support (espace hôte) : le « ? » descend dans le coin. */
body.tk-aide-bas #tikamp-help-btn { bottom: 24px; }
body.tk-aide-bas #tikamp-help-menu, body.tk-aide-bas #tikamp-help-panel { bottom: 76px; max-height: calc(100dvh - 100px); }
/* Première venue : le bouton s'annonce quelques secondes, puis redevient un « ? ». */
#tikamp-help-btn.tk-annonce { width: auto; padding: 0 16px; border-radius: 22px; font-size: 15px; font-weight: 700; }
#tikamp-help-btn.tk-annonce::after { content: "  Visite guidée"; white-space: pre; }
@media (max-width: 640px) {
  #tikamp-help-btn { right: 16px; }
  #tikamp-help-menu, #tikamp-help-panel { right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .tk-bulle::before, .tk-bulle-pop, #tk-tour-hole, #tk-tour-card button, #tikamp-help-btn { transition: none; }
  #tikamp-help-menu, #tikamp-help-panel { animation: none; }
}
@media print { .tk-bulle, .tk-bulle-pop, #tikamp-help-btn, #tikamp-help-menu, #tikamp-help-panel, #tk-tour-scrim, #tk-tour-hole, #tk-tour-card { display: none !important; } }

/* Libellé de champ suivi d'une bulle : le « ? » reste sur la ligne du libellé. */
.tk-lab { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: .35rem; }
.tk-lab > label, .tk-lab > .ov-lab { display: inline; margin: 0; }
.dt-liste-t { display: flex; align-items: center; }