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

section.exercices{
    
    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.ex{
        position:relative;
        .help-xp{
            padding-top:0;
            margin-top:0;
            text-align:center;
        }
        .headerEx{
            display:flex;
            justify-content:center;
            align-items:center;
            position:relative;
            transition:left linear 1000ms;
            margin-bottom:0;
            p{       
                flex-shrink:0;
            } 
            .barre-bg{
                flex-shrink:0;
                width:200px;
                height:15px;
                background-color:#FFF;
                border:solid 1px;
                margin-left:30px;
            }
            .barre-fg{
                flex-shrink:0;
                height:13px;
                background-color:aqua;
                position:relative;
                left:-200px;
                transition:width linear 1000ms;
            }
            form.reset{
                position:relative;
                margin:0;
                transition:left linear 1000ms;
            }
    
        }
        div.toggle-div{
            background-color:#EEE;
            width:130px;
            text-align:center;
            padding:10px;
            position:absolute;
            right:0;
            top:0;
            p{
                margin:10px 0 0 0;
            }
            &>.tooltip-wrapper{
                position:absolute;
                top:5px;
                right:5px;
            }
            .toggler-wrapper{
                position:relative;
                background-color:#EEE;
                border-radius:10px;
                border:solid 1px;
                width:40px;
                height:20px;
                margin:auto;
                &:has(label.disabled){
                    opacity:0.3;
                }
                label{
                    position:relative;
                    display:block;
                    width:40px;
                    height:20px;
                    &.disabled{
                        opacity:.3;
                    }
                    &:has(+input:checked)>.cursor{
                        transform:translateX(18px);
                }
                }
                input{
                    display:none;
                }
                .cursor{
                    margin:1px 1px 1px 2px;
                    width:18px;
                    height:18px;
                    border-radius:9px;
                    background-color:#AAA;
                    transform:translateX(0);
                    transition:linear 100ms transform;
                }
                p{
                    width:max-content;
                }
                
            }
        }
        
        h2{
        width:100%;
        text-align:center;
        margin-bottom:20px;
        }
        form{
            margin:auto;
            position:relative;
            
           
            
           
            fieldset{
                border:none;
                &>p{
                    margin-left:300px;
                }
            }
            div.q-wrapper,div.correctAll{
                .CodeMirror{
                    line-height: normal;
                    height:fit-content;
                }
                display:flex;
                justify-content: center;
                align-items: center;
                position:relative;
                line-height:30px;
                margin:20px;
                padding:2px 0;
                
                &.AI{
                    display:block;
                    text-align:left;
                    .editor{
                        overflow:scroll;
                        border:solid 1px;
                        overflow: scroll
                    }
                    &.correcting:hover{
                        cursor:wait;
                    }
                    .correcting:hover{
                        cursor:wait;
                    }
                    
                
                    p,li,div,pre{
                        text-align:left;
                    }
                    p.reponse{
                        position:relative;
                    }
                    
                    table{
                        margin-left:20px;
                        td,th{
                            width:auto;
                            padding:0.5em;
                        }
                    }
                    textarea{
                        display:block;
                        width:30em;
                        height:5em;
                    }
                }
                

                label{
                    width:100px;
                    text-align:right;
                    padding-right:20px;
                    &.big{
                        text-align:left;
                        width:300px;
                        line-height:normal;
                        &~.exXPGain{
                            margin-left:-100px;
                        }
                    }
                }
                input[type=text],select{
                    width:100px;
                    font-size: 1em;
                    text-align:center;
                    margin-right : 20px;
                }
                input.hidden{
                    display:none;
                }
                p.reponse{
                    position:absolute;
                    right:0;
                    line-height:30px;
                    padding:0;
                    margin:0 20px;
                }
                div.exXPGain{
                    pointer-events: none;
                    padding:0;
                    color:blue;
                    width:100px;
                    margin-left:-120px;
                    text-align:center;
                    opacity:1;
                    line-height: 30px;
                    transition:all linear 500ms ;
                    transform:translateX(100px);
                
                    &.hidden{
                        transform:translateX(0);
                        opacity:0;  
                    
                    }
                }
            }
            div.juste{
                background-color:palegreen;
            }
            div.faux{
                background-color: palevioletred;
            }
            div.correctAll{
                margin:auto;
            }

        }

        table {
            border-collapse:collapse;
            margin: 10px auto;
            td,th{
                border:solid 1px;
                width:20px;
                height:20px;
                text-align:center;
            }
            th{
                border-bottom:double;
            }
        }
    }
}

@media (max-width:768px){
    section.exercices{
        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;
                    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.ex{
            form{
                    &>div:first-child{
                        position:static;
                        margin:auto;
                    }
                    fieldset{
                        >p{
                            margin-left:20px;
            
                        }
                        div.q-wrapper,div.correctAll{

                            div{
                                margin-left:-80px;
                                transform:translateX(0);
                                transform:translateY(-28px);
                            
                                &.hidden{
                                    transform:translateY(0);
                                    opacity:0;  
                                
                                }
                            }
                        }
                    }
                }
        }       
    }
}