section:has(section.doc){
    margin:0;
    width:100vw;
}

section.doc{
    width:100vw;
    margin:0;
    padding:0;
    min-width:750px;
}

div.flex{
    display:flex;
    
    
    .page{
        flex-grow:1;
        min-width:570px;
        width:100%;
        margin:auto;
    }
}

section.theme{
    position:relative;
    min-width:570px;

    
    h2{
        text-align:center;
    }
    .etoiles-wrapper{
        display:flex;
        justify-content:space-between;
        align-items:center;
        width:162px;
        position:absolute;
        right:0px;
        top:0px;
        .star{
            margin:2px;
        }
        img{
            width:30px;
        }
    }

    .XP-wrapper{
        display:flex;
        justify-content:center;
        align-items:center;
        position:relative;
        margin:0;
        transition:left linear 1000ms;

        p{
            margin-right:30px;
        }
        .barre-bg{
            width:200px;
            height:20px;
            background-color:#FFF;
            border:solid 1px;
        }
        .barre-fg{
            height:18px;
            background-color:aqua;
            position:relative;
            left:-200px;
            top:0px;
            transition:width linear 1000ms;
        }
        form{
            position:relative;
            transition:left linear 1000ms;
        }
    }

    .cours-squares,.ex-squares{
        margin:auto;
        display:flex;
        justify-content:space-between;
        align-items:center;
        width:162px;
        &>p{
            margin-right:10px;
        }
        .square{
            position:relative;
            margin:4px;
            width:20px;
            height:20px;
            background-color: #EEE;
            border: solid 1px;
            border-radius:5px;
            line-height:20px;
            font-size:1.3em;
            text-align:center;
            
            .tooltip{
                display:none;
                font-size:0.8em;
            }
            &:hover>div{
                display:block;
                position:absolute;
                z-index:2;
                top:30px;
                background-color: #EEE;
                border:solid 1px;
                padding:5px;
                margin:0;
                width:max-content;
                max-width: 200px;
                p{
                    
                    margin:0;
                    padding:0;
                }
            }
        }
        img{
            width:30px;
        }
    }
    .ex-squares{
        margin:auto;
        display:flex;
        justify-content:space-between;
        align-items:center;
        width:162px;
        .square{
            margin:2px;
        }
        img{
            width:30px;
        }
    }

}
/* 
section.content{
    min-width:570px;
    .cours{
        font-family:calibri;
        font-size:1.2em;
        min-width:570px;
    }

    h1{
        font-size:4em;
        text-align:center;
        border:solid 1px;
        box-shadow:5px 5px 3px grey;
        font-weight:normal;
    }

    h2{
        font-size:2em;
        text-decoration:underline double;
        font-weight:normal;
        margin-top:50px;
    }

    h3{
        font-size:1.3em;
        font-weight:normal;
        text-decoration: underline;
        margin-left:60px;
    }
    div:has(img.centered){
        text-align:center;
    }
    .centered{
        text-align:center;
        width:80%;
    }

    table{
        border-collapse:collapse;
        table-layout: fixed;
        margin:10px auto;
    }

    .float-right{
        float:right;
        margin:20px 50px;
    }
    .float-left{
        float:left;
        margin:10px 50px;
    }
    td,th{
        border:solid 1px ;
        padding:4px;
        text-align:center;
    }

    div.important{
        background-color: #fcbaba ;
        border:solid 1px;
        padding:0px 30px;
    }
    div.centered{
        width:80%;
        margin:40px auto ;
        text-align:left;
    }

    div.remarque{
        background-color: #dedede ;
        border:solid 1px;
        margin:20px auto ;
        padding:0px 30px;
    }

    div.remarque-centered{
        background-color: #dedede ;
        border:solid 1px;
        width:70%;
        margin:20px auto ;
        padding:0px 30px;
    }

    ul.cours-ul li{
        list-style:disc;
        margin:5px;
    }

    ul.cours-ul ol li{
        list-style:decimal;
        margin:5px;
    }
} */

section.doc-footer{
    padding:0;
    position:relative;
    width:200px;
    form{
        z-index:2;
        background-color:white;
        border : solid 1px blue;
        border-radius:5px;
        width:200px;
        color:#000;
        height:40px;
        line-height:40px;

        label{
            margin:0;
            display:inline-block;
            text-align:center;
        }

        &:has(input:checked){
            background-color:blue;
        }

        input[type="checkbox"]{
            margin:13px 10px;
            &:checked{
                display:none;
                &~label{
                    width:200px;
                    &:before{
                        content:"Cours complété \2713";
                    }
                }
            }

            &:not(:checked){
                &~label{
                    width:166px;
                    &:before{
                        content:"J'ai lu ce cours";
                    }
                }
            }   
        }   
    }
    
    div{
        pointer-events: none;
        color:blue;
        width:200px;
        text-align:center;
        position:absolute;
        opacity:1;
        top:0;
        left:50px;
        line-height: 40px;
        transition:all linear 500ms ;
        transform:translateX(100px);
    
        &.hidden{
            transform:translateX(0);
            opacity:0;
           
        }
    }

}

@media (max-width:768px){
    section.doc{
        width:100vw;
        margin:0;
        padding:0;
        min-width:auto;
    }

    div.flex{
        display:block;
        
        .tree-mocker{
            &:has(.icon input:checked){
                background-color:rgba(236,236,236,0.95);
            }
            position:relative;
            max-width: unset;
            width:100%;
            height:max-content;
            padding:0;
            .icon{
                margin:5px;
                z-index:3;
                display:block;
                img{
                    width:40px;
                }
                input{
                    display:none;
                }
            }
            .hidden{
                max-height:0;
                opacity:0;
                transition:all 400ms linear;

                
            }
        }
        .page{
            width:100%;
            min-width: unset;
            margin:auto;
        }
    }

    section.theme{
        background-color: unset;
    }

    section.content{

        min-width:unset;
        .cours{
            font-size:1em;
            box-sizing: border-box;

            min-width:unset;
            padding:20px;
            width:100%;
        }
        h1{
            font-size:2em;
        }
        h2{
            font-size:1.5em;
            margin-top:30px;
        }
        h3{
            font-size:1.2em;
            margin-left:40px;
        }
        div:has(img.centered){
            text-align:center;
   
        }
        .centered{
            text-align:center;
            width:80%;
        }

    
        .float-right{
            float:right;
            margin:20px 50px;
        }
        .float-left{
            float:left;
            margin:10px 50px;
        }
        .flex{
            display:flex;
        }


    
        div.remarque{
            background-color: #dedede ;
            border:solid 1px;
            margin:20px auto ;
            padding:0px 30px;
        }
    
        div.remarque-centered{
            background-color: #dedede ;
            border:solid 1px;
            width:70%;
            margin:20px auto ;
            padding:0px 30px;
        }
        
    
        

    }
}