@font-face {
    font-family: "Como";
    src: url("../font/Como-Medium.ttf");
}

@font-face {
    font-family: "Arial-Rounded";
    src: url("../font/Arial-Rounded.ttf");
}


html,
body {
    margin: 0px;
    padding: 0px;
    background-color: #1C3326;
    font-family: Arial-Rounded;
}



::-webkit-scrollbar {
    display: none;
}

/*Page Connexion*/

#connection_div_patern {
    background-image: url("../uploads/patern_light_green.svg");
    background-size: cover; 
    padding-top: 10vh;
    height: 100vh;
}


#h1_connexion {
    margin: 0 0 1vh 0;
    text-align: center;
}

#h1_connexion a {
    text-decoration: none;
    font-size: 3.5vh;
    color: #A9FFA4;
    font-weight: bold;
}

#connexion_logo_contour{
    width: 75%;
    margin: 0 auto 5vh auto;
    text-align: center;

}

#connexion_logo{
    width: 45vw;
    height: 5vh;
}

#connexion_cadre {
    text-align: center;
    color: white;
    width: 90%;
    margin: auto;
    background-color: #A9FFA4;
    padding: 2vh;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#h2_connexion {
    font-size: 3vh;
    margin: 0.5vh 0 3vh 4vw;
    color: #2BBA7C;
    font-weight: bolder;
    float: left;
}

#connexion_user_svg{
    margin-left: 5vw;
    width: 10vw;
    height: 4vh;
    color: #2BBA7C;
    float: left;
}

.connexion_input_area{
    width: 75vw;
    padding: 2vh;
    height: 5vh;
    border: none;
    border-radius: 15px;
    font-weight: bold;
    font-size: 1.75vh;
    background-color: #FFEFE1;
    color: #1c322596;
}

#connexion_form{
    height: 23vh;
}

#connexion_contour_button{
    width: 60vw;
    margin: 4vh auto 0 auto;
    text-align: center;
}

#connexion_input_submit {
    background-color: #A9FFA4;
    padding: 1.5vh;
    width: 60vw;
    border: none;
    border-radius: 50px;
    font-size: 1.75vh;
    font-weight: bold;
    color: #1C3326;
}


#connexion_retour {
    margin: 5vh auto 0 auto;
    text-align: center;
}

#connexion_button_retour {
    border: none;
    background-color: #1C3326;
    border-radius: 10px;
    padding: 1vh;
    width: 15vw;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;


}

#connexion_retour button a {
    text-decoration: none;
    font-size: 3vh;
    color: white;
}

#connexion_div_mdp{
    width: 50%;
    text-align: center;
    margin: 0.5vh auto 0 auto;
}

#connexion_button_mdp{
    text-align: center;
    font-size: 1.25vh;
    color: #FFEFE1;
}

/*Page erreur connexion*/

.erreur_connexion_box{
    width: 80%;
    height: 25vh;
    margin: 30vh auto;
    background-color: #A9FFA4;
    color: #1C3326;
    text-align: center;
    padding: 2vh;
    border-radius: 15px;
}

.erreur_connexion_para{
    margin-top: 7.5vh;
    font-size: 2.5vh;
}

.erreur_button_form{
    width: 75%;
    border: none;
    border-radius: 10px;
    padding: 1vh;
    background-color: #FFEFE1;
}

.erreur_button_form a{
    text-decoration: none;
    color: #1C3326;
    font-size: 2.25vh;
}

/*Page Inscription*/

#body_inscription{
    background-image: url('../uploads/patern_light_green.svg');
    background-size: cover;
    margin: 0px;
    padding: 5vh 0 5vh 0;
    background-color: #1C3326;
    font-family: Arial-Rounded;
}

#h1_inscription {
    text-align: center;
    font-weight: bolder;
}

#h1_inscription a {
    text-decoration: none;
    color: #A9FFA4;
    font-size: 3vh;
}

#inscription_logo_contour{
    text-align: center;
    margin-bottom: 5vh;
}

#inscription_cadre_overall{
    text-align: center;
}

#inscription_cadre {
    text-align: center;
    color: white;
    margin: auto;
    width: 85%;
    background-color: #2BBA7C;
    padding: 2vh;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}


#h2_inscription {
    font-size: 3vh;
    margin: 0.5vh 0 1vh 4vw;
    color: #A9FFA4;
    font-weight: bolder;
    float: left;
}

#inscription_user_svg{
    margin-left: 5vw;
    width: 10vw;
    height: 4vh;
    color: #A9FFA4;
    float: left;
}

.inscription_input_area{
    width: 75vw;
    padding: 2vh;
    height: 5vh;
    border: none;
    border-radius: 15px;
    font-weight: bold;
    font-size: 1.75vh;
    background-color: #FFEFE1;
    color: #1c322596;
}

#inscription_files_box{
    width: 85vw;
    text-align: center;
    color: white;
    margin: 5vh auto 5vh auto;
    background-color: #A9FFA4;
    padding: 2vh;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#inscription_h2_files{
    color: #1C3326;
}

#photo {
    display: none;
}

.custom-file-input {
    display: inline-block;
    margin-top: 2vh;
    margin-bottom: 5vh;
    background-color: #1C3326;
    color: #A9FFA4; 
    padding: 1vh 1vh; 
    border: none;
    border-radius: 15px;
    cursor: pointer;
    font-size: 2.25vh; 
    width: 90%;
}

#inscription_dossier_svg{
    margin: 0 5vw 0 0;
    width: 5vh;
    width: 5vh;
    float: left;
}

#inscription_paragraph_dossier{
    float: left;
    margin: 0.75vh 0 0 0 ;
}

#inscription_div_img{
    margin: auto;
    width: 25vh;
    text-align: center;
}
#imagePreview{
    border-radius: 10px;
}

#inscription_box_button{
    width: 50vw;
    text-align: center;
    margin: -2.5vh auto 0 auto;
}

#inscription_box_button input{
    background-color: #2BBA7C;
    color: #FFEFE1;
    border: none;
    padding: 2vh;
    width: 50vw;
    border-radius: 50px;
}



/*Page Classement*/

#classement_div_patern{
    background-image: url("../uploads/pattern.svg");
    background-size: cover;
    height: 100%;
    padding-bottom: 15vh;
    padding-top: 5vh;
}

#classement_title_box{
    padding: 2vh;
    margin: 0 0 5vh 0;
}

#classement_svg_leader{
    float: left;
    margin: 0 0 0 5vw;
}

#classement_logo{
    float: left;
    margin: 0 0 0 3vw;
}

#classement_paragraph_top{
    float: right;
    margin: 2vh 0 0 0;
    width: 20vw;
}

#un{
    clear: both;
}
#h1_classement {
    text-align: center;
    margin-top: 5vh;
    font-weight: bold;
}

#h1_classement a {
    text-decoration: none;
    color: black;
    font-size: 7.5vh;
}

#h2_classement {
    text-align: center;
    font-size: 5vh;
    font-weight: bold;
}

.avatar {
    width: 75px;
    height: 75px;
    border-radius: 50%;
}

#classement_paragraph_top{
    color: #A9FFA4;
}

.partage_classement {
    position: absolute;
    width: 90vw;
    height: 35vh;
    padding-top: 1vh;
    background-color: #2BBA7C;
    border-radius: 15px;
    color: #FFEFE1;
    font-weight: bold;
}

.partage_classement h2 {
    font-size: 2vh;
}

.partage_classement .titresucces {
    font-size: 1.5vh;
}

.partage_classement .partager p {
    color: #1C3326;
    font-size: 1.3vh;
}

.partage_classement .partagefin {
    font-size: 1.2vh;
}

.partage_classement .ppartage {
    margin-bottom: 0;
}

.partage_classement .gauche {
    font-size: 1.5vh;
    color: #A9FFA4;
}

.partage_classement .niveauxp {
    font-size: 1.7vh;
}

.partage_classement .droite {
    font-size: 1.5vh;
}

.partage_classement .membre {
    color: #1C3326;
}

.partage_classement .niveau {
    color: #A9FFA4;
}

/*Page Planète*/


#planet_overall{
    position:absolute;
    left: 0px;
    top: 0px;
    width: 100vw;
    height: 0;
}
#planet_box_logo{
    margin-top: 2.5vh;
    text-align: center;
    height: 0;
}

#planet_logo{
    width: 35vw;
    height: 20vh;

}

.sketchfab-embed-wrapper{
    margin-top: -4.95vh;
}


#planet_annotation{
    width: 85%;
    height: 30vh;
    text-align: center;
    margin: 60vh auto 0 auto;
    background-color: #ffffff49;
    padding: 2vh;
    border-radius: 15px;
}

#planet_h2_annotation{
    background-color: #2BBA7C;
    padding: 0.5vh 1vh;
    border-radius: 20px;
    width: 30vw;
    font-size: 2.5vh;
    margin: auto;
    color: white;
}

#planet_h3_annotation{
    margin-top: 2vh;
    color: white;
    font-size: 2.25vh;
    text-align: left;
    width: 57.5vw;
}
#planet_points_vert{
    color: #A9FFA4;
}

.progress{
    background-color: #FFEFE1;
    height: 1.5vh;
}

.progress-bar{
    background-color: #A9FFA4;
    height: 1.5vh;
}

#planet_h3_annotation_ex{
    margin: 0;
    float: left;
    text-align: left;
    width: 50%;
    font-size: 2vh;
    color: #A9FFA4;
}

#planet_h3_annotation_lv{
    margin: 0;
    float: right;
    text-align: right;
    font-size: 2vh;
    width: 50%;
    color: #fff;
}


/*Page Compte*/

.profile-image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: block;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1/1;
}

#compte_settings i {
    color: white;
    font-size: 4vh;
    cursor: pointer;
}

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Fond semi-transparent */
    z-index: 999;
    /* Empilement au-dessus de tout le reste, sauf la pop-up */
    display: none;
    /* Initialement caché */
}

#compte_param_button_close {
    border: none;
    background-color: #1C3326;
    float: right;
    margin-top: -1vh;
}

#compte_param_button_close i {
    color: #fff;
    font-size: 4vh;
    cursor: pointer
}

#compte_h3_settings {
    margin-top: 5vh;
    margin-bottom: 6.5vh;
    font-size: 4vh;
}

#compte_settings_button_valid {
    width: 30%;
    padding: 1vh;
    border: none;
    font-size: 2vh;
    border-radius: 25px;
    margin-top: 2.5vh;
}

#compte_share {
    font-size: 4vh;
    cursor: pointer;
    margin-left: 1.5vw;
    margin-top: 2vh;
}

#compte_bar {
    width: 80vw;
    height: 0.25vh;
    background-color: white;
    border-radius: 10px;
    margin: 0 auto 0 auto;
}

#image_compte {
    margin-left: 15vw;
}

#texte_compte {
    width: 30vw;
    float: left;
    padding-top: 2vh;
    font-size: 1.25vw;
}

.custom-file-upload input[type="file"] {
    display: none;
}


#deconnexion_compte {
    clear: both;
    margin-top: 55vh;
    text-align: center;
    width: 100%;
}


#compte_button {
    border: none;
    border-radius: 5px;
    padding: 2vh;
    width: 15vw;
    background-color: #1C3326;
    font-size: 2.5vh;
    text-transform: bold;
}


#compte_button a {
    text-decoration: none;
    color: white;
}

.succes {
    margin: 60px;
    background-color: #1C3326;
    border-radius: 10px;
}

.succes_numero {
    margin: 20px;
    padding: 30px 40px;
    color: #1C3326;
    background-color: #fff;
    border-radius: 10px;
    transition: transform 0.3s ease; 
}

.succes_numero:hover {
    transform: scale(1.05); 
}

.succes h2 {
    font-size: 2.5rem;
}


#badgeContainer {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    grid-gap: 20px; 
    justify-content: center; 
}

.badgeSlot {
    width: 40px; 
    height: 40px; 
    background-color: transparent;
    border: 1px solid #000; 
    border-radius: 50%; 
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px; 
}
.badgeSlot img{
    height: 45px;
    margin-top: 2px;
}

#badgeSlot1,
#badgeSlot2,
#badgeSlot3 {
    grid-row: 1;
}

#badgeSlot4,
#badgeSlot5,
#badgeSlot6 {
    grid-row: 2;
}

.compte_button_titre{
    border: none;
    margin: 1.5vh 0 0 0;
    border-radius: 15px;
    background-color: #A9FFA4;
    color: #1C3326;
}


@media screen and (max-Width:700px){
    .succes {
        margin: 0px;
        padding: 0; 
        background-color: #1C3326;
    }
    
    .succes_numero {
        margin: 15px;
        padding: 20px; 
        color: #1C3326;
        background-color: #fff;
        overflow: hidden;
    }
    
}

/*Page défis*/

#defi_patern_box{
    background-image: url("../uploads/pattern.svg");
    background-size: cover;
    height: 100%;
    padding-bottom: 15vh;
    padding-top: 5vh;
}

#defis_rafraichir_defis{
    width: 90%;
    background-color: #2BBA7C;
    text-align: center;
    padding: 1vh;
    border-radius: 15px;
    margin: auto;
}

#defis_rafraichir_defis a{
    color: #1C3326;
    text-decoration: none; 
}
#defi_title_box{
height: 10vh;
}

#defi_epingle_img{
    float: left;
    width: 12.5vw ;
    height: 10vh;
    margin-left: 10vw;
}
#defis_h1_a{
    float: left;
    width: 60vw ;
}

#défis_logo{
    width: 175px;
    margin: 2vh 0 0 3vw;
}

#defis_communautaire_box{
    width: 90vw;
    height: 8vh;
    background-color: white;
    border-radius: 20px ;
    margin: 5vh auto 5vh;
    clear: both;
    padding: 2vh;
}

#defis_communautaire_people{
    width: 8vw;
    height: 4vh;
    float: left;
    margin: -0.25vh 0 0 0;
}

#defis_communautaire_h2{
    width: 60vw;
    font-size: 1.75vh;
    margin: 1vh 0 0 3vw;
    float: left;
}

#defis_communautaire_chevron{
    width: 7vw;
    height: 3vh;
    float: left;
    margin: 0.5vh 0 0 3vw;
}

#defis_ul{
    margin: 0;
    padding: 0;
}

.defi{
    width: 90%;
    background-color: #A9FFA4;
    margin: 5vh auto;
    padding: 2vh;
    border-radius: 15px ;
}

#defis_reussi{
    width: 100%;
    background-color: #1C3326;
    margin: auto;
    border-radius: 15px ;
    padding: 1vh;
    color: #A9FFA4;
    margin: 2.5vh 0 0 0;
}
#defis_button_succes_box{
    width: 75vw;
    margin: 30vh auto 0 auto;
    text-align: center;
    padding: 2.5vh;
    border: #A9FFA4 0.25vh solid;
    border-radius: 50px;
    clear: both;
}

#defis_button_succes_box a{
    text-decoration: none;
    color: #A9FFA4;
}

#defis_xp_bar{
    width: 80%;
    margin: 5vh auto;
}

#defis_h3_bar_ex{
    margin: 0;
    float: left;
    text-align: left;
    width: 50%;
    font-size: 2vh;
    color: #A9FFA4;
}

#defis_h3_bar_lv{
    margin: 0;
    float: right;
    text-align: right;
    font-size: 2vh;
    width: 50%;
    color: #fff;
}


/*Page succès*/

#success_overall{
    background-image: url("../uploads/pattern.svg");
    background-size: cover; 
    height: 100%;
    padding-bottom: 15vh;
    padding-top: 5vh;
}

#success_title_box{
    margin-bottom:5vh ;
}

#success_svg_retour{
    width: 7.5vw;
    height: 5vh;
    float: left;
    margin-left: 5vw;
}

#success_h1{
    width: 80%;
    margin: auto;
    color: #A9FFA4;
    font-size: 3.5vh;
    text-align: center;
}

#succes_box1{
    width: 85%;
    background-color: #2BBA7C;
    color: #A9FFA4;
    border-radius: 15px;
    margin: auto;
    padding: 3vh 2vh 2vh 2vh;
}

#succes_box2{
    width: 85%;
    background-color: #A9FFA4;
    color: #A9FFA4;
    border-radius: 15px;
    margin: 5vh auto;
    padding: 3vh 2vh 2vh 2vh;
}

#succes_box3{
    width: 83%;
    border: #2BBA7C 0.5vh solid;
    color: #A9FFA4;
    border-radius: 15px;
    margin: 5vh auto;
    padding: 3vh 2vh 2vh 2vh;
}

#succes_box4{
    width: 85%;
    background-color:#BFEABB ;
    color: #A9FFA4;
    border-radius: 15px;
    margin: 5vh auto;
    padding: 3vh 2vh 2vh 2vh;
}

#succes_box5{
    width: 85%;
    background-color: #2BBA7C;
    color: #A9FFA4;
    border-radius: 15px;
    margin: auto;
    padding: 3vh 2vh 2vh 2vh;
}

#succes_box6{
    width: 85%;
    background-color: #A9FFA4;
    color: #A9FFA4;
    border-radius: 15px;
    margin: 5vh auto;
    padding: 3vh 2vh 2vh 2vh;
}

#success_svg_trophy{
    width: 7.5vw;
    height: 3.5vh;
    float: left;
    margin-left: 4vw;
    margin-right: 1vw;
}

.success_descript_box{
    width: 80%;
    clear: both;
    margin: 3vh auto 0 auto;
}

.success_paragraph_descrip_lightgreen{
    color: #A9FFA4;
}

.success_paragraph_descrip_darkgreen{
    color: #1C3326;
}

.success_paragraph_descrip_white{
    color: #fff;
}

.success_advencement_lightgreen{
    color: #A9FFA4;
    float: left;
    width: 6vw;
    margin-left: 12.5vw;
}

.success_advencement_darkgreen{
    color: #1C3326;
    float: left;
    width: 6vw;
    margin-left: 12.5vw;
}

#success_h2_1{
    color: #A9FFA4;
    width: 60%;
    margin: 0 auto 2vh auto;
    font-size: 2vh;
    padding-left: 1vh;
    float: left;
}

#success_h2_2{
    color: #1C3326;
    width: 60%;
    margin: 0 auto 2vh auto;
    padding-left: 1vh;
    font-size: 2vh;
    float: left;
}

#success_h2_3{
    color: white;
    width: 60%;
    margin: 0 auto 2vh auto;
    padding-left: 1vh;
    font-size: 2vh;
    float: left;
}


.success_box_1{
    clear: both;
    width: 85%;
    height: 2.25vh;
    background-color: #FFEFE1;
    border-radius: 15px;
    margin: 2.5vh auto;
    padding: 2vh 2vh;
}

.success_box_2{
    clear: both;
    width: 85%;
    height: 2.25vh;
    background-color: #1C3326;
    border-radius: 15px;
    margin: 2.5vh auto;
    padding: 2vh 2vh;
}

.success_box_3{
    clear: both;
    width: 85%;
    height: 2.25vh;
    background-color: #2BBA7C;
    border-radius: 15px;
    margin: 2.5vh auto;
    padding: 2vh 2vh;
}

.success_h3_darkgreen{
    color: #1C3326;
    width: 40vw;
    margin: 0;
    font-size: 1.75vh;
    float: left;
}

.success_h3_lightgreen{
    color: #A9FFA4;
    width: 40vw;
    margin: 0;
    font-size: 1.75vh;
    float: left;
}

.succes_strong_green{
    color:#2BBA7C;
}

.succes_strong_lightergreen{
    color:#BFEABB;
}


#success_number_lightgreen{
    float: right;
    color: #A9FFA4;
}

#success_number_green{
    float: right;
    color: #2BBA7C;
}

#success_number_white{
    float: right;
    color: white;
}
.succes_checkbox{
    width: 5vw;
    float: right;
    
}

.succes_checkbox input{
    width: 5vw;
    height: 2.5vh; 
    margin: -0.15vh 0 0 0;
}



/*Page Recyclage*/

#recyclage_overall{
    position:absolute;
    left: 0px;
    top: 0px;
    width: 100vw;
    height: 100vh;
}

#recyclage_svg{
    margin: auto;
    text-align: center;
    width: 100vw;
    height: 60vh;
}

#recyclage_annotation{
    width: 85%;
    height: 30vh;
    text-align: center;
    margin: auto;
    background-color: #ffffff49;
    padding: 2vh;
    border-radius: 15px;

}

#recyclage_h2_annotation{
    margin-top: 2vh;
    font-size: 2.25vh;
    color:#FFEFE1
}

#recyclage_trait{
    width: 65%;
    height: 0.4vh;
    border-radius: 10px;
    background-color: #FFEFE1;
    margin: 2vh auto 2vh auto;
}

#recyclage_annotation_warning{
    width: 45vw;
    height: 5vh;
    margin: auto;
}

#recyclage_warning{
    float: left;
}

#recyclage_warning_h3{
    text-align: left;
    margin-left: 3vw;
    color: #A9FFA4;
    float: left;
    font-size: 1.55vh;
    width: 35vw;
}

/*Général pour toutes les pages*/

/* Style général du footer */
footer {
    font-weight: bolder;
    font-size: 12px;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #2BBA7C;
    color: #1C3326;
    padding: 15px 0;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
    z-index: 2;
}

.nav img {
    width: 24px;
    height: 24px;
}

.nav .nav-link.active i {
    color: #2BBA7C;
}

.nav {
    display: flex;
    justify-content: center;
}

.nav-slot {
    flex: 1;
    text-align: center;
}

.nav-link {
    padding: 0.5rem 0.4rem;
    font-weight: bold;
    color: #1C3326;
    text-decoration: auto;
}

.nav-link:hover {
    color: #1C3326;
}

.nav-link:disabled {
    color: #2BBA7C;
}

.image-text {
    display: block;
    margin-top: 5px;
    font-size: 0.8rem;
}

footer .planet-icon {
    height: 55px;
    width: 55px;
    margin-top: -10%;
}


/* Style page planete */

iframe {
    width: 100vw;
    height: 100vh;
}

.sketchfab-embed-wrapper {
    width: 100vw;
    height: 100vh;
}

.footer-image[src*='blanc'] + .image-text {
    color: #FFEFE1;
}