/*============= index accueil ==============*/
#gridGame{display:grid;grid-template-columns: 1fr 1fr 1fr;gap:40px;margin:0px 50px}

#gridGame > span {border:3px solid orangered;border-radius:5px;padding:10px;
    text-align:center;font-size:30px}
    
#gridSauvGame{display:grid;grid-template-columns: 1fr 1fr 1fr;gap:20px;margin:0px 50px}
#gridSauvGame > span {display:flex;border:1px solid orangered;border-radius:15px;text-align:center;padding:10px;align-items: center;}
#gridSauvGame > span > span {flex:1}
#gridSauvGame img {width:30px;height:30px;cursor:pointer}

#imgFlag{width:60px;height:60px}

#logoAccueil {text-align:center;position:absolute;bottom:0px;left:50%;transform:translate(-50%,-10px)}
#logoAccueil > img{width:35px;height:35px;cursor:pointer}
#logoAccueil > span{display:inline-block;width:50px}

#divAccueil{position:fixed;top:0px;left:0px;z-index:100;width:100%;height:100%}

#divGame{position:fixed;top:0px;left:0px;z-index:100;width:100%;height:100%;overflow-y: auto;}

/*================== Intelligence artificielle =====================*/
#ai_dragdropIn {
    background-color: yellow;
    display: inline-block;
    width: 150px;
    height:75px;
    min-height: 100px;
    text-align: center;
    mmargin: 10px auto;
    margin-right:20px;
    border: 2px solid orange;
    position:relative;
}

#ai_dragdropIn img{width:75px;height:75px;
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%)
}



#ai_label-container{
    position:relative;
    display:flex;
    flex-direction: column-reverse;
}

#ai_label-container > * {margin-left:10px}

#ai_label-container > * {margin-bottom:10px}

#ai_label-container > * > *{display:inline-block;vertical-align: middle;}

#ai_label-container > * > :nth-child(2) {
    border: 2px solid orangered;
    border-radius: 15px;
    position: relative;
    display: inline-block;
    width: 150px;
    height:20px;
    overflow:hidden;
    bottom:0px;
    margin-left:5px;
    background-color:white;
}

#ai_label-container> * > :nth-child(2) > :nth-child(1) {
    background-color: yellow;
    height: 20px;
    width: 100px;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    display: inline-block;
    border-right: 2px solid red;
    position:relative;
}

#ai_label-container > * > :nth-child(2) > :nth-child(2) {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%) translate(5px,0px);
}

#ai_webcam-container{display:inline-block;width:200px;height:200px;margin:5px 5px 5px 5px;border:1px solid black;background-color:burlywood}

#ai_nav{display:flex}
#ai_nav > * {flex:1;text-align:center}
#ai_nav img{width:30px;height:30px;cursor:pointer}

#ai_cont{display:flex;flex-wrap:wrap;row-gap: 10px;column-gap: 10px;
justify-content: center;}
#ai_cont > div {border:1px solid black}

#ai_cont > :nth-child(1){flex:1;background-color:mistyrose;padding:10px}
#ai_cont > :nth-child(2){background-color:#bae4fe}
#ai_cont > :nth-child(3){background-color:#b4efe1;padding-top:10px;padding-right:10px}

#ai_timestamp > img {width:25px;height:25px;cursor:pointer}

/*==== Bouton de controle de l'AI =====*/

#ai_webcam-controls{text-align:center}
#ai_webcam-controls > * {cursor:pointer}
#ai_webcam-controls > :nth-child(1) {margin-right:20px}


/*================== Pixel Art ============*/

#pixelArt_tools{display:none;text-align:center}
#pixelArt_tools > span {cursor:pointer}
#pixelArt_tools > span:nth-child(1) {margin-right:30px}

#pixelart_downloadPanel{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
padding:20px;border:1px solid orangered;border-radius:10px;background-color: aliceblue;
width:400px}

#pixelart_downloadPanel > div {width:300px;margin:15px auto;
    border:1px solid blue;background-color:bisque;padding:10px;text-align:center;cursor:pointer}

    #pa_dragdropIn {
        background-color: yellow;
        display: inline-block;
        width: 150px;
        height:75px;
        min-height: 100px;
        text-align: center;
        mmargin: 10px auto;
        margin-right:20px;
        border: 2px solid orange;
        position:relative;
    }
    
    #pa_dragdropIn img{width:75px;height:75px;
        position:absolute;
        top:50%;left:50%;
        transform:translate(-50%,-50%)
    }

/*================= Pixel maker =======================*/

#pixelart_maker{position:fixed;display:none;top:50%;left:50%;transform:translate(-50%,-50%);
width:90%;height:90%;padding:5px;
background-color:#ffdddd;border:1px solid orangered;border-radius:15px;
z-index:300;
overflow-y:scroll}

#pixelmaker_close{position:fixed;top:5px;right:5px;cursor:pointer}

#pixelmaker_result{width:80%;margin:auto;height:200px;
background-color:aliceblue;border:1px solid orangered;
border-top-left-radius:25px;border-bottom-left-radius:25px;padding:15px;
white-space:pre;
overflow-y: scroll;}

#pixelmaker_img{text-align:center}
#pixelmaker_img > :nth-child(1){margin-right:15px}.ui_boutonAction {
    padding: 3px 20px;
    border: 2px solid orange;
    border-radius: 15px;
    background-color: #ffff00;
    cursor: pointer;
    user-select: none;
    transform:scale(0.5)
}

.ui_boutonAction > span {
    vertical-align: -10px;
    transform:scale(0.65)
}



#ui_output{white-space:pre-wrap;max-height:200;border:1px solid black;background-color:bisque;overflow-y: scroll;
    display:flex;flex-direction:column-reverse;min-height:100px;max-height:300px;
    flex-basis:100%}

#divGame > h1 > .s30 {cursor:pointer}

#presentation ol > li{margin-top:50px}

.presentation-section{font-weight:900}

.presentation-remarque{border:1px solid black; background-color:pink;padding:5px}

.presentation-code{
    font-family:monospace;
    border:1px solid black;padding:10px;background-color: beige;
    white-space: pre;
}

#cadreSvg > :nth-child(2) {background-color:white}

#gameTitre{background-color:bisque;border:1px solid orangered;padding:3px 20px;border-radius:20px}/*=====================================*/

h1 .s30 {margin-left:20px}


/*=====================================*/

.divOnglet{min-width:600px;width:45%;display:inline-block;user-select:none}

.divOnglet > :nth-child(1) {background-color:hsl(0, 0%, 93%);padding:4px;display:flex;font-weight:900}
.divOnglet > :nth-child(1) > :nth-child(1) {flex:1}
.divOnglet > :nth-child(1) img {width:25px;height:25px;cursor:pointer;margin-left:15px}

/*
#divOngletInit .codeMirror{background-color:antiquewhite}
#divOngletLoop .codeMirror{background-color:gainsboro}
#divOngletListener .codeMirror{background-color:powderblue}
*/

#divOnglet4{flex:1;}
#divOnglet5 > #titre {margin:10px 10px}






#zoom{
    margin-bottom:10px;
    white-space:nowrap;
}

#nav{user-select:none;wwwhite-space: nowrap;}

#nav > span{
    display:inline-block;border:1px solid orangered;border-bottom:0px;
    border-top-right-radius: 5px;border-top-left-radius: 5px;
    padding:5px 15px 1px 15px;margin-left:5px;
    cursor:pointer;
    background-color:papayawhip;color:black;
    font-weight:900;font-size:80%;
}

#nav > div {margin-right:20px;cursor:pointer}

#nav > :nth-child(3){background-color:darkorange;color:beige}

.divOnglet > #titre {line-height:25px;height:30px;vertical-align: middle;border-bottom:1px solid black;margin-bottom:10px}

.s60{background-size:324px 246px ! important;background:url(https://chingplay.fr/image/sprite.webp);display:inline-block;width:60px;height:60px}
.s60.s_a {background-position:-0px -0px}
.s60.s_b {background-position:-0px -60px}
.s60.s_c {background-position:-0px -120px}
.s60.s_g {background-position:-0px -180px}
.s60.s_d {background-position:-60px -0px}
.s60.s_e {background-position:-60px -60px}
.s60.s_f {background-position:-60px -126px}
.s60.s_h {background-position:-60px -186px}
.s60.s_i {background-position:-120px -0px}
.s60.s_j {background-position:-120px -60px}
.s60.s_k {background-position:-120px -120px}
.s60.s_l {background-position:-120px -180px}
.s60.s_m {background-position:-180px -0px}
.s60.s_n {background-position:-180px -60px}
.s60.s_o {background-position:-180px -120px}
.s60.s_q {background-position:-180px -180px}
.s60.s_o {background-position:-240px -0px}
.s60.s_s {background-position:-240px -60px}
.s60.s_t {background-position:-240px -120px}
.s60.s_p {background-position:-300px -0px}


.s45{background-size:243px 184px ! important;background:url(https://chingplay.fr/image/sprite.webp);display:inline-block;width:45px;height:45px}
.s45.s_a {background-position:-0px -0px}
.s45.s_b {background-position:-0px -45px}
.s45.s_c {background-position:-0px -90px}
.s45.s_g {background-position:-0px -135px}
.s45.s_d {background-position:-45px -0px}
.s45.s_e {background-position:-45px -45px}
.s45.s_f {background-position:-45px -94px}
.s45.s_h {background-position:-45px -139px}
.s45.s_i {background-position:-90px -0px}
.s45.s_j {background-position:-90px -45px}
.s45.s_k {background-position:-90px -90px}
.s45.s_l {background-position:-90px -135px}
.s45.s_m {background-position:-135px -0px}
.s45.s_n {background-position:-135px -45px}
.s45.s_o {background-position:-135px -90px}
.s45.s_q {background-position:-135px -135px}
.s45.s_o {background-position:-180px -0px}
.s45.s_s {background-position:-180px -45px}
.s45.s_t {background-position:-180px -90px}
.s45.s_p {background-position:-225px -0px}


.s30{background-size:162px 123px ! important;background:url(https://chingplay.fr/image/sprite.webp);display:inline-block;width:30px;height:30px}
.s30.s_a {background-position:-0px -0px}
.s30.s_b {background-position:-0px -30px}
.s30.s_c {background-position:-0px -60px}
.s30.s_g {background-position:-0px -90px}
.s30.s_d {background-position:-30px -0px}
.s30.s_e {background-position:-30px -30px}
.s30.s_f {background-position:-30px -63px}
.s30.s_h {background-position:-30px -93px}
.s30.s_i {background-position:-60px -0px}
.s30.s_j {background-position:-60px -30px}
.s30.s_k {background-position:-60px -60px}
.s30.s_l {background-position:-60px -90px}
.s30.s_m {background-position:-90px -0px}
.s30.s_n {background-position:-90px -30px}
.s30.s_o {background-position:-90px -60px}
.s30.s_q {background-position:-90px -90px}
.s30.s_o {background-position:-120px -0px}
.s30.s_s {background-position:-120px -30px}
.s30.s_t {background-position:-120px -60px}
.s30.s_p {background-position:-150px -0px}


.s20{background-size:108px 82px ! important;background:url(https://chingplay.fr/image/sprite.webp);display:inline-block;width:20px;height:20px}
.s20.s_a {background-position:-0px -0px}
.s20.s_b {background-position:-0px -20px}
.s20.s_c {background-position:-0px -40px}
.s20.s_g {background-position:-0px -60px}
.s20.s_d {background-position:-20px -0px}
.s20.s_e {background-position:-20px -20px}
.s20.s_f {background-position:-20px -42px}
.s20.s_h {background-position:-20px -62px}
.s20.s_i {background-position:-40px -0px}
.s20.s_j {background-position:-40px -20px}
.s20.s_k {background-position:-40px -40px}
.s20.s_l {background-position:-40px -60px}
.s20.s_m {background-position:-60px -0px}
.s20.s_n {background-position:-60px -20px}
.s20.s_o {background-position:-60px -40px}
.s20.s_q {background-position:-60px -60px}
.s20.s_o {background-position:-80px -0px}
.s20.s_s {background-position:-80px -20px}
.s20.s_t {background-position:-80px -40px}
.s20.s_p {background-position:-100px -0px}
body{height:100%;margin:0px;
    position:fixed;display:flex;flex-direction: column;position:absolute;width:100%;user-select: none;}

*{user-select: none;
-webkit-user-drag: none;}

#game_canvas{display:none}
#game_svg{display:none}



.bg0{background-color:burlywood}
.bg1{background-color:antiquewhite}

.imgLocal{display:none}

.pastille{z-index:100;position:relative}

.case{z-index:0;position:relative}

#messageSave{display:none;position:fixed;padding:10px;top:5px;right:5px;border:2px solid orangered;background-color:papayawhip;}

h1{margin-block-end:0px}
h1 > img {margin-left:30px;width:30px;height:30px;cursor:pointer;
display:inline-block;vertical-align:middle}

h1 > span {display:inline-block;vertical-align:middle}



/*============= index charge ========*/

.CodeMirror{height:auto ! important}
.divOnglet{min-width: auto ! important}

#princDiv{display:flex;flex:1; width:100%;flex-basis:100%;min-height:0;margin-top:20px}

#cont  {min-width:0;flex-basis:100%;display:flex;flex-direction: column;padding-bottom:15px}
#cont > * {min-width:0;width:100%}
#cont > :nth-child(2)  {width:100%;height:100%;flex-basis:100%;min-height:0;overflow-x:clip;border:1px solid orangered;;background-color:azure}
#cont > :nth-child(2) > * {width:100%;height:100%} 
#cont > :nth-child(2) > :nth-child(n+2){display:none;flex:1}




#cadreSvg{padding:0px 20px 0px 20px;user-select:none;
    min-height:0;
    display:flex;flex-direction:column;;padding-bottom:15px
}
#cadreSvg > :nth-child(2) {width:600px;height:600px;display:inline-block}

#divGame{display:none}


#divError{
        background-color:bisque;
 }

 /*=============== Presentation ============*/

.present{margin:0px 5px 10px 5px}
.present tt{font-weight:900}
.present ul{margin-top:0px;margin-bottom:0px}

.presentTab{border:1px solid orangered;padding:2px 5px;margin:0px 20px}
.presentTab span{display:block}

.presentTab > :nth-child(1){font-weight:900;font-family: monospace}
.presentTab > :nth-child(2){margin-left:10px}

.presentTab.prop0{background-color:aliceblue}
.presentTab.prop1{background-color:lavender}
.presentTab.method0{background-color:antiqueWhite}
.presentTab.method1{background-color:floralwhite}
.presentTab.listener0{background-color:lightgreen}
.presentTab.listener1{background-color:#bbf0bb}

#presentationModele{border:2px solid orangered;background-color:ghostwhite;padding:5px 10px;width:300px;max-width:100%;margin:auto;margin-bottom:30px}
#presentationModele > :nth-child(1){font-weight:900}