/**
 * DISCORAK - Styles Hero
 * Grille 12 colonnes - contenu 7col / stats 5col
 */

/* ============================================================
   SECTION HERO
   ============================================================ */
#hero {
    position:               relative;
    display:                grid;
    grid-template-columns:  7fr 5fr;
    align-items:            center;
    min-height:             90vh;
    padding:                4rem 15%;
    overflow:               hidden;
    gap:                    2rem;
}

/* ============================================================
   FOND IMAGE HERO
   ============================================================ */
.hero-bg {
    position:   absolute;
    inset:      0;
    margin:     0;
    z-index:    0;
}

.hero-bg img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    opacity:    0.2;
}

/* ============================================================
   CONTENU GAUCHE - 7 colonnes
   ============================================================ */
.hero-content {
    position:       relative;
    z-index:        1;
    display:        flex;
    flex-direction: column;
    gap:            1.2rem;
}

/* Badge */
.hero-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            0.4rem;
    padding:        0.35rem 0.9rem;
    background:     rgba(0, 245, 255, 0.08);
    border:         1px solid rgba(0, 245, 255, 0.25);
    border-radius:  50px;
    font-size:      0.82rem;
    color:          var(--text-secondary);
    width:          fit-content;
}

/* Titre principal */
.hero-title {
    font-family:    var(--font-logo);
    font-size:      4rem;
    font-weight:    900;
    line-height:    1;
    letter-spacing: 2px;
}

/* Sous-titre */
.hero-subtitle {
    font-family:    var(--font-primary);
    font-size:      1.5rem;
    font-weight:    700;
    color:          var(--text-primary);
}

/* Description */
.hero-description {
    font-size:      0.95rem;
    color:          var(--text-secondary);
    line-height:    1.7;
    max-width:      480px;
}

/* Boutons */
.hero-buttons {
    display:        flex;
    align-items:    center;
    gap:            1rem;
    margin-top:     0.5rem;
}

/* ============================================================
   STATS DROITE - 5 colonnes
   ============================================================ */
.hero-stats {
    position:   relative;
    z-index:    1;
}

.stats-card {
    background:         rgba(13, 13, 26, 0.75);
    border:             1px solid rgba(42, 42, 74, 0.8);
    border-radius:      16px;
    padding:            2rem;
    display:            flex;
    flex-direction:     column;
    gap:                1.8rem;
    list-style:         none;
    backdrop-filter:    blur(12px);
    width:              100%;
}

/* Item stat */
.stat-item {
    display:        flex;
    align-items:    center;
    gap:            1.2rem;
}

/* Icone stat */
.stat-icon {
    width:              48px;
    height:             48px;
    border-radius:      10px;
    display:            inline-flex;
    align-items:        center;
    justify-content:    center;
    font-size:          1.3rem;
    flex-shrink:        0;
}

.stat-cyan   { background: rgba(0, 245, 255, 0.15); }
.stat-pink   { background: rgba(255, 0, 110, 0.15); }
.stat-yellow { background: rgba(255, 230, 0, 0.15); }
.stat-green  { background: rgba(0, 255, 136, 0.15); }

/* Contenu stat */
.stat-content {
    display:        inline-flex;
    flex-direction: column;
    gap:            0.2rem;
}

/* Grand chiffre coloré */
.stat-number {
    font-family:    var(--font-logo);
    font-size:      1.8rem;
    font-weight:    900;
    line-height:    1;
}

/* Label */
.stat-label {
    font-size:  0.82rem;
    color:      var(--text-secondary);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
    #hero {
        padding: 4rem 5%;
    }
}

@media (max-width: 1024px) {
    #hero {
        grid-template-columns:  1fr;
        padding:                4rem 2rem;
        text-align:             center;
    }

    .hero-badge {
        margin: 0 auto;
    }

    .hero-buttons {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }
}