.popup-link {
      display: inline-block;
      margin: 8px 0 25px;
      color: #6A6972;
	  font-size:16px;
      text-decoration: underline;
      cursor: pointer;
    }

    /* Overlay (always present in DOM, but invisible by default) */
    .popup-overlay {
      position: fixed;
      inset: 0; /* top:0;right:0;bottom:0;left:0; */
      display: flex;
      justify-content: center;
      align-items: center;
      background: var(--overlay-bg);
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--dur) ease;
      z-index: 9999;
      -webkit-overflow-scrolling: touch;
    }

    /* visible state */
    .popup-overlay.open {
      opacity: 1;
      pointer-events: auto;
    }

    /* closing state (keeps pointer-events none) */
    .popup-overlay.closing {
      opacity: 0;
      pointer-events: none;
    }

    /* Popup box */
    .popup-content {
      background: #fff;
      border-radius: 8px;
      width: 92%;
      max-width: 480px;
      padding: 30px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.2);
      transform: translateY(6px) scale(.98);
      opacity: 0;
      transition:
        transform calc(var(--dur)) cubic-bezier(.2,.8,.2,1),
        opacity calc(var(--dur)) ease;
      position: relative;
      outline: none; /* used for focus */
		  max-height: 85vh;      /* hauteur max = 80% de la hauteur de la fenêtre */
  overflow-y: auto;      /* active la barre de scroll interne si besoin */
    }

    /* content visible when overlay is open */
    .popup-overlay.open .popup-content {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    /* close button */
    .close-btn {
      position: absolute;
      top: 10px;
      right: 12px;
      border: none;
      background: transparent;
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      color: #666;
      padding: 4px;
    }
    .close-btn:hover { color: #000; }

    /* small screens tweaks */
    @media (max-width: 420px) {
      .popup-content { padding: 16px; border-radius: 8px; }
      .close-btn { top: 8px; right: 10px; }
    }

/* ===== Scrollbar personnalisé pour le contenu de la popup ===== */
.popup-content::-webkit-scrollbar {
  width: 8px;                /* largeur de la barre verticale */
}

.popup-content::-webkit-scrollbar-track {
  background: #f1f1f1;        /* fond de la zone de scroll */
  border-radius: 8px;
}

.popup-content::-webkit-scrollbar-thumb {
  background: #888;           /* couleur de la barre */
  border-radius: 8px;
}

.popup-content::-webkit-scrollbar-thumb:hover {
  background: #555;           /* couleur au survol */
}

/* Firefox */
.popup-content {
  scrollbar-width: thin;              /* "auto" ou "thin" */
  scrollbar-color: #888 #f1f1f1;      /* couleur de la barre + fond */
}