.ici {
       position: relative;
         inset: -1.618vh 1.618vw;
        z-index: 5;
        width: 5rem;  
        display: block;
    }
    .aca {
      position: absolute;
         z-index: -2;
         display: block;
    }
    
      .sous  {
        position: absolute;
       
        top: -3.14vh;
        margin: -1rem ;
           width: 100vw ;
          z-index: -3;
           opacity: 0.62;
       }  

                                     /*    PILOTE     */
    .le {
           position: absolute;
          left: 13em;
        width: 3em;  
            display: block;
            z-index: 6;
    }    
     
     .se  {
       position: absolute;
      left: 8em ;
        z-index: 6;
        width: 5em;  
            display: block;
    }
    .me {
          position: absolute;
          left: 1em;
        width: 6em;  
            display: block;
            z-index: 6;
    }
    .pe {
           position: absolute;
          left: 16em;
        width: 3em;  
            display: block;
            z-index: 6;
    }


                                     /*    POSITION P    */
  
      .soute  {
        position: absolute;
        padding: -6rem;
         left: -0.001vh;
         height: 33vh;
        width: 100vw;
         z-index: -2;
           opacity: 0.62;
       }    
    .souta  {
        position: relative;
          inset: -8vh 1vw;
          height: 26.18vh;
        width: 61.8vh;
         z-index: 2;
           opacity: 0.62;
       }
   
                                     /*    CADRE     */

     .elemen  {
        height: 48vh;
           width: 25.4vh;
    	box-shadow:  3px 5px 16px rgba(0,0,0,0.62);
          }
      .eleman  {
         height: 19vh;
           width: 36vh;
   	box-shadow:  3px 5px 16px rgba(0,0,0,0.62);
         }

         .element {
        border: 0.6rem solid rgba(156,106,139,0.5);
	box-shadow: inset 0px 0px 50px 25px rgba(0,255,79,0.5),
		0px 0px 10px 5px rgba(0,127,255,0.5),
		inset 20px 30px 10px rgba(255,0,0,0.5),
		30px 20px 10px rgba(0,0,0,0.05);
    }         
             
        .elemento      {
        width: 5rem;
        border: 0.23vw solid rgba(0,16,139,0.16);
	box-shadow:  0px 0px 50px 25px rgba(0,122,0,0.16),
		inset 0px 0px 10px 5px rgba(0,127,0,0.16),
		 20px 30px 10px rgba(162,22,0,0.16),
		 inset 4px 8px 10px rgba(0,0,0,0.05);      
  }
    .vhide  {
       position: relative;
      inset: -1em 2em;
        width:  23em;
        z-index: -1;
               display: block;
    }

                                     /*    ELEMENT VIDEO     */
    
      .taille video { 
         padding : 0.0618em;
          height: 100%;
           width:  100%;
    }
    
     .exemple { 
         display: block;   
    }
 
                                     /*    POSITION  M   */
   
    .entre  {
        position: absolute;
        opacity: 0;
         z-index: 3;
        width: 10vh;  
    display: block;
        }    
   .entrea  {  position: absolute;  inset: 8vh 1vw;  display: block; width: 88%;   }   
   .entreb  {  position: absolute;  inset: 15vh 12vw;  display: block; width: 75%;  }   
   .entrec  {  position: absolute;  inset: 70vh 9vw;  display: block; width: 72%;  }   
   .entred  {  position: absolute;  inset: 77vh 3vw;  display: block; width: 62%;  }   
   .entree  {  position: absolute;  left: 5em;  display: block; width: 4em;   z-index: 8; } 
   .entreez  {  position: absolute;  inset: 23vh 6vw;  display: block; width: 111%;  } 

    
                                     /*    EFFETS   */        
    
     .verte  {
      filter: invert(100%);
    }
     .rot  {
      filter: hue-rotate(180deg);
    }
     .sat  {
      filter: saturate(3);
    }
    .tour {
       rotate: 90deg;
       }


                                     /*    LES TAILLES   */ 

                                     /*   largeur petite pourcentage et grande W   */
     .pil  { 
            width:  12%;
    }
                                      /*   largeur grande pourcentage et H   */
      .tailla  { 
            width:  162%;
    }
      .typa  { 
            width:  33vh;
    }
                                     /*   hauteur petite fixe et grande  */
       .taillo  { 
            height:  3em;
    }
                                      /*   hauteur légère H et largeur fixe  */
     .tailli  { 
            height:  8vh;
    }
    .typ  { 
            width:  8em;
    }
                                     /*   largeur grande W et hauteur légère pourcentage   */
 


                                     /*    BACKGROUND   */
     
     .elemente {
 background:  url("3BOITES.jpg") no-repeat;
    background-size:  100% , 100%;
}
    
    
      .elementeb {
 background:  url("ABAC.jpg")  no-repeat;
    background-size:  cover ;
           padding : 1rem;
            margin: 1.618vw;
        border: 0.0618rem solid rgba(0,106,139,0.62);
          box-shadow: -13px -5px 18px rgba(0,0,0,0.62);
}

 @keyframes fade {
      from { opacity: 0; } 
      to { opacity: 1; }     
   }
  .ciblee {
  
        animation: fade 2s;
  }      
  @keyframes pade {
      from { opacity: 0; } 
      to { opacity: 0.62; }     
   }
  .cible {
  
        animation: pade 2s;
  }   
  @keyframes rade {
      from { opacity: 0; } 
      to { opacity: 1; }     
   }
  .crible {
  
        animation: rade 6.18s;
  }