:root{
      --tt-bg: #979797;                 /* fond tooltip */
      --tt-fg: #fff;                 /* texte tooltip */
      --tt-radius: 10px;
      --tt-shadow: 0 12px 32px rgba(0,0,0,.25);
      --tt-padding: .65rem .8rem;
      --tt-maxw: min(150ch, 92vw);    /* largeur max tooltip */
      --gap: 10px;                   /* distance image/tooltip */
      --viewport-pad: 8px;           /* marge min au bord de l'écran */
      --thumb-w: 20px;              /* largeur vignette */
      --focus-ring: 0 0 0 4px rgba(0,112,244,.35);
    }

    .smart-tooltip{
      position: relative;
      display: inline-block;
      touch-action: manipulation; /* améliore le tap mobile */
    }

    /* Déclencheur (image) */
    .tt-trigger{
      display: inline-block;
      border: 0;
      padding: 0;
      background: transparent;
      cursor: pointer;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(0,0,0,.12);
      outline: none;
    }
    .tt-trigger:focus-visible{ box-shadow: var(--focus-ring); }
    .tt-trigger img{
      display: block;
      width: var(--thumb-w);
      height: auto;
    }

    /* Tooltip */
    .tt{
      position: fixed;               /* pour calculer et garantir visibilité */
      left: 0; top: 0;               /* coordonnées mises par JS */
      z-index: 1000;
      background: var(--tt-bg);
      color: var(--tt-fg);
      border-radius: var(--tt-radius);
      box-shadow: var(--tt-shadow);
      padding: var(--tt-padding);
      max-width: var(--tt-maxw);
      line-height: 1.55;
      font: 500 0.95rem/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

      opacity: 0;
      transform: translateY(6px) scale(.98);
      pointer-events: none;          /* comme une vraie infobulle : non cliquable */
      transition: opacity 180ms ease, transform 180ms ease;
    }

    .smart-tooltip.is-open .tt{
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;          /* permet la sélection du texte au besoin */
    }

    /* Flèche */
    .tt::after{
      content: "";
      position: absolute;
      inline-size: 12px; block-size: 12px;
      background: var(--tt-bg);
      transform: rotate(45deg);
      box-shadow: var(--tt-shadow);
    }

    /* Position de la flèche selon le placement + variables --arrow-x / --arrow-y */
    .tt[data-placement="top"]::after{
      left: var(--arrow-x, 50%); bottom: -6px; transform: translateX(-50%) rotate(45deg);
    }
    .tt[data-placement="bottom"]::after{
      left: var(--arrow-x, 50%); top: -6px; transform: translateX(-50%) rotate(45deg);
    }
    .tt[data-placement="right"]::after{
      top: var(--arrow-y, 50%); left: -6px; transform: translateY(-50%) rotate(45deg);
    }
    .tt[data-placement="left"]::after{
      top: var(--arrow-y, 50%); right: -6px; transform: translateY(-50%) rotate(45deg);
    }

    @media (prefers-reduced-motion: reduce){
      .tt{ transition: none; }
    }