body {

    background: var(--bg);

    color: #fff;

    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;

    line-height: 1.6;

    position: relative;

    margin: 0;

    padding: 0;

}



/* Ciblage de la section catégories */

.jeux-cat {

    display: flex;

    flex-wrap: wrap;

    /* Permet aux images de passer à la ligne */

    justify-content: center;

    /* Centre les éléments horizontalement */

    gap: 20px;

    /* Espace entre les bannières */

    padding: 20px;

}



.jeux-cat a {

    display: inline-block;

}



.banière {

    max-width: 100%;

    /* Empêche l'image de dépasser de l'écran */

    height: auto;

    /* Garde les proportions */

    display: block;

    margin: 0 auto;

    /* Centre l'image dans son lien */

}



/* Ajustements spécifiques pour mobile */

@media (max-width: 768px) {

    .section-catégories h2 {

        text-align: center;

        /* Centre le titre aussi */

    }



    .jeux-cat {

        flex-direction: column;

        /* Aligne les bannières les unes sous les autres */

        align-items: center;

        /* Les centre parfaitement */

    }



    .banière {

        width: 90%;

        /* Donne une largeur confortable sur mobile */

    }

}



/* === CANVAS BACKGROUND ANIMATION === */

#bgCanvas {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: -1;

    pointer-events: none;

    background: radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.05), transparent 70%);

}





/* --- Section Hero --- */

.hero {

    position: relative;

    height: 100vh;

    background: url("../img/bg-hero.jpg") no-repeat center center/cover;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    overflow: hidden;

}



.hero::after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.7);

    z-index: 1;

}



/* --- Contenu du Hero --- */

.hero-content {

    position: relative;

    z-index: 2;

    max-width: 900px;

    padding: 0 20px;

}



.hero-content h1 {

    font-size: 3.5rem;

    font-weight: 700;

    line-height: 1.3;

}



.hero-content h1 span {

    color: #d4af37;

}



/* --- Bouton principal --- */

.cta-btn {

    display: inline-block;

    margin-top: 40px;

    background-color: #d4af37;

    color: #fff;

    font-weight: 600;

    font-size: 1.1rem;

    padding: 15px 35px;

    border-radius: 50px;

    text-decoration: none;

    transition: all 0.3s ease;

    box-shadow: 0 0 25px rgba(212, 175, 55, 0.5);

}



.cta-btn:hover {

    background-color: #fff;

    color: #000;

    box-shadow: 0 0 35px rgba(212, 175, 55, 0.8);

}



.cta-btn i {

    margin-left: 10px;

    transition: transform 0.3s ease;

}



.cta-btn:hover i {

    transform: translateX(5px);

}



/* --- Fond avec particules dorées scintillantes --- */

.sparkle-background {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: #000000;

    z-index: 0;

    pointer-events: none;

}



#particlesCanvas {

    width: 100%;

    height: 100%;

    display: block;

}



/* --- Toutes les sections après le hero doivent être au-dessus du fond --- */

.coaching-steps,

.section-catégories,

.détaille {

    position: relative;

    z-index: 1;

}



/* --- Responsive --- */

@media (max-width: 768px) {

    .hero-content h1 {

        font-size: 2.2rem;

    }



    .cta-btn {

        font-size: 1rem;

        padding: 12px 25px;

    }

}



/* --- SECTION COACHING --- */

.coaching-steps {

    background-color: transparent;

    color: #fff;

    text-align: center;

    padding: 100px 10%;

}



.coaching-steps h2 {

    font-size: 4rem;

    font-weight: 700;

    margin-bottom: 10px;

    color: #fff;

}







.coaching-steps .subtitle {

    color: #d4af37;

    font-weight: 400;

    margin-bottom: 70px;

    font-size: 1rem;

    letter-spacing: 0.5px;

}



.steps-container {

    display: flex;

    justify-content: center;

    gap: 100px;

    flex-wrap: wrap;

}



/* Bloc individuel */

.step {

    max-width: 300px;

    text-align: center;

}



/* Cercle numéroté */

.number {

    background-color: #d4af37;

    color: #000;

    font-weight: 700;

    font-size: 3rem;

    width: 95px;

    height: 95px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 0 auto 25px auto;

    box-shadow: 0 0 25px rgba(212, 175, 55, 0.4);

}



/* Icône */

.step-icon {

    font-size: 2.8rem;

    color: #d4af37;

    margin-bottom: 20px;

}



/* Titres et texte */

.step h3 {

    font-size: 2rem;

    font-weight: 600;

    margin-bottom: 10px;

}



.step p {

    font-size: 0.95rem;

    color: #ccc;

    line-height: 1.6;

}



/* --- Responsive --- */

@media (max-width: 992px) {

    .steps-container {

        flex-direction: column;

        align-items: center;

        gap: 70px;

    }



    .step {

        max-width: 80%;

    }



    .coaching-steps h2 {

        font-size: 2.2rem;

    }

}



.section-catégories {

    background-color: transparent;

    color: #fff;

    text-align: center;

    padding: 100px 10%;

}



.section-catégories h2 {

    font-size: 5rem;

    font-weight: 700;

    margin-bottom: 10px;

    color: #fff;

}



.jeux-cat {

    margin-top: 10%;

    display: flex;

    width: 100%;

    justify-content: center;

    align-items: center;

    gap: 20px;

    flex-wrap: wrap;

    align-content: center;

}



.banière {

    position: relative;

    width: 185px;

    height: auto;

    border-radius: 15px;

    overflow: hidden;

    box-shadow: 0 0 25px rgba(212, 175, 55, 0.4);

    cursor: pointer;

    transition: transform 0.3s ease;

}



.banière:hover {

    transform: scale(1.05);

    box-shadow: 0 0 35px rgba(212, 175, 55, 0.6);

}



.détaille {

    padding: 60px 20px;

    border-radius: 16px;

    margin: 60px auto;

    max-width: 1200px;

    color: #fff;

}



.texte-plus-video {

    display: flex;

    gap: 40px;

    align-items: flex-start;

    flex-wrap: wrap;

}



.texte {

    flex: 1 1 450px;

    text-align: left;

}



.texte h4 {

    font-size: clamp(2rem, 3vw, 3rem);

    font-weight: 700;

    margin-bottom: 20px;

    color: #d4af37;

    position: relative;

}



.texte h4::after {

    content: '';

    display: block;

    width: 60px;

    height: 4px;

    background: #d4af37;

    margin-top: 10px;

    border-radius: 2px;

}



.texte p.détaille-video {

    font-size: 1.2rem;

    color: #ccc;

    margin-bottom: 30px;

    line-height: 1.6;

}



.détaille-liste {

    list-style: none;

    padding: 0;

    margin: 0;

}



.détaille-liste li {

    font-size: 1.1rem;

    color: #ccc;

    margin-bottom: 12px;

    display: flex;

    align-items: center;

    gap: 10px;

    text-shadow: 0 0 2px #ccc;

}



.détaille-liste li i {

    color: #ccc;

    font-size: 1.2rem;

}



.video {

    margin-top: 7%;

    flex: 1 1 500px;

    display: flex;

    justify-content: center;

    align-items: center;

}



.video iframe {

    width: 100%;

    max-width: 100%;

    aspect-ratio: 16 / 9;

    border: none;

    border-radius: 16px;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);

    transition: transform 0.4s ease, box-shadow 0.4s ease;

}



.video iframe:hover {

    transform: scale(1.02);

    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);

}



/* Responsive */

@media (max-width: 900px) {

    .texte-plus-video {

        flex-direction: column;

        gap: 30px;

    }



    .texte,

    .video {

        flex: 1 1 100%;

    }



    .texte h4::after {

        width: 40px;

    }



    .section-catégories h2 {

        font-size: 50px;

    }

}



/* --- Mot "gagner" doré avec néon et pulsation --- */

.highlight-gagner {

    color: #ffb800;

    font-weight: 700;

    display: inline-block;

}





        .cta-btn {

            display: inline-block;

            margin-top: 40px;

            background-color: #d4af37;

            color: #fff;

            font-weight: 600;

            font-size: 1.1rem;

            padding: 15px 35px;

            border-radius: 50px;

            text-decoration: none;

            transition: all 0.3s ease;

            box-shadow: 0 0 25px rgba(212, 175, 55, 0.5);

        }



        .cta-btn:hover {

            background-color: #fff;

            color: #000;

            box-shadow: 0 0 35px rgba(212, 175, 55, 0.8);

        }



        .cta-btn i {

            margin-left: 10px;

            transition: transform 0.3s ease;

        }



        .cta-btn:hover i {

            transform: translateX(5px);

        }



        /* --- Toutes les sections --- */

        .coaching-steps,

        .section-catégories,

        .about-section,

        .détaille {

            position: relative;

            z-index: 1;

        }



        /* --- SECTION COACHING --- */

        .coaching-steps {

            background-color: transparent;

            color: #fff;

            text-align: center;

            padding: 100px 10%;

        }



        .coaching-steps h2 {

            font-size: 3rem;

            font-weight: 700;

            margin-bottom: 10px;

            color: #fff;

        }



        .coaching-steps .subtitle {

            color: #d4af37;

            font-weight: 400;

            margin-bottom: 70px;

            font-size: 1rem;

            letter-spacing: 0.5px;

        }



        .steps-container {

            display: flex;

            justify-content: center;

            gap: 100px;

            flex-wrap: wrap;

        }



        .step {

            max-width: 300px;

            text-align: center;

        }



        .number {

            background-color: #d4af37;

            color: #000;

            font-weight: 700;

            font-size: 3rem;

            width: 95px;

            height: 95px;

            border-radius: 50%;

            display: flex;

            justify-content: center;

            align-items: center;

            margin: 0 auto 25px auto;

            box-shadow: 0 0 25px rgba(212, 175, 55, 0.4);

        }



        .step-icon {

            font-size: 2.8rem;

            color: #d4af37;

            margin-bottom: 20px;

        }



        .step h3 {

            font-size: 2rem;

            font-weight: 600;

            margin-bottom: 10px;

        }



        .step p {

            font-size: 0.95rem;

            color: #ccc;

            line-height: 1.6;

        }



        /* --- SECTION CATEGORIES --- */

        .section-catégories {

            background-color: transparent;

            color: #fff;

            text-align: center;

            padding: 100px 10%;

        }



        .section-catégories h2 {

            font-size: 3rem;

            font-weight: 700;

            margin-bottom: 10px;

            color: #fff;

        }



        .jeux-cat {

            margin-top: 10%;

            display: flex;

            width: 100%;

            justify-content: center;

            align-items: center;

            gap: 20px;

            flex-wrap: wrap;

            align-content: center;

        }



        .jeux-cat a {

            display: inline-block;

        }



        .banière {

            position: relative;

            width: 185px;

            height: auto;

            border-radius: 15px;

            overflow: hidden;

            box-shadow: 0 0 25px rgba(212, 175, 55, 0.4);

            cursor: pointer;

            transition: transform 0.3s ease;

        }



        .banière:hover {

            transform: scale(1.05);

            box-shadow: 0 0 35px rgba(212, 175, 55, 0.6);

        }



        /* ====================================== */

        /* === NOUVELLE SECTION QUI SOMMES-NOUS === */

        /* ====================================== */

        .about-section {

            padding: 100px 10%;

            background: linear-gradient(180deg, transparent 0%, rgba(212, 175, 55, 0.03) 50%, transparent 100%);

        }



        .about-header {

            text-align: center;

            margin-bottom: 80px;

        }



        .about-header h2 {

            font-size: 3.5rem;

            font-weight: 700;

            color: #fff;

            margin-bottom: 20px;

            position: relative;

            display: inline-block;

        }



        .about-header h2::after {

            content: '';

            position: absolute;

            bottom: -15px;

            left: 50%;

            transform: translateX(-50%);

            width: 100px;

            height: 4px;

            background: linear-gradient(90deg, transparent, #d4af37, transparent);

            border-radius: 2px;

        }



        .about-intro {

            max-width: 900px;

            margin: 0 auto 80px;

            text-align: center;

        }



        .about-intro p {

            font-size: 1.15rem;

            color: #ccc;

            line-height: 1.8;

            margin-bottom: 20px;

        }



        .about-intro .highlight-text {

            color: #d4af37;

            font-weight: 600;

        }



        .stats-row {

            display: flex;

            justify-content: center;

            gap: 60px;

            margin-top: 40px;

            flex-wrap: wrap;

        }



        .stat-item {

            text-align: center;

            padding: 25px 40px;

            background: rgba(212, 175, 55, 0.08);

            border: 1px solid rgba(212, 175, 55, 0.2);

            border-radius: 15px;

            transition: all 0.3s ease;

        }



        .stat-item:hover {

            transform: translateY(-5px);

            box-shadow: 0 15px 40px rgba(212, 175, 55, 0.15);

            border-color: rgba(212, 175, 55, 0.4);

        }



        .stat-number {

            font-size: 3rem;

            font-weight: 700;

            color: #d4af37;

            display: block;

        }



        .stat-label {

            font-size: 0.95rem;

            color: #aaa;

            text-transform: uppercase;

            letter-spacing: 1px;

        }



        /* Services Grid */

        .services-section {

            margin-bottom: 80px;

        }



        .services-section h3 {

            font-size: 2rem;

            font-weight: 600;

            color: #fff;

            text-align: center;

            margin-bottom: 50px;

        }



        .services-section h3 span {

            color: #d4af37;

        }



        .services-grid {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

            gap: 30px;

            max-width: 1000px;

            margin: 0 auto;

        }



        .service-card {

            background: rgba(255, 255, 255, 0.02);

            border: 1px solid rgba(212, 175, 55, 0.15);

            border-radius: 20px;

            padding: 40px 30px;

            text-align: center;

            transition: all 0.4s ease;

            position: relative;

            overflow: hidden;

        }



        .service-card::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 3px;

            background: linear-gradient(90deg, transparent, #d4af37, transparent);

            opacity: 0;

            transition: opacity 0.3s ease;

        }



        .service-card:hover::before {

            opacity: 1;

        }



        .service-card:hover {

            transform: translateY(-10px);

            background: rgba(212, 175, 55, 0.05);

            border-color: rgba(212, 175, 55, 0.3);

            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);

        }



        .service-icon {

            width: 80px;

            height: 80px;

            background: linear-gradient(135deg, #d4af37 0%, #ffb800 100%);

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            margin: 0 auto 25px;

            box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);

        }



        .service-icon i {

            font-size: 2rem;

            color: #000;

        }



        .service-card h4 {

            font-size: 1.4rem;

            font-weight: 600;

            color: #fff;

            margin-bottom: 15px;

        }



        .service-card p {

            font-size: 0.95rem;

            color: #aaa;

            line-height: 1.7;

        }



        /* Games Coaching Section */

        .games-coaching {

            margin-bottom: 80px;

        }



        .games-coaching h3 {

            font-size: 2rem;

            font-weight: 600;

            color: #fff;

            text-align: center;

            margin-bottom: 50px;

        }



        .games-coaching h3 span {

            color: #d4af37;

        }



        .games-list {

            display: flex;

            flex-wrap: wrap;

            justify-content: center;

            gap: 20px;

            max-width: 1000px;

            margin: 0 auto;

        }



        .game-tag {

            display: inline-flex;

            align-items: center;

            gap: 10px;

            padding: 15px 30px;

            background: rgba(212, 175, 55, 0.1);

            border: 1px solid rgba(212, 175, 55, 0.25);

            border-radius: 50px;

            color: #fff;

            font-weight: 500;

            font-size: 1rem;

            transition: all 0.3s ease;

            cursor: default;

        }



        .game-tag:hover {

            background: rgba(212, 175, 55, 0.2);

            border-color: #d4af37;

            transform: scale(1.05);

            box-shadow: 0 5px 20px rgba(212, 175, 55, 0.2);

        }



        .game-tag i {

            color: #d4af37;

            font-size: 1.2rem;

        }



        /* Mission Section */

        .mission-section {

            max-width: 900px;

            margin: 0 auto;

            text-align: center;

            padding: 60px 40px;

            background: linear-gradient(135deg, rgba(212, 175, 55, 0.08) 0%, rgba(212, 175, 55, 0.02) 100%);

            border: 1px solid rgba(212, 175, 55, 0.2);

            border-radius: 25px;

            position: relative;

        }



        .mission-section::before {

            content: '\f005';

            font-family: 'Font Awesome 6 Free';

            font-weight: 900;

            position: absolute;

            top: 30px;

            left: 50%;

            transform: translateX(-50%);

            font-size: 2rem;

            color: #d4af37;

            background: var(--bg);

            padding: 0 20px;

        }



        .mission-section h3 {

            font-size: 2rem;

            font-weight: 600;

            color: #d4af37;

            margin-bottom: 30px;

        }



        .mission-section p {

            font-size: 1.1rem;

            color: #ccc;

            line-height: 1.9;

            margin-bottom: 20px;

        }



        .mission-section p:last-child {

            margin-bottom: 0;

        }



        .mission-section strong {

            color: #fff;

        }



        /* --- SECTION DETAILS/VIDEO --- */

        .détaille {

            padding: 60px 20px;

            border-radius: 16px;

            margin: 60px auto;

            max-width: 1200px;

            color: #fff;

        }



        .texte-plus-video {

            display: flex;

            gap: 40px;

            align-items: flex-start;

            flex-wrap: wrap;

        }



        .texte {

            flex: 1 1 450px;

            text-align: left;

        }



        .texte h4 {

            font-size: clamp(2rem, 3vw, 3rem);

            font-weight: 700;

            margin-bottom: 20px;

            color: #d4af37;

            position: relative;

        }



        .texte h4::after {

            content: '';

            display: block;

            width: 60px;

            height: 4px;

            background: #d4af37;

            margin-top: 10px;

            border-radius: 2px;

        }



        .texte p.détaille-video {

            font-size: 1.2rem;

            color: #ccc;

            margin-bottom: 30px;

            line-height: 1.6;

        }



        .détaille-liste {

            list-style: none;

            padding: 0;

            margin: 0;

        }



        .détaille-liste li {

            font-size: 1.1rem;

            color: #ccc;

            margin-bottom: 12px;

            display: flex;

            align-items: center;

            gap: 10px;

            text-shadow: 0 0 2px #ccc;

        }



        .détaille-liste li i {

            color: #d4af37;

            font-size: 1.2rem;

        }



        .video {

            margin-top: 7%;

            flex: 1 1 500px;

            display: flex;

            justify-content: center;

            align-items: center;

        }



        .video iframe {

            width: 100%;

            max-width: 100%;

            aspect-ratio: 16 / 9;

            border: none;

            border-radius: 16px;

            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);

            transition: transform 0.4s ease, box-shadow 0.4s ease;

        }



        .video iframe:hover {

            transform: scale(1.02);

            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);

        }



        .highlight-gagner {

            color: #ffb800;

            font-weight: 700;

            display: inline-block;

        }



        /* --- FOOTER --- */

        footer {

            background: rgba(0, 0, 0, 0.8);

            padding: 40px 20px;

            text-align: center;

            border-top: 1px solid rgba(212, 175, 55, 0.2);

        }



        footer p {

            color: #888;

            font-size: 0.9rem;

        }



        footer span {

            color: #d4af37;

        }



        /* --- RESPONSIVE --- */

        @media (max-width: 992px) {

            .steps-container {

                flex-direction: column;

                align-items: center;

                gap: 70px;

            }



            .step {

                max-width: 80%;

            }



            .coaching-steps h2,

            .section-catégories h2 {

                font-size: 2.2rem;

            }



            .about-header h2 {

                font-size: 2.5rem;

            }



            .stats-row {

                gap: 30px;

            }



            .stat-item {

                padding: 20px 30px;

            }



            .stat-number {

                font-size: 2.5rem;

            }

        }



        @media (max-width: 768px) {

            .hero-content h1 {

                font-size: 2.2rem;

            }



            .cta-btn {

                font-size: 1rem;

                padding: 12px 25px;

            }



            .jeux-cat {

                flex-direction: column;

                align-items: center;

            }



            .banière {

                width: 90%;

            }



            .texte-plus-video {

                flex-direction: column;

                gap: 30px;

            }



            .texte,

            .video {

                flex: 1 1 100%;

            }



            .texte h4::after {

                width: 40px;

            }



            .about-header h2 {

                font-size: 2rem;

            }



            .services-grid {

                grid-template-columns: 1fr;

            }



            .mission-section {

                padding: 50px 25px;

            }



            .game-tag {

                padding: 12px 20px;

                font-size: 0.9rem;

            }

        }