.tooltip-wrap {
  position: relative;
  isolation: isolate;  /* nouveau contexte z-index local */
  z-index: 0;          /* base */
}
   
.subject {
  display: block;
  max-width: 220px;
  height: auto;
  outline: none;
  /* s'assure que l'image ne couvre pas la bulle */
  position: relative;
  z-index: 1;
}

/* Bulle adaptable */
.tooltip {
  position: absolute;
  bottom: 100%;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 8px;
  font-family: Papyrus, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  opacity: 0;                 /* cachée par défaut */
  visibility: hidden;         /* évite les clics fantômes */
  pointer-events: none;
  transition: opacity .18s ease;
  white-space: normal;
  width: 142px;
  text-align: center;
  box-sizing: border-box;
  z-index: 2;              /* passe devant presque tout */
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  background: white;
  color: black;
}

/* Petite flèche */
.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;              /* flèche vers le bas, donc bulle au-dessus */
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: #fff; /* pointe vers l’image */
}
   
/* 2 déclencheurs : survol du conteneur ET survol direct de l'image */
.tooltip-wrap:hover .tooltip,
.subject:hover + .tooltip,
.tooltip-wrap:focus-within .tooltip {
  opacity: 1;
  visibility: visible;
}
   
/* --- Empilement sûr : la bulle passe devant les autres lignes --- */
table, tbody, tr, td { overflow: visible; }
.tooltip-wrap { position: relative; isolation: isolate; z-index: 0; }
.subject { position: relative; z-index: 1; }
.tooltip-wrap:hover { z-index: 9999; }
   
/* 3) Au survol, on “monte” le bloc complet au-dessus des autres cellules/lignes */
.tooltip-wrap:hover {
  z-index: 9999;       /* > aux éléments des autres lignes */
}

/* Variante si la page est proche du haut: apparaitre SOUS l'image si besoin
   -> Ajoute la classe .below au span.tooltip pour tester
*/
.tooltip.below {
  top: 100%;
  bottom: auto;           /* annule la position au-dessus */
}
.tooltip.below::after {
  top: auto;
  bottom: 100%;
  border: 6px solid transparent;
  border-bottom-color: #fff; /* flèche vers le haut */
}

/* Accessibilité : réduit les animations si demandé */
@media (prefers-reduced-motion: reduce) {
  .tooltip { transition: none; }
}