/*  -------- début de style ---------    
                triangle
    ==================================    */
.triangle_1 {
      position: fixed; 
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 10.8%));
      clip-path: polygon(0% 0%, 0% 40%, 15% 0%);
	  z-index: -999;
}

.triangle_2 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 12.7%));
      clip-path: polygon(25% 25%, 0% 40%, 15% 0%);
	  z-index: -999;
}

.triangle_3 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 13.5%));
      clip-path: polygon(25% 25%, 0% 40%, 15% 60%);
      z-index: -999;
}

.triangle_4 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 11.6%));
      clip-path: polygon(0% 85%, 0% 40%, 15% 60%);	  
	  z-index: -999;
}

.triangle_5 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 14.7%));
      clip-path: polygon(0% 85%, 30% 90%, 15% 60%);	  
	  z-index: -999;
}

.triangle_6 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 13.9%));
      clip-path: polygon(0% 85%, 30% 90%, 5% 100%);	  
	  z-index: -999;
}

.triangle_7 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 9.2%));
      clip-path: polygon(0% 85%, 0% 100%, 5% 100%);	  
	  z-index: -999;
}

.triangle_9 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 12.4%));
      clip-path: polygon(40% 100%, 30% 90%, 5% 100%);	  
	  z-index: -999;
}

.triangle_10 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 10%));
      clip-path: polygon(40% 100%, 30% 90%, 50% 80%);	  
	  z-index: -999;
}

.triangle_11 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 10.8%));
      clip-path: polygon(25% 45%, 30% 90%, 50% 80%);	  
	  z-index: -999;
}

.triangle_12 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 17.8%));
      clip-path: polygon(25% 45%, 30% 90%, 15% 60%);	  
	  z-index: -999;
}

.triangle_13 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 18.2%));
      clip-path: polygon(25% 45%, 25% 25%, 15% 60%);	  
	  z-index: -999;
}

.triangle_14 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 15.9%));
      clip-path: polygon(15% 0%, 25% 25%, 35% 0%);	  
	  z-index: -999;
}

.triangle_15 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 17.8%));
      clip-path: polygon(25% 45%, 25% 25%, 35% 0%);	  
	  z-index: -999;
}

.triangle_16 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 15.9%));
      clip-path: polygon(25% 45%, 50% 15%, 35% 0%);	  
	  z-index: -999;
}

.triangle_17 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 15.9%));
      clip-path: polygon(60% 0%, 50% 15%, 35% 0%);	  
	  z-index: -999;
}

.triangle_18 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 14.7%));
      clip-path: polygon(60% 0%, 50% 15%, 70% 20%);	  
	  z-index: -999;
}

.triangle_19 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 11.6%));
      clip-path: polygon(60% 55%, 50% 15%, 70% 20%);	  
	  z-index: -999;
}

.triangle_20 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 12.4%));
      clip-path: polygon(60% 55%, 50% 15%, 25% 45%);	  
	  z-index: -999;
}

.triangle_21 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 12.0%));
      clip-path: polygon(60% 55%, 50% 80%, 25% 45%);	  
	  z-index: -999;
}


.triangle_22 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 7.6%));
      clip-path: polygon(60% 55%, 50% 80%, 75% 65%);	  
	  z-index: -999;
}

.triangle_23 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 4.5%));
      clip-path: polygon(70% 100%, 50% 80%, 75% 65%);	  
	  z-index: -999;
}


.triangle_25 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 7.6%));
      clip-path: polygon(70% 100%, 50% 80%, 40% 100%);	  
	  z-index: -999;
}

.triangle_26 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 12.7%));
      clip-path: polygon(70% 100%, 75% 65%, 90% 95%);	  
	  z-index: -999;
}

.triangle_27 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 12%));
      clip-path: polygon(70% 100%, 100% 100%, 90% 95%);	  
	  z-index: -999;
}


.triangle_28 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 4.5%));
      clip-path: polygon(100% 75%, 100% 100%, 90% 95%);	  
	  z-index: -999;
}

.triangle_29 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 15.1%));
      clip-path: polygon(100% 75%, 85% 55%, 90% 95%);	  
	  z-index: -999;
}


.triangle_30 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 13.1%));
      clip-path: polygon(75% 65%, 85% 55%, 90% 95%);	  
	  z-index: -999;
}

.triangle_31 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 12.7%));
      clip-path: polygon(100% 75%, 85% 55%, 100% 20%);	  
	  z-index: -999;
}

.triangle_32 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 11.6%));
      clip-path: polygon(85% 15%, 85% 55%, 100% 20%);	  
	  z-index: -999;
}

.triangle_33 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 12.7%));
      clip-path: polygon(85% 15%, 100% 0%, 100% 20%);	  
	  z-index: -999;
}

.triangle_34 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 13.1%));
      clip-path: polygon(85% 15%, 100% 0%, 80% 0%);	  
	  z-index: -999;
}

.triangle_35 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 12.4%));
      clip-path: polygon(85% 15%, 70% 20%, 80% 0%);	  
	  z-index: -999;
}

.triangle_36 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 13.1%));
      clip-path: polygon(60% 0%, 70% 20%, 80% 0%);	  
	  z-index: -999;
}

.triangle_37 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 13.9%));
      clip-path: polygon(85% 55%, 70% 20%, 85% 15%);	  
	  z-index: -999;
}

.triangle_38 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 12.0%));
      clip-path: polygon(85% 55%, 70% 20%, 60% 55%);	  
	  z-index: -999;
}

.triangle_39 {
      position: fixed;
	  top: 0%; 
	  left: 0%;
      height: 100%;
      width: 100%;
      transition: 200ms;
      background: hsl(var(--wpH), var(--wpS), calc(var(--wpL) + 11.2%));
      clip-path: polygon(85% 55%, 75% 65%, 60% 55%);	  
	  z-index: -999;
}




.triangle_1:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_2:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_3:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_4:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_5:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_6:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_7:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_8:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_9:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_10:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_11:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_12:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_13:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_14:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_15:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_16:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_17:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_18:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}
.triangle_19:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_20:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_21:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_22:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_23:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_24:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_25:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_26:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_27:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_28:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}
.triangle_29:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}


.triangle_30:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_31:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_32:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_33:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_34:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_35:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_36:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_37:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}

.triangle_38:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}
.triangle_39:hover {
      filter: brightness(var(--brightness));
      transition-timing-function: ease-in-out;  
}


/*  -------- fin de style ---------    
                triangle
    ==================================    */


/*  =========  responsive - DEBUT =========  */
@media screen and (min-width: 800px) 

/*  =========  responsive - masquer =========  */
{

/*  -------- début de style ---------    
                 omlin fond
    ==================================    */
      .omlinBigScreen  {
      position: absolute;
      top: 38%;
      left: 50%;
      vertical-align: middle;
      transform: translateX(-563px);
      color: hsla(var(--wpH), var(--wpS), calc(100% - var(--wpL)), 0.35);
      font-family: 'Tahoma', Verdana, sans-serif;
	  font-weight: bold;
      font-size:170px;
      letter-spacing: -15px;
	  cursor : default;
	  z-index: -998;
      }
      
      .conceptionBigScreen  {
      position: absolute;
      top: 38%;
      left: 50%;
      vertical-align: middle;
      transform: translateX(-155px);
      color: hsla(var(--wpH), var(--wpS), calc(100% - var(--wpL)), 0.35);
      font-family: 'Tahoma', Verdana, sans-serif;
	  font-weight: normal;
      font-size:170px;
      letter-spacing: -10px;
	  cursor : default;
	  z-index: -998;
      }


/*  -------- fin de style ---------    
                 omlin fond
    ==================================    */


/*  -------- début de style ---------    
                 FADE IN
    ==================================    */

@-webkit-keyframes fading {
    from {
        opacity: 0;
    }
    to {
         opacity: 1;   
    }
}
@-moz-keyframes fading {
    from {
        opacity: 0;
    }
    to {
         opacity: 1;   
    }
}

@keyframes fading {
    from {
        opacity: 0;
    }
    to {
         opacity: 1;   
    }
}
.invisible {
    opacity: 0;
    -webkit-animation: fading ease-in 1.5s;
    animation: fading ease-in 1.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1.0s;
    animation-duration: 1.0s;
}

.invisible.one {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s
}

.invisible.two {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s
}

.invisible.three {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}
}
/*  -------- fin de style ---------    
                FADE IN
    ==================================    */

/*  -------- début de style ---------    
             pied de page
    ==================================    */
	.pied_page_rectangle {
      position: fixed;
	  bottom: 0px; 
	  left: 0px;
      margin: 0 auto;
      width: 100%;
	  height: var(--footerHeight);
      text-align: left;
      background-color: hsla(var(--banH), var(--banS), var(--banL), 1);
      font-family: 'Tahoma', Verdana, sans-serif;
	  font-weight: bold;
	  font-size:18px;
		z-index:50;
      }

	.pied_page_txt_omlin {
      position: fixed;
	  bottom: 13px; 
	  left: 25px;
      text-align: left;
      color: hsla(var(--banH), var(--banS), calc(100% - var(--banL)), 1);
      font-family: 'Tahoma', Verdana, sans-serif;
	  font-weight: bold;
	  font-size:13px;
	  cursor: default;
		pointer-events: none;
		z-index:51;
      }

	.pied_page_txt_conception {
      position: fixed;
	  bottom: 13px; 
	  left: 61px;
      text-align: left;
      color: hsla(var(--banH), var(--banS), calc(100% - var(--banL)), 1);
      font-family: 'Tahoma', Verdana, sans-serif;
	  font-weight: normal;
	  font-size:13px;
	  cursor: default;
				z-index:51;
      }

	.pied_page_txt_T_telephone {
      position: fixed;
	  bottom: 13px; 
	  left: 180px;
      text-align: left;
      color: hsla(var(--banH), var(--banS), calc(100% - var(--banL)), 1);
      font-family: 'Tahoma', Verdana, sans-serif;
      font-weight: bold;
	  font-size:13px;
	  cursor: default;
		z-index:51;
      }

	.pied_page_txt_telephone {
      position: fixed;
	  bottom: 13px; 
	  left: 198px;
      text-align: left;
      color: hsla(var(--banH), var(--banS), calc(100% - var(--banL)), 1);
      font-family: 'Tahoma', Verdana, sans-serif;
	  font-weight: normal;
	  font-size:13px;
	  cursor: default;
		z-index:51;
      }

	.pied_page_txt_E_mail {
      position: fixed;
	  bottom: 13px; 
	  left: 330px;
      text-align: left;
      color: hsla(var(--banH), var(--banS), calc(100% - var(--banL)), 1);
      font-family: 'Tahoma', Verdana, sans-serif;
      font-weight: bold;
	  font-size:13px;
	  cursor: default;
		z-index:51;
      }

.pied_page_mail  {
  position: fixed;
  bottom: 11px; 
  left: 350px;
  text-align: left;
  color: hsla(var(--banH), var(--banS), calc(100% - var(--banL)), 1);
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: 'Tahoma', Verdana, sans-serif;
  font-weight: normal;
  font-size:13px;
  cursor : pointer;
  transition: transform .2s;
  padding: 2px 0px; 
  z-index:51;  
  }
.pied_page_mail::before {
    content : '';
	display: block;
	height: 1px;
	background: rgb(var(--hover1),1);
    z-index: 20;
	position: absolute;
	top: 20px;
	left: 0;
	right: 0;
	transform: scale(0, 1);
	transition: transform ease-in-out 250ms;
     }
.pied_page_mail:hover::before {
	transform: scale(1, 1);
     }   

a.pied_page_mail:hover {
  color : rgb(var(--hover1));
}
	

    .pied_page_txt_copyright_index {
      position: fixed;
	  bottom: 13px; 
	  right: 25px;
      text-align: left;
      color: hsla(var(--banH), var(--banS), calc(100% - var(--banL)), 1);
      font-family: 'Tahoma', Verdana, sans-serif;
	  font-weight: normal;
	  font-size:13px;
	  cursor: default;
      z-index:51; 
      }

    .pied_page_txt_copyright {
      position: fixed;
	  bottom: 13px; 
	  right: calc( 25px + 45px);
      text-align: left;
      color: hsla(var(--banH), var(--banS), calc(100% - var(--banL)), 1);
      font-family: 'Tahoma', Verdana, sans-serif;
	  font-weight: normal;
	  font-size:13px;
	  cursor: default;
      z-index:51; 
      }

    .pied_page_txt_num_mandat {
      position: fixed;
	  bottom: 13px; 
	  right: 25px;
      text-align: left;
      color: hsla(var(--banH), var(--banS), calc(100% - var(--banL)), 1);
      font-family: 'Tahoma', Verdana, sans-serif;
	  font-weight: normal;
	  font-size:13px;
	  cursor: default;
      z-index:51; 
      }


/*  -------- fin de style ---------    
             pied de page
    ==================================    */


/*  -------- début de style ---------    
                entête
    ==================================    */
    .entete_rectangle {
      position: fixed;
	  top: 0px; 
	  left: 0px;
      margin: 0 auto;
      width: 100%;
	  height: var(--headerHeight); 
      text-align: left;
      background-color: hsla(var(--banH), var(--banS), var(--banL), 1);
      font-family: 'Tahoma', Verdana, sans-serif;
	  font-weight: bold;
	  font-size:18px;
	  z-index:19;
      }

	.entete_logo_omlin_haut_gauche {
      position: fixed;
	  top: 15px; 
	  left: 25px;
      text-align: left;
      color: hsla(var(--banH), var(--banS), calc(100% - var(--banL)), 1);
      font-family: 'Tahoma', Verdana, sans-serif;
	  font-weight: bold;
	  font-size:22px;
      letter-spacing: -0.8px;
	  cursor: default;
	  z-index:20;
      }
    
	.entete_logo_conception_haut_gauche {
      position: fixed;
	  top: 15px; 
	  left: 83px;
      text-align: left;
      color: hsla(var(--banH), var(--banS), calc(100% - var(--banL)), 1);
      font-family: 'Tahoma', Verdana, sans-serif;
	  font-weight: normal;
	  font-size:22px;
      letter-spacing: -0.8px;
	  cursor: default;
	  z-index:20;
      }

/*  -------- fin de style ---------    
                entête
    ==================================    */




	  
/*  -------- début de style ---------    
             bouton "login"
    ==================================    */
     .entete_txt_login {
	  position: absolute;
	  padding: 5px;
	  top: 15px; 
	  right: 20px;
      text-align: middle;
      color: hsla(var(--banH), var(--banS), calc(100% - var(--banL)), 1);
      text-decoration: none;
      font-family: 'Tahoma', Verdana, sans-serif;
	  font-weight: bold;
	  font-size:17px;
	  cursor: pointer;
	  transition: transform .2s;
	  z-index: 20;
      }
  .entete_txt_login::before {
    content : '';
	display: block;
	height: 3px;
	background: rgb(var(--accent1),1);
    z-index: 20;
	position: absolute;
	top: -4px;
	left: 0;
	right: 0;
	transform: scale(0, 1);
	transition: transform ease-in-out 250ms;
     }
.entete_txt_login:hover::before {
	transform: scale(0.8, 1);
     }
 
 .entete_txt_login:hover {
    color : rgb(var(--hover1));
     }
/*  -------- fin de style ---------    
             bouton "login"
    ==================================    */



/*  -------- début de style ---------    
             contact small screen
    ==================================    */

	.contact_small_screen_T_telephone {
      position: fixed;
	  top: calc( 60% + 55px + 100px);
	  left: 18px;		
      text-align: left;
      color: hsla(var(--wpH), var(--wpS), calc(100% - var(--wpL)), 0.35);
      font-family: 'Tahoma', Verdana, sans-serif;
      font-weight: bold;
	  font-size:13px;
	  cursor: default;
      }

	.contact_small_screen_telephone {
      position: fixed;
	  top: calc( 60% + 55px + 100px);
	  left: calc( 18px + 15px);
      text-align: left;
      color: hsla(var(--wpH), var(--wpS), calc(100% - var(--wpL)), 0.35);
      font-family: 'Tahoma', Verdana, sans-serif;
	  font-weight: normal;
	  font-size:13px;
	  cursor: default;
      }

	.contact_small_screen_E_mail {
      position: fixed;
	  top: calc( 60% + 55px + 120px);
	  left: 18px;	
      text-align: left;
      color: hsla(var(--wpH), var(--wpS), calc(100% - var(--wpL)), 0.35);
      font-family: 'Tahoma', Verdana, sans-serif;
      font-weight: bold;
	  font-size:13px;
	  cursor: default;
      }

.contact_small_screen_mail  {
  position: fixed;
  top: calc( 60% + 55px + 118px);
  left: calc( 18px + 15px);
  text-align: left;
  color: hsla(var(--wpH), var(--wpS), calc(100% - var(--wpL)), 0.35);
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: 'Tahoma', Verdana, sans-serif;
  font-weight: normal;
  font-size:13px;
  cursor : pointer;
  transition: transform .2s;
  padding: 2px 0px; 
  z-index:20;  
  }
.contact_small_screen_mail::before {
    content : '';
	display: block;
	height: 1px;
	background: rgb(var(--hover1),1);
    z-index: 20;
	position: absolute;
	top: 20px;
	left: 0;
	right: 0;
	transform: scale(0, 1);
	transition: transform ease-in-out 250ms;
     }
.contact_small_screen_mail:hover::before {
	transform: scale(1, 1);
     }   

a.contact_small_screen_mail:hover {
  color : rgb(var(--hover1));
}




/*  
/*  /*  -------- début de style ---------    
/*                 loader GIF
/*      ==================================    */
/*  #preloader{
/*  background: rgba(0,0,0,0) url(../../Image/loader_gris_fondu.gif) no-repeat center center;
/*  background-size: 50%;
/*  height: 100vh;
/*  width: 100%;
/*  position: fixed;
/*  z-index: 10
/*  }
/*  

/*  -------- début de style ---------    
               loader pure CSS
https://codepen.io/WebSonata/pen/bRaONB
    ==================================    */

#preloader {
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	z-index: 999999999999999;
	cursor: wait;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 6px solid transparent;
    border-top-color: rgb(4,170,109);
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
	z-index: 999999999999999;
}
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 6px solid transparent;
    border-top-color: rgb(230,70,65);
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
	z-index: 999999999999999;
}
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 6px solid transparent;
    border-top-color: rgb(51,51,51);
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
	z-index: 999999999999999;
}
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}



/*  -------- début de style ---------    
text non sélectionnable pour l'entier du site 
    ==================================    */

html {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}