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

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

@font-face {
    font-family: 'Playfair Display';
    src: url('/p/PlayfairDisplay-Regular.ttf');
}


html{
    height: 100%;
}

body {
    font-family: 'Comic Sans MS';
    font-size: 14px;
    background-position:center;
    width: 96%;
    height: 96%;
    counter-reset: questions reponses exercices;
}

p {
  text-indent: 2em;           /* Retrait de la première ligne */
}

p::first-letter {
  font-size: 160%;
}

a.lien-invisible {
  all: unset;       
  cursor: pointer;   
  display: contents;
}


    #corps {
        /* text-align:center; */
        /*width: 500px;*/
    }
    
    .conteneur {
        display: flex;
        align-items: center; 
        justify-content: space-evenly;
        width:100%;
        margin: 20px;
    }    
    .item {
        width:120px;
        height: 120px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center; 
        justify-content: space-evenly;
        text-decoration: none;
        font-size: 14px;
        color:#488;
    } 
    
  .item {  
           font-family: "arial" ;
           font-size: 10px;
           margin-left:10%;   color:grey; border:3px solid #505080;  padding:10px;
           width:75%; height:15%;
           border-radius:10px; 
       }
div[name="item"] {
    width:97%;
}     
    
    
 



            .avertissements {
                position:relative;
                opacity:0;
                cursor:pointer;
                pointer-events: none;
            }

            .avertissements.actif {
                opacity:1;
                pointer-events: auto;
            }            
            
            
            .avertissements img {
                margin: 3px;
            } 
            #avertissement_perte_connexion, #avertissement_perte_connexion_, #avertissement_connexion_OK, #avertissement_connexion {
                cursor:pointer;
                height:32px;
            }




            #loupe_recherche {
              /*  margin-left:20px; */
                border:none;
                box-shadow: none;
                width:35px;
            }
            

            #message_avertissement {
                margin-right: 16px;
            }
            #prenom_nom {
                font-family: 'script' ;
                font-size:18px;
                color:#907060 ;
                margin: 4px;
            }
            #qualite_connexion_internet {
                display:flex;
                align-items: center;
                justify-content: space-evenly; 
                width: 80px;
            }
            


.h1,.h3,.h4,.h5, h1,h2,h3,h4,h5 {
    color:#844 ;
    text-shadow: 3px 3px 5px #844 ;
    font-family: "Trebuchet MS",verdana ; 
    font-weight: 400;
    font-size: 22px;
    text-decoration:none;
    margin-top: 30px;
    }
    
h1 {
    display: inline-block;
    margin-left: 40px;
    letter-spacing: 1px;
    font-family: verdana;
    margin-top: 0px;
    font-size: 24px;
    min-width: 300px;
}  

h2 {
font-size: 18px;
line-height:1.1em;
}

h3,.h3 {
font-size: 14px;
}

.h4 , h4 {
    text-shadow: 2px 2px 4px #804040 ;
    font-family: "Trebuchet MS" ; 
    font-weight: 400;
    font-size: 12px;
    text-decoration: underline ;
    } 
    
.h5 , h5 {
    text-shadow: 1px 1px 2px #804040 ;
    font-family: "Trebuchet MS" ; 
    font-weight: 300;
    font-size: 11px;
    text-decoration: underline ;
    }


















strong {
    color: rgb(200, 10, 4); 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); 
    background-color: rgba(200, 10, 4, 0.1);
    padding: 4px;
    border-radius: 6px;
    margin: 4px;
    font-family: Verdana;
  }
  
  
  
.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: 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;
        
        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);
        
         
     /*   text-shadow: 1px 1px 0px #F0F0F0 ;  */
        opacity:0.8 ;
}  


.bouton:hover , .bouton:active , p:hover , p:active {opacity:1.0 ;}

bouton { font-size: 12px; font-family:"verdana"; }  
  


.bouton_, button {background-color: #DDD;}
.bouton_ {
    width: 80px;
    height: 80px;
    text-align: center;
    display: inline-flex;
    flex-direction: column;
    align-items: center; 
    justify-content: space-evenly;
    font-family: arial;
    font-size: 11px;
    color:#488;
    text-decoration:none;    
    position:relative;
    padding:2px;

    border-radius: 5px;
    box-shadow:  0px 5px 0px 0px rgba(210,200,200,0.6), 1px 10px 5px #999;
    cursor:pointer;

    margin:2px;
    border:none;
    opacity:0.8;
}

.bouton_ img {
    max-width:80px;
    max-height:46px;
}
.bouton_ object {
    max-width:80px;
    max-height:46px;
}

.bouton_:active {
        top:3px;
        box-shadow:  0px 2px 0px 0px  rgba(210,200,200,0.6), 1px 5px 3px #999;    
}
.bouton_:hover {
      opacity:1; 
}

.t60 {
    width: 60px;
    height: 60px;
}
.t60 img {
    max-width: 60px;
}


/* ------------ cahier de textes ------------ */ 
.item_ {
    display:flex;
    align-items: center;
    padding: 4px;
    border-radius: 4px;
    margin:4px;
}
.item_ > span > div {
    white-space: pre-line;
}
.item_ > span {
    line-height: 2.3em;
}


.cdt_date {
    font-family: DejaVuSans;
    font-size: 12px;
    display: inline-block;
    width: 160px;
    font-weight: bold;
}

.encours {
    background-color: rgba(240,240,100,0.2);
}    
.deja {
    background-color: rgba(240,100,100,0.2);
}
.pasencore {
    background-color: rgba(100,240,100,0.2);
}

.travail , .cours , .TP , .controle {
    line-height: 2.2em;
}
.cours {
    text-align: left;
}
    
div.item_ a, span.travail a, .cours a, .TP a, .controle a, .exercices a {
    display:inline-block;
    position: relative; /* nécessaire pour div.item_ a::before */
    /*padding: 3px;*/
    padding-left: 2px;
    padding-right: 24px; /* nécessaire pour div.item_ a::before */ 
    margin: 2px;
    border-radius: 4px;
    color:#04D ;
    background-color: rgba(0,40,200,0.2);    

    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; 
    font-family:'LucidaSansRegular';
    font-size: 12px;
    cursor:pointer;

    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);    
}

div.item_ a::after, span.travail a::after, .cours a::after, .TP a::after, .controle a::after,  .exercices a::after {
    content: ''; 
    background: url('/i/hyperlien.svg') no-repeat;
    background-size: 18px;
    background-position-y: 2px;
    display: inline-block;
    position: absolute; 
    right: -1px; 
    top: 0;
    width: 20px; 
    height: 20px; 
    margin-left: 2px; 
}
.travail, .cours, .TP, .controle, .exercices {
    white-space:pre-wrap;
    position:relative;
}

.cours {
        font-family:"comic sans ms";
        font-weight: 200;
        font-size: 12px;
        color:#201010 ;
}
.exercices {
    padding: 6px;
        font-family:"tahoma";
        font-weight: 300;
        font-size: 12px;
        color:#108010 ;
    border:solid 2px #BA2;
    color: #BA2;
    background-color: rgba(220,200,40,0.2);        
}

.TP {
    padding: 6px;
    font-family:"verdana";
    font-weight: 600;
    font-size: 12px;
    border:solid 2px #182;
    color: #182;
    background-color: rgba(10,200,40,0.2);
}

.controle {
    padding: 6px;
    font-family:"arial";
    font-weight: 900;
    font-size: 12px;
    color:#A11;
    border:solid 2px #A11;
    background-color: rgba(200,30,30,0.2);
}

.agenda {
    padding: 6px;
    font-family:"cursive";
    font-size: 14px;
    color:#A08;
    border:solid 2px #A08;
    border-radius:12px;
    background-color: rgba(200,0,180,0.2);
    height:10px;
    overflow: hidden;
}
.agenda:hover {
    height: fit-content;
}
/* ------------------------------------ */

        

    
footer{
    width: 100%;
    height:20px;     
    display : table-row;
    background-color: rgba(100,100,100,0.1);
    }



.fond { color:#804040 ;
        background-image:url(illus_v.jpg) ;
        }

.orangé {
        color: hsl(45, 100%, 30%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(45, 100%, 40%), 
                          0px 0.3em 1px hsl(45, 100%, 30%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(45, 100%, 50%); 
        text-shadow: 0.1em 0.1em 0 hsl(45, 100%, 65%) ;
}
.orangé:hover {
}.orange {
        color: hsl(39, 100%, 30%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(39, 100%, 40%), 
                          0px 0.3em 1px hsl(39, 100%, 30%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(39, 100%, 50%); 
        text-shadow: 0.1em 0.1em 0 hsl(39, 100%, 65%) ;
}
.orange:hover {
}.gris {
        color: hsl(39, 0%, 30%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(39, 0%, 40%), 
                          0px 0.3em 1px hsl(39, 0%, 30%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(39, 0%, 50%); 
        text-shadow: 0.1em 0.1em 0 hsl(39, 0%, 65%) ;
}
.gris:hover {
}.blue {
        color: hsl(208, 50%, 40%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(208,50%,55%), 
                          0px 0.3em 1px hsl(208, 50%, 40%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(208, 100%, 75%); 
        text-shadow: 0.1em 0.1em 0 hsl(208, 100%, 83%) ;
}
.blue:hover {
}.green {
        color: hsl(88, 70%, 30%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(88,70%,40%), 
                          0px 0.3em 1px hsl(88, 70%, 30%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(88, 70%, 60%); 
        text-shadow: 0.1em 0.1em 0 hsl(88, 70%, 75%) ;
}
.green:hover {
}.menthe {
        color: hsl(150, 70%, 30%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(150,70%,40%), 
                          0px 0.3em 1px hsl(150, 70%, 30%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(150, 70%, 60%); 
        text-shadow: 0.1em 0.1em 0 hsl(150, 70%, 75%) ;
}
.menthe:hover {
}.cyan {
        color: hsl(208, 50%, 40%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(208,50%,55%), 
                          0px 0.3em 1px hsl(208, 50%, 40%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(208, 100%, 75%); 
        text-shadow: 0.1em 0.1em 0 hsl(208, 100%, 83%) ;
}
.cyan:hover {
}.pink {
        color: hsl(340, 90%, 30%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(340,70%,50%), 
                          0px 0.3em 1px hsl(340, 90%, 30%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(340, 100%, 75%); 
        text-shadow: 0.1em 0.1em 0 hsl(340, 90%, 83%) ;
}
.pink:hover {
}.saumon {
        color: hsl(10, 90%, 30%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(10,70%,50%), 
                          0px 0.3em 1px hsl(10, 90%, 30%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(10, 100%, 75%); 
        text-shadow: 0.1em 0.1em 0 hsl(10, 100%, 83%) ;
}
.saumon:hover {
}.oeuf {
        color: hsl(50, 90%, 30%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(50,70%,50%), 
                          0px 0.3em 1px hsl(50, 90%, 30%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(50, 100%, 75%); 
        text-shadow: 0.1em 0.1em 0 hsl(50, 100%, 83%) ;
}
.oeuf:hover {
}.bleu {
        color: hsl(240, 90%, 95%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(240,70%,50%), 
                          0px 0.3em 1px hsl(240, 90%, 30%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(240, 100%, 75%); 
        text-shadow: 0.1em 0.1em 0 hsl(240, 100%, 90%) ;
}
.bleu:hover {
}.citron {
        color: hsl(70, 90%, 30%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(70,70%,50%), 
                          0px 0.3em 1px hsl(70, 90%, 30%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(70, 100%, 75%); 
        text-shadow: 0.1em 0.1em 0 hsl(70, 100%, 83%) ;
}
.citron:hover {
}.lime   {
        color: hsl(65, 90%, 30%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(65,70%,50%), 
                          0px 0.3em 1px hsl(65, 90%, 30%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(65, 100%, 75%); 
        text-shadow: 0.1em 0.1em 0 hsl(65, 100%, 83%) ;
}
.lime  :hover {
}.mayo {
        color: hsl(60, 90%, 35%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(60,70%,50%), 
                          0px 0.3em 1px hsl(60, 90%, 30%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(60, 100%, 75%); 
        text-shadow: 0.1em 0.1em 0 hsl(60, 100%, 83%) ;
}
.mayo:hover {
}.violet {
        color: hsl(300, 20%, 30%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(300,20%,50%), 
                          0px 0.3em 1px hsl(300, 20%, 30%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(300, 40%, 75%); 
        text-shadow: 0.1em 0.1em 0 hsl(300, 40%, 83%) ;
}
.violet:hover {
}.mauve {
        color: hsl(270, 20%, 30%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(270,20%,50%), 
                          0px 0.3em 1px hsl(270, 20%, 30%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(270, 40%, 75%); 
        text-shadow: 0.1em 0.1em 0 hsl(270, 40%, 83%) ;
}
.mauve:hover {
}.emerod {
        color: hsl(120, 70%, 30%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(120,70%,40%), 
                          0px 0.3em 1px hsl(120, 70%, 30%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(120, 70%, 60%); 
        text-shadow: 0.1em 0.1em 0 hsl(150, 70%, 75%) ;
}
.emerod:hover {
}.sang {
        color: hsl(0, 90%, 30%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(0,70%,50%), 
                          0px 0.3em 1px hsl(0, 90%, 30%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(0, 100%, 75%); 
        text-shadow: 0.1em 0.1em 0 hsl(0, 100%, 83%) ;
}
.sang:hover {
}.cyan_p {
        color: hsl(180, 80%, 25%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(180,30%,70%), 
                          0px 0.3em 1px hsl(180, 30%, 20%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(180, 60%, 80%); 
        text-shadow: 0.1em 0.1em 0 hsl(180, 60%, 90%) ;
}
.cyan_p:hover {
}.vert_p {
        color: hsl(100, 80%, 25%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(100,30%,70%), 
                          0px 0.3em 1px hsl(100, 30%, 20%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(100, 60%, 80%); 
        text-shadow: 0.1em 0.1em 0 hsl(100, 60%, 90%) ;
}
.vert_p:hover {
}.bleu_p {
        color: hsl(230, 80%, 25%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(230,30%,70%), 
                          0px 0.3em 1px hsl(230, 30%, 20%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(230, 60%, 80%); 
        text-shadow: 0.1em 0.1em 0 hsl(230, 60%, 90%) ;
}
.bleu_p:hover {
}.rouge_p {
        color: hsl(20, 80%, 25%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(20,30%,70%), 
                          0px 0.3em 1px hsl(20, 30%, 20%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(20, 60%, 80%); 
        text-shadow: 0.1em 0.1em 0 hsl(20, 60%, 90%) ;
}
.rouge_p:hover {
}.jaune_p {
        color: hsl(55, 80%, 25%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(55,30%,70%), 
                          0px 0.3em 1px hsl(55, 30%, 20%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(55, 60%, 80%); 
        text-shadow: 0.1em 0.1em 0 hsl(55, 60%, 90%) ;
}
.jaune_p:hover {
}.rose_p {
        color: hsl(350, 80%, 25%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(350,30%,70%), 
                          0px 0.3em 1px hsl(350, 30%, 20%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(350, 60%, 80%); 
        text-shadow: 0.1em 0.1em 0 hsl(350, 60%, 90%) ;
}
.rose_p:hover {
}.bleu_c {
        color: hsl(230, 80%, 50%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(230,30%,80%), 
                          0px 0.3em 1px hsl(230, 30%, 40%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(230, 60%, 90%); 
        text-shadow: 0.1em 0.1em 0 hsl(230, 60%, 95%) ;
}
.bleu_c:hover {
}.oburn {
        color: hsl(0, 10%, 90%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(0, 20%, 0%), 
                          0px 0.3em 1px hsl(0, 20%, 0%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(0, 20%, 50%); 
        text-shadow: 0.1em 0.1em 0 hsl(0, 20%, 20%) ;
}
.oburn:hover {
}.fonce_b {
        color: hsl(200, 20%, 80%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(200, 20%, 50%), 
                          0px 0.3em 1px hsl(200, 20%, 20%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(200, 20%, 50%); 
        text-shadow: 0.1em 0.1em 0 hsl(200, 20%, 65%) ;
}
.fonce_b:hover {
}.fonce_v {
        color: hsl(100, 20%, 80%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(100, 20%, 50%), 
                          0px 0.3em 1px hsl(100, 20%, 20%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(100, 20%, 50%); 
        text-shadow: 0.1em 0.1em 0 hsl(100, 20%, 65%) ;
}
.fonce_v:hover {
}.fonce_j {
        color: hsl(60, 20%, 80%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(60, 20%, 50%), 
                          0px 0.3em 1px hsl(60, 20%, 20%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(60, 20%, 50%); 
        text-shadow: 0.1em 0.1em 0 hsl(60, 20%, 65%) ;
}
.fonce_j:hover {
}.fonce_o {
        color: hsl(40, 20%, 80%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(40, 20%, 50%), 
                          0px 0.3em 1px hsl(40, 20%, 20%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(40, 20%, 50%); 
        text-shadow: 0.1em 0.1em 0 hsl(40, 20%, 65%) ;
}
.fonce_o:hover {
}.vert {
        color: hsl(76, 70%, 30%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(76,70%,40%), 
                          0px 0.3em 1px hsl(76, 70%, 30%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(76, 70%, 60%); 
        text-shadow: 0.1em 0.1em 0 hsl(76, 70%, 75%) ;
}
.vert:hover {
}.rouge {
        color: hsl(0, 70%, 95%) !important ;  
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(0,70%,40%), 
                          0px 0.3em 1px hsl(0, 70%, 30%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        background-color: hsl(0, 70%, 60%); 
        text-shadow: 0.1em 0.1em 0 hsl(0, 70%, 75%) ;
}
.rouge:hover {
}



@font-face{
             font-family : 'coluna';
                  src : url('/p/Coluna.otf');
        }

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

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

@font-face{
             font-family : 'script';
                  src : url('/p/SCRIPTBL.TTF');
        }

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

@font-face{
             font-family : 'AHundredMiles';
                  src : url('/p/AHundredMiles.ttf');
        }
@font-face{
             font-family : 'Calligraffitti';
                  src : url('/p/Calligraffitti.ttf')url('/p/Calligraffitti.woff');
        }
@font-face{
             font-family : 'abduction2002';
                  src : url('/p/abduction2002.ttf');
        }
@font-face{
             font-family : 'paola';
                  src : url('/p/paola.ttf');
        }
@font-face{
             font-family : 'Corben';
                  src : url('/p/Corben.woff');
        }
@font-face{
             font-family : 'LucidaSansRegular';
                  src : url('/p/LucidaSansRegular.ttf');
        }
@font-face{
             font-family : 'digital';
                  src : url('/p/digital.ttf');
        }
@font-face{
             font-family : 'Orbitron';
                  src : url('/p/Orbitron.ttf');
        } 
        
@font-face {
  font-family: 'Cursive standard';
  src: url("/p/Cursive standard.ttf");
} 
       
/* --------------- */       
       
@font-face {
  font-family: 'OneStarryNight';
  src: url("/p/OneStarryNight.ttf");
}



@font-face{
    font-family : 'cursive';  
    src : url('/p/Cursive standard.ttf') ; 
}
        
@font-face{
    font-family : 'Sugo_Pro';  
    src : url('/p/Sugo_Pro_Classic_Regular.ttf') ; 
} 
        
        
@font-face{
    font-family : 'HappyChristmas';  
    src : url('/p/PWHappyChristmas.ttf') ; 
}  
/*        
@font-face {
  font-family: '/p/Cursive standard';
  src: url("/p/Cursive standard.ttf");
}
*/
cite {
    color:#2AC ;
    font-family: 'Corben';
    font-size: 12px;
}

blockquote {
  margin: 4px;
  font-family: 'cursive';
  font-size: 18px;
  line-height: 1.2em;
  color:#286 ;   
}

.papier {
    background-image: url("/i/papier.JPG");
    margin: auto;
    text-align: center;
    width: 500px;
    opacity: 0.8;
    border-radius: 15px 5px;
    padding: 10px; 
    display:inline-block;
}

blockquote p {
  padding: 15px;
  background: #DED;
  border-radius: 5px;
}

blockquote::before {
  content: '\201C  ';
}

blockquote::after {
  content: ' \201D';
} 



        
.joyeux_noel {
            font-family: "HappyChristmas";
            font-size: 24px;
            color:#C00;
        }        

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

#formulaire_connexion {
    position: relative;
    top: 20px;
    width: 100%;
    max-width: 100%;
    z-index:100;
}       
        
        
#formulaire_connexion iframe {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}


        
#editeur {
    display: inline-block;
    width:800px;
    /*height: 200px;*/
    /*background-color: rgba(200,250,200,0.3);*/
    padding: 4px;
}



#aide_travaux #aide__ {
    background: linear-gradient(to bottom, rgba(180,140,80,0.9), rgba(120,80,20,0.9));
}
    
#aide__ {
    display:inline-block;
    opacity: 0; 
    z-index: -1;
    color:white;
    background: linear-gradient(to bottom, rgba(80,140,180,0.9), rgba(20,80,120,0.9));
    left: 50%;
    transform: translateX(-50%);
    font-family: Verdana;
    width:680px;
    border-radius:20px;
    padding: 16px;
    transition: opacity 0.6s;
    width:800px;
    text-align:left;
    position:absolute;
}



#aide__ span{
    display: inline-block;
    column-count: 2;
    column-gap: 20px;
}

#aide__ span ul {
  padding: 0;
  margin: 0;
}

#aide__ span li {
  padding: 0;
  margin: 0;
  margin-bottom: 10px;
} 

#aide__ h1, #aide__ h2, #aide__ h3{
    color:white;
}

#aide__ h1{
    font-family: 'impact';
}
    
    
#aide_i {
        cursor:help;
        /*margin-left: 20px;*/
        
    } 


.surligner {
         background: rgba(40, 200, 150, 0.2); 
         padding: 2px;
         border-radius: 4px;
         margin: 2px;
        }        

.texte_image {
        display: inline-flex;
        align-items: center;
        font-family: "courier" ;
        font-size: 12px; 
        color: #800;
        background-color:rgba(255,0,255, 0.1);
        border:solid 1px rgba(255,0,255, 0.7);
        border-radius: 3px;
        padding: 3px;
}


#a_propos {
    display:none ;  
    position:absolute ; 
    left:-6px; 
    top:-6px; 
    background-image: url('/Thumser.jpg') ; 
    background-repeat: no-repeat ; 
    z-index:2; 
    opacity:0.9;  
    min-height: 225px;            
}

#bouton_demande_connexion {
    color:#907060 ;
    text-decoration: none ;
    background: none ;
    text-shadow:none ;
    background-repeat:no-repeat ; 
    background-position:right ;    
}




.message_temporaire {
    background-color: rgba(220,255,150,0.9);
    color: rgba(10,200,0,0.9);
    font-size:12px;
    padding: 10px;
}



.colonnes {
    display: table; 
}
 
.colonne {
    display: table-cell; 
    vertical-align: middle;
    padding: 8px;
}



form {margin:0px; padding:0px; }


.en_ligne { display: inline-block;  }
  



.date {
        font-family:arial, sans-serif; 
        font-size:12px; 
        padding:8px;
        vertical-align:top;
        color:#101030 ;
}

.chrono {
        font-family:arial, sans-serif; 
        font-size:18px; 
        padding:8px;
        vertical-align:middle;
        color:#101030 ;
}
/*------------- pour horloge ------------*/
    .afficheur_heure_min {
        font-family: "digital", serif;
        font-size: 0px;
        color:rgba(140,120,120,0.6);
    }

    .afficheur_heure_min span {
        display: inline-block;
        width:16px;
        text-align: right;
        font-size: 36px;
        margin:1px;
    }
.horloge {
        font-family:Arial Narrow; 
        font-size:20px; 
        font-weight: normal;
        color:rgba(160,170,200,0.8) ;
}

.digital {
    font-family: "digital", serif;
    font-size: 14px;
}

.pas_de_reseau {
    
    color:rgba(230,100,100,0.8) ;
}



.lycee {
        font-family:"tahoma";
        font-weight: 600;
        font-size: 11px;
        color:#48D ;
        text-decoration: none ;
}

.lycee:hover {
        color:#13A ;
}




mark {
        font-family:"comic sans ms";
        font-weight: 200;
        font-size: 12px;
        color:#201010 ;
        background: rgba(255, 240, 100, 0.4);
}



.normal {
        background:transparent ;
        border:0px ;
        cursor: pointer ;
}

.encadre {            
	border: 1px solid #FEE; 
	background-color:rgba(220,240,240, 0.5);
	padding:8px;
	font-size:80%; 
	max-width:90%; 
	margin:16px 32px 16px 32px;
	font-family: "Bookman Old Style", "Cambria", Arial, Verdana, Geneva;
	color:#044;
	-moz-box-shadow: 4px 4px 10px #888;  
	-webkit-box-shadow: 4px 4px 10px #888;  
	box-shadow:4px 4px 6px #888;
	word-wrap:break-word;
                  line-height: 1.8em;
        }


            
.geant{ 
            font-size:60px ;
            font-family:Georgia, "Times New Roman", Times, serif;
            font-weight: normal ;            
            color: rgba(220, 80, 0, 0.4);
            }

pre_ {

}
            
pre__ {            
	border: 1px solid #FEE; 
	background-color:rgba(255,250,250, 0.9);
	padding:8px;
	font-size:100%; 
	max-width:80%; 
	margin:16px 32px 16px 32px;
	font-family: "Bookman Old Style", "Cambria", Arial, Verdana, Geneva;
	color:black;
	-moz-box-shadow: 4px 4px 10px #888;  
	-webkit-box-shadow: 4px 4px 10px #888;  
	box-shadow:4px 4px 6px #888;
	white-space:pre; 
	white-space:pre-wrap; 
	word-wrap:break-word;
        }
       
pre {
        text-align: left;
        border: 1px solid #FEE; 
        background-color:rgba(255,250,250, 0.9);
        padding:2px;
        margin:4px;
        max-width:80%; 
        -moz-box-shadow: 4px 4px 10px #888;  
        -webkit-box-shadow: 4px 4px 10px #888;  
        box-shadow:4px 4px 6px #888;
        white-space:pre; 
        white-space:pre-wrap; 
        word-wrap:break-word;
        display: inline-block;
        font-family: "courier" ;
        font-weight: normal;
        font-size:100%;
        color: #800;
    }
       

object { border: solid rgba(100, 100, 100, 0.2); border-radius:8px; opacity:0.8 ; box-shadow:4px 4px 6px #888; }        
        
        
/*              pour balise <code>                   */        
code {
        text-align: left;
        border: 1px solid #FEE; 
        background-color:rgba(255,250,250, 0.9);
        padding:2px;
        margin:4px;
        max-width:80%; 
        -moz-box-shadow: 4px 4px 10px #888;  
        -webkit-box-shadow: 4px 4px 10px #888;  
        box-shadow:4px 4px 6px #888;
        white-space:pre; 
        white-space:pre-wrap; 
        word-wrap:break-word;
        display: inline-block;
        font-family: monospace;
        /*font-family: "Bookman Old Style", "Cambria", Arial, Verdana, Geneva;*/
        font-weight: normal;
        font-size:100%;
        color:#000 ;
}
/*
code span {
        color:#44F ;
        font-weight: bolder ; 
}
*/

bleu {
    color:#44F ;
    font-weight: bolder ;
}

vert { 
    color:#0B0 ;
    font-weight: bolder ;  
}
orange { 
    color:#D90 ;
    font-weight: bolder ;      
}

noir {
    color:#000 ;
    font-weight: normal ;
}

magenta { 
    color:#D0D ;
    font-weight: bolder ;      
}

gris { 
    color:#CCC ;
    font-weight: bolder ;
}
grisbleu { 
    color:#BBE ;
}

/*                                      */








information , .information{ 
            font-size:12px ;
            font-family:"courier";
                       
            color:#3AE;
            background: rgba(250, 120, 0, 0.2);
            }





souligne {
            text-decoration: underline ;
}





.noms {
        font-family:"arial";
        font-weight: 400;
        font-size: 16px;
        color:#A64 ;
}

.fonce { background-color:rgba(100,100,160, 0.2); }
.clair {  }

/*  
li  {margin-top:0.4em ; margin-bottom:0.4em ; }
    ul,li {
        font-size: 10px;
    }*/

/* div:not(.calendar) */

ol > li, ul > li {
  margin: 1.5em 0;
}

.calendar ul > li {
  margin: 0 0;
}


    

titre {
    color:#804040 ;
    text-shadow: 3px 3px 5px #804040 ;
    font-family: "Trebuchet MS" ; 
    font-weight: 600;
    font-size: 14px;
    text-decoration:none;
    line-height:2em;
    }    

.titre3 {
    color:#804040 ;
    text-shadow: 3px 3px 5px #804040 ;
    font-family: "Trebuchet MS" ; 
    font-weight: 600;
    font-size: 12px;
    text-decoration:none;
    margin-left:300px;
    line-height:2em;
    }


.prenom_nom {  
            font-family: 'LucidaSansRegular' ; 
            color:#907060 ;
            text-decoration: none ;
            background: none ;
            font-size: 11px ;
            font-weight:500 ;
            padding: 3px;
           }
           
.prenom_nom:hover {
    border: solid 1px #976 ;
    padding: 2px;
    border-radius: 3px;
}
           
.serieux {  
            font-family: Arial ; 
            color:#907060 ;
            text-decoration: none ;
            background: none ;
            font-size: 10px ;
            font-weight:normal ;
            
           }
           

em, .em {  
            font-family: Arial ; 
            font-weight: 900;
            color:#29B;
            background-color:rgba(20,180,220,0.1);
           }  
           
.choix {  
            font-family: Arial ; 
            font-weight: 600;
            color:#409070;
            background-color:rgba(100,200,160, 0.2);
           }           
choix {  
            font-family: Arial ; 
            font-weight: 600;
            color:#409070;
            background-color:transparent;
           }
           
att {  
            font-family: verdana ; 
            font-size: 1.6em ;
            font-weight: bold;
            color:#F0A030
           }           
           
.epais {color:#A00000 ;
font-size: 24px ;
font-weight: 900;}


.fond_rouge, .fond_rouge * {background-color:rgba(250, 0, 0, 0.2);}

.non_lu {
    border:solid 2px red;
}
.message_prive {
    border:solid 2px #00F;
}
.message_prive_non_lu {
    border:solid 2px #F0F;
}

pre[class*="language-"] {
    font-size:10px !important;
}


.attention {
    color:#D00;
    background-color:rgba(250,80 , 0, 0.2);
    font-size: larger;
    font-family: arial;
    margin: 20px;
    padding: 10px;
    border:solid #D00 2px;
}


.paslu {
    outline:solid 3px #EF0;
}
.fond_orange {background-color: rgba(250, 100, 0, 0.2);}
.fond_vert {background-color:rgba(0,255, 0, 0.2);}

.fond_bleu, .fond_bleu * {background-color:rgba(0, 0, 255, 0.2);}

.clignotant , clignotant { 
    background-color: rgba(250, 0, 0, 0.2); 
    padding:3px;  color:#421 ; 
    text-decoration: none;  
    text-decoration: blink;
    font-family: arial;
    font-size: 9px;
    font-weight:normal;
}

 
.zzz {
        width: 200px;
        margin: 20px;
        padding: 20px;
        background: rgba(255, 215, 100, 0.8);
        }


.zone {
        width: 800px;
        margin: 20px;
        padding: 20px;
        background: rgba(255, 215, 100, 0.8);
        color: #420;
        font-size: 1.2em;  
        border-radius:8px;
        border-radius: 1em 5em / 7em 1em;
        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-adjust: none; 
        font-stretch: normal; 
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(0,0%,60%), 
                          0px 0.3em 1px hsl(0,0%,45%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        opacity:0.9 ;
        margin-left: 50px;
        }
 
 

.pp    {
        width: 800px;
        margin: 20px;
        padding: 20px;
        background: rgba(255, 215, 100, 0.8);
        color: #420;
        font-size: 1.2em;  
        border-radius:8px;
        border-radius: 1em 5em / 7em 1em;
        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-adjust: none; 
        font-stretch: normal; 
        box-shadow: inset 0px 0.3em 0.3em rgba(255,254,255,0.6), 
                    inset 0px -0.1em 0.3em rgba(0,0,0,0.15), 
                          0px 0.1em 3px hsl(0,0%,60%), 
                          0px 0.3em 1px hsl(0,0%,45%), 
                          0px 0.5em 5px rgba(0,0,0,0.2); 
        opacity:0.9 ;
  
} 




.illus_ {
        background-repeat: no-repeat ;
        margin-left: 50px;
        display: inline-block; 
}

.illus {
          width: 280px;
          height: 260px;
          margin-left: 10px;
          }


  



.petit_texte {font: bold 9px "arial", sans-serif;}
.erreur,erreur {
            /*font: 14px "coluna", sans-serif;*/
            font-family: 'impact';
            font-size: 12px;
            color: hsl(0, 80%, 40%) !important;
            background-color: rgba(255,100,100,0.6);
            padding: 3px 6px 3px 6px;
            border-radius: 3px;
}


reussi {font: bold 12px "arial", sans-serif; color: hsl(100, 80%, 40%) !important;
            background-color: rgba(255,255,0,0.2);
            padding: 4px;
}

auteur{     color:#804040 ;
            font-family:"verdana";
            font-size: 10px;
            font-weight: 600;}
    

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


body question {
    display: block;
    color: inherit;
    background: inherit;
    font-family: inherit;
}
    
    
    question,.reponse,reponse,.z_reponse,.entree {
                font-family:"comic sans ms";/*  apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol*/
                font-size: 14px;
                font-weight: 200;
    }
    
    question, reponse{   
                display:inline-block;
                min-width: 500px;
                padding: 3px;
                white-space:pre-wrap;
            }

            
    .question{   
                margin-top: 10px;
                color: #489; 
                font-family:"arial";
            }             
            
    .question::before {    /* le pseudo sélecteur ::before permet d'écrire avant la balise h4 */
            counter-increment: questions; /* pour chaque balise h4 on incrémente la valeur du compteur titre */
            content: "Question " counter(questions)". "; /* on affiche la valeur du compteur */
            color: #489; /* on peut bien sûr styliser à volonté */
            font-weight: bolder;
            } 
            
    .expediteur {
        font-size:8px;
        color:rgba(100,100,150,0.5);
    } 
            
    .exercice{   
                margin-top: 10px;
                color: #584; 
                font-family:"verdana" 
            }             
            
    .exercice::before {    /* le pseudo sélecteur ::before permet d'écrire avant la balise h4 */
            counter-increment: exercices; /* pour chaque balise h4 on incrémente la valeur du compteur titre */
            content: "Exercice " counter(exercices)". "; /* on affiche la valeur du compteur */
            color: #584; /* on peut bien sûr styliser à volonté */
            font-weight: bolder;
            }            
    
    .reponse,reponse{    
                color:#409;
                white-space:pre-wrap;
                }
                
    .z_reponse{    
                color:#D09040 ;
                background: rgba(240, 215, 100, 0.2);
                }                

    .entree{    
                color:#D09040 ;
                text-align:center;
                }
                
    .zone_texte{background: rgba(255, 215, 100, 0.3); color: rgba(155, 115, 10, 0.9); font-family: verdana ;}            




.rectangle {
	border-radius: 0.4em ; 
        padding:0.4em ;
}

.ellipse {
	border-radius: 5em / 2em; 
}

.diagonale {
border-radius: 7em 1em / 5em 1em;
padding-left: 1.2em;
padding-right: 1.2em;
}

.joli {
border-radius: 7em 7em 2em 2em / 2em 2em;
}

.fleche {
border-radius: 0em 7em 7em 0em / 0em 2em 2em 0em;
padding-right: 1.5em;
}

.fleche_ {
border-radius: 5em 0em 0em 5em / 3em 0em 0em 3em;
padding-right: 0.5em;
}

.fleche_2 {
border-radius: 0em 4em 4em 0em / 0em 3em 3em 0em;
padding-right: 1.5em;
}


.base_ {  /* renommé de base vers base_ à cause de LATEX */
border-radius: 7em 7em 0em 0em / 20em 20em 0em 0em;
padding-left: 1.5em;
padding-right: 1.5em;
}

.trapeze {
border-radius: 7em 7em 2em 2em / 6em 6em 2em 2em;
}

.bizarre {
border-radius: 7em 1em / 1em 5em;
}

.onglet {
	border-radius: 0em 0em 1em 1em / 0em 0em 1em 1em; 
}

.couteau {
	border-radius: 0.2em 0.5em 0.5em 8em / 0.2em 0.5em 0.5em 5em; 
        padding-left: 1.5em;
}

.trapeze_2 {
border-radius: 5em 5em 3em 3em / 6em 6em 2em 2em;
}



.police_lobster { font-family: "Lobster", serif; font-weight: normal; }

      

  

  
  
  
      
       
  .aspect {  
           font-family: "Times New Roman" ;
           font-size: 12px;
           background: rgba(100, 100, 200, 0.2);
           color:#505080; 
           border:1px solid #505080;  padding:3px;
           width:75%; height:15%;
           border-radius:4px; 
       }       
     
       
       
       
       
       
       
 .resultat {
         font-family: "Times New Roman" ;
         font-size: 20px;
         color:black;
         margin-left:6% ;
         vertical-align:middle ;
         }
     
 .perso {width:200px;}
 
 
 .code {
        font-family: monospace ;
        font-size: 12px; 
        color: #800000;
        margin-left:6% ;
        } 
 
 .arrondi {
        width: 450px;
        padding: 10px;
        background: #ccc;
        border-radius: 10px;
      }  
      
 .lien {
        display: inline-flex;
        align-items: center;
        font-family: "courier" ;
        font-size: 9px; 
        color: #00F;
        background-color:rgba(0,0,255, 0.1);
        border:solid 1px rgba(0,0,255, 0.7);
        border-radius: 3px;
        padding: 3px;
        }  
      
        
.bouton_lien {
    font-family:  Arial, 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', 'Android Emoji', sans-serif;
    font-size: 15px;
    background-color: #532;
    border-radius: 15px;
    display: inline-block;
    padding: 6px 12px;  
    transition: background .2s ease;
    color: white;
    text-decoration: none;
    margin: 20px;
    box-shadow: 6px 3px 3px #888;
}

 
.bouton_lien:hover {
    background: #B87;
}        
      
.animation:hover { color: red; background: yellow; }
      
      
form { display: inline-block; }

.input , input , textarea , select , option {
                color:#862 ;
                font-family:"comic sans ms";
                font-size: 14px;
                font-weight: 200;
                background: rgba(240, 215, 100, 0.2);
                display: inline-block;
}

input , select , option { text-align:center;}




h1::selection,h2::selection,h3::selection,h4::selection { background: rgba(255, 15, 100, 0.3); color:inherit; }
 ::selection { background: rgba(155, 215, 100, 0.3); color:inherit; } 
 ::-moz-selection { background: rgba(155, 215, 100, 0.3); color:inherit; }
input::selection , select::selection , option::selection , textarea::selection { background: rgba(155, 215, 250, 0.3); color:inherit; selection: rgba(255, 215, 250, 0.3); }

 
 
 
input[type=submit] , input[type=search] , input[type=file] {
        cursor:pointer;
        border:none;
	font: bold 9px "arial", sans-serif; 
        margin: 0.5em; 
        padding: 0.5em 0.6em 0.4em; 
        border-radius: 8px; 
        text-decoration: none; 
        display: inline-block; 
        position: relative; 
        font-size-adjust: none; 
        font-stretch: normal; 
        text-shadow:  0 1px 0 #888 ; 
}

.bordure {
         /*   border: solid rgba(100, 0, 0, 0.2);  */
         /*   padding: 6px;  */
            border-radius: 5px; 
            background-color: rgba(200, 220, 10, 0.2);
            box-shadow: 0px 0px 10px 3px rgba(200, 220, 10, 0.6) inset;
}





.zonz {margin-left:40px; overflow:auto; width:90%; height:60%;}


stat_date { color:#209050 ; font-weight:bold; }
stat_heure { color:#A0B010 ; font-weight:bold; }
stat_nom { color:#A06050 ; font-weight:bold; }
stat_lien { color:#2030A0 ; font-weight:bold; }
gras {font-weight:bold; }

date { font-size:smaller ;  color:#209050 ; font-weight:bold; }


nom_de_fichier{color:#208050 ; background-color: rgba(100, 0, 0, 0.1); padding:4px;}


.visible {display:block ;}
.invisible {display:none ;}
invisible { opacity : 0.0 ; }
.transparent { opacity : 0.0 ; border:none ; }

decouvrez:hover{background:green; } 

.discret , discret{font-size:smaller ; color:#90A0C0; }
.tres_discret{ text-decoration: none ; font-size:9px ; color:rgba(100,100,160, 0.4) }


changetexteA    { cursor:help;  visibility:visible ;  }
changetexteA:hover {  visibility:hidden ; font-size: 0px; }
changetexteA changetexteB  {    visibility:hidden ;  }
changetexteA:hover changetexteB {     visibility:visible ; font-size: 12px;}


changetexteC   {    display:none ; }
changetexteC:hover  {     display:block ; font-size: 12px;}
changetexteD   {    display:block ;  }

plus_grand , .plus_grand { font-size: 12px;}

plus_petit, .plus_petit { font-size: smaller;}



.colops {
        color: hsl(70, 90%, 40%) !important; 
}



/*----------------------------- styles utilisés pour ISN ------------------------------------------------------------------------*/
nav  {opacity:0.3 ;}
nav:hover  {opacity:0.9 ;}

nav div , nav ul li , .pas_selec { color:#4370c7 ; }
nav div:hover { 
    transition: all .2s ease-in;
    color:#411 ; 
    background-color: rgba(100,20,20,0.1);
    /* font-size: 13px;  */
}

.selec , .selec:hover { 
    transition: all .2s ease-in;
    color:#944 ; 
    background-color: rgba(200,120,120,0.1);
    text-shadow: 3px 3px 5px #804040 ;
}
nav ul li:hover , .pas_selec:hover {
    transition: all .2s ease-in;
    color:#965 ;
    background-color: rgba(200,150,130,0.1);
}

.multicol {
        column-count:6;
        -moz-column-count:6;
        -webkit-column-count:6;
        -o-column-count:6;
        -ms-column-count:6;
    }
    
.definition_ , .definition__ {
        font-family:"comic sans ms";
        font-weight: normal ;
        font-size: 12px;
        color:#000 ;
        border:1px solid #F80;  padding:3px;
        background: rgba(250, 160, 0, 0.4);
        cursor: default ;
        display: inline-block;
        z-index: 100;
}    
    
definition {
        font-family:"comic sans ms";
        font-weight: 600;
        font-size: 12px;
        color:#281 ;
        background: rgba(40, 200, 150, 0.1);
        cursor: help ;
        
}

.multicol span definition {
font-size: 10px;
}

.multicol span {
max-width: 80%;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto; /* césure */
  overflow-wrap:hyphenate ;
word-wrap: break-word;
}

.definition_s {
        font-family:"comic sans ms";
        font-weight: 600;
        font-size: 12px;
        color:#281 ;
        background: rgba(40, 200, 150, 0.2);
        cursor: default ;
}    
/*-------------------------------------------------------------------------------------------------------------------------------*/

section{
    width:850px;
    margin:auto
} 	

/*
section#content{
    width:850px;
    min-height:700px;
    margin:50px auto
}
*/

nav#menu-side{
color:#fff;
width:200px;
height:100%;
border:1px solid #6d7673;
border:1px solid #6d7673;
border-radius:10px;
-moz-border-radius:10px;
-moz-box-shadow: 0 0 5px #6d7673;
-webkit-box-shadow: 0 0 5px #6d7673;
box-shadow: 0 0 5px #6d7673 ;
background: #7d7e7d ; /* Old browsers */
background:-moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background:-webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera11.10+ */
background:-ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
background:linear-gradient(top,#7d7e7d 0%,#0e0e0e 100%); /* W3C */
margin:15px 0 0 0;
padding:10px 5px;

}

nav#menu-side .titre{
text-align:center;
text-shadow: 0px 0px 10px #000, -1px -1px #000;
font-weight:800;
margin:15px 0
}

nav#menu-side ul li{
list-style:none;
margin:5px;
width:175px
}

nav#menu-side a{
color:#fff;
font-size:.8em;
text-decoration:none;
width:170px;
display:block;
margin-left:5px
}

nav#menu-side a:hover{
color:#00ff0f;
background:#404040
}









  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;}

racine {
	font-size: 1.7em;
	vertical-align: middle;
        display: inline-block;
	}
radical { 
	padding: 0.5ex;
	border-top: thin solid black ;
	}
        
        
.math {
	position: relative;
	padding: 15px 50px;
	font-size: 11pt;
	font-weight: 500;
        font-family: serif;
	}

        
table { border: medium solid #558; border-collapse: collapse;  }
      
td,th {
        padding: 5px;
        border: medium solid #558;  
        text-align:center;  
        color:#558 ; 
        white-space: nowrap ; 
        background-color:rgba(100,100,160, 0.1);
    } 
tr,td { border: thin solid #558;}    

.dyn {
          opacity:0.6 ;
          text-decoration: none ;  
          cursor:pointer; 
          position: relative;
          display: inline-block;
}

.dyn:hover {
          opacity:0.8 ;

}


.commentaires {
    white-space:pre-wrap;  
    background:rgba(240, 200, 100, 0.2) ; 
    color:#B42 ; 
    font-family: "Comic Sans Ms"  , cursive ;
}



summary {
            cursor: ns-resize ;
        }
        
summary *   {             /* remarque : en général, l'enfant de la balise summary est une balise h3 ou h4 */
            display:inline-block ;
            }        
        

summary:hover,summary:hover *{          /*  summary h3:hover,summary h4:hover  {   */
            color:#E00 ;
            }
            
details[open] > summary, details[open] > summary * {          /* }h3, details[open] > summary h4  {   */
            color:#F65 ;
            }

fieldset {
    display:inline-block;
 /*   color:rgba(100,100,150,0.6);
    border: rgba(100,100,150,0.6) 1px solid;*/
}

/*--------------------- styles utilisés pour questionnaire -----------------*/
  .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;}


.sans_bord {
    border: none; 
    opacity: 1.0; 
    box-shadow: none; 
}

.formule {
    background-color: rgba(250,200,20,0.2);
    border: rgba(250,200,20,0.8) solid 1px;
    font-size: 14px;
    color:#A40;
    padding: 4px;
    width: fit-content;
    margin: 4px;
}


/*------------------------- boutons poussoir ------------------------*/

.poussoir {
    position:relative;
    top:4px;
}
.poussoir:active {
    top:7px;
    left:-3px;
}

    .bouton_poussoir {
        width:30px;
        height: 24px;
        background-color:rgba(230,220,220,0.6);
        font-family: arial;
        font-size:15px;
        text-decoration:none;
        color:#fff;
        position:relative;
        padding:2px;

        border-radius: 5px;
        box-shadow:  0px 5px 0px 0px rgba(210,200,200,0.6), 1px 10px 5px #999;
        cursor:pointer;
        display: inline-block;
        background-size: 26px 20px;
        background-repeat: no-repeat;
        background-position: center;
        margin:2px;
        border:none;
        opacity:0.8;
}


.bouton_poussoir:active, .bouton:active {
        top:3px;
        box-shadow:  0px 2px 0px 0px  rgba(210,200,200,0.6), 1px 5px 3px #999;    
}
.bouton_poussoir:hover {
      opacity:1; 
}

.haut{ 
    width:auto;
    height: 90px;
    padding: 4px;
}
.haut img {
    height:90px;
}
/*------------------------------------------------------------------------------------------------*/
.g {
        background-image: url("/i/fleche_g.svg");
        border-radius: 13px / 10px;
        padding:0;
    }
.d {
        background-image: url("/i/fleche_d.svg");
        border-radius: 13px / 10px;
        padding:0;
    }
.h {
        background-image: url("/i/fleche_h.svg");
        border-radius: 13px / 10px;
        padding:0;
    }
.b {
        background-image: url("/i/fleche_b.svg");
        border-radius: 13px / 10px;
        padding:0;
    }

.enregistrer {
        background-image: url("/i/enregistrer.svg");
        border-radius: 13px / 10px;
        padding:0;
    }

.undo {
        background-image: url("/i/undo.svg");
        border-radius: 13px / 10px;
        padding:0;
    }

.redo {
        background-image: url("/i/redo.svg");
        border-radius: 13px / 10px;
        padding:0;
    }


.y_aller {
        background-image: url("/i/bouton_y_aller_.png");
        border-radius: 13px / 10px;
        padding:0;
    }
.voir {
        background-image: url("/i/bouton_voir_.png");
        border-radius: 13px / 10px;
        padding:0;
    }
.voir_oui {
        background-image: url("/i/icone_voir.png");
        border-radius: 13px / 10px;
        padding:0;
    }  
.voir_non {
        background-image: url("/i/icone_pas_voir.png");
        border-radius: 13px / 10px;
        padding:0;
    }     
.baguette_magique {
        background-image: url("/i/baguette_magique_.svg");
        border-radius: 13px / 10px;
        padding:0;
    }    
    
.annuler {
        background-image: url("/i/bouton_annuler_.png");
        border-radius: 13px / 10px;
        padding:0;
    }
.recharger {
        background-image: url("/i/bouton_recharger_.png");
        border-radius: 13px / 10px;
        padding:0;
    }
.verifier {
        background-image: url("/i/bouton_verifier_.png");
        border-radius: 13px / 10px;
        padding:0;
    } 
    
.bouton_envoyer {
        background-image: url("/i/envoyer.svg");
        border-radius: 13px / 10px;
        padding:0;    
} 
.bouton_repondre {
        background-image: url("/i/repondre.svg");
        border-radius: 13px / 10px;
        padding:0;   
        background-size: 30px 16px; 
        width: 40px;
        height: 20px;
} 

.bouton_ecrire {
        background-image: url("/i/stylo.svg");
        border-radius: 13px / 10px;
        padding:0;
        
        background-size: 18px 18px; 
        /*
        width: 22px;
        height: 22px;      */  
} 

.bouton_crayon {
        background-image: url("/i/crayon.svg");
        border-radius: 13px / 10px;
        padding:0;
        
        background-size: 18px 18px; 
}
.bouton_crayon_barre {
        background-image: url("/i/crayon_barre.svg");
        border-radius: 13px / 10px;
        padding:0;
        
        background-size: 18px 18px; 
} 

.bouton_effacer {
        background-image: url("/i/effacer.svg");
        border-radius: 13px / 10px;
        padding:0;
        
        background-size: 18px 18px; 

}
.bouton_effacer_o {
        background-image: url("/i/effacer_o.svg");
        border-radius: 13px / 10px;
        padding:0;
        
        background-size: 18px 18px; 

} 

.bouton_nouveau {
    background-image: url('/i/icone_nouveau_.png');
    border-radius: 13px / 10px;
    padding:0;

    background-size: 18px 18px;
}

.bouton_supprimer {
        background-image: url("/i/corbeille.svg");
        border-radius: 13px / 10px;
        padding:0;
        background-size: 16px 16px; 
        width: 20px;
        height: 20px;
}
.bouton_reduire{
        background-image: url("/i/reduire.svg");
        border-radius: 13px / 10px;
        padding:0;    
}
.bouton_agrandir{
        background-image: url("/i/agrandir.svg");
        border-radius: 13px / 10px;
        padding:0;    
}

.telecharge_ {
    background-image: url("/i/telecharge.svg");
    background-size: 70%; 
 /*   border-radius: 13px / 10px; */
 /*   padding:0; */
}
.telecharge {
        background-image: url("/i/telecharge.svg");
        border-radius: 13px / 10px;
        padding:0;
    }
.telecharge_ico {
        background-image: url("/i/telecharge_ico.svg");
  /*      border-radius: 13px / 10px;
        padding:0;*/
  background-size: 70% 90%;
    }
.telecharge_zip {
        background-image: url("/i/telecharge_zip.svg");
  /*      border-radius: 13px / 10px;
        padding:0;*/
  background-size: 70% 90%;
    }
.telecharge_zip_ {
        background-image: url("/i/telecharge_zip_.svg");
  /*      border-radius: 13px / 10px;
        padding:0;*/
  background-size: 70% 90%;
    }    
.telecharge_v {
        background-image: url("/i/telecharge_v.svg");
        border-radius: 13px / 10px;
        padding:0;
    }  
    
.telecharge_jpg {
        background-image: url("/i/telecharge_jpg.svg");
        border-radius: 13px / 10px;
        padding:0;
        height:38px;
        width:26px;
        background-size: 26px 38px;
    }
.telecharge_png {
        background-image: url("/i/telecharge_png.svg");
        border-radius: 13px / 10px;
        padding:0;
        height:38px;
        width:26px;
        background-size: 26px 38px;
    }    
    
    
.telecharge_svg {
        background-image: url("/i/telecharge_svg.svg");
        border-radius: 13px / 10px;
        padding:0;
        height:38px;
        width:26px;
        background-size: 26px 38px;
    } 
    
.telecharge_csv {
        background-image: url("/i/telecharge_csv.svg");
        border-radius: 13px / 10px;
        padding:0;
        height:38px;
        width:26px;
        background-size: 26px 38px;
    }     
.telecharge_pdf {
        background-image: url("/i/telecharge_pdf.svg");
        border-radius: 13px / 10px;
        padding:0;
        height:38px;
        width:26px;
        background-size: 26px 38px;
    } 
.telecharge_html {
        background-image: url("/i/telecharge_html.svg");
        border-radius: 13px / 10px;
        padding:0;
        height:38px;
        width:26px;
        background-size: 26px 38px;
    } 
.telecharge_json {
        background-image: url("/i/telecharge_json.svg");
        border-radius: 13px / 10px;
        padding:0;
        height:38px;
        width:26px;
        background-size: 26px 38px;
    }    



.bouton_copier , .bouton_copier_rose {
        background-image: url("/i/icone_copier.png");
        border-radius: 13px / 10px;
        padding:0;    
}
.bouton_copier_rose {
        background-image: url("/i/icone_copier_rose.png"); 
}
.bouton_masquer {
        background-image: url("/i/icone_masquer.png");
        border-radius: 13px / 10px;
        padding:0;    
} 

.bouton_ouvrir {
        background-image: url("/i/icone_ouvrir.svg");
        border-radius: 13px / 10px;
        padding:0;    
} 
.bouton_ouvrir_v {
        background-image: url("/i/icone_ouvrir_v.svg");
        border-radius: 13px / 10px;
        padding:0;    
} 

    .actualiser {
        background-image: url('/i/actualiser.svg');
        background-size: 70%;
        width:30px;
        height: 30px;
    }
    .telecharger {
        background-image: url("/i/telecharge.svg");
        border-radius: 13px / 10px;
        padding:0;
    }
    .aide {
        background-image: url("/i/mystere.svg");
        border-radius: 13px / 10px;
        padding:0;
    }    

    
    .nouveau_fichier {
        background-image: url('/i/icone_nouveau.png');
        background-size: 70%;
        width:30px;
        height: 30px;
    }
    .explorer_fichier {
        background-image: url('/i/icone_explorer.png');
        background-size: 70%;
        width:30px;
        height: 30px;        
    }  
    
    .nouveau_repertoire {
        background-image: url(/i/nouveau_dossier.svg);
        background-size: 100%;
        width: 30px;
        height: 30px;
        color:#888;
        font-size: 22px;
        }    
    
    .affichage_dossiers {
        background-image: url("/i/icone_affichage_dossiers.png"); 
        background-size: 70%;
    }
    .affichage_dossiers_non {
        background-image: url("/i/icone_affichage_dossiers_non.png"); 
        background-size: 70%;
    }    
    
    .affichage_liste {
        background-image: url("/i/icone_affichage_liste.png"); 
        background-size: 70%;
    }
    .affichage_mosaique {
        background-image: url("/i/icone_affichage_mosaique.png");
        background-size: 70%;
    } 
    .trier_par_date {
        background-image: url("/i/icone_trier_par_date.png");  
        background-size: 70%;
    }
    .trier_par_application {
        background-image: url("/i/icone_trier_par_application.png"); 
        background-size: 70%;
    }
    .trier_par_alphabet {
        background-image: url("/i/icone_trier_par_alphabet.png");  
        background-size: 70%;
    }
    .trier_par_poids {
        background-image: url("/i/icone_trier_par_poids.png");
        background-size: 70%;
    }
    /*
    .trier_par_auteur {
        background-image: url("/i/icone_trier_par_auteur.png");
        background-size: 26px 26px;
    }*/
    .trier_par_auteur {
        background-image: url("/i/icone_trier_par_auteur.png");
        background-size: 70%;        
    }
    
    .reduire{
        background-image: url("/i/reduire.svg");
    }    
    
    .corbeille {
        background-image: url("/i/corbeille_.png"); 
        background-size: 70% 90%;
    } 
    
    .partager {
        background-image: url("/i/icone_partager.png");
        /* text-shadow: none; */
    }
    
    .pas_partager {
        background-image: url("/i/icone_pas_partager.png");
        /* text-shadow: none; */
    }   

    
    
    /*----------------- styles pour textarea ---------------*/
        
    .zone_texte{
        background: rgba(255, 215, 100, 0.3); 
        color: rgba(155, 115, 10, 0.9); 
        font-family: verdana ;
    }            

    
    .style1 {
        background: rgba(255, 255, 255, 1.0); 
        color: rgba(0, 0, 0, 1.0); 
        font-family: serif ;
        font-size: 12px;
    }
    
    .style2 {
        background: rgba(55, 15, 100, 0.1); 
        color: rgba(55, 15, 100, 0.9); 
        font-family: sans-serif ;
        font-size: 12px;
    }
    
    .style3 {
        background: rgba(5, 15, 60, 0.9); 
        color: rgba(255, 215, 215, 0.9); 
        font-family: monospace ;
        font-size: 12px;
    }    

    .style4 {
        background: rgba(55, 15, 100, 0.2); 
        color: rgba(55, 15, 100, 0.9); 
        font-family: cursive ;
        font-size: 12px;
    } 
    
    .style5 {
        background: rgba(55, 5, 0, 0.8); 
        color: rgba(255, 255, 255, 0.9); 
        font-family: 'impact' ;
        font-size: 14px;
    }    

    .style6 {
        background: rgba(120, 120, 220, 0.2); 
        color: rgba(5, 15, 115, 0.9); 
        font-family: 'Comic Sans Ms' ;
        font-size: 14px;
    } 
    
    .style7 {
        background: rgba(200, 200, 220, 0.2); 
        color: rgba(5, 15, 215, 0.9); 
        font-family: 'Trebuchet MS'; 
        font-size: 12px;
    }
 
    

   
    .masquer {
        display:none;
    }  
    
    
    
    #conteneur_messages {
        padding: 2px;
        width:98%;
        overflow:auto; 
        height:60%;
    }

    #conteneur_messages hr {
        border: 0.5px inset rgba(0,0,0,0.1);
    }
    
  

    
    
    
    .coeff_stoech {
                color:#0A0;
                font-weight: bolder;
                font-family: arial;
                font-size: larger;
            }
    .resultat {
                color:#00A;
                font-weight: bolder;
                font-family: arial;
                font-size: larger;
            }  
            
    arg {
        color:#0AA;
    }
    .avertissement_nouveau_message {
        font-family: arial;
        text-align: center;
        position: absolute;
        color:#D00;
        font-size:10px;
        font-weight: normal;
    }
            
    .clignote {
        animation: clignote 4s linear infinite;
      }

    @keyframes clignote {  
            10% { opacity: 0.2; }
          }
          
    .clignote_erreur {
        font: bold 12px "arial", sans-serif; color: hsl(0, 80%, 40%) !important;
        padding: 4px;        
        animation: clignote_erreur 1s infinite;
        -webkit-animation: clignote_erreur 1s infinite;
        border-radius: 8px;
        background-color: rgba(255,0,0,0.4);
        box-shadow: 0px 0px 8px 6px rgba(255,0,0,0.4); ;
    }

   @keyframes clignote_erreur
    {
      0%   {background:  rgba(250,0,0,0.4);box-shadow: 0px 0px 8px 6px rgba(250,0,0,0.4);}

      50%  {background: rgba(250,250,50,0.4);box-shadow: 0px 0px 8px 6px rgba(250,250,50,0.4); }
    }
    @-webkit-keyframes clignote_erreur
    {
      0%   {background:  rgba(250,0,0,0.4);box-shadow: 0px 0px 8px 6px rgba(250,0,0,0.4);}

      50%  {background: rgba(250,250,50,0.4);box-shadow: 0px 0px 8px 6px rgba(250,250,50,0.4); }
    }          

.cadre {
        border: medium solid #20462D;
        border-radius: 3px;
        background-color: rgba(200,230,210,0.2);
        color:#20462D;
        font-family: cursive;
        font-size: 12px;
        font-weight: normal;
        text-decoration: none;
        padding: 6px;
        margin: 12px;
        text-align: justify;
}

    .lien_information {
        border: #0FD solid 2px;
        border-radius: 12px;
        background-color: #032;
        color: #0FD;
        font-size: 14px;
        font-family: arial;
        font-weight: bold;
        padding: 8px;
        box-shadow: 6px 6px 8px #6A9;
    }
    .lien_information * {
        color:#0FD;
    }
    .lien_information span:before {
        content:url(/i/icone_information.svg) ;
        position:relative;
        top:12px;
        left:-4px;        
      }
      
.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;
}



    .numerotation {
        height: 20px;
        display: inline-block;
        width: 26px;
        background-color: #EEE;
        color:#888;
        text-align: right;
        padding-right: 10px;
    }
    .assembleur {
        height: 20px;
        display: inline-block;
        width: 80px;
        background-color: #FFF;
        color:#88E; 
        padding-left: 10px;
    }
    .code_ > span {
        cursor: pointer;
    }    
    .code_:active > span {
        background-color: #FF0;
    }
    
    
    
/*---------------------------- exercices et questions ---------------------*/
    e:before {
      content: "Exercice n°" counter(exercices) ":  ";
      counter-increment: exercices;
    }    
    
    e {
        color:#582;
        font-family: arial;
        margin-top:40px;
        margin-bottom:10px;
        font-weight: 600;
        display: block;
        font-size: 18px;
        text-shadow: 3px 3px 5px #844;
    }
    
    q:before {
      content: "Question " counter(questions) ".";
      counter-increment: questions;
    }
    
    r:before {
      content: "Réponse " counter(reponses) ".";
      counter-increment: reponses;
    }    

    q, r {
        color:#82A;
        font-family: arial;
        margin:10px;
        font-weight: 600;
        display: inline-block;
        white-space: nowrap;
        font-size: 12px;
        text-shadow: 1px 1px 3px #82A;
    }
    
   
    
.citation {
    margin: 10px;
    padding: 4px;
    border:solid 1px rgba(0,100,100,0.6);
    border-radius: 6px;
    background-color:rgba(0,100,100,0.2);
    font-family: 'Cursive standard'; 
    font-size:12px;
}

.chemin {
  font-family: Consolas, "Courier New", monospace;
  background-color: #ECA;
  padding: 2px 6px;
  border-radius: 4px;
  color: #333;
}

.nombre {
    font-family: monospace;
    font-size: 16px;
}
.linux {
    color:white;
    background-color: black;
    padding: 2px 4px 2px 4px;
}
.paquet {
    border:solid 2px #63D;
    background-color: rgba(200,50,250,0.3);
    padding: 3px;
}

.donnees_volumineuses {
    max-height: 30px;
    display: inline-block;
    overflow: hidden;
    background-color: rgba(255, 230, 0, 0.2);
    transition: background-color 0.3s ease;
}

.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;
        transition: background-color 0.3s ease;
}
.copie {
    background-color: rgba(0,255,0,0.3);
    
}


/*---------------- recherche de texte dans la page --------------------*/
#recherche_definitions {
  position: fixed;
  width: 790px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  background: rgba(200, 200, 210, 0.95);
  border: 1px solid #ccc;
  padding: 0px 4px 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  font-family: sans-serif;
  display: none;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 95%, transparent 100%);  
}

.mot {
    display: inline-block;
    width:125px;
    height: 14px;        
    background-color: rgba(255,220,0,0.2);
    border:solid 1px rgba(155,120,0,0.6);
    border-radius: 4px;
    padding: 2px;
    text-align:center;
    overflow: auto;
}
.definition {
    display: inline-block;
    width:650px;
    height: 14px;
    background-color: rgba(100,255,220,0.2);
    border:solid 1px rgba(10,155,120,0.6);
    border-radius: 4px;
    padding: 2px; 
    overflow: hidden;
    cursor:pointer;
    white-space:nowrap;
    text-overflow: ellipsis;
}


.fade {
    height: 20px;
}

#conteneur_btn_exit {
    float:right; 
    cursor:pointer; 
}
#conteneur_btn_exit img{
    margin-left: 20px;
}

.fleche {
    display: none;
    vertical-align: top;
}

#saisie_recherche {
    width: 140px;
    background-color: rgba(255,255,255,0.4);
    font-family: monospace;
    border-radius: 3px;
    margin: 4px;
}
#resultats {
    line-height: 1.2em;
    font-family: cursive;
    font-size: 11px;
}

#resultats a {
    background-color: rgba(200,0,255,0.1);
    color:#408;
    margin-left: 4px;
    margin-right: 4px;
    white-space: nowrap;
}

.highlighted {
  background:rgba(255, 255, 0, 0.8);
  padding: 0;        /* ne change pas le flux du texte */
  margin: 0;
}

#resultats_dans_page img {
  cursor: pointer;
}




/*-------------------- pour les notes --------------------------------*/
    .item_evaluation {
        margin-top: 4px;        
    }
    .intitule {
        color: #044;
        font-weight: bold;
        font-family: arial;
    } 
    .note {
        color:#800;
        font-family: verdana;
      /*  margin-right: 20px;
        margin-left: 6px; */
    } 
    .item_evaluation p {
        all: unset;
        color: #668;
    } 
    .item_evaluation p::first-letter {
      all: unset; 
    } 








.download-btn {
  background: rgba(100,100,255,0.2);
  border-radius: 4px;
  color: blue;
  cursor: pointer;
}

    
/*---------------------------------------------------------------------*/


    
@media print {
    .no-print, .no-print *
    {
        display: none !important;
    }
    
    * {
        color:black !important;
    }
        
    q, h1, h2, h3, h4 {
        text-shadow: none !important;
    }
}

@media (orientation: landscape) {
  body {
    
  }
}

@media (orientation: portrait) {
    header, #corps {
        /*zoom:1.3;*/
    }
      
} 


/*------------------------- noel -----------------------------------------*/
.left-banner, .right-banner {
  position: fixed;
  top: 0;
  width: 120px;
  height: 100vh;
  background-image: url('/i/noel/banniere_verticale.png');
  background-repeat: repeat-y;
}

.left-banner { left: 0; }
.right-banner { right: 0; }