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

html{
    scroll-behavior:smooth;
}

body{

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

    background:radial-gradient(circle at center,#1b1b1b 0%,#090909 45%,#000 100%);

    color:#fff;

    overflow-x:hidden;

}

/*====================================
 SPLASH SCREEN
====================================*/

#splash{

    position:fixed;

    inset:0;

    background:#000;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    z-index:99999;

    transition:opacity .8s ease;

}

#splash.fin{

    opacity:0;

    pointer-events:none;

}

/*====================================
 FOND ÉTOILÉ
====================================*/

.stars{

    position:absolute;

    inset:0;

    overflow:hidden;

}

.star{

    position:absolute;

    width:4px;
    height:4px;

    border-radius:50%;

    background:#FFD700;

    box-shadow:
        0 0 8px #FFD700,
        0 0 18px #FFD700,
        0 0 30px #FFD700;

    animation:twinkle 2s ease-in-out infinite;

}

.star::before,
.star::after{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

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

    background:#FFD700;

}

.star::before{

    width:2px;
    height:16px;

}

.star::after{

    width:16px;
    height:2px;

}

/*====================================
 LOGO D'OUVERTURE
====================================*/

#logoSplash{

    position:relative;

    width:250px;
    height:250px;

    border-radius:50%;

    object-fit:cover;

    border:6px solid #d4af37;

    z-index:20;

    box-shadow:
        0 0 35px gold,
        0 0 80px rgba(255,215,0,.8),
        0 0 150px rgba(255,215,0,.4);

    animation:splashLogo 4s linear forwards;

}

/*====================================
 CONTENEUR
====================================*/

.container{

    width:92%;

    max-width:420px;

    margin:25px auto;

    background:#1d1d1d;

    border:2px solid #d4af37;

    border-radius:28px;

    padding:35px 22px;

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

}
/*====================================
 LOGO PRINCIPAL
====================================*/

.logo{

    display:block;

    width:185px;
    height:185px;

    margin:0 auto 30px;

    border-radius:50%;

    object-fit:cover;

    border:5px solid #d4af37;

    box-shadow:
        0 0 25px rgba(255,215,0,.9),
        0 0 60px rgba(255,215,0,.55);

    transition:.4s;

}

.logo:hover{

    transform:scale(1.05);

    box-shadow:
        0 0 40px gold,
        0 0 90px rgba(255,215,0,.7);

}

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

h1{

    text-align:center;

    color:#d4af37;

    font-size:42px;

    font-weight:800;

    letter-spacing:1px;

    margin-top:15px;

}

.sous-titre{

    text-align:center;

    color:#ddd;

    font-size:16px;

    margin:12px 0 30px;

}

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

.card{

    display:flex;

    align-items:center;

    gap:18px;

    background:#111;

    border:2px solid #d4af37;

    border-radius:20px;

    padding:18px;

    margin-bottom:18px;

    text-decoration:none;

    color:#fff;

    transition:.35s;

    box-shadow:
        0 0 15px rgba(212,175,55,.20);

}

.card:hover{

    transform:translateY(-5px) scale(1.02);

    box-shadow:
        0 0 30px rgba(212,175,55,.80),
        0 0 60px rgba(212,175,55,.35);

}

.card-icon{

    width:60px;
    height:60px;

    border-radius:50%;

    background:linear-gradient(#ffd95a,#c69314);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    color:#111;

    flex-shrink:0;

}

.card-content{

    flex:1;

}

.card-content h2{

    color:#d4af37;

    font-size:20px;

    margin-bottom:6px;

}

.card-content p{

    color:#ddd;

    font-size:14px;

    line-height:1.5;

}

.card-arrow{

    font-size:30px;

    color:#d4af37;

    font-weight:bold;

}

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

.footer{

    margin-top:35px;

    text-align:center;

}

.footer-line{

    width:80px;

    height:2px;

    background:#d4af37;

    margin:0 auto 15px;

    border-radius:2px;

}

.copyright{

    color:#cfcfcf;

    font-size:14px;

}

.version{

    margin-top:5px;

    color:#777;

    font-size:12px;

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

@media(max-width:480px){

    .container{

        width:95%;
        margin:20px auto;
        padding:28px 18px;

    }

    #logoSplash{

        width:210px;
        height:210px;

    }

    .logo{

        width:165px;
        height:165px;

    }

}

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

@keyframes apparition{

    from{

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

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/*====================================
 ÉTOILES SCINTILLANTES
====================================*/

@keyframes twinkle{

    0%{

        opacity:.2;
        transform:scale(.4);

    }

    50%{

        opacity:1;
        transform:scale(1.8);

    }

    100%{

        opacity:.2;
        transform:scale(.4);

    }

}

/*====================================
 ROTATION DU LOGO
====================================*/

@keyframes splashLogo{

    0%{

        transform:rotate(0deg) scale(.25);

        opacity:0;

    }

    20%{

        opacity:1;

        transform:rotate(1080deg) scale(1.35);

    }

    40%{

        transform:rotate(2160deg) scale(.90);

    }

    60%{

        transform:rotate(2880deg) scale(1.18);

    }

    80%{

        transform:rotate(3420deg) scale(.95);

    }

    100%{

        transform:rotate(3600deg) scale(1);

        opacity:1;

    }

}

/*====================================
 ÉTOILES FILANTES
====================================*/

.shooting-star{

    position:absolute;

    width:220px;

    height:3px;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        rgba(255,255,255,1),
        rgba(255,215,0,.95),
        rgba(255,215,0,0)
    );

    filter:
        drop-shadow(0 0 8px #FFD700)
        drop-shadow(0 0 20px #FFD700);

    opacity:0;

    animation:shoot linear infinite;

}

@keyframes shoot{

    0%{

        opacity:0;

        transform:
            translate(-400px,-250px)
            rotate(-35deg);

    }

    5%{

        opacity:1;

    }

    80%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:
            translate(1800px,1200px)
            rotate(-35deg);

    }

}