/* ══════════════════════════════════════════════════════════
   hero-info.css — Original Permis
   Icône d'information "i" + tooltip/popup contextuelle
   ──────────────────────────────────────────────────────────
   COMPOSANT INDÉPENDANT — pour supprimer proprement :
     1. retirer <link rel="stylesheet" href="hero-info.css">
     2. retirer le bloc .info-tooltip dans index.html
     3. retirer <script src="herosinfo.js" defer>
   ──────────────────────────────────────────────────────────
   Pour réutiliser ailleurs sur le site : copier le bloc
   <span class="info-tooltip" data-info-tooltip> ... </span>
   et changer uniquement le contenu de .info-tooltip-content
   (et l'id unique de .info-tooltip-popup / aria-describedby).
══════════════════════════════════════════════════════════ */

.info-tooltip {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    margin-left: .45em;
  }
  
  /* ── Icône ronde "i" ── */
  .info-tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 1.5px solid var(--green-light, #52B788);
    border-radius: 50%;
    background: var(--green-ghost, rgba(45, 106, 79, .12));
    color: var(--green-light, #52B788);
    font-family: var(--font-ui, 'Outfit', sans-serif);
    font-size: 12px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: transform .2s var(--ease, ease),
                background .2s var(--ease, ease),
                color .2s var(--ease, ease),
                box-shadow .2s var(--ease, ease);
  }
  
  .info-tooltip-icon:hover,
  .info-tooltip-icon:focus-visible {
    background: var(--green-light, #52B788);
    color: var(--surface-white, #fff);
    transform: scale(1.12);
    outline: none;
    box-shadow: 0 0 0 4px var(--green-ghost, rgba(45, 106, 79, .18));
  }
  
  .info-tooltip-icon[aria-expanded="true"] {
    background: var(--green-light, #52B788);
    color: var(--surface-white, #fff);
  }
  
  /* ── Popup / tooltip ── */
  .info-tooltip-popup {
    position: absolute;
    z-index: 200;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 6px);
    width: max-content;
    max-width: min(320px, 82vw);
  
    padding: .9rem 1.1rem;
    border-radius: var(--radius-md, 14px);
    background: var(--surface-dark2, #111F18);
    border: 1px solid var(--green-ghost, rgba(45, 106, 79, .25));
    box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,.18));
  
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s var(--ease, ease),
                transform .2s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)),
                visibility 0s linear .2s;
  }
  
  /* Petite flèche pointant vers l'icône, par défaut : en bas / centrée */
  .info-tooltip-popup::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--surface-dark2, #111F18);
    border-right: 1px solid var(--green-ghost, rgba(45, 106, 79, .25));
    border-bottom: 1px solid var(--green-ghost, rgba(45, 106, 79, .25));
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  
  /* ── États ouverts (hover desktop OU classe JS pour le clic mobile) ── */
  .info-tooltip-icon:hover + .info-tooltip-popup,
  .info-tooltip-icon:focus-visible + .info-tooltip-popup,
  .info-tooltip.is-open .info-tooltip-popup {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition: opacity .2s var(--ease, ease),
                transform .22s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)),
                visibility 0s linear 0s;
  }
  
  /* ── Repositionnement automatique via classes ajoutées en JS ── */
  
  /* Bord droit de l'écran trop proche : aligner le popup à droite de l'icône */
  .info-tooltip-popup.pos-right {
    left: auto;
    right: 0;
    transform: translate(0, 6px);
  }
  .info-tooltip-popup.pos-right::after {
    left: auto;
    right: 14px;
    transform: translate(0, -50%) rotate(45deg);
  }
  .info-tooltip.is-open .info-tooltip-popup.pos-right,
  .info-tooltip-icon:hover + .info-tooltip-popup.pos-right,
  .info-tooltip-icon:focus-visible + .info-tooltip-popup.pos-right {
    transform: translate(0, 0);
  }
  
  /* Bord gauche de l'écran trop proche : aligner le popup à gauche de l'icône */
  .info-tooltip-popup.pos-left {
    left: 0;
    right: auto;
    transform: translate(0, 6px);
  }
  .info-tooltip-popup.pos-left::after {
    left: 14px;
    right: auto;
    transform: translate(0, -50%) rotate(45deg);
  }
  .info-tooltip.is-open .info-tooltip-popup.pos-left,
  .info-tooltip-icon:hover + .info-tooltip-popup.pos-left,
  .info-tooltip-icon:focus-visible + .info-tooltip-popup.pos-left {
    transform: translate(0, 0);
  }
  
  /* Pas assez de place au-dessus : afficher le popup EN DESSOUS de l'icône */
  .info-tooltip-popup.pos-below {
    bottom: auto;
    top: calc(100% + 10px);
    transform: translate(-50%, -6px);
  }
  .info-tooltip-popup.pos-below::after {
    top: auto;
    bottom: 100%;
    border-right: none;
    border-bottom: none;
    border-left: 1px solid var(--green-ghost, rgba(45, 106, 79, .25));
    border-top: 1px solid var(--green-ghost, rgba(45, 106, 79, .25));
    transform: translate(-50%, 50%) rotate(45deg);
  }
  .info-tooltip-popup.pos-below.pos-right,
  .info-tooltip-popup.pos-below.pos-left {
    transform: translate(0, -6px);
  }
  .info-tooltip.is-open .info-tooltip-popup.pos-below,
  .info-tooltip-icon:hover + .info-tooltip-popup.pos-below,
  .info-tooltip-icon:focus-visible + .info-tooltip-popup.pos-below {
    transform: translate(-50%, 0);
  }
  .info-tooltip.is-open .info-tooltip-popup.pos-below.pos-right,
  .info-tooltip-icon:hover + .info-tooltip-popup.pos-below.pos-right,
  .info-tooltip-icon:focus-visible + .info-tooltip-popup.pos-below.pos-right,
  .info-tooltip.is-open .info-tooltip-popup.pos-below.pos-left,
  .info-tooltip-icon:hover + .info-tooltip-popup.pos-below.pos-left,
  .info-tooltip-icon:focus-visible + .info-tooltip-popup.pos-below.pos-left {
    transform: translate(0, 0);
  }
  
  /* ── Contenu texte ── */
  .info-tooltip-content {
    display: block;
    font-family: var(--font-ui, 'Outfit', sans-serif);
    font-size: .86rem;
    line-height: 1.5;
    color: var(--text-white-dim, rgba(255,255,255,.8));
    text-align: left;
    white-space: normal;
  }
  
  .info-tooltip-content strong {
    color: var(--text-white, #fff);
    font-weight: 600;
  }
  
  /* ── Thème clair ── */
  [data-theme="light"] .info-tooltip-popup,
  [data-theme="light"] .info-tooltip-popup::after {
    background: var(--surface-white, #fff);
    border-color: var(--green-ghost, rgba(45, 106, 79, .18));
  }
  
  [data-theme="light"] .info-tooltip-content {
    color: var(--text-secondary, #4A5240);
  }
  
  [data-theme="light"] .info-tooltip-content strong {
    color: var(--text-primary, #1C2016);
  }
  
  /* ── Mobile : popup plus large, centrage plus généreux ── */
  @media (max-width: 640px) {
    .info-tooltip-popup {
      max-width: min(280px, 78vw);
      padding: .8rem 1rem;
    }
    .info-tooltip-content {
      font-size: .84rem;
    }
  }
  
  /* ── Respect des préférences de mouvement réduit ── */
  @media (prefers-reduced-motion: reduce) {
    .info-tooltip-popup,
    .info-tooltip-icon {
      transition: opacity .15s linear, visibility 0s linear !important;
    }
    .info-tooltip-popup {
      transform: none !important;
    }
  }