body{
    background-color:rgb(0, 0, 0);   
  
}

.C_lecteurVideo{
    border:2px  solid #000000;  
    object-fit: fill ; 
    
 /*  



 border: thin  solid #000000; 

  fill  contain   cover    none       scale-down 
  
  
  */

}


         .cadreVideo{
			display: block;
            position:absolute; 

			/* position:inherit; */
			
            top: 50px; left: 0px;
            width:400px ; height:256px; 
			/* overflow: auto;            */
			margin-left: auto; margin-right: auto;
			 color: #f8954c;
             background-color:  #f8954c;
            visibility: hidden;
            /* 
            border: thin  solid #000000;         
            padding: 10px;
            margin: 10px;
             border: thin  solid #000000;
            object-fit: none;  
            
            */
        } 


.C_DomZaza{
    display: block;
    position: absolute;
    border-radius:14px;
    border: 2px;
    border-style: solid;

}
.C_DomZima{

    border-radius: 10px;


}





.C_DivEdLien{
    display:block;
    position: absolute ;
    /*

     top:0%; left:0%; width: 100% ; height: 100%;  
     */
     left:5%; width: 90% ;
    background-color: rgb(255, 255, 255);
    color: rgb(0, 26, 255);
       visibility:inherit;
       resize : none;
}

.C_DivChoixTypBul{
    display:block;
    position: absolute ;
    top:0%; left:0%; width: 100% ; height: 100%; 
    background-color: rgb(59, 59, 59);
    color: rgb(36, 36, 36);
       overflow-y: scroll;
       visibility: hidden;
}
.C_DivEd_TaChxTypBul{
    border: 1px; border-style: solid; border-color: azure;
    background-color: rgb(70, 70, 70);
    width: 100%;
     overflow-y: scroll;
}
.C_DivEd_TaChxTypBul td{
    border: 1px; border-style: solid; border-color: rgb(37, 38, 82);
    vertical-align:top;  text-align:left;
    font-size: small;
    visibility:inherit;
    font-weight: 600;
    font-size: 14px;
}
.C_DivEd_TaChxVocal{
    border: 1px; border-style: solid; border-color: rgb(122, 175, 175);
    background-color: rgb(135, 126, 221);
    width: 100%;
     overflow-y: scroll;
}
.C_DivEd_TaChxVocal td{
    border: 1px; border-style: solid; border-color: rgb(37, 38, 82);
    vertical-align:top;  text-align:center;
    font-size: small;
    visibility:inherit;
    font-weight: 600;
    font-size: 14px;
}





.C_DivSelectFichiers{
    display:block;
    position: absolute ;
    top:0%; left:0%; width: 100% ; height: 100%; 
    background-color: rgb(163, 57, 57);
    visibility: visible;
}


.C_DivEdListImages{
    display:block;
    position: absolute ;
    top:0%; left:0%; width: 100% ; height: 93%; 
    background-color: rgb(59, 59, 59);
    color: aliceblue;
       /* overflow-y: scroll; */
       visibility: hidden;
}

.C_SurDivEd_TaImag{
    border: 1px; border-style: solid; border-color: azure;
    width: 100%; height: 100%; 
    overflow-y: scroll;
    visibility:inherit;
     background-color: rgb(0, 0, 0);
}
.C_DivEd_TaImag{
    border: 1px; border-style: solid; border-color: azure;
    width: 100%;
    /* overflow-y: scroll; */
    visibility:inherit;
}
.C_DivEd_TaImag td{
    border: 1px; border-style: solid; border-color: rgb(155, 175, 148);
    vertical-align:top;  text-align:left;
    font-size: small;
    visibility:inherit;
}



.C_DivEdition{
    display:block;
    position: absolute;
    top:0%; left:0%; width: 295px ; 
     height: 600px; 
      /* height: 97%; */
    margin:0%; padding: 0%; border: 1px; border-style: solid; border-color: azure;
    align-items: center; text-align: center;
    background-color: rgb(95, 155, 156);
    opacity: 1;
    visibility: visible;
}

.C_cadreTexte{
   padding: 2px;  border: 1px; border-style: solid; border-color: rgb(0, 0, 0);
}

.C_DivEdDiapo{
    display:block;
    position: absolute;
    top:30px; left:5px; width: 276px ; height: 150px; 
    margin:0%; padding: 4px;  border: 1px; border-style: solid; border-color: rgb(0, 0, 0);
    align-items: center;   text-align:left;
    background-color: rgb(164, 199, 207);
    opacity: 1;
    visibility: visible;

       visibility:inherit;
}
.C_DivEd_TabDiap{
    border: 1px; border-style: solid; border-color: azure;
    width: 100%;
          overflow-y: scroll;
                visibility:inherit;
}
.C_DivEd_TabDiap td{
    border: 1px; border-style: solid; border-color: rgb(37, 38, 82);
    /* background-color: rgb(146, 184, 184); */
    vertical-align:top;  text-align:left;
    font-size: small;
    visibility:inherit;
}
/* --------------------------------------------------- Tableau Doms */
.C_SurDivEd_Doms{
display:block;   position: absolute; 
top:400px; left:5px; width: 280px ; height: 185px; 
 background-color: rgb(143, 110, 138);
 padding: 4px;
}
.C_DivEd_Doms{
    display:block;
    position: relative;
    top:2px; left:0px; width: 270px ; height: 145px; 
    margin:0%; padding: 4px;  border: 1px; border-style: solid; border-color: rgb(0, 0, 0);
    align-items: center;   text-align: center;
    background-color: rgb(165, 132, 184);
    opacity: 1;
    visibility: visible;
      overflow-y: scroll;
       visibility:inherit;
}
/* --------------------------------------------------- Tableau Bulles */
.C_SurDivEd_Bulles{
display:block;   position: absolute; 
top:200px; left:5px; width: 280px ; height: 185px; 
 background-color: rgb(189, 162, 131);
 padding: 4px;
}
.C_DivEd_Bulles{
    display:block;
    position: relative;
    top:2px; left:0px; width: 270px ; height: 145px; 
    margin:0%; padding: 4px;  border: 1px; border-style: solid; border-color: rgb(0, 0, 0);
    align-items: center;   text-align: center;
    background-color: rgb(131, 111, 89);
    opacity: 1;
    visibility: visible;
      overflow-y: scroll;
       visibility:inherit;
}
.C_DivEd_TaBul{
    border: 1px; border-style: solid; border-color: azure;
    width: 100%;
     overflow-y: scroll;
}
.C_DivEd_TaBul td{
    border: 1px; border-style: solid; border-color: rgb(37, 38, 82);
    vertical-align:top;  text-align:left;
    font-size: small;
    visibility:inherit;
}
/* --------------------------------------------------- Tableau Bulles */

.C_TextCharge{
    /* background-color:rgb(0, 0, 255);   */
    /* display:block;
    position:absolute; */
    color: white;
    text-align: center;
    font-size: 5dvw;
    left: 10%;
    width: 100%;
    top: 2%;
    height:  25%;
    opacity: 1;
    visibility:inherit;

}
.C_Jauge{
    display:block;
    position:relative;
    border-radius: 8px;
    background-color:rgb(4, 53, 16); 
    left: 10%;
    width: 80%;
    top: 8%;
    height:  50px;
    opacity: 1;
    visibility:inherit;

}

.C_PageChargement{
    background-color:rgb(59, 59, 59); 
    display:block;
    position:fixed;
    left: 0px;
    width: 100%;
    top: 0px;
    height:  100%;
    opacity: 1;
    visibility: visible;
     /* visibility: hidden; visible */
}







.C_NumDiapo{
    position:absolute;
    display:block;
    background-color: rgb(255, 255, 255);
    border: 3px;
    padding: 2px;
    border-color: rgb(0, 255, 191);
    border-style: solid;
    line-height: 13px; 
    left:10px;  top: 5px; width:20px;height:12px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    /*    
        vertical-align: middle; 
        padding: 2px;
        background-color:#d04b4b; 
        border-radius: 8px;
        border: medium solid #000000;     
        text-align: center;
    */   
} 
.C_canvas{

     

    display:block;
    position:absolute;
    left: 50px;
    width: 20px;
    /*   position:fixed;  width: calc(100% - 0px);  */
    top: 0px;
    height:  300px;
    opacity: 1;
    /* 
    position:fixed;
    background-color:rgba(223, 170, 170,.5); 
    */
    /* height:  calc(100% - 0px); */
}

.C_MonBouton{

    border-radius: 6px;
    border: solid 1px;
    box-shadow: 0 0 8px 0px rgb(53, 53, 53) inset;
    cursor: pointer;
    font-size: 14px;/* font-size: 1.6vw;*/
}

.C_Version{
    border-radius: 6px;
    border: solid 1px;
    box-shadow: 0 0 18px 0px rgb(46, 143, 95) inset;
    cursor: pointer;
    font-size: 12px;/* font-size: 1.1vw;*/
}
/*
    display:block;
    position: relative;
    background: radial-gradient(rgb(255, 255, 255) 68%, rgb(80, 80, 80) 9%);
*/
/* 
    background-color:rgb(223, 170, 170);
    border-radius: 10px;
    border-style: solid;
    border-width : 2px;
    border-color: black;
    left: 20px;
    top: 10px;
    width: 14%;
    height:   30%;
    padding: 0.3vh;
    text-align:left;
    visibility:inherit;
    font-size: 01vw;
    display:block;
    position:absolute ;
    display:block;
    position:absolute ;
    font-size: 3em;  
    visibility: hidden;     
 */
 

.C_DivLeBoutA{
    display:block;
    margin:0%;
    padding: 0%;
    position: absolute;
    background-color: rgb(94, 94, 94);
    border: 0px;
    align-items: center;
    text-align: center;
    top:0%; left:0%;
    width: 98% ;
    padding: 4px;
    /*ok: 98%; ko:   auto 100vw */
    height:fit-content; 
    /*   height:fit-content;  height:24px; */
    opacity: 1;
    visibility: visible;
}






.C_Recepteur{
 

display:block;
position:fixed;
/* background-color:rgba(116, 48, 48, 0.247); */
 
left: 5px;
width: calc(100% - 10px);
top: 5px;
height:  calc(100% - 30px);
/* 
   background-color: rgba(219, 221, 111, 0.555);

user-select: none;
cursor:url("flecheD.png") , pointer; 
left:400px;  
cursor:n-resize;  
col-resize  wait  
cursor:ew-resize;

cursor:URL("flecheD.png");  , pointer;
*/
}


.C_LaImageA{

     /* display:block;
    position:relative ;   */

    width: calc(100% - 10px);

    height:  calc(100% - 30px);

 

/* left:400px; */
}
.C_LaImageB{
    width: calc(100% - 10px);
    height:  calc(100% - 30px);
    
}


.C_DivimA{
    display:block;
    position:absolute ; 
    
    /*
       background-color:rgba(0, 220, 0, 0.274); 
    display:flexbox;
    position:absolute ;




    display:block;
position:static ;

position:absolute ; 

height:  calc(100% - 30px);
*/
left: 5px;
top: 5px;
width: calc(100% - 10px);
}
.C_DivimB{

    display:block;
    position:absolute ; 
     
/*   
 background-color:rgba(0, 220, 0, 0.274);    
    display:flexbox;
    position:absolute ; 
    
    height:  calc(100% - 30px);    
    */
    

    left: 5px;
    top: 5px;
    width: calc(100% - 10px);
    }


.C_Bubulle{
display:block;
position:absolute ;
/* background-color:rgba(214, 192, 150, 0.904); */
background-color:rgb(163, 163, 163);
border-radius: 10px;
border-style:solid;
border-width : 2px;
border-color: black;
left: 10%;
top: 5%;
width: 30%;
height:   20%;
padding: 5px;
text-align:left;
/* font-size: 3em;       */
/* visibility: hidden; */
}


.cursFlechD	{
/* cursor:url("flecheD.gif"), default; */
cursor:url("flecheD.png") , pointer; 
}


.C_LaDiapVideo{
    display:block;
    position:absolute;
    left: 0px;
    width: 0px;     /*  calc(100% - 10px); */
    top: 5px;
    height: 0px ;  /*   calc(100% - 30px); */
    background-color: rgba(110, 146, 127, 0.63);
    /* pointer-events: none; */
}


.C_LaDiapo{
    display:block;
    position:absolute;
    
    /* 
    
    position:fixed;   
  background-color:rgba(0, 220, 0, 0.274);   
    */
   
    /* padding: 4px; */
    border-radius: 2px;
    /* vertical-align:top ; */
    /* padding-bottom: 8px; */
    left: 5px;
    width: calc(100% - 10px);
    /*zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz   width: 2600px; width: calc(100% - 10px);  */
    top: 5px;
    height:  calc(100% - 30px);
    /* left:400px; */
    /*
    transition: opacity var(4s) var(1s);  
    transition: opacity 4s; 
    transition: all var(--duree); 
    transition: all 4s; 
    */
}





.C_PageFinale{

     
    background-color:rgb(128, 128, 128); 
    display:block;
    position:fixed;
    left: 0px;
    width: 100%;
    top: 0px;
    height:  100%;
    opacity: 1;
    visibility: hidden;
    /* 
    position:fixed;
 visibility: hidden;  visible
    */
    /* height:  calc(100% - 0px); */
}
.C_BoutonFinal{
    display:block;
    position:fixed;
    left: 10%;

}
 /*===================================================================================*/
 .tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  top:20px;
  height: 30px;
}
 /*===================================================================================*/
.C_DivDom{
    display:block;
    position: absolute ;
    /* background-color: rgb(2, 255, 221); */
    color: aliceblue;
    visibility: visible;
    top: 222px; left: 55px;; width: 222px ; height: 333px;  
}
.C_SurDivDoms{
    display:block;
    position: relatif ; 
    top:0%; left:0%; width: 100% ; height: 93%;     
    visibility: visible; 
    /* 
    background-color: rgba(2, 255, 221, 0.6);   */ 
}

/* -----------------------------------------------------  FONTS    */



@font-face {
    font-family: 'Eurosti';
    src: url("_prog/fontsOk/Eurosti.TTF") format('truetype');    
}
@font-face {
    font-family: 'myFontScript';
    src: url("fontsOk/lovelygirl.otf") format('opentype');
    /*    
    src: url("/_prg/PALSCRI.TTF");
    src: url("_prg/PALSCRI.TTF") format('truetype');
    src: url("_prg/lovelygirl.otf") format('truetype');
    src: url("_prg/lovelygirl.otf") format('opentype');
    src: url('source/SourceSansPro-Regular.ttf') format('truetype');   
    */
}
@font-face {
    font-family: 'myFontScript2';
    src: url("fontsOk/PALSCRI.TTF") format('truetype');
}
/*   */
@font-face {
    font-family: 'Jonze';
    src: url("fontsOk/Jonze.ttf") format('truetype');
}

@font-face {
    font-family: 'FrenchScript';
    src: url("fontsOk/FRSCRIPT.TTF") format('truetype');
}
@font-face {
    font-family: 'Edwardian';
    src: url("fontsOk/ITCEDSCR.TTF") format('truetype');
}
@font-face {
    font-family: 'OldEnglish';
    src: url("fontsOk/OLDENGL.TTF") format('truetype');
}
@font-face {
    font-family: 'Ravie';
    src: url("fontsOk/RAVIE.TTF") format('truetype');
}