@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,.15);

    --primary:#6366f1;

    --blue:#38bdf8;

    --green:#22c55e;

    --purple:#a855f7;

}




*{

    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,

        #4338ca70,

        transparent 35%

    ),



    radial-gradient(

        circle at bottom right,

        #06b6d450,

        transparent 35%

    ),



    linear-gradient(

        135deg,

        #050505,

        #111827

    );



    background-attachment:fixed;


}









/* ==========================
POPUP PSEUDO
========================== */


.popup{


    position:fixed;


    inset:0;


    display:flex;


    align-items:center;


    justify-content:center;


    z-index:500;


    background:


    rgba(0,0,0,.45);



    backdrop-filter:blur(15px);


}





.popup-card{


    width:90%;


    max-width:420px;


    padding:35px;


    border-radius:30px;



    background:


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



    border:


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



    backdrop-filter:blur(30px);



    text-align:center;



    box-shadow:


    0 25px 80px rgba(0,0,0,.5);


}





.popup-card h2{


    margin-bottom:20px;


    font-size:26px;


}





.popup-card p{


    color:#cbd5e1;


    margin-bottom:20px;


}





.popup-card input{


    width:100%;


    padding:15px;


    border-radius:18px;


    border:none;


    outline:none;


    background:


    rgba(0,0,0,.3);



    color:white;


    font-size:16px;


    margin-bottom:20px;


}






.popup-card button{


    width:100%;


    padding:15px;


    border-radius:20px;


    border:none;


    color:white;


    font-weight:700;


    cursor:pointer;



    background:


    linear-gradient(

        135deg,

        #6366f1,

        #a855f7

    );


}












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


header{


    height:90px;


    padding:20px 40px;



    display:flex;


    align-items:center;


    gap:25px;



    position:sticky;


    top:0;



    z-index:50;



    background:


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



    backdrop-filter:blur(25px);



    border-bottom:


    1px solid var(--border);


}






.logo-zone{


    display:flex;


    align-items:center;


    gap:20px;


}





header h1{


    font-size:34px;


    font-weight:800;


    letter-spacing:-1px;



    background:


    linear-gradient(

        90deg,

        #fff,

        #93c5fd

    );



    -webkit-background-clip:text;


    color:transparent;


}





header p{


    color:#94a3b8;


}





.header-xp{


    margin-left:auto;


    font-weight:700;


    font-size:18px;


}






#menuMobile{


    display:none;


    background:none;


    border:none;


    color:white;


    font-size:30px;


}











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


.layout{


    display:flex;


    align-items:flex-start;


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


}











/* ==========================
MENU CHAPITRES
========================== */


aside{


    width:270px;


    flex-shrink:0;


    height:auto;


    overflow:visible;


    padding:25px;



    background:


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



    backdrop-filter:blur(25px);



    border-right:


    1px solid var(--border);



}






.menu-title{


    display:flex;


    justify-content:space-between;


    align-items:center;


    margin-bottom:25px;


}




.menu-title h2{


    font-size:22px;


}






#fermerMenu{


    display:none;


    border:none;


    background:none;


    color:white;


    font-size:22px;


}






.chapitres button{


    width:100%;


    padding:13px;


    margin-bottom:10px;



    border-radius:16px;


    border:none;



    color:white;



    cursor:pointer;



    background:


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



    transition:.25s;


}





.chapitres button:hover{


    transform:translateX(5px);



    background:


    linear-gradient(

        135deg,

        #6366f1,

        #8b5cf6

    );


}







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


.progression{


    margin-top:30px;


    padding:20px;


    border-radius:25px;



    background:


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



}





.xp-bar{


    height:10px;


    margin:15px 0;


    background:#1e293b;


    border-radius:20px;


    overflow:hidden;


}






#xpProgress,
#xpProgressProfil{


    height:100%;


    width:0%;



    border-radius:20px;



    background:


    linear-gradient(

        90deg,

        #22c55e,

        #38bdf8,

        #6366f1

    );



    transition:.5s;


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


main{


    flex:1;


    padding:35px 45px;



    display:flex;


    flex-direction:column;


    align-items:center;



}





#pageAccueil,
#pageCours,
#pageProfil{


    width:100%;


    max-width:900px;


}







/* ==========================
ASSISTANT SERPENT 🐍
========================== */


.assistant{


    width:100%;


    padding:20px;


    margin-bottom:25px;



    display:flex;


    align-items:center;


    gap:18px;



    border-radius:25px;



    background:


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



    border:


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



    backdrop-filter:blur(25px);



}





.snake{


    width:60px;


    height:60px;


    display:flex;


    align-items:center;


    justify-content:center;



    border-radius:50%;



    font-size:38px;



    background:


    rgba(99,102,241,.2);



    animation:


    snakeMove 2s infinite ease-in-out;


}





@keyframes snakeMove{


0%,100%{

    transform:translateY(0);

}


50%{

    transform:translateY(-8px) rotate(5deg);

}


}





.assistant h3{


    margin-bottom:5px;


}





.assistant p{


    color:#cbd5e1;


    line-height:1.4;


}









/* ==========================
EXERCICE
========================== */


#titre{


    width:100%;


    font-size:36px;


    font-weight:800;


}





#compteur{


    width:100%;


    margin-top:10px;


    color:#94a3b8;


}






#enonce{


    width:100%;


    margin:20px 0;



    padding:25px;



    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;



}








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


textarea{


    width:100%;


    height:220px;


    padding:22px;



    border-radius:25px;



    background:#020617;



    color:#38bdf8;



    border:


    1px solid #334155;



    font-family:"JetBrains Mono",monospace;



    font-size:15px;



    resize:none;



    outline:none;



    transition:.3s;



}




textarea:focus{


    border-color:#6366f1;



    box-shadow:


    0 0 30px #6366f155;



}









/* ==========================
BOUTONS LIQUID GLASS
========================== */


.buttons{


    width:100%;


    display:flex;


    gap:20px;


    margin-top:25px;



}




.buttons button{


    flex:1;



    padding:16px 30px;



    border-radius:22px;



    border:


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



    color:white;



    font-size:16px;



    font-weight:700;



    cursor:pointer;



    position:relative;



    overflow:hidden;




    background:


    linear-gradient(

        135deg,

        rgba(255,255,255,.18),

        rgba(255,255,255,.05)

    );



    backdrop-filter:blur(25px);



    box-shadow:


    inset 0 1px 2px rgba(255,255,255,.4),


    0 15px 35px rgba(0,0,0,.3);



    transition:


    .35s cubic-bezier(.4,0,.2,1);



}






.buttons button::before{


    content:"";


    position:absolute;


    top:-50%;


    left:-80%;



    width:60%;


    height:200%;



    background:


    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.5),

        transparent

    );



    transform:rotate(25deg);



    transition:.6s;



}





.buttons button:hover::before{


    left:130%;


}





#verifier{


    border-color:


    rgba(34,197,94,.5);



    box-shadow:


    0 0 25px rgba(34,197,94,.25);


}






#suivant{


    border-color:


    rgba(99,102,241,.6);



    box-shadow:


    0 0 25px rgba(99,102,241,.3);


}






.buttons button:hover{


    transform:


    translateY(-5px) scale(1.03);



    background:


    rgba(255,255,255,.2);


}






.buttons button:active{


    transform:scale(.93);


}









/* ==========================
AIDE SERPENT
========================== */


.assistant-actions{


    width:100%;


    display:flex;


    gap:15px;


    margin-top:20px;



}




.assistant-actions button{


    flex:1;


    padding:14px;



    border-radius:18px;



    border:


    1px solid var(--border);



    color:white;



    cursor:pointer;



    background:


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



    transition:.25s;



}




.assistant-actions button:hover{


    background:


    linear-gradient(

        135deg,

        #6366f1,

        #a855f7

    );


}









/* ==========================
AIDE TEXTE
========================== */


#aideTexte{


    width:100%;


    min-height:50px;



    margin-top:15px;



    padding:18px;



    border-radius:20px;



    background:


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



    color:#cbd5e1;



}









/* ==========================
OUTPUT
========================== */


.output{


    width:100%;


    min-height:120px;



    margin-top:30px;



    padding:25px;



    border-radius:22px;



    background:#020617;



    border:


    1px solid #334155;



    font-family:"JetBrains Mono",monospace;



}









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


.profil-card{


    padding:30px;


    border-radius:30px;



    background:


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



    border:


    1px solid var(--border);



    backdrop-filter:blur(20px);



}



.profil-card button{


    margin-top:20px;


    padding:14px 25px;



    border-radius:18px;


    border:none;


    color:white;



    background:


    linear-gradient(

        135deg,

        #6366f1,

        #a855f7

    );



}/* ==========================
PAGE COURS (LEÇONS PAR CHAPITRE)
========================== */


.chapitre-bloc{


    width:100%;


    margin-bottom:35px;


}





.chapitre-bloc h3{


    font-size:22px;


    margin-bottom:15px;


}





.lecons-liste{


    display:grid;


    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));


    gap:18px;


}





.lecon-card{


    padding:22px;



    border-radius:22px;



    background:


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



    border:


    1px solid var(--border);



    backdrop-filter:blur(20px);


}





.lecon-card h4{


    margin-bottom:10px;


    font-size:17px;


}





.lecon-card p{


    color:#cbd5e1;


    line-height:1.5;


    font-size:14px;


    margin-bottom:15px;


}





.lecon-card button{


    width:100%;


    padding:12px;



    border-radius:16px;


    border:none;


    color:white;


    cursor:pointer;



    background:


    linear-gradient(

        135deg,

        #6366f1,

        #a855f7

    );



    transition:.25s;


}





.lecon-card button:hover{


    transform:translateY(-3px);


}









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


.badges-section{


    margin-top:30px;


    padding:30px;



    border-radius:30px;



    background:


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



    border:


    1px solid var(--border);



    backdrop-filter:blur(20px);


}





.badges-section h3{


    margin-bottom:20px;


    font-size:20px;


}





.badges-grid{


    display:grid;


    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));


    gap:15px;


}





.badge-card{


    padding:18px 12px;



    border-radius:20px;



    text-align:center;



    background:


    linear-gradient(

        135deg,

        rgba(99,102,241,.25),

        rgba(168,85,247,.2)

    );



    border:


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



    box-shadow:


    0 10px 25px rgba(0,0,0,.25);



    transition:.25s;


}





.badge-card:hover{


    transform:translateY(-4px);


}





.badge-card .badge-emoji{


    font-size:34px;


    margin-bottom:8px;


    display:block;


}





.badge-card .badge-nom{


    font-weight:700;


    font-size:14px;


    margin-bottom:5px;


}





.badge-card .badge-desc{


    font-size:12px;


    color:#cbd5e1;


    line-height:1.3;


}





.badge-card.locked{


    background:


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



    filter:grayscale(1);



    opacity:.5;


}









/* ==========================
CLASSES UTILES
========================== */


.hidden{

    display:none!important;

}








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


#enonce,
textarea,
.output,
.assistant{


    animation:

   apparition .35s ease;


}





@keyframes apparition{


from{


    opacity:0;


    transform:translateY(15px);


}



to{


    opacity:1;


    transform:translateY(0);


}


}









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


.bottom-nav{


    display:none;


}









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


@media(max-width:768px){



body{


    padding-bottom:110px;


}








/* HEADER MOBILE */


header{


    height:auto;


    padding:18px 20px;



    flex-direction:column;


    align-items:flex-start;



    gap:8px;


}




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;


}









/* LAYOUT */


.layout{


    display:block;


}










/* MENU CHAPITRES MOBILE */


aside{


    position:fixed;


    top:0;


    left:-310px;



    width:290px;


    height:100vh;



    z-index:300;



    transition:


    .35s cubic-bezier(.4,0,.2,1);



    overflow-y:auto;


}





aside.active{


    left:0;


}






.menu-title{


    margin-top:20px;


}




#fermerMenu{


    display:block;


}





.chapitres button{


    padding:15px;


    font-size:15px;


}









/* CONTENU */


main{


    padding:25px 15px;


}





#titre{


    font-size:30px;


}





#enonce{


    padding:20px;


    font-size:16px;


}





textarea{


    height:220px;


    padding:18px;


}








/* BOUTONS */


.buttons{


    flex-direction:column;


    gap:12px;


}




.buttons button{


    width:100%;


}






.assistant-actions{


    flex-direction:column;


}





.assistant-actions button{


    width:100%;


}









/* ASSISTANT */


.assistant{


    padding:16px;


}





.snake{


    width:50px;


    height:50px;


    font-size:30px;


}








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


.bottom-nav{


    display:flex;


    position:fixed;



    left:15px;


    right:15px;


    bottom:15px;



    height:75px;



    border-radius:30px;



    align-items:center;


    justify-content:space-around;




    z-index:500;



    background:


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



    border:


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



    backdrop-filter:blur(30px);



    transition:


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


    opacity .5s ease;


}





.bottom-nav.hide{


    transform:


    translateY(140px);



    opacity:0;


}






.nav-btn{


    border:none;


    background:none;


    color:white;


    font-size:22px;



    display:flex;


    flex-direction:column;


    align-items:center;


    gap:5px;



}





.nav-btn span{


    font-size:12px;


}





.nav-btn.active{


    transform:


    translateY(-10px);


}







}