@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://www.louerlinge.com/webfonts/fa-regular-400.woff2") format("woff2"),
       url("https://www.louerlinge.com/webfonts/fa-regular-400.woff") format("woff");
}

@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  src: url("https://www.louerlinge.com/webfonts/fa-solid-900.woff2") format("woff2"),
       url("https://www.louerlinge.com/webfonts/fa-solid-900.woff") format("woff");
}


.fa, .fas, .far {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    display: inline-block;
}



.fa:before, .fas:before, .far:before {
    font-family: "Font Awesome 5 Free";
    font-weight: inherit;
    font-style: normal;
    display: inline-block;
}


.fas { font-weight: 900; }
.far { font-weight: 400; }
.far.fa-hand-point-right:before {
    content: "\f0a4";
}

.fa.facebook:before {
    content: "\f09a";
    font-weight: 900;
}

.fas.fa-times:before {
    content: "\f00d";
}
.fa-globe:before {content: "\f0ac"; }

.fas.fa-globe:before {
    content: "\f0ac";
}

h2{ font-family: 'timelessregular'!important;}


/*image accueil*/
.imgAccueil{
            background: url('../images/fdImgAcceuil.png');
            /* height: 850px; */
            background-position:center;
          /*  width: 100vw;
            height: 100vh;*/
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
    aspect-ratio: 16 / 9;
  width: 100%;
           }

.taille{max-width:420px; height:260px;}  

.hero-bg .t0{position: absolute; color:rgb(29,89,135);

text-shadow: 1px 0 1px gray;
              font-size:2.75rem; font-weight:bold;
               text-align:center;top: 40%;width:100%;    font-family: 'timelessregular';
}

.hero-bg .t1{ position: absolute; color:rgba(6, 31, 50,0); 
font-family: 'timelessregular';
  font-size:2.75rem; font-weight:bold;
            text-align:center;top: 50%;width:100%;
           left:auto;right:auto;
             animation-name: animT1;
        animation-duration: 6s;
            animation-iteration-count: 1;
            }

 .hero-bg .t11{ color:rgba(6, 31, 50,0);    font-family: 'timelessregular';
              font-size:2.75rem; 
              font-weight:bold;
   position: absolute;  left:auto;right:auto; 
     text-align:center;top: 50%;width:100%;
    animation-delay: 6s;
    animation-duration: 7s;
  animation-iteration-count: 1;
     animation-name: animT11;
    
}

.hero-bg .t2 { 
  font-family: 'timelessregular';
  font-size: 2.75rem;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  color: rgba(6, 31, 50,1);   /* couleur dearrt */
  opacity: 1;   
   animation-delay: 0s;
  animation-duration: 25s;  
   animation-iteration-count: 1;           
   animation-name: animT2;
}

@keyframes animT1 {
  0% {color:rgba(6, 31, 50, 0);}
  25%{color:rgba(6, 31, 50,0.5);}
  50% {color: rgb(6, 31, 50);}
  75%{color:rgba(6, 31, 50,0.5);} 
  100% {color:rgba(6, 31, 50,0);}  
}
@keyframes animT11 {
  0% {color:rgba(6, 31, 50,0);}
  25%{color:rgba(6, 31, 50,0.5);}
  50% {color: rgba(6, 31, 50,1);}
  75%{color:rgba(6, 31, 50,0.5);} 
  100% {color:rgba(6, 31, 50,0);}  
}

@keyframes animT2 {
  0% {color:rgba(6, 31, 50,0);}
  25%{color:rgba(6, 31, 50,0);}
  50% {color:  rgba(6, 31, 50,0);}
  75%{color:rgba(6, 31, 50,0.7);} 
  100% {color:rgba(6, 31, 50,1);}  
}
@media screen and (min-width:600px){
  .hero-bg .t0{top: 40%; font-size:26px; font-weight:bold;}
  .hero-bg .t1{top: 50%; font-size:26px; font-weight:bold;}
  .hero-bg .t2{top:50%;font-size:26px; font-weight:bold;}
    .hero-bg .t11{top:50%;font-size:26px; font-weight:bold;}
}
@media screen and (max-width:590px){
  .hero-bg .t0{top: 10%; font-size:26px; font-weight:bold;}
  .hero-bg .t1{top: 15%; font-size:26px; font-weight:bold;}
  .hero-bg .t2{top:15%;font-size:26px; font-weight:bold;}
  .hero-bg .t11{top:15%;font-size:26px; font-weight:bold;}
}

@media screen and (min-width:900px){
  .hero-bg .t0{top: 40%; font-size:2.75rem; font-weight:bold;}
  .hero-bg .t1{top: 50%; font-size:2.75rem; font-weight:bold;}
  .hero-bg .t2{top:50%;font-size:2.75rem; font-weight:bold;}
  .hero-bg .t11{top: 50%; font-size:2.75rem; font-weight:bold;}

}