/* ==========================================================
   PIKA OFF - STYLE.CSS
   Version : 1.0
   Auteur : ChatGPT
========================================================== */

/* ===== IMPORT ===== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* ===== VARIABLES ===== */

:root{

    --bg:#050816;
    --bg2:#0B1026;
    --card:#111936;
    --card2:#182349;

    --primary:#5865F2;
    --secondary:#7C4DFF;
    --accent:#00D4FF;

    --text:#FFFFFF;
    --text2:#C7D2FE;

    --success:#2ECC71;
    --danger:#FF4D6D;
    --warning:#F1C40F;

    --border:rgba(255,255,255,.08);

    --shadow:0 15px 45px rgba(0,0,0,.45);

    --radius:18px;

    --transition:.35s ease;

}

/* ===== RESET ===== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

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

    background:
    radial-gradient(circle at top,#1a1f49 0%,#050816 55%);

    color:var(--text);

    overflow-x:hidden;

}

/* Scrollbar */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#090d20;
}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
    180deg,
    var(--primary),
    var(--secondary)
    );

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{
    background:var(--accent);
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

section{

    width:100%;
    padding:120px 8%;

    position:relative;

}

.container{

    max-width:1400px;
    margin:auto;

}

h1{

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

    font-weight:900;

    line-height:1;

}

h2{

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

    font-weight:800;

    margin-bottom:25px;

}

h3{

    font-size:1.6rem;

    font-weight:700;

}

p{

    color:var(--text2);

    line-height:1.8;

    font-size:1rem;

}

/* ==========================================================
   HEADER / NAVBAR
========================================================== */

header{

    position:fixed;
    top:0;
    left:0;

    width:100%;

    z-index:9999;

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    background:rgba(5,8,22,.60);

    border-bottom:1px solid rgba(255,255,255,.05);

    transition:.35s;

}

header.scrolled{

    background:rgba(5,8,22,.92);

    box-shadow:
    0 15px 40px rgba(0,0,0,.45);

}

nav{

    max-width:1400px;

    margin:auto;

    height:85px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 30px;

}

/* Logo */

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    cursor:pointer;

    user-select:none;

}

.logo img{

    width:52px;

    transition:.35s;

}

.logo:hover img{

    transform:rotate(-8deg) scale(1.08);

}

.logo h1{

    font-size:1.8rem;

    font-weight:800;

    letter-spacing:1px;

}

.logo span{

    color:var(--primary);

    text-shadow:

    0 0 10px var(--primary),

    0 0 20px var(--primary);

}

/* Menu */

nav ul{

    display:flex;

    align-items:center;

    gap:35px;

}

nav ul li{

    position:relative;

}

nav ul li a{

    color:white;

    font-size:15px;

    font-weight:600;

    transition:.3s;

    padding:8px 0;

}

/* Barre sous le menu */

nav ul li a::after{

    content:"";

    position:absolute;

    bottom:-4px;

    left:0;

    width:0;

    height:2px;

    border-radius:50px;

    background:

    linear-gradient(
        90deg,
        var(--primary),
        var(--accent)
    );

    transition:.35s;

}

nav ul li a:hover{

    color:var(--accent);

}

nav ul li a:hover::after{

    width:100%;

}

/* Bouton Discord */

.discord-btn{

    padding:12px 28px;

    border-radius:50px;

    background:

    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary)
    );

    color:white;

    font-weight:700;

    transition:.35s;

    box-shadow:

    0 0 25px rgba(88,101,242,.35);

}

.discord-btn:hover{

    transform:translateY(-3px);

    box-shadow:

    0 0 40px rgba(88,101,242,.6);

}

/* Dropdown */

.dropdown{

    position:relative;

}

.dropdown-menu{

    position:absolute;

    top:60px;

    left:0;

    min-width:220px;

    background:rgba(17,25,54,.97);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.06);

    border-radius:15px;

    overflow:hidden;

    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:.35s;

    box-shadow:var(--shadow);

}

.dropdown:hover .dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.dropdown-menu li{

    width:100%;

}

.dropdown-menu a{

    display:block;

    padding:16px 20px;

    transition:.3s;

}

.dropdown-menu a:hover{

    background:rgba(88,101,242,.12);

    padding-left:28px;

}

/* Hamburger */

.hamburger{

    display:none;

    cursor:pointer;

    flex-direction:column;

    gap:6px;

}

.hamburger span{

    width:28px;

    height:3px;

    border-radius:50px;

    background:white;

    transition:.35s;

}

/* Animation */

.hamburger.active span:nth-child(1){

    transform:rotate(45deg) translateY(12px);

}

.hamburger.active span:nth-child(2){

    opacity:0;

}

.hamburger.active span:nth-child(3){

    transform:rotate(-45deg) translateY(-12px);

}

/* Mobile */

@media(max-width:950px){

nav{

    height:80px;

}

.hamburger{

    display:flex;

}

nav ul{

    position:fixed;

    top:80px;

    left:-100%;

    width:100%;

    height:calc(100vh - 80px);

    background:#070B1D;

    flex-direction:column;

    justify-content:flex-start;

    align-items:center;

    padding-top:50px;

    gap:30px;

    transition:.45s;

}

nav ul.active{

    left:0;

}

.dropdown-menu{

    position:static;

    opacity:1;

    visibility:visible;

    transform:none;

    display:none;

    margin-top:15px;

}

.dropdown.open .dropdown-menu{

    display:block;

}

.discord-btn{

    margin-top:15px;

}

}

/* ==========================================================
   HERO
========================================================== */

.hero{

    position:relative;

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

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

}

/* Vidéo */

.hero video{

    position:absolute;

    top:50%;
    left:50%;

    width:100%;
    height:100%;

    object-fit:cover;

    transform:translate(-50%,-50%);

    z-index:-3;

}

/* Overlay */

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        180deg,
        rgba(5,8,22,.45),
        rgba(5,8,22,.90)
    );

    z-index:-2;

}

/* Halo lumineux */

.hero::after{

    content:"";

    position:absolute;

    width:900px;
    height:900px;

    background:radial-gradient(
        circle,
        rgba(88,101,242,.28),
        transparent 70%
    );

    filter:blur(90px);

    animation:heroGlow 8s ease-in-out infinite;

    z-index:-1;

}

/* Contenu */

.hero-content{

    width:100%;
    max-width:1400px;

    padding:0 8%;

    display:flex;
    flex-direction:column;

    align-items:flex-start;

}

.hero-subtitle{

    display:inline-block;

    padding:10px 20px;

    margin-bottom:25px;

    border-radius:50px;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.05);

    color:var(--accent);

    font-weight:700;

    backdrop-filter:blur(20px);

}

.hero h1{

    max-width:850px;

    margin-bottom:25px;

    line-height:1.05;

}

.hero h1 span{

    color:var(--primary);

    text-shadow:

    0 0 15px var(--primary),

    0 0 40px var(--primary);

}

.hero p{

    max-width:650px;

    font-size:1.15rem;

    margin-bottom:45px;

}

/* Boutons */

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 36px;

    border-radius:50px;

    font-weight:700;

    transition:.35s;

}

.btn-primary{

    color:white;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    box-shadow:

    0 0 25px rgba(88,101,242,.35);

}

.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:

    0 0 50px rgba(88,101,242,.65);

}

.btn-secondary{

    border:2px solid rgba(255,255,255,.12);

    background:rgba(255,255,255,.04);

    backdrop-filter:blur(20px);

}

.btn-secondary:hover{

    border-color:var(--accent);

    color:var(--accent);

}

/* Scroll */

.scroll-down{

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

    font-size:.9rem;

    color:#b7c3ff;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

}

.scroll-down::after{

    content:"";

    width:2px;

    height:50px;

    background:linear-gradient(
        transparent,
        var(--accent)
    );

    animation:scrollAnim 2s infinite;

}

/* Animations */

@keyframes heroGlow{

    0%{

        transform:translate(-100px,-40px) scale(1);

    }

    50%{

        transform:translate(120px,60px) scale(1.15);

    }

    100%{

        transform:translate(-100px,-40px) scale(1);

    }

}

@keyframes scrollAnim{

    0%{

        opacity:0;
        transform:translateY(-15px);

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:0;
        transform:translateY(15px);

    }

}

/* Mobile */

@media(max-width:900px){

.hero{

    text-align:center;

}

.hero-content{

    align-items:center;

}

.hero h1{

    font-size:3rem;

}

.hero p{

    font-size:1rem;

}

.hero-buttons{

    justify-content:center;

}

}

/* ==========================================================
   SECTION JEUX
========================================================== */

.games{

    position:relative;

    background:linear-gradient(
        180deg,
        transparent,
        rgba(11,16,38,.75),
        transparent
    );

}

.games-grid{

    display:grid;

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

    gap:35px;

    margin-top:70px;

}

/* Carte */

.game-card{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    background:rgba(17,25,54,.65);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.06);

    transition:.45s;

    box-shadow:0 15px 40px rgba(0,0,0,.35);

}

/* Halo */

.game-card::before{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    background:radial-gradient(
        circle,
        rgba(88,101,242,.35),
        transparent 70%
    );

    top:-120px;
    right:-120px;

    transition:.45s;

}

.game-card:hover::before{

    transform:scale(1.4);

}

/* Image */

.game-image{

    height:220px;

    overflow:hidden;

}

.game-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.5s;

}

.game-card:hover img{

    transform:scale(1.08);

}

/* Contenu */

.game-content{

    padding:28px;

}

.game-content h3{

    margin-bottom:12px;

    font-size:1.5rem;

}

.game-content p{

    margin-bottom:25px;

}

/* Tags */

.game-tags{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-bottom:25px;

}

.game-tags span{

    padding:8px 14px;

    border-radius:50px;

    background:rgba(88,101,242,.15);

    border:1px solid rgba(88,101,242,.30);

    color:#d7deff;

    font-size:.85rem;

    font-weight:600;

}

/* Bouton */

.game-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:13px 25px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:white;

    font-weight:700;

    transition:.35s;

}

.game-btn:hover{

    transform:translateY(-3px);

    box-shadow:

    0 0 30px rgba(88,101,242,.55);

}

/* Hover */

.game-card:hover{

    transform:

    perspective(1000px)

    rotateX(6deg)

    rotateY(-6deg)

    translateY(-10px);

    border-color:rgba(88,101,242,.45);

    box-shadow:

    0 20px 55px rgba(88,101,242,.20);

}

/* Ligne lumineuse */

.game-card::after{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.25),

        transparent

    );

    transform:skewX(-20deg);

}

.game-card:hover::after{

    animation:shine 1s;

}

@keyframes shine{

    from{

        left:-120%;

    }

    to{

        left:150%;

    }

}

/* Responsive */

@media(max-width:768px){

.games-grid{

    grid-template-columns:1fr;

}

.game-image{

    height:200px;

}

}

/* ==========================================================
   DISCORD / COMMUNAUTÉ
========================================================== */

.community{

    position:relative;

    padding:140px 8%;

}

.community-wrapper{

    display:grid;

    grid-template-columns:1.3fr .7fr;

    gap:45px;

    align-items:center;

}

/* Carte Discord */

.discord-card{

    position:relative;

    overflow:hidden;

    background:rgba(17,25,54,.72);

    backdrop-filter:blur(25px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:28px;

    padding:50px;

    box-shadow:0 25px 70px rgba(0,0,0,.35);

}

.discord-card::before{

    content:"";

    position:absolute;

    inset:-120px;

    background:
    radial-gradient(circle,
    rgba(88,101,242,.25),
    transparent 70%);

    animation:discordGlow 8s linear infinite;

}

.discord-card>*{

    position:relative;

    z-index:2;

}

.community-badge{

    display:inline-block;

    padding:10px 20px;

    border-radius:50px;

    background:rgba(88,101,242,.18);

    color:#d7deff;

    font-weight:700;

    margin-bottom:20px;

}

.discord-card h2{

    margin-bottom:18px;

}

.discord-card p{

    max-width:620px;

    margin-bottom:35px;

}

/* Boutons */

.community-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

/* Stats */

.stats{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.stat{

    background:rgba(17,25,54,.72);

    border:1px solid rgba(255,255,255,.06);

    border-radius:22px;

    padding:35px;

    text-align:center;

    transition:.35s;

    backdrop-filter:blur(20px);

}

.stat:hover{

    transform:translateY(-8px);

    border-color:rgba(88,101,242,.4);

    box-shadow:0 15px 35px rgba(88,101,242,.25);

}

.stat h3{

    font-size:2.8rem;

    color:var(--primary);

    margin-bottom:10px;

    text-shadow:

    0 0 18px rgba(88,101,242,.45);

}

.stat p{

    color:#d2d8ff;

    font-weight:600;

}

/* Réseaux */

.socials{

    margin-top:60px;

    display:flex;

    flex-wrap:wrap;

    gap:20px;

}

.social-card{

    flex:1;

    min-width:230px;

    display:flex;

    align-items:center;

    gap:18px;

    padding:24px;

    border-radius:20px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.06);

    transition:.35s;

}

.social-card:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

    background:rgba(88,101,242,.08);

}

.social-icon{

    width:60px;
    height:60px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    font-size:1.6rem;

    color:white;

}

.social-text h4{

    margin-bottom:6px;

    font-size:1.1rem;

}

.social-text span{

    color:#b9c4ff;

    font-size:.95rem;

}

/* Animation */

@keyframes discordGlow{

    0%{

        transform:rotate(0deg);

    }

    100%{

        transform:rotate(360deg);

    }

}

/* Mobile */

@media(max-width:1000px){

.community-wrapper{

    grid-template-columns:1fr;

}

.stats{

    grid-template-columns:1fr 1fr;

}

}

@media(max-width:650px){

.stats{

    grid-template-columns:1fr;

}

.community-buttons{

    flex-direction:column;

}

.socials{

    flex-direction:column;

}

}

/* ==========================================================
   GALERIE
========================================================== */

.gallery{

    position:relative;

    padding:140px 8%;

}

.gallery-header{

    text-align:center;

    margin-bottom:70px;

}

.gallery-header p{

    max-width:700px;

    margin:auto;

    margin-top:20px;

}

/* Grille */

.gallery-grid{

    display:grid;

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

    gap:30px;

}

/* Carte */

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    cursor:pointer;

    border:1px solid rgba(255,255,255,.08);

    background:#111936;

    transition:.45s;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.6s;

}

/* Overlay */

.gallery-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    padding:30px;

    background:linear-gradient(
        transparent,
        rgba(5,8,22,.92)
    );

    opacity:0;

    transition:.4s;

}

.gallery-overlay h3{

    font-size:1.6rem;

    margin-bottom:8px;

}

.gallery-overlay span{

    color:#d0d8ff;

    font-size:.95rem;

}

/* Hover */

.gallery-item:hover{

    transform:translateY(-12px);

    box-shadow:

    0 25px 55px rgba(88,101,242,.25);

}

.gallery-item:hover img{

    transform:scale(1.12);

}

.gallery-item:hover .gallery-overlay{

    opacity:1;

}

/* Halo */

.gallery-item::before{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    background:

    radial-gradient(circle,

    rgba(88,101,242,.30),

    transparent 70%);

    top:-160px;

    right:-160px;

    transition:.5s;

}

.gallery-item:hover::before{

    transform:scale(1.5);

}

/* Reflet */

.gallery-item::after{

    content:"";

    position:absolute;

    left:-150%;

    top:0;

    width:70%;

    height:100%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.25),

    transparent

    );

    transform:skewX(-20deg);

}

.gallery-item:hover::after{

    animation:galleryLight .9s linear;

}

@keyframes galleryLight{

    from{

        left:-150%;

    }

    to{

        left:180%;

    }

}

/* Lightbox */

.lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.95);

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    transition:.4s;

    z-index:99999;

}

.lightbox.active{

    opacity:1;

    visibility:visible;

}

.lightbox img{

    max-width:90%;

    max-height:90%;

    border-radius:18px;

    box-shadow:

    0 30px 80px rgba(0,0,0,.6);

}

/* Bouton fermer */

.lightbox-close{

    position:absolute;

    top:30px;

    right:40px;

    font-size:40px;

    color:white;

    cursor:pointer;

    transition:.3s;

}

.lightbox-close:hover{

    color:var(--primary);

    transform:rotate(90deg);

}

/* Responsive */

@media(max-width:768px){

.gallery-grid{

    grid-template-columns:1fr;

}

.gallery-overlay{

    opacity:1;

}

}

/* ==========================================================
   NEWS / ACTUALITÉS
========================================================== */

.news{

    position:relative;

    padding:140px 8%;

}

.news-header{

    text-align:center;

    margin-bottom:70px;

}

.news-header p{

    max-width:750px;

    margin:20px auto 0;

}

/* Grille */

.news-grid{

    display:grid;

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

    gap:35px;

}

/* Carte */

.news-card{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    background:rgba(17,25,54,.70);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    transition:.4s;

}

.news-card:hover{

    transform:translateY(-10px);

    border-color:rgba(88,101,242,.35);

    box-shadow:

    0 20px 45px rgba(88,101,242,.22);

}

/* Image */

.news-image{

    position:relative;

    height:240px;

    overflow:hidden;

}

.news-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.5s;

}

.news-card:hover .news-image img{

    transform:scale(1.08);

}

/* Badge */

.news-badge{

    position:absolute;

    top:20px;
    left:20px;

    padding:8px 18px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:white;

    font-size:.8rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

}

/* Contenu */

.news-content{

    padding:28px;

}

.news-date{

    display:block;

    color:#aeb9ff;

    font-size:.9rem;

    margin-bottom:12px;

}

.news-content h3{

    margin-bottom:15px;

    line-height:1.3;

}

.news-content p{

    margin-bottom:28px;

}

/* Bouton */

.news-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-weight:700;

    color:var(--accent);

    transition:.3s;

}

.news-btn:hover{

    gap:18px;

}

/* Ligne lumineuse */

.news-card::after{

    content:"";

    position:absolute;

    left:-140%;

    top:0;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.25),

        transparent

    );

    transform:skewX(-20deg);

}

.news-card:hover::after{

    animation:newsShine 1s;

}

@keyframes newsShine{

    from{

        left:-140%;

    }

    to{

        left:180%;

    }

}

/* Responsive */

@media(max-width:768px){

.news-grid{

    grid-template-columns:1fr;

}

.news-image{

    height:220px;

}

}

/* ==========================================================
   FOOTER
========================================================== */

footer{

    position:relative;

    margin-top:120px;

    background:
    linear-gradient(
        180deg,
        #0B1026,
        #050816
    );

    border-top:1px solid rgba(255,255,255,.06);

}

.footer-container{

    max-width:1400px;

    margin:auto;

    padding:80px 8%;

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:50px;

}

/* Logo */

.footer-logo h2{

    margin-bottom:20px;

}

.footer-logo span{

    color:var(--primary);

}

.footer-logo p{

    max-width:420px;

}

/* Colonnes */

.footer-links h3{

    margin-bottom:22px;

    font-size:1.2rem;

}

.footer-links ul{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.footer-links a{

    color:#cfd7ff;

    transition:.3s;

}

.footer-links a:hover{

    color:var(--accent);

    padding-left:8px;

}

/* Réseaux */

.footer-social{

    display:flex;

    gap:15px;

    margin-top:25px;

}

.footer-social a{

    width:50px;

    height:50px;

    border-radius:15px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    transition:.35s;

}

.footer-social a:hover{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    transform:translateY(-5px);

    box-shadow:
    0 0 30px rgba(88,101,242,.45);

}

/* Bas du footer */

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.05);

    text-align:center;

    padding:25px;

    color:#9ba6d8;

    font-size:.95rem;

}

/* ==========================================================
   RETOUR EN HAUT
========================================================== */

#backToTop{

    position:fixed;

    bottom:35px;

    right:35px;

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    color:white;

    font-size:22px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    box-shadow:
    0 10px 30px rgba(88,101,242,.35);

    opacity:0;

    visibility:hidden;

    transform:translateY(30px);

    transition:.35s;

    z-index:999;

}

#backToTop.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

#backToTop:hover{

    transform:translateY(-6px);

    box-shadow:
    0 15px 40px rgba(88,101,242,.6);

}

/* ==========================================================
   SÉLECTION DE TEXTE
========================================================== */

::selection{

    background:var(--primary);

    color:white;

}

/* ==========================================================
   EFFET DE SURVOL GÉNÉRAL
========================================================== */

.glow-hover{

    transition:.35s;

}

.glow-hover:hover{

    box-shadow:
    0 0 25px rgba(88,101,242,.4);

}

/* ==========================================================
   RESPONSIVE FOOTER
========================================================== */

@media(max-width:1000px){

.footer-container{

    grid-template-columns:1fr 1fr;

}

}

@media(max-width:700px){

.footer-container{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-logo p{

    margin:auto;

}

.footer-social{

    justify-content:center;

}

#backToTop{

    right:20px;

    bottom:20px;

}

}

/* ==========================================================
   PRELOADER
========================================================== */

#preloader{

    position:fixed;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#050816;

    z-index:999999;

    transition:.8s;

}

#preloader.hide{

    opacity:0;
    visibility:hidden;

}

.loader{

    width:90px;
    height:90px;

    border-radius:50%;

    border:6px solid rgba(255,255,255,.08);

    border-top:6px solid var(--primary);

    animation:loader 1s linear infinite;

}

@keyframes loader{

    100%{

        transform:rotate(360deg);

    }

}

/* ==========================================================
   FOND ANIMÉ
========================================================== */

.bg-blur{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-10;

}

.blur{

    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    opacity:.22;

}

.blur1{

    width:450px;
    height:450px;

    background:#5865F2;

    top:-120px;
    left:-100px;

    animation:move1 18s linear infinite alternate;

}

.blur2{

    width:400px;
    height:400px;

    background:#7C4DFF;

    bottom:-100px;
    right:-100px;

    animation:move2 20s linear infinite alternate;

}

.blur3{

    width:320px;
    height:320px;

    background:#00D4FF;

    top:45%;
    left:45%;

    animation:move3 14s ease infinite alternate;

}

@keyframes move1{

    to{

        transform:

        translate(250px,180px)

        scale(1.25);

    }

}

@keyframes move2{

    to{

        transform:

        translate(-220px,-150px)

        scale(.8);

    }

}

@keyframes move3{

    to{

        transform:

        translate(-180px,120px)

        scale(1.4);

    }

}

/* ==========================================================
   APPARITION
========================================================== */

.fade-up{

    opacity:0;

    transform:

    translateY(70px);

    transition:

    opacity .8s ease,

    transform .8s ease;

}

.fade-up.show{

    opacity:1;

    transform:

    translateY(0);

}

/* ==========================================================
   TITRES
========================================================== */

.section-title{

    position:relative;

    display:inline-block;

    margin-bottom:25px;

}

.section-title::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-12px;

    width:70px;

    height:5px;

    border-radius:50px;

    background:

    linear-gradient(

    90deg,

    var(--primary),

    var(--accent)

    );

}

/* ==========================================================
   PARTICULES
========================================================== */

#particles-js{

    position:fixed;

    inset:0;

    z-index:-9;

    pointer-events:none;

}

/* ==========================================================
   CURSEUR
========================================================== */

.cursor{

    position:fixed;

    width:18px;

    height:18px;

    border-radius:50%;

    background:var(--primary);

    pointer-events:none;

    transform:translate(-50%,-50%);

    z-index:999999;

    transition:

    width .25s,

    height .25s,

    background .25s;

    box-shadow:

    0 0 20px rgba(88,101,242,.8);

}

.cursor.active{

    width:45px;

    height:45px;

    background:rgba(88,101,242,.2);

    border:2px solid var(--primary);

}

/* ==========================================================
   HOVER GLOBAL
========================================================== */

a,
button,
.card,
.game-card,
.gallery-item,
.news-card{

    transition:.35s;

}

a:hover,
button:hover{

    filter:brightness(1.08);

}

/* ==========================================================
   GLASS PANEL
========================================================== */

.glass{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    border-radius:22px;

}

/* ==========================================================
   SECTION SPACING
========================================================== */

section{

    scroll-margin-top:120px;

}

/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:768px){

.cursor{

    display:none;

}

.blur{

    opacity:.15;

}

.loader{

    width:70px;
    height:70px;

}

}

/* ==========================================================
   EFFETS PREMIUM
========================================================== */

/* Texte dégradé */

.gradient-text{

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--accent),
        #ffffff
    );

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;

    background-size:300%;

    animation:gradientMove 6s linear infinite;

}

@keyframes gradientMove{

    0%{

        background-position:0%;

    }

    100%{

        background-position:300%;

    }

}

/* Glow */

.glow{

    box-shadow:
    0 0 25px rgba(88,101,242,.35);

}

.glow:hover{

    box-shadow:

    0 0 45px rgba(88,101,242,.55),

    0 0 90px rgba(88,101,242,.15);

}

/* Bordure lumineuse */

.border-glow{

    position:relative;

}

.border-glow::before{

    content:"";

    position:absolute;

    inset:-1px;

    border-radius:inherit;

    padding:1px;

    background:

    linear-gradient(
        135deg,
        var(--primary),
        transparent,
        var(--accent)
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

}

/* ==========================================================
   BADGES
========================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 18px;

    border-radius:50px;

    background:rgba(88,101,242,.15);

    border:1px solid rgba(88,101,242,.35);

    color:#dbe3ff;

    font-size:.85rem;

    font-weight:700;

}

/* ==========================================================
   BOUTONS
========================================================== */

.btn{

    cursor:pointer;

    border:none;

    outline:none;

}

.btn-outline{

    border:2px solid var(--primary);

    color:white;

    background:transparent;

}

.btn-outline:hover{

    background:var(--primary);

}

/* ==========================================================
   CARTES PREMIUM
========================================================== */

.card{

    background:rgba(255,255,255,.04);

    border-radius:24px;

    border:1px solid rgba(255,255,255,.06);

    overflow:hidden;

    transition:.4s;

}

.card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 20px 45px rgba(88,101,242,.25);

}

/* ==========================================================
   ICÔNES
========================================================== */

.icon-circle{

    width:70px;

    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:white;

    font-size:28px;

}

/* ==========================================================
   SÉPARATEUR
========================================================== */

.section-divider{

    width:120px;

    height:5px;

    border-radius:50px;

    margin:30px auto;

    background:

    linear-gradient(
        90deg,
        transparent,
        var(--primary),
        var(--accent),
        transparent
    );

}

/* ==========================================================
   TITRES
========================================================== */

.title-center{

    text-align:center;

}

.subtitle{

    color:#bcc8ff;

    max-width:700px;

    margin:auto;

    margin-top:20px;

}

/* ==========================================================
   IMAGES
========================================================== */

.img-rounded{

    border-radius:24px;

}

.shadow{

    box-shadow:

    0 20px 50px rgba(0,0,0,.4);

}

/* ==========================================================
   ANIMATION FLOTTANTE
========================================================== */

.float{

    animation:floating 4s ease-in-out infinite;

}

@keyframes floating{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

/* ==========================================================
   SECTION TITRES
========================================================== */

.section-header{

    text-align:center;

    margin-bottom:70px;

}

.section-header h2{

    font-size:clamp(2.5rem,5vw,4rem);

    font-weight:800;

    margin-bottom:20px;

}

.section-header p{

    max-width:750px;

    margin:auto;

    color:#c8d3ff;

}

/* ==========================================================
   STATS BAR
========================================================== */

.stats-bar{

    display:grid;

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

    gap:25px;

    margin-top:60px;

}

.stats-box{

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    padding:35px;

    text-align:center;

    transition:.35s;

}

.stats-box:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

    box-shadow:

    0 15px 40px rgba(88,101,242,.25);

}

.stats-box h3{

    font-size:3rem;

    color:var(--primary);

}

.stats-box span{

    display:block;

    margin-top:10px;

    color:#d7deff;

}

/* ==========================================================
   TIMELINE
========================================================== */

.timeline{

    position:relative;

    margin:90px auto;

    max-width:900px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:50%;

    width:4px;

    top:0;

    bottom:0;

    background:linear-gradient(

        var(--primary),

        var(--accent)

    );

    transform:translateX(-50%);

}

.timeline-item{

    position:relative;

    width:50%;

    padding:30px;

}

.timeline-item:nth-child(odd){

    left:0;

    text-align:right;

}

.timeline-item:nth-child(even){

    left:50%;

}

.timeline-content{

    background:rgba(17,25,54,.75);

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    padding:25px;

    backdrop-filter:blur(18px);

}

.timeline-dot{

    position:absolute;

    top:35px;

    width:20px;

    height:20px;

    border-radius:50%;

    background:var(--primary);

    box-shadow:

    0 0 20px var(--primary);

}

.timeline-item:nth-child(odd) .timeline-dot{

    right:-10px;

}

.timeline-item:nth-child(even) .timeline-dot{

    left:-10px;

}

/* ==========================================================
   FAQ
========================================================== */

.faq{

    max-width:900px;

    margin:auto;

}

.faq-item{

    margin-bottom:18px;

    overflow:hidden;

    border-radius:18px;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.04);

}

.faq-question{

    padding:22px;

    cursor:pointer;

    font-weight:700;

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:.4s;

    padding:0 22px;

}

.faq-item.active .faq-answer{

    max-height:300px;

    padding:0 22px 22px;

}

/* ==========================================================
   TABLEAU
========================================================== */

.table{

    width:100%;

    border-collapse:collapse;

    overflow:hidden;

    border-radius:18px;

}

.table th{

    background:var(--primary);

    color:white;

    padding:18px;

}

.table td{

    padding:18px;

    background:rgba(255,255,255,.03);

    border-bottom:1px solid rgba(255,255,255,.05);

}

/* ==========================================================
   ALERTES
========================================================== */

.alert{

    padding:18px 22px;

    border-radius:16px;

    margin:20px 0;

}

.alert-success{

    background:rgba(46,204,113,.15);

    border:1px solid rgba(46,204,113,.35);

}

.alert-warning{

    background:rgba(241,196,15,.12);

    border:1px solid rgba(241,196,15,.35);

}

.alert-danger{

    background:rgba(255,77,109,.12);

    border:1px solid rgba(255,77,109,.35);

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:900px){

.timeline::before{

    left:20px;

}

.timeline-item{

    width:100%;

    left:0!important;

    padding-left:60px;

    text-align:left!important;

}

.timeline-dot{

    left:10px!important;

    right:auto!important;

}

}

.discord-frame{

    width:100%;

    max-width:380px;

    margin:auto;

    border-radius:20px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
        0 20px 60px rgba(0,0,0,.45);

    transition:.35s;

}

.discord-frame:hover{

    transform:translateY(-8px);

    box-shadow:
        0 25px 70px rgba(88,101,242,.25);

}

.discord-frame iframe{

    width:100%;
    height:500px;
    border:none;
}

@media(max-width:1000px){

    .community-wrapper{

        display:flex;
        flex-direction:column;
        gap:40px;

    }

    .discord-frame{

        max-width:450px;

    }

}

/* ==========================================================
   PAGE 404
========================================================== */

.error404{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}

.error-box{

    max-width:800px;

    width:100%;

    text-align:center;

    padding:60px;

    border-radius:30px;

    background:rgba(17,25,54,.75);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    box-shadow:

    0 25px 60px rgba(0,0,0,.45);

}

.error-badge{

    display:inline-block;

    margin-bottom:25px;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(88,101,242,.15);

    color:#dfe5ff;

    font-weight:700;

}

.error-box h1{

    font-size:9rem;

    color:var(--primary);

    line-height:1;

    text-shadow:

        0 0 20px var(--primary),

        0 0 50px rgba(88,101,242,.4);

}

.error-box h2{

    margin-top:15px;

    font-size:2.2rem;

}

.error-box p{

    margin:25px auto 40px;

    max-width:600px;

}

.error-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

@media(max-width:768px){

.error-box{

    padding:40px 25px;

}

.error-box h1{

    font-size:6rem;

}

.error-box h2{

    font-size:1.8rem;

}

}