@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');


:root{

    --bg:#070b18;

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

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

    --primary:#6366f1;

    --blue:#38bdf8;

    --green:#22c55e;

}




*{

    margin:0;

    padding:0;

    box-sizing:border-box;

    font-family:"Inter",sans-serif;

}





html{

    min-height:100%;

    background:#070b18;

}





body{

    min-height:100vh;

    color:white;

    overflow-x:hidden;


    background:

    radial-gradient(
        circle at top left,
        #4338ca55,
        transparent 35%
    ),

    radial-gradient(
        circle at bottom right,
        #06b6d455,
        transparent 30%
    ),

    linear-gradient(
        135deg,
        #050505,
        #111827
    );


    background-attachment:fixed;

}









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


header{

    height:90px;


    padding:20px 40px;


    display:flex;


    align-items:center;


    gap:25px;


    position:sticky;


    top:0;


    z-index:20;



    background:

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



    backdrop-filter:blur(25px);



    border-bottom:

    1px solid var(--border);


}





header h1{


    margin:0;


    font-size:34px;


    font-weight:800;


    letter-spacing:-1px;



    background:

    linear-gradient(
        90deg,
        #ffffff,
        #93c5fd
    );



    -webkit-background-clip:text;


    color:transparent;



}




header p{


    margin:0;


    color:#94a3b8;


    font-size:16px;


}





.header-xp{


    margin-left:auto;


    font-size:18px;


    font-weight:700;


}






#menuMobile{


    display:none;


    border:none;


    background:none;


    color:white;


    font-size:30px;


}









/* ======================
STRUCTURE
====================== */


.layout{


    display:flex;


    min-height:calc(100vh - 90px);


}









/* ======================
SIDEBAR
====================== */


aside{


    width:260px;


    padding:20px;



    background:


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



    backdrop-filter:blur(20px);



    border-right:

    1px solid var(--border);



}





aside h2{


    font-size:20px;


    margin-bottom:20px;


}






.chapitres button{


    width:100%;


    padding:12px 15px;


    margin:5px 0;


    border-radius:14px;


    border:none;



    color:white;



    background:


    rgba(255,255,255,.07);



    cursor:pointer;



    transition:.25s;



}





.chapitres button:hover{


    background:


    linear-gradient(
        135deg,
        #6366f1,
        #8b5cf6
    );



    transform:translateX(5px);



}



.chapitres button:active{


    transform:scale(.95);


}









/* ======================
PROGRESSION
====================== */


.progression{


    margin-top:25px;


    padding:18px;


    border-radius:20px;



    background:


    rgba(255,255,255,.08);



}





.xp-bar{


    height:10px;


    width:100%;



    margin-top:15px;


    background:#1e293b;



    border-radius:20px;


    overflow:hidden;



}





#xpProgress,
#xpProgressProfil{


    height:100%;


    width:0%;



    background:


    linear-gradient(
        90deg,
        #22c55e,
        #38bdf8,
        #6366f1
    );



    border-radius:20px;


    transition:.5s;


}









/* ======================
MAIN
====================== */


main{


    flex:1;


    padding:30px 45px;


    display:flex;


    flex-direction:column;


    align-items:center;



}





#pageAccueil,
#pageCours,
#pageProfil{


    width:100%;


    max-width:900px;


}





#titre{


    font-size:34px;


    font-weight:800;


    width:100%;


}





#compteur{


    width:100%;


    margin-top:10px;


    color:#94a3b8;


}








/* ======================
QUESTION
====================== */


#enonce{


    width:100%;


    padding:25px 30px;


    margin:20px 0;


    border-radius:25px;



    background:


    rgba(255,255,255,.08);



    border:

    1px solid var(--border);



    backdrop-filter:blur(20px);



    font-size:18px;


    line-height:1.5;



    animation:

    apparition .35s ease;


}








/* ======================
CODE
====================== */


textarea{


    width:100%;


    height:210px;


    margin-top:15px;


    margin-bottom:20px;



    padding:22px;



    resize:none;


    border-radius:22px;



    background:#020617;


    color:#38bdf8;



    border:

    1px solid #334155;



    font-family:"JetBrains Mono",monospace;


    font-size:15px;


    outline:none;



    transition:.3s;



}





textarea:focus{


    border-color:#6366f1;


    box-shadow:

    0 0 25px #6366f155;



}








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


.buttons{


    width:100%;


    display:flex;


    gap:20px;


    margin-bottom:20px;


}




.buttons button{


    flex:1;


    padding:14px 30px;


    border:none;


    border-radius:16px;



    color:white;


    font-weight:700;



    cursor:pointer;



    transition:.25s;



}



#verifier{


    background:#22c55e;


}





#suivant{


    background:#6366f1;


}






.buttons button:hover{


    transform:translateY(-4px);


    filter:brightness(1.15);



}



.buttons button:active{


    transform:scale(.92);


}








/* ======================
SORTIE
====================== */


.output{


    width:100%;


    min-height:100px;



    margin-top:25px;


    padding:22px;



    border-radius:20px;



    background:#020617;



    border:

    1px solid #334155;



    font-family:"JetBrains Mono",monospace;



}/* ======================
AIDES COURS / INDICES
====================== */


.aide{

    width:100%;

    display:flex;

    gap:15px;

    margin-top:20px;

}



.aide button{


    flex:1;


    padding:12px;


    border-radius:15px;


    border:1px solid var(--border);


    background:

    rgba(255,255,255,.08);


    color:white;


    cursor:pointer;


    transition:.25s;


}



.aide button:hover{


    background:

    linear-gradient(
        135deg,
        #6366f1,
        #8b5cf6
    );


    transform:translateY(-3px);


}




#aideTexte{


    width:100%;


    padding:18px;


    margin-top:15px;


    border-radius:18px;



    background:

    rgba(255,255,255,.06);



    border:

    1px solid var(--border);



    color:#cbd5e1;


}








/* ======================
ANIMATIONS
====================== */


#enonce,
textarea,
.output{


    animation:

    apparition .35s ease;


}




@keyframes apparition{


from{


    opacity:0;


    transform:translateY(10px);


}


to{


    opacity:1;


    transform:translateY(0);


}


}









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


.bottom-nav{


    display:none;


}








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


@media(max-width:768px){



body{


    padding-bottom:100px;


}






/* HEADER */


header{


    height:auto;


    min-height:75px;


    padding:18px 20px;


    flex-direction:column;


    align-items:flex-start;


    gap:5px;


}




header h1{


    font-size:28px;


}




header p{


    font-size:14px;


}



.header-xp{


    position:absolute;


    right:20px;


    top:25px;


    font-size:14px;


}






#menuMobile{


    display:block;


    position:absolute;


    right:20px;


    top:55px;


}









/* STRUCTURE */


.layout{


    display:block;


    min-height:auto;


}







/* MENU MOBILE */


aside{


    position:fixed;


    top:0;


    left:-300px;


    width:280px;


    height:100vh;


    z-index:100;



    transition:.35s;


}



aside.active{


    left:0;


}








/* CONTENU */


main{


    padding:25px 15px;


}




#titre{


    font-size:28px;


}





#enonce{


    padding:18px;


    font-size:16px;


    border-radius:20px;


}






textarea{


    height:220px;


    font-size:14px;


}






.buttons{


    flex-direction:column;


    gap:10px;


}





.buttons button{


    width:100%;


}









/* ======================
DOCK IPHONE
====================== */


.bottom-nav{


    display:flex;


    position:fixed;


    left:15px;


    right:15px;


    bottom:15px;


    height:75px;



    border-radius:28px;



    justify-content:space-around;


    align-items:center;



    z-index:200;




    background:


    rgba(255,255,255,.12);



    backdrop-filter:blur(30px);



    border:


    1px solid rgba(255,255,255,.2);



    transition:


    transform .5s cubic-bezier(.4,0,.2,1),


    opacity .5s ease;



}





.bottom-nav.hide{


    transform:


    translateY(130px);



    opacity:0;


}






.nav-btn{


    border:none;


    background:none;


    color:white;


    display:flex;


    flex-direction:column;


    align-items:center;


    gap:5px;



    font-size:22px;


    cursor:pointer;



}




.nav-btn span{


    font-size:12px;


}





.nav-btn.active{


    transform:


    translateY(-10px);


}








}





/* ======================
PROFIL / COURS
====================== */


.hidden{


    display:none;


}