#debut {
    fill:rgba(0,255,0,0.2);
}

#action {
    fill:rgba(0,0,255,0.2);
}
#test {
    fill:rgba(255,100,0,0.2);
}
#debut,#action,#test {
    stroke:#000;
}

.debut {
    fill:rgba(0,255,0,0.2);
}
.debut_t {
    stroke:none;
    fill:rgba(0,100,0,1);
    font-family:arial;
    font-size:16px;            
}  

.action {
    fill:rgba(0,0,255,0.2);
}
.action_t {
    stroke:none;
    fill:rgba(0,0,100,1);
    font-family:arial;
    font-size:16px;            
} 

.test {
    fill:rgba(255,100,0,0.2);
}
.test_t {
    stroke:none;
    fill:rgba(200,50,0,1);
    font-family:arial;
    font-size:16px;            
} 


.pas_edition_de_texte_en_cours {
    background-color: #EEE;
    cursor: pointer; 
}
.edition_de_texte_en_cours {
    background-color: #DFD;
    cursor: text;
}







#coin1, #coin2 {
    cursor: crosshair;             
}






#cadre {
    cursor: pointer;
    width: fit-content;
    margin: auto;  
    border: 1px solid #888;    
}

[contenteditable]:focus {
  border: 1px solid green;
  background-color: lightyellow;
  cursor: text;
}


.deplacable, .selectionne {
    width:30px; 
    height:30px;
    }
    
.grand {
    width:50px;
    height:50px;    
    }
    
.long {
    width:60px;    
    }    

.deplacable {
    border: 3px inset  rgba(100,200,50,0.4);
    background-color:   rgba(80,100,75,0.4);
    cursor: -webkit-grab;
    }

.selectionne {
    border: 3px outset rgba(150,200,150,0.4);
    background-color:   rgba(180,200,175,0.4); 
    cursor: -webkit-grabbing;
}

.bouton_ {
    cursor: pointer;
}

.texte {
    font-size:30px;
    font-family:arial;
    stroke:none;
}

#apercu_image {
    background-color: rgba(255,255,255,0.2);
    border:inset;
}

input[type="range"] {
        transform: rotate(270deg);
        width: 100px;
        height: 20px;
    }



@keyframes flickerAnimation {
    0%   { opacity:1; }
    50%  { opacity:0.5; }
    100% { opacity:1; }
  }
  @-o-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0.5; }
    100% { opacity:1; }
  }
  @-moz-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0.5; }
    100% { opacity:1; }
  }
  @-webkit-keyframes flickerAnimation{
    0%   { opacity:1; }
    50%  { opacity:0.5; }
    100% { opacity:1; }
  }
  .animate-flicker {
     -webkit-animation: flickerAnimation 1s infinite;
     -moz-animation: flickerAnimation 1s infinite;
     -o-animation: flickerAnimation 1s infinite;
      animation: flickerAnimation 1s infinite;
  }