@font-face {
  font-family: 'Comic Sans MS';
  src: url("/p/comic.ttf");
}

@font-face{
             font-family : 'Calligraffitti';
                  src : url('/p/Calligraffitti.ttf') ,
                        url('/p/Calligraffitti.woff') ;
         }
@font-face{
            font-family : 'Little days';  
            src : url('/p/Little days.ttf') ; 
        }
@font-face{
            font-family : 'cursive';  
            src : url('/p/Cursive standard Bold.ttf') ; 
        }
        

body {
    background-color: #EED;
    font-family: "Comic Sans Ms",cursive , apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
    font-size: 12px;
    color: #448;
    
} 

.invisible {
    position: absolute;
    left: -9999px;
    pointer-events: none;
}

.emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.emoji_ {
    display:inline-block; 
    text-align:center; 
    width:30px;
    height: 30px;
    line-height: 30px;    
    border: solid 2px #000; 
    padding: 4px; 
    margin: 4px; 
    font-size:22px;
    font-variant-emoji: text;
}
       
        
.a_cocher {
    display: inline-block;
    margin: 10px;
    background-color: rgba(250,250,10,0.2);
    }        
        
.aide {
    color:#A44;
    height: 40px;

    display: inline-block;
    padding:4px;
}
.aide:hover {

    background-color: rgba(200,50,50,0.2);
    border:solid 1px #A44;

}
.aide * {
    margin-left: 6px;
    height: 40px;
    vertical-align: middle;
}

ecriture_cursive {
            font-family: "cursive";
            font-size:smaller;
             margin-right: 4px;
        }


*, img {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
   user-drag: none; 
   -moz-user-select: none;
   -webkit-user-drag: none;
}

textarea:not([disabled]) {
   -moz-user-select: auto;
   -khtml-user-select: auto;
   -webkit-user-select: auto;
   -ms-user-select: auto;
   user-select: auto;
   user-drag: auto; 
   -moz-user-select: auto;
   -webkit-user-drag: auto;    
}
textarea {
    width:100%;
}




.photo {

   -moz-box-shadow: 2px 2px 6px gray;
   -webkit-box-shadow: 2px 2px 6px gray;
   box-shadow: 2px 2px 6px gray;

border: solid 6px #FFF;  
margin: 6px;

}



.titre_questionnaire {
    pointer-events: none;
    position: fixed;
    left: 0;    /* astuce pour centrer malgré le position:fixed */
    right: 0;  

    top:14px;

    color:#EEE;

    font-size:28px; 
    margin: auto;

    z-index: 10;

    font-family:fantasy;
    text-align: center;

    text-shadow: 1px 2px 3px rgba(0,0,0, 0.5);
    padding: 4px 20px 4px 20px;
}

.clos {
    color: #444;
    font-size:18px;
}
            
h2 {
    font-size:16px;
}


li {
    margin-bottom: 1.3em;
    list-style-type:square;
}

.questions li:before {
    content: "→  "; /* caractère UTF-8 */
    font-size: 20px;
}
.questions li {
    list-style-type:none;
}

.menu {

    float: left;
    width: 20%;
    text-align: center;
}            
            
.enonce {
        position: fixed;
        overflow: auto;

        top: 100px; 
        bottom: 40px; 

        left: 20%;    /* astuce pour centrer malgré le position:fixed */
        right: 6%;  


        color:#658;
        font-size:12px;     

        background-size: 100%;

        margin: auto;
        background-color: rgba(250,252,254,0.75);
        border: solid rgba(230,236,220,0.95);
        border-radius: 20px;
        z-index: 20;

        font-family:"Comic Sans Ms";
        text-align: left;
        box-shadow: 8px 8px 12px #aaa;

        padding: 20px;
    }
            
.enonce > * {
    margin-top: auto;
    margin-bottom: auto;
} 



.rouge {
    background-color: rgba(250,52,54,0.35);
    transition:all 0.2s;
}

.vert {
    background-color: rgba(50,252,54,0.35);
}            
.bleu_clair {
    background-color: rgba(50,152,254,0.25);

}

.formule {
    display:inline-block;
    background-color: rgba(250,200,20,0.2);
    border: rgba(250,200,20,0.8) solid 1px;
    font-size: larger;
    padding: 4px;
    margin: 2px;
}

.erreur {
    font-family:verdana;
    font-size: 14px;
    font-weight: bold;
    color: #D11;
}
.noms {
    font-family:verdana;
    font-size: 14px;
    font-weight: bold;
    color: #004;
}


form {
    display: inline-block;
}
            
input {
    background-color: #EED;
    text-align: center;
    font-family: arial;
    
        -moz-user-select: text;
           -khtml-user-select: text;
   -webkit-user-select: text;
    
}
input[type="checkbox"] {
    margin-left: 10px;
}



button, .menu button, .enonce button, menu .bouton, enonce .bouton {
    background-color: #453;
    color : #FFF;
    border-radius: 6px;
    box-shadow: 8px 8px 12px #aaa;
    text-shadow: 1px 2px 3px rgba(0,0,0, 0.5);
    font-family: verdana;
    font-size: 10px;   
    padding: 4px;
    opacity: 0.7;
    cursor: pointer;
}
/* menu button, enonce button, menu .bouton, enonce .bouton */
.bouton {
	font-family: "arial", sans-serif;
        font-weight: bold;
        margin: 0.5em; 
        padding: 0.5em 0.6em 0.4em; 
        border-radius: 8px; 
        color: hsl(0, 10%, 40%);
        text-decoration: none; 
        border-top-color: rgba(255, 255, 255, 0.8); 
        border-bottom-color: rgba(0, 0, 0, 0.1); 
        border-top-width: 1px; 
        border-bottom-width: 1px; 
        border-top-style: solid; 
        border-bottom-style: solid; 
        display: inline-block; 
        position: relative; 
        font-size: 10px;
        font-size-adjust: none; 
        font-stretch: normal;
        cursor:pointer;
        
        border: outset;
        border-color: #888;        
        
        box-shadow :    0 0.3em 0.3em rgba(255, 254, 255, 0.6) inset,
                        0 -0.1em 0.3em rgba(0, 0, 0, 0.15) inset, 
                        0 0.1em 3px hsl(0, 0%, 60%), 
                        0 0.3em 1px hsl(0, 0%, 45%), 
                        0 0.5em 5px rgba(0, 0, 0, 0.2);
        opacity:0.8 ;
} 


button:hover , .bouton:hover  {
    opacity: 1.0;
}

button:disabled , button:disabled:hover {
    opacity:0.1;
}

.telecharge {
    display:flex !important;
    align-items: center; 
    gap: 10px; 
    width: fit-content !important;
    height: fit-content !important;
}
/*    background-color: #EEE;
    color: #880;*/

.fraction , .noyau {
	display: inline-block;
	position: relative;
	vertical-align: middle; 
	letter-spacing: 0.01em;
	text-align: center;
	}
.fraction .num , fraction .denom , .noyau > * { 
	display: block; 
	padding: 0.2em; 
	}
.fraction .denom {border-top: thin solid black;}

  fraction  {
	display: inline-block;
	position: relative;
	vertical-align: middle; 
	letter-spacing: 0.01em;
	text-align: center;
	}
fraction num , fraction denom  { 
	display: block; 
	padding: 0.2em; 
	}
fraction denom {border-top: thin solid black;}

.deplacable {
    touch-action: none; /* essentiel pour empêcher le scroll pendant le drag */
    border: thin solid;
    background-color: rgba(200,230,210,0.3);
    display: inline-block;
    padding: 6px;
    margin: 1px;
    box-shadow: 8px 8px 12px #aaa;
    -moz-user-select: element;
    -webkit-user-drag: element;
    user-drag: element; 
}
.cadre {
    border: medium solid;
    background-color: rgba(200,230,210,0.1);

    padding: 6px;
    margin: 6px;
    text-align: center;
}

.cadre input, .petit input {
    width:40px;
}





/* pour mots croisés */
.fond_sombre_mots_croises {
    background-color:#444;
    display:inline-block;
    position: absolute;
    left: 18.5px;
    top: 22px;
}
.fond_sombre_mots_croises ~ span {
   /*  background-color:#FFF; */
}

.lettre {
    font-family: 'verdana';
    font-size:14px;
}



.un_car {
    width: 15px;
    height: 17px;
    font-family: monospace;
    text-transform: uppercase;
    border: none;
    outline: none;    
}
.un_car[type="text"]:invalid {
    background-color: rgba(220,240,160,0.8);
    color: white;
}







.grand input {
    width:300px;
}
.t_grand input {
    width:680px;
}

.saisie_graphe > input {
    pointer-events: none;
    background-color: #eee;
    color: #555;    
    width:780px;
}

.cadre_ {
    border: medium solid;
    border-radius: 4px;
    background-color: rgba(200,230,210,0.1);

    padding: 6px;
    margin: 6px;
    text-align: center;
    
    display: inline-block;

}

.moyen input {
    width:100px;
}



.nombre {
    font-family: monospace;
    font-size:16px;
}



.definition {
    color:#822;
    background-color: rgba(200,50,50,0.1);
    font-style: italic;
    font-weight: bold;
}


table {
    text-align: center;
    border-collapse: collapse;
}
th , td {
    border: medium solid #77A;
    color : #77A;
    padding: 4px;
}


em {
    font-weight: bold;
    color:#844;
    background-color: rgba(255,240,0,0.2);
}




.citation {
    font-family: 'Calligraffitti';
    font-size: larger;
}


.sel, .sel * {
        -moz-user-select: -moz-text !important;
        -khtml-user-select:text !important;
         -webkit-user-select: text !important; 
        -ms-user-select: text !important;
        user-select: text !important;
}

.copiable {
        -moz-user-select: -moz-text !important;
        -khtml-user-select:text !important;
         -webkit-user-select: text !important; 
        -ms-user-select: text !important;
        user-select: text !important;
        background-color: rgba(255,255,0,0.5);
        cursor: pointer;
        display:inline-block;
        max-width:200px;
        max-height:60px;
        overflow:hidden;
        border:outset;
        padding: 4px;
        border-radius: 6px;
}
.copie {
    background-color: rgba(0,255,0,0.3);
}


.exclamation {
    font-family: "Comic sans Ms";
    font-size: 20px;
    font-weight: bold;
    color:#F84;
}

.texte_encadre {
    font-family: verdana;
    border:solid rgba(200,160,80,0.4);
    border-radius:4px;
    background-color: rgba(200,160,80,0.07);
    padding: 8px;
    color: rgba(200,160,80,1.0);
    font-size: 12px;
}

.source {
    font-size:smaller;
    color:#AAC;
}


/* pour SVG */
fleche path {
	stroke:#F8F;
	fill:none;
	marker-end:url(#endmarker);
}

#cercle {
 	stroke:#F8F;
	fill:none;
	stroke-width:3px;        
}

#endmarker{
	fill:#F8F;
}



#path2{
	stroke-width:3px;
}

#fleche,#entoure {
    position:absolute;
  /*  background-color: yellow; */
}


#dessins_SVG {
    opacity: 0.7;
}








    #boite_dialogue_confirmation {
        align-items: center;
        flex-direction: row;
        position:absolute;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        background:rgba(40, 0, 0, 0.6) ;
        z-index: 1000;
        display:none;
        text-align: center;
 
        height: 100%;
        color:#FFF;
        font-size: 14px;
        transition: background 2s;
    }
    #boite_dialogue_confirmation *{
        margin: auto;
    }
    
    

    .numero_ligne {
        display: inline-block;
        width:30px;
        padding: 4px;
        margin-right: 20px;
        background-color: #CCC;
        text-align: right;
        color:rgb(255,255,240);
    }
    
    .code {
        display:inline-block;
        background-color: rgba(255,255,240,0.6);
        color:#A0A;
        width:320px;
    }
    .code > input {
        width: 60px;
    }
    
    code {
        font-family: monospace;
        background-color: rgba(200,200,240,0.6);
        border: solid rgba(100,100,140,0.6) 1px;
        border-radius:3px;
        padding: 2px;
        color:#A0A;        
    }
    
    
    /*------------------------------- polices ---------------*/
    

    @font-face {
        font-family: digital;
        src: url('/p/digital.ttf');
    }

    
    .octet {
        display: inline-block;
        margin-left:100px;
        font-family: courier;
        font-size: 14px;
        letter-spacing: 0.2em;
        width:6.5rem;
        background-color: rgba(220,255,50,0.4);
        color:#068;
        padding: 4px;
        border: inset;
    }
    .octet input {
        width:88px;
        font-family: courier;
        font-size: 14px;
        letter-spacing: 0.2em;            
        }
            
pre {
    tab-size: 4;
    background-color: rgba(255,255,240,0.4);
    color: #046;
    padding: 6px;
    font-family: monospace;
    border: #046 1px solid;
    border-radius: 3px;
    display:inline-block;
}


/* ------------------------- pour explorateur de fichiers : -------------------------------------------------- */
    .cadre_explo {
        border:solid 1px #000;
        width: fit-content;
        padding: 12px;
        line-height: 16px;
        background-color: white;
    }
    .cadre_explo * {
        overflow: hidden;
        margin-left: 10px;
    }    
    .f_nom {
        display: inline-block;
        font-family: arial;
        font-size: 10px;
        text-align: left;
        width: 200px;
        text-decoration: none;
        color: black;
        
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .f_date {
        display: inline-block;
        font-family: arial;
        font-size: 10px;        
        text-align: left;
        width: 90px;
    } 
    .f_type {
        display: inline-block;
        font-family: arial;
        font-size: 10px;        
        text-align: left;
        width: 130px;
        
        text-overflow: ellipsis;
        white-space: nowrap;
    
    } 
    .f_taille {
        display: inline-block;
        font-family: arial;
        font-size: 10px;        
        text-align: right;
        width: 50px;
    } 

    textarea {
        height:200px; 
    }
    
    .linux {
        background-color: black;
        color:#F0F0F0;
        font-family: monospace;
        display: inline-block;
        padding: 3px;
    }
    
    
@font-face {
  font-family: 'sacramento';
  src: url("/p/Sacramento-Regular.ttf");
}
@font-face {
  font-family: 'agilo';
  src: url("/p/agilo-handwriting.ttf");
}
.auteur {
  font-family: 'sacramento';
  opacity:0.6;
}
.citation {
  font-family: 'agilo'; 
  opacity:0.6;
  text-align: left;

  font-size:12px;

}
#boite_dialogue_confirmation .citation {
  margin:40px;
}
#boite_dialogue_confirmation .citation p {
  margin-top:20px;
}



.numero {
    font-family:verdana;
    font-size:12px; 
    color : #999;
    font-weight: bold;
    width:20px;
    text-align:center;
}

.fini {
    width: 600px;
    text-align:center;
    background-color: white;
    padding: 30px;
    border-radius: 20px;
    margin: auto;
    margin-top: 30px;
}

#calculatrice, #calculatrice3D {
    border: none; 
    display:block;
    position: relative;
    z-index: 100;    
}


/* ------------------ pour afficher toutes les questions ------------------- */
    .comme_input {
        border: solid 1px;
        display: inline-block;
        width: 200px;
    }
    
    .comme_input_un_car {
        position: relative;
        top: 2px;
        width: 19px;
        height: 19px;
        font-family: monospace;        
        border: solid 1px;
        display: inline-block;
        text-align: center;
        background-color: #FE4;
    }    
    
    .comme_textarea {
        border: solid 2px;
        display: inline-block;
        width: 300px;
        height: 160px;
        white-space: pre-wrap;
    }