body {

      background-size: cover;

      color: #fff;

      font-family: 'Poppins', sans-serif;

      overflow-x: hidden;

    }

    section {

      scroll-margin-top: 100px;

    }

    .glass {

      background: rgba(30, 41, 59, 0.85);

      backdrop-filter: blur(8px);

      border-radius: 1rem;

      border: 1px solid rgba(255, 255, 255, 0.12);

    }

    a {

      transition: background-color 0.3s ease;

    }



    @keyframes fadeIn {

      from { opacity: 0; transform: translateY(20px); }

      to { opacity: 1; transform: translateY(0); }

    }

    .animate-fadeIn {
        animation: none !important;
        opacity: 1 !important;
    }

    video {

      border-radius: 1rem;

      box-shadow: 0 8px 24px rgba(0,0,0,0.6);

    }



    @keyframes pulseGlow {

      0%, 100% { box-shadow: 0 0 12px 2px rgba(6,182,212,0.7); }

      50% { box-shadow: 0 0 20px 6px rgba(6,182,212,1); }

    }

    .btn-pulse {

      animation: pulseGlow 3s ease-in-out infinite;

    }



    .btn-pulse:hover {

      animation-play-state: paused;

      background-color: #0bc9d0;

      box-shadow: 0 0 28px 10px rgba(6,182,212,1);

      transform: scale(1.05);

      transition: all 0.3s ease;

    }



    .logo-img {

      height: 36px;

      width: 36px;

      margin-right: 12px;

      object-fit: contain;

    }



    .member-node {

      background-color: rgba(255, 255, 255, 0.12);

      color: white;

      padding: 1rem;

      border-radius: 1rem;

      text-align: center;

      font-weight: bold;

      position: relative;

      width: 140px;

      transition: transform 0.2s ease;

      cursor: pointer;

    }



    .member-node:hover {

      transform: scale(1.05);

    }



    .tooltip {

      position: absolute;

      bottom: 110%;

      left: 50%;

      transform: translateX(-50%);

      background-color: #111;

      color: white;

      padding: 0.5rem 1rem;

      border-radius: 0.25rem;

      white-space: nowrap;

      opacity: 0;

      transition: opacity 0.3s ease;

      pointer-events: none;

      z-index: 10;

      border-radius: 1rem;

    }



    .member-node:hover .tooltip {

      opacity: 1;

    }



    .tree-container {

      display: flex;

      flex-direction: column;

      align-items: center;

      gap: 2rem;

      padding: 2rem 1rem;

    }



    .tree-level {

      display: flex;

      justify-content: center;

      gap: 2rem;

      position: relative;

      flex-wrap: wrap;

    }



    .popup-overlay {

      position: fixed;

      top: 0; left: 0; right: 0; bottom: 0;

      background-color: rgba(0,0,0,0.5);

      display: none;

      justify-content: center;

      align-items: center;

      z-index: 50;

      animation: fadeIn 0.3s ease;

    }



    .popup-content {

      background-color: rgba(30, 41, 59, 1);;

      border-radius: 1rem;

      padding: 2rem;

      max-width: 700px;

      width: 100%;

      overflow-y: auto;

      max-height: 80vh;

      animation: scaleIn 0.3s ease;

    }



    @keyframes scaleIn {

      from { transform: scale(0.9); opacity: 0; }

      to { transform: scale(1); opacity: 1; }

    }



    @keyframes fadeIn {

      from { opacity: 0; }

      to { opacity: 1; }

    }



    .avatar {

      width: 80px;

      height: 80px;

      border-radius: 50%;

      object-fit: cover;

      margin: 0 auto 0.5rem;

    }



    video#bgvid {

      position: fixed; right: 0; bottom: 0;

      min-width: 100%; min-height: 100%;

      width: auto; height: auto; z-index: -100;

      background-size: cover;

    }

/* Popups de connexion/2FA/Reset - Affichage immédiat */
#loginPopup,
#errorPopup2FA,
#PWResetPopup,
[id^="errorPopup"] {
    transition: none !important;
    animation: none !important;
}

/* Le texte apparaît instantanément */
#loginPopup *,
#errorPopup2FA *,
#PWResetPopup *,
[id^="errorPopup"] * {
    animation: none !important;
    transition: none !important;
}

/* Overlay apparaît instantanément */
.fixed.inset-0 {
    transition: opacity 0.15s ease !important; /* Très rapide */
}

/* Optionnel : Si vous voulez garder une légère transition pour l'apparition */
.popup-overlay,
.glass {
    animation: quickFadeIn 0.2s ease-out !important;
}

@keyframes quickFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Force le texte à être visible immédiatement */
.text-gray-300,
.text-white,
.text-red-400,
.text-green-400,
.text-orange-400,
.text-cyan-400 {
    opacity: 1 !important;
    visibility: visible !important;
}