/* ==========================================================================
   TOOLTIP.CSS — Composant d’infobulle transversal Planif.education
   ==========================================================================
   RÔLE :
     - Définit l’apparence et le comportement visuel des tooltips du site.
     - Utilisé dans plusieurs contextes (Modules, Compte, Login).
     - Composant minimaliste : icône + bulle d’information au survol.

   SÉPARATION STRICTE :
     - Ne jamais ajouter ici de styles spécifiques à une page ou un module.
     - Les tooltips doivent rester uniformes dans tout Planif.education.
     - Ne pas surcharger ce fichier avec des variations ad hoc.
     - Toute personnalisation locale doit être faite dans le CSS de la page.

   DÉPENDANCES :
     - Palette et tokens définis dans _variables.css
     - Peut interagir visuellement avec modals → attention au z-index.

   ZONES SENSIBLES :
     - Positionnement (absolute / relative) peut créer des collisions.
     - z-index trop élevé interfère avec les modals.
     - Padding / largeur trop grands peuvent briser des layouts serrés.

   RÈGLES DE MODIFICATION :
     - Conserver le tooltip simple, léger et discret.
     - Ne jamais introduire de logique CSS avancée ou responsive spécifique.
     - Suivre le workflow Planif.education :
         * une seule modification à la fois
         * analyse d’impact globale
         * test sur au moins : Compte + Descriptif + Objectifs

   NOTE :
     - Le tooltip est un micro-composant. Stabilité et cohérence priment.
   ========================================================================== */


.tooltip {
  position: relative;
  display: inline-block;   /* ← CRITIQUE : inline-flex cassait le hover */
  min-width: 16px;
  min-height: 16px;
  cursor: help;
}


/* Affichage de la bulle */
.tooltip[data-tooltip]:hover::after,
.tooltip[data-tooltip]:hover::before,
.tooltip[data-tooltip]:focus-visible::after,
.tooltip[data-tooltip]:focus-visible::before {
  opacity: 1;
  pointer-events: none;
}




/* Bulle */
.tooltip[data-tooltip]::after {
  content: attr(data-tooltip);
  position: fixed;

  background: var(--c-surface-1);
  color: var(--c-texte);

  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--c-bleu-500);

 box-shadow: 0 6px 18px rgba(124, 58, 237, 0.16);

  font-size: 0.85rem;
  line-height: 1.45;

  width: max-content;
  max-width: 260px;

  opacity: 0;
  transition: opacity 0.15s ease-out;

  pointer-events: none;
  z-index: 10000;

  /* Positionnement initial (corrigé via JS léger si besoin) */
  top: 0;
  left: 0;
}
.tooltip[data-tooltip]::after {
  top: var(--tooltip-top);
  left: var(--tooltip-left);
}



.tooltip[data-loading="true"]::after,
.tooltip[data-loading="true"]::before {
  display: none !important;
}