.pente  {
        	box-sizing:  border-box;
         width: 100%;
         aspect-ratio: auto ;
      }
      .hici {
       position: relative;
         inset: -1.618em 0.618em;
        z-index: 5;
        width: 23em; 
         height: 62em;
         display: block;
    }
    .ici {
       position: relative;
         inset: -1.618vh 1.618vw;
        z-index: 5;
        width: 5rem;  
        display: block;
    }
     .aca {
      position: absolute;
         z-index: -2;
         display: block;
    }
      .hsous  {
        position: absolute;
        top: -2em;
        margin: -1rem;
         width: 100vw;  
         z-index: -3;
           opacity: 0.16;
       }  

      .droite  {
        position: relative;
        left: 0.618vh;
         }    
      .nun  {
    position: relative;
        inset: -1em 1.618em;
        width: 10rem ;
          display: block;   
          }
    .hic  {
    position: relative;
         top: -3.14rem;
           display: inline-block;   
          }
    
                                     /*    PILOTE     */
    
     .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;
       }    
    .vhide  {
       position: relative;
      inset: -1em 2em;
        width:  23em;
        z-index: -1;
               display: block;
    }

                                     /*    CADRE     */
        .bee  {
            height: 8em;
            width: 13em;
           margin: calc(-3vh - 2vw) 6vw;
          	box-shadow: inset 3px 5px 16px rgba(0,0,0,0.62);
     }
    .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);
         }

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

                                     /*    ELEMENT VIDEO     */
    
      .taille video { 
         padding : 0.0618em;
          height: 100%;
           width:  100%;
    }
    .exemple { 
         position: relative;
          z-index: 3;
          top: 5vh;
     display: block;   
    }
     .exempla { 
         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%;  } 
    .entra  {  position: absolute;  left: 13em;  display: block; width: 3em;   z-index: 8; } 
    
                                     /*    EFFETS   */        
    
     .verte  {
      filter: invert(26%);
    }
     .rot  {
      filter: hue-rotate(180deg);
    }
     .sat  {
      filter: saturate(6);
    }
    .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;
    }
       .typo  { 
            height:  33em;
    }
                                     /*   hauteur légère H et largeur fixe  */
     .tailli  { 
            height:  8vh;
    }
    .typ  { 
            width:  8em;
    }
                                     /*   largeur grande W et hauteur légère pourcentage   */
     .yog  { 
            height:  11%;
    }
 
                                     /*    BACKGROUND   */
     
     .elemente {
       
 background:  url("WE.jpg") no-repeat;
    background-size:  100% , 100%;
        box-shadow: 3px 5px 8px rgba(0,0,0,0.62); 
}
    
      .elementea {
             height: 45vh;
           width: 30vh;
   background:  url("15.jpg") no-repeat;
  background-size:  100% , 100%;
	box-shadow: 3px 5px 8px rgba(0,0,0,0.62);
}
    
      .elementeb {
 background:  url("fil0g.gif")  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);
}

 

.hero-image {
  background-image: url("15.jpg");
  background-color: transparent;
    background-position: center;
  background-repeat: no-repeat;
  background-size: inherit;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
  color: yellow;
}    
    
    .haut {
      position: relative;
         z-index:  4;
             display: block;   
    }
 
 @keyframes fade {
      from { opacity: 0; } 
      to { opacity: 1; }     
   }
  .ciblee {
  
        animation: fade 2s;
  }      
  @keyframes pade {
      from { opacity: 0; } 
      to { opacity: 0.16; }     
   }
  .cible {
  
        animation: pade 2s;
  }   
  @keyframes rade {
      from { opacity: 0; } 
      to { opacity: 1; }     
   }
  .crible {
  
        animation: rade 6.18s;
  }