// page saison

.f1-lineup {
    padding: 4rem 0;
    background: #f5f5f5;

    .container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 15px;
    }

    .lineup-title {
        text-align: center;
        font-size: 2.5rem;
        margin-bottom: 3rem;
        color: #333;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    .teams-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 1.5rem;
    }

    .team-card {
        display: flex;
        background: white;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;

        &:hover {
            transform: translateY(-5px);
        }

        .team-header {
            width: 30%;
            padding: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                max-width: 100%;
                height: auto;
                max-height: 80px;
                object-fit: contain;
            }

            // Red Bull Racing
            &.rbr {
                background: linear-gradient(135deg, #0600EF 0%, #1B1464 100%);
            }

            // Mercedes
            &.mercedes {
                background: linear-gradient(135deg, #00A19C 0%, #2C2C2C 100%);
            }

            // Ferrari
            &.ferrari {
                background: linear-gradient(135deg, #FF2800 0%, #8B0000 100%);
            }

            // McLaren
            &.mclaren {
                background: linear-gradient(135deg, #FF8700 0%, #2C2C2C 100%);
            }

            // Aston Martin
            &.astonmartin {
                background: linear-gradient(135deg, #006F62 0%, #2C2C2C 100%);
            }

            // Alpine
            &.alpine {
                background: linear-gradient(135deg, #0090FF 0%, #2C2C2C 100%);
            }

            // Williams
            &.williams {
                background: linear-gradient(135deg, #005AFF 0%, #00001F 100%);
            }

            // Visa Cash App RB
            &.visarb {
                background: linear-gradient(135deg, #1E1E1E 0%, #2B4562 100%);
            }

            // Stake F1 (Sauber)
            &.stake {
                background: linear-gradient(135deg, #52E252 0%, #1D1D1B 100%);
            }

            // Haas
            &.haas {
                background: linear-gradient(135deg, #FFFFFF 0%, #B6BABD 100%);

                img {
                    // Ajout d'un filtre pour mieux voir le logo blanc sur fond clair
                    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
                }
            }

            // Réservistes
            &.reserve {
                background: linear-gradient(135deg, #FF69B4 0%, #C71585 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                
                h3 {
                    font-size: 1.2rem;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                }
            }
        }

        .drivers {
            width: 70%;
            padding: 1rem;
            background: white;

            .driver {
                display: grid;
                grid-template-columns: 1fr auto;
                align-items: center;
                gap: 1rem;
                padding: 0.75rem 1rem;
                border-radius: 8px;
                margin-bottom: 0.5rem;
                background: #f8f8f8;
                transition: background 0.3s ease;

                &:hover {
                    background: #f0f0f0;
                }

                h3 {
                    font-size: 1rem;
                    margin: 0;
                    font-weight: 600;
                }

                .points {
                    background: #333;
                    color: white;
                    padding: 0.5rem;
                    border-radius: 5px;
                    font-size: 0.9rem;
                    text-align: center;
                    min-width: 40px;

                    &:before {
                        content: 'PTS';
                        display: block;
                        font-size: 0.6rem;
                        opacity: 0.7;
                    }
                }

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
}

// Media Queries
@media (max-width: 992px) {
    .f1-lineup {
        .teams-grid {
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        }

        .team-card {
            flex-direction: column;

            .team-header {
                width: 100%;
                padding: 1rem;
            }

            .drivers {
                width: 100%;
            }
        }
    }
}

@media (max-width: 480px) {
    .f1-lineup {
        padding: 2rem 0;

        .lineup-title {
            font-size: 1.8rem;
        }

        .driver {
            h3 {
                font-size: 0.9rem;
            }
        }
    }
}

.lineup {
    .card {
        transition: transform 0.2s;
        
        &:hover {
            transform: translateY(-5px);
        }
    }

    .card-title {
        font-weight: bold;
        margin-bottom: 1rem;
    }
}

// Styles pour l'organigramme
.organigramme-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;

    .org-level {
        margin-bottom: 3rem;
        text-align: center;

        h2 {
            color: #333;
            margin-bottom: 1.5rem;
            font-size: 1.8rem;
            position: relative;
            
            &:after {
                content: '';
                position: absolute;
                bottom: -10px;
                left: 50%;
                transform: translateX(-50%);
                width: 50px;
                height: 3px;
                background: #2196F3;
            }
        }

        &.staff-level, &.division-level {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
        }
    }

    .org-members {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
    }

    .org-member {
        background: white;
        border-radius: 15px;
        padding: 1.5rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        width: 200px;
        transition: transform 0.3s ease;

        &:hover {
            transform: translateY(-5px);
        }

        .member-info {
            text-align: center;

            .member-name {
                display: block;
                font-weight: 600;
                font-size: 1.1rem;
                color: #333;
                margin-bottom: 0.5rem;
            }

            .member-role {
                display: block;
                font-size: 0.9rem;
                color: #666;
            }
        }

        // Styles spécifiques pour chaque rôle
        &.founder {
            border-left: 4px solid #ffff00;
        }

        &.admin {
            border-left: 4px solid #ffa600;
        }

        &.mod {
            border-left: 4px solid #ff0000;
        }

        &.d1 {
            border-left: 4px solid #00eeff;
        }

        &.d2 {
            border-left: 4px solid #07756b;
        }

        &.fia {
            border-left: 4px solid #0dff00;
        }

        &.caster {
            border-left: 4px solid #bd156f;
        }

        &.empty {
            background: rgba(255, 255, 255, 0.9);
            border: 2px dashed rgba(0, 0, 0, 0.1);

            .empty-message {
                color: #666;
                font-style: italic;
                font-size: 0.9rem;
            }

            // Couleurs spécifiques pour chaque rôle vide
            &.founder {
                background: rgba(255, 255, 0, 0.1);
                border-color: rgba(255, 255, 0, 0.3);
            }

            &.admin {
                background: rgba(255, 166, 0, 0.1);
                border-color: rgba(255, 166, 0, 0.3);
            }

            &.mod {
                background: rgba(255, 0, 0, 0.1);
                border-color: rgba(255, 0, 0, 0.3);
            }

            &.d1 {
                background: rgba(0, 238, 255, 0.1);
                border-color: rgba(0, 238, 255, 0.3);
            }

            &.d2 {
                background: rgba(7, 117, 107, 0.1);
                border-color: rgba(7, 117, 107, 0.3);
            }

            &.fia {
                background: rgba(13, 255, 0, 0.1);
                border-color: rgba(13, 255, 0, 0.3);
            }

            &.caster {
                background: rgba(189, 21, 111, 0.1);
                border-color: rgba(189, 21, 111, 0.3);
            }
        }
    }
}

// Responsive
@media (max-width: 768px) {
    .organigramme-container {
        padding: 1rem;

        .org-level {
            &.staff-level, &.division-level {
                grid-template-columns: 1fr;
            }
        }

        .org-member {
            width: 100%;
            max-width: 250px;
        }
    }
}

// Footer
.footer {
    background: #1a1a1a;
    color: #fff;
    padding: 1.5rem 0;
    margin-top: 4rem;

    .footer-content {
        .flex-1 {
            flex: 1;
        }

        @media (max-width: 768px) {
            flex-direction: column;
            align-items: center;
            gap: 1.5rem;

            .flex-1 {
                flex: none;
                width: 100%;
                text-align: center;
            }
        }
    }

    .footer-logo {
        img {
            width: 80px;
            height: auto;
        }
    }

    .social-links {
        display: flex;
        justify-content: center;
        gap: 1rem;

        .social-link {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 1.1rem;
            transition: transform 0.2s;

            &:hover {
                transform: translateY(-3px);
            }

            &.discord {
                background: #7289da;
            }

            &.twitch {
                background: #6441a5;
            }

            &.twitter {
                background: #000000;
            }
        }
    }

    .copyright {
        color: #999;
        font-size: 0.9rem;

        @media (max-width: 768px) {
            text-align: center;
        }
    }
}

// Hero Section
.hero-section {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
                url('../imgs/F1-24.webp') center/cover;
    height: 60vh;
    display: flex;
    align-items: center;
    text-align: center;
    color: white;

    .hero-content {
        .main-title {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .subtitle {
            font-size: 1.5rem;
            opacity: 0.9;
        }
    }
}

// Features Section
.features-section {
    padding: 5rem 0;
    background: #f8f9fa;

    .features-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
        
        @media (max-width: 992px) {
            grid-template-columns: repeat(2, 1fr);
        }
        
        @media (max-width: 576px) {
            grid-template-columns: 1fr;
        }
    }

    .feature-card {
        background: white;
        padding: 2rem;
        border-radius: 10px;
        text-align: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;

        &:hover {
            transform: translateY(-5px);
        }

        .feature-icon {
            width: 70px;
            height: 70px;
            margin: 0 auto 1.5rem;
            background: #f8f9fa;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            color: #333;
        }

        h3 {
            font-size: 1.3rem;
            margin-bottom: 1rem;
            color: #333;
        }

        p {
            color: #666;
            font-size: 0.95rem;
            line-height: 1.5;
        }
    }

    .join-section {
        text-align: center;
        margin-top: 4rem;

        .join-button {
            display: inline-flex;
            align-items: center;
            gap: 0.8rem;
            padding: 1rem 2rem;
            font-size: 1.2rem;
            font-weight: 600;
            color: white;
            background: #7289da;
            border-radius: 8px;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(114, 137, 218, 0.2);

            i {
                font-size: 1.4rem;
            }

            &:hover {
                transform: translateY(-3px);
                background: #5b73c7;
                box-shadow: 0 6px 12px rgba(114, 137, 218, 0.3);
            }
        }
    }
}

// Responsive
@media (max-width: 768px) {
    .hero-section {
        height: 50vh;

        .hero-content {
            .main-title {
                font-size: 2.5rem;
            }

            .subtitle {
                font-size: 1.2rem;
            }
        }
    }

    .features-section {
        padding: 3rem 0;

        .join-section {
            margin-top: 3rem;

            .join-button {
                padding: 0.8rem 1.6rem;
                font-size: 1.1rem;

                i {
                    font-size: 1.2rem;
                }
            }
        }
    }
}

// Navigation
.navbar {
    padding: 1rem 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

    .navbar-brand {
        img {
            transition: transform 0.2s;

            &:hover {
                transform: scale(1.05);
            }
        }
    }

    .nav-link {
        font-weight: 500;
        padding: 0.5rem 1rem;
        transition: color 0.3s;
        position: relative;

        &:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 2px;
            background: #fff;
            transition: width 0.3s;
        }

        &:hover, &.active {
            color: #fff;

            &:after {
                width: 80%;
            }
        }
    }

    @media (max-width: 991px) {
        .navbar-nav {
            padding: 1rem 0;

            .nav-link {
                padding: 0.5rem 0;
                
                &:after {
                    display: none;
                }
            }
        }
    }
}