/* L'infobulle : [data-tip="…"] (et data-tip-state, une seconde ligne) montre son texte au survol et au focus ; .tip est
   la petite pastille « ? » qui la porte. html[data-tips="off"] (réglage « Infobulles » de Paramètres) les coupe : le
   texte reste dans l'attribut. Avec js/tip.js (html.has-tips), une seule bulle flottante (.ui-tip) posée dans l'écran
   remplace le ::after (qu'un bord de l'écran ou un panneau qui défile coupait) ; le ::after reste sans script. */
[data-tip] {
  position: relative;
}
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 40;
  left: 50%;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: 260px;
  padding: 8px 11px;
  border: 1px solid #6c5232;
  background: #12100d;
  box-shadow: 0 8px 22px #000a;
  color: #f0e2c9;
  font: 400 0.8rem/1.45 Roboto, sans-serif;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  /* Cachée, réduite à rien : transparente mais à sa taille, elle élargissait la page près du bord droit (mobile) */
  transform: translate(-50%, 4px) scale(0);
  transition: opacity 0.15s;
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.tip {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: #a99c89;
  font: 700 0.8rem/1 Roboto, sans-serif;
  vertical-align: middle;
  cursor: help;
}
.tip:hover,
.tip:focus-visible {
  color: var(--honey, #dda23e);
}


html[data-tips="off"] [data-tip]::after {
  display: none;
}

/* La bulle de js/tip.js : en position fixe, posée par le script (au-dessus de l'élément, dessous s'il manque la place) */
.ui-tip {
  position: fixed;
  z-index: 950; /* au-dessus du menu (600) et de la visite guidée (900) */
  top: 0;
  left: 0;
  width: max-content;
  max-width: min(280px, calc(100vw - 16px));
  padding: 8px 11px;
  border: 1px solid #6c5232;
  background: #12100d;
  box-shadow: 0 8px 22px #000a;
  color: #f0e2c9;
  font: 400 0.8rem/1.45 Roboto, sans-serif;
  text-align: left;
  white-space: pre-line;
  pointer-events: none;
  animation: ui-tip-in 0.12s ease-out both;
}
.ui-tip[hidden] {
  display: none;
}
/* La seconde ligne (data-tip-state : l'état d'un trophée) : le nom en gras, centré */
.ui-tip.has-state {
  text-align: center;
}
.ui-tip.has-state::first-line {
  font-weight: 700;
}
@keyframes ui-tip-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-tip {
    animation: none;
  }
}
html.has-tips [data-tip]::after,
html.has-tips [data-tip]:hover::after,
html.has-tips [data-tip]:focus-visible::after {
  content: none !important;
  display: none !important;
}