/* Conteneur principal */
    .hero-banner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 80vh;
        /*background-color: #f8f9fa;*/
        text-align: center;
    }

    /* Le Logo Infocom-Réunion */
    .logo-infocom {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: 800;
        font-size: clamp(2rem, 8vw, 4.5rem); /* Taille fluide */
        letter-spacing: -1px;
        display: inline-block;
        padding: 20px;
        position: relative;
    }

    .part-info { color: #E00000; } /* Rouge */
    .part-com { color: #000000; }  /* Noir */
    .part-reunion { 
        display: block;
        font-size: 0.4em;
        text-transform: uppercase;
        letter-spacing: 10px;
        margin-top: -10px;
        color: #666;
    }

    /* Rappel Informatique : La Balise Code */
    .tech-tag {
        font-family: 'Consolas', 'Monaco', monospace;
        background: #000;
        color: #fff;
        font-size: 0.25em;
        padding: 4px 10px;
        vertical-align: middle;
        border-radius: 4px;
        margin-left: 10px;
        border-bottom: 3px solid #E00000;
    }

    /* Curseur clignotant type terminal */
    .cursor {
        display: inline-block;
        width: 12px;
        height: 1em;
        background-color: #E00000;
        margin-left: 5px;
        animation: blink 1s infinite;
    }

    @keyframes blink {
        50% { opacity: 0; }
    }

    .subtitle {
        margin-top: 20px;
        font-style: italic;
        color: #444;
    }

    /* ===== Bulles bleues aléatoires ===== */

.hero-banner {
    position: relative;
    overflow: hidden;
}

/* Conteneur */
/*.bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}/*

/* Bulle générique */
/*.bubbles span {
    --size: 60px;
    --delay: 0s;
    --duration: 10s;

    position: absolute;
    width: var(--size);
    height: var(--size);
    bottom: calc(-1 * var(--size));
    right: calc(-1 * var(--size));
    border-radius: 50%;
    opacity: 0;
    animation: bubbleMove var(--duration) linear infinite;
    animation-delay: var(--delay);

    background: radial-gradient(
        circle at 30% 30%,
        rgba(130, 190, 255, 0.45),
        rgba(60, 120, 220, 0.2),
        rgba(20, 60, 160, 0.05)
    );

    box-shadow:
        0 0 25px rgba(100, 160, 255, 0.3),
        inset 0 0 18px rgba(255, 255, 255, 0.35);
}*/

/* Valeurs pseudo-aléatoires */
/*.bubbles span:nth-child(1)  { --size: 35px;  --delay: 0s;   --duration: 9s; }
.bubbles span:nth-child(2)  { --size: 90px;  --delay: 1s;   --duration: 12s; }
.bubbles span:nth-child(3)  { --size: 55px;  --delay: 2.5s; --duration: 10s; }
.bubbles span:nth-child(4)  { --size: 120px; --delay: 4s;   --duration: 14s; }
.bubbles span:nth-child(5)  { --size: 70px;  --delay: 5.5s; --duration: 11s; }
.bubbles span:nth-child(6)  { --size: 45px;  --delay: 7s;   --duration: 9s; }
.bubbles span:nth-child(7)  { --size: 100px; --delay: 8.5s; --duration: 13s; }
.bubbles span:nth-child(8)  { --size: 65px;  --delay: 10s;  --duration: 10s; }
.bubbles span:nth-child(9)  { --size: 140px; --delay: 11.5s;--duration: 15s; }
.bubbles span:nth-child(10) { --size: 50px;  --delay: 13s;  --duration: 9s; }
*/
/* Animation diagonale bas-droite → haut-gauche */
/*@keyframes bubbleMove {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translate(-120vw, -120vh);
        opacity: 0;
    }
}*/

/* Contenu au-dessus */
.hero-banner > *:not(.bubbles) {
    position: relative;
    z-index: 1;
}


/* ===== Bulles dynamiques Twig ===== */

.hero-banner {
    position: relative;
    overflow: hidden;
}

/* Conteneur */
/*.bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}*/

/* Bulle générique */
/*.bubbles span {
    position: absolute;
    width: var(--size);
    height: var(--size);
    bottom: calc(-1 * var(--size));
    right: calc(-1 * var(--size));
    border-radius: 50%;
    opacity: 0;

    animation: bubbleMove var(--duration) linear infinite;
    animation-delay: var(--delay);

    background: radial-gradient(
        circle at 30% 30%,
        rgba(130, 190, 255, 0.45),
        rgba(60, 120, 220, 0.2),
        rgba(20, 60, 160, 0.05)
    );

    box-shadow:
        0 0 25px rgba(100, 160, 255, 0.3),
        inset 0 0 18px rgba(255, 255, 255, 0.35);
}*/

/* Animation diagonale */
/*@keyframes bubbleMove {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translate(-120vw, -120vh);
        opacity: 0;
    }
}*/

/* Le contenu reste au-dessus */
.hero-banner > *:not(.bubbles) {
    position: relative;
    z-index: 1;
}


/* ===== Server Selector ===== */

.server-selector {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
    max-width: 420px;
    margin: 30px auto 0;
    padding: 0 16px;
}

/* Carte */
.server-card {
    background: #ffffff;
    border: 2px solid #000;
    border-radius: 14px;
    padding: 22px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}

/* Nom serveur */
.server-name {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 1px;
    color: #000;
}

/* Hover (desktop) */
@media (hover: hover) {
    .server-card:hover {
        transform: translateY(-4px);
        border-color: #E00000;
    }
}

/* Sélection */
.server-card.active {
    background: #000;
    border-color: #E00000;
}

.server-card.active .server-name {
    color: #fff;
}

/* Barre rouge bas */
.server-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 0;
    background: #E00000;
    transition: width 0.3s ease;
}

.server-card.active::after {
    width: 100%;
}

/* Desktop */
@media (min-width: 768px) {
    .server-selector {
        grid-template-columns: repeat(2, 1fr);
        max-width: 700px;
    }
}