/* Extrait de student_dashboard.html. Ordre historique : 6. */
/* ══════════════════════════════════════════════
     SYSTÈME TOOLTIPS — bouton ⓘ cliquable
     Le JS injecte automatiquement un <button class="tt-btn">
     dans chaque [data-tooltip]. Clic = ouvre/ferme la bulle.
  ══════════════════════════════════════════════ */

  /* ── Conteneur porteur : nécessaire pour positionner le bouton ── */
  [data-tooltip] {
    position: relative;
    cursor: default !important; /* plus de curseur "?" parasite */
  }

  /* ── Bouton ⓘ injecté par JS ── */
  .tt-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid rgba(99,102,241,.6);
    background: rgba(30,27,75,.7);
    color: #a5b4fc;
    font-size: 11px;
    font-weight: 800;
    font-family: 'Inter', sans-serif;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 0;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
    box-shadow: 0 1px 6px rgba(0,0,0,.35);
    flex-shrink: 0;
  }
  .tt-btn:hover {
    background: rgba(99,102,241,.5);
    border-color: #a5b4fc;
    transform: scale(1.15);
  }
  .tt-btn.active {
    background: rgba(99,102,241,.8);
    border-color: #c7d2fe;
    color: #fff;
    transform: scale(1.1);
  }

  /* ── Cas spécial : .tooltip-icon existant (span "i" inline dans les titres)
        On le transforme en déclencheur clic sans injecter de bouton ── */
  .tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(99,102,241,.25);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    color: #a5b4fc;
    margin-left: 6px;
    cursor: pointer;
    vertical-align: middle;
    flex-shrink: 0;
    border: 1.5px solid rgba(99,102,241,.4);
    transition: background .15s, transform .15s;
  }
  .tooltip-icon:hover {
    background: rgba(99,102,241,.5);
    transform: scale(1.15);
  }
  .tooltip-icon.active {
    background: rgba(99,102,241,.8);
    color: #fff;
  }

  /* ── Bulle flottante (appendée au <body>, jamais clippée) ── */
  #tt-bubble {
    position: fixed;
    z-index: 2147483647;
    background: #1e1b4b;
    color: #e0e7ff;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.65;
    padding: 12px 15px;
    border-radius: 11px;
    max-width: 290px;
    min-width: 160px;
    white-space: pre-line;
    text-align: left;
    pointer-events: none;
    box-shadow: 0 8px 28px rgba(0,0,0,.55);
    border: 1px solid rgba(99,102,241,.5);
    font-family: 'Inter', sans-serif;
    opacity: 0;
    transform: translateY(6px) scale(.97);
    transition: opacity .2s ease, transform .2s ease;
  }
  #tt-bubble.visible {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }
  /* Flèche triangulaire */
  #tt-bubble::before {
    content: '';
    position: absolute;
    width: 0; height: 0;
    border: 7px solid transparent;
    pointer-events: none;
  }
  #tt-bubble.arrow-down::before {   /* bulle au-dessus → flèche pointe en bas */
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border-top-color: #1e1b4b;
  }
  #tt-bubble.arrow-up::before {     /* bulle en-dessous → flèche pointe en haut */
    bottom: 100%; left: 50%;
    transform: translateX(-50%);
    border-bottom-color: #1e1b4b;
  }