html, body { 
    margin:0;
    padding:0;
    height:100%;
    font-size: 1em;
    font-family: Inter, sans-serif;
    position: relative;
    background-repeat:no-repeat;
    /*overflow-x: hidden;  /*Pour éviter BUG scrolling horizontal à droite*/ /*ICI DESACTIVER CAR BUG TRES GROS BLANC EN DESSOU DU FOOTER*/
}
  
.text-family { 
  font-family: Inter, sans-serif;
  font-size: 1.2em; 
  color:#646161;
  margin-top : 20px;
  }


/*BARRE DE NAVIGATION HEAD*/
/*BARRE DE NAVIGATION HEAD*/
/*BARRE DE NAVIGATION HEAD*/

.barre-nav { 
  font-size: 1.6em;
  margin-top: 15px;
  font-family: Inter, sans-serif;
}
  @media (max-width : 769px) {
  .barre-nav { 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  }
  .barre-nav-1:hover { 
    list-style: none;
    text-decoration: none;
    color: #cba675;
  }
    .barre-nav-1 
    {color:gray;
    padding:10px 40px 10px 40px; }
    @media (max-width : 769px) {
      .barre-nav-1 { 
        padding:5px 0px 5px 0px
      }
    }
  



/*ANIMATION DRAPEAU*/
    /*ANIMATION DRAPEAU*/
  /*ANIMATION DRAPEAU*/
  .flag-focus { 
    animation : flag-focus linear 2.5s;}
  @keyframes flag-focus {
    0% {
        opacity : 0 ;
        transform : translate (350px)
    }
    100% { 
        opacity : 1 ;
        transform : translateY (0px) ;
    }
}
.flag-focus-active{
  border: 0; cursor: pointer; 
}
.flag-focus-active:hover, .flag-focus-active:focus { transform: scale(1.1, 1.1);}




    
   /*Effet Maisons du Japon stylé*/
        /*Effet Maisons du Japon stylé*/
        /*Effet Maisons du Japon stylé*/

        svg text {
          font-family: Lora;
          letter-spacing: 5px;
          stroke: #cba675;
          font-size: 2.3em;
          font-weight: 700;
          stroke-width: 2;
          animation: textAnimate 4s infinite alternate;
        }
        
        @keyframes textAnimate {
          0% {
            stroke-dasharray: 0 50%;
            stroke-dashoffset:  5%;
          }
          100% {
            stroke-dasharray: 50% 0;
            stroke-dashoffstet: -100%;
            fill: hsla(189, 68%, 75%,0%)
          }
        }

        @media (max-width : 600px) {svg text { font-size: 2em;}}
        @media (max-width : 533px) {svg text { font-size: 1.7em;}}
        @media (max-width : 470px) {svg text { font-size: 1.5em;}}
        @media (max-width : 421px) {svg text { font-size: 1.3em;font-weight: 0;}}
        @media (max-width : 373px) {svg text { font-size: 1.1em;}}





 /* TRAIT GRIS */
.trait-gris { 
    border-top: 2px solid #d8d8d8;
    width : 80% ;
    display: flex;
    justify-content:center;
    margin:auto;
    margin-top: 25px;
}





    /* Image page acceuil en background */
    /* Image page acceuil en background */
    /* Image page acceuil en background */
    .featured1 { 
      height : 80%;
      background: url(../Photo/Newsletter/Image\ -\ Acceuil\ Newsletter.jpg) 
      center center no-repeat fixed; /* no-repeat et surtout  "fixed" permet de créer l'effet lorsqu'on scroll, que l'image ne bouge pas*/
      display:grid;
      background-size:cover;
      margin-top : 30px ;
  }
  /*Pour réparer bug sur apple de merd qui fait disparaitre image en background ou l'a met pas en pleine écran*/
@supports ( -webkit-touch-callout : none) {
.featured1 {background-attachment:scroll}}
@supports not ( -webkit-touch-callout : none) {
.featured1 {background-attachment: fixed;}}



  /*bloc parent du titre et bouton*/
  /*bloc parent du titre et bouton*/
  /*bloc parent du titre et bouton*/
  .featuredText { 
      display: flex;
      flex-direction : column; /*Pour disposer élément du bloc en colomne, OUBLIE PAS*/
      justify-content: center;
      align-items:center;
  }
  h1 {  
    font-size: clamp(3rem, 4vw, 5em) ;
    color:white;
    text-align : center;
    animation : titre linear 2.5s; }
    @keyframes titre {
        0% {
            opacity : 0 ;
            transform : translate (350px)
        }
        100% { 
            opacity : 1 ;
            transform : translateY (0px) ;
        }
    }
    


/* TITRE H2 EN HAUT DES 5 RAISONS*/
/* TIIRE H2 EN HAUT DES 5 RAISONS*/
/* TITRE H2 EN HAUT DES 5 RAISONS*/

    .div-titre-h2 { 
        display:flex;
        flex-direction: column;
        align-items: center;
    }
      .h2-5-raisons { 
        color:#cba675; 
        font-size: clamp(4.5rem, 10vw, 6em);
        font-weight: bold; 
        margin-top : 30px;
        font-family: bodoni MT;
      }
      .h3-5-raisons { 
        color:#cba675; 
        font-size: clamp(2.5rem, 5vw, 3em);
        font-weight: bold; 
        text-align: center;
        font-family: bodoni MT;
      }
      .paragraphe-général-5-raisons { 
        color: #646161; 
        font-size : 1.4em; 
        text-align: center

      }
  
    .five-reasons-why { 
      width:516px;
      height:auto;
      margin-top : 15px;
      box-shadow: 25px 30px 15px rgba(0,0,0,0.3)
      }
      @media (max-width: 518px) { 
        .five-reasons-why {
            width:100%
        }
      }



  
  
/* IMAGES DES FIVE REASONS WHY */
/* IMAGES DES FIVE REASONS WHY */
/* IMAGES DES FIVE REASONS WHY */
.background-1 { 
    background-image: url(../Photo/Newsletter/Image\ -\ Raison\ numéro\ 1\ abonnement\ Newsletter.jpg);
}
.background-2 { 
    background-image: url(../Photo/Newsletter/Image\ -\ Raison\ numéro\ 2\ abonnement\ Newsletter.jpg);
}
.background-3 { 
    background-image: url(../Photo/Newsletter/Image\ -\ Raison\ numéro\ 3\ abonnement\ Newsletter.jpg);
}
.background-4 { 
    background-image: url(../Photo/Newsletter/yoo.png);
}
.background-5 { 
  background-image: url(../Photo/Newsletter/Image\ -\ Raison\ numéro\ 5\ new\ abonnement\ Newsletter\.png);
}

.background-6 { 
  background-image: url(../Photo/Newsletter/Image\ -\ Raison\ numéro\ 6\ abonnement\ Newsletter.png);
}


/*NUMERO 1 */
.position-numéro-1 { 
    position: relative;
    left:  -220px;
    top: 200px;  
    margin: 0px auto 0px auto
}
.background-numéro-1{
    position: relative;
    background-repeat: no-repeat;
    background-size:cover;
    width: 550px;
    height: 350px;  
    left:  300px;
    top: -170px;  
    margin: 0px auto 0px auto;
    border:#cba675 5px solid;
 }
 
.div-rond-marron-numéro-1 { 
    display:flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 50%;
    width: 300px;
    height:300px;
    background-color: #cba675;
    position: relative;
    margin: 0px auto 0px auto;
    left: -25px; 
    top: -500px;
}
.numéro-1-liste { 
    color:white;
    font-weight:bold;
    font-size: 1.2em;
    position: absolute;
    bottom: 80%;
    border:1px solid white;
    border-radius:50%;
    padding:5px 15px 5px 15px
}
.h5-numéro-1{ 
    font-size: 1.2em;
    color:white;
    font-weight:bold;
    position: absolute;
    bottom: 60%; }

.h5-numéro-1-englishversion{ bottom: 65%; } /*REPOSITIONEMENT ENGLISH VERSION*/


.paragraphe-inside-rond-numéro-1 { 
color:white;
position: absolute;
bottom: 13%;
}
.paragraphe-inside-rond-numéro-1-englishversion { bottom: 15%; } /*REPOSITIONEMENT ENGLISH VERSION*/
@media (max-width : 850px) {
.position-numéro-1 { 
    top: 300px; 
}
}
@media (max-width : 850px) {
.background-numéro-1 { 
    left:  220px;
    width: 95%;
}
}
@media (max-width : 850px) {
.div-rond-marron-numéro-1 { 
    left: 219px; 
    top: -650px;
}
}
@media (max-width : 300px) {
.div-rond-marron-numéro-1 { 
    width:100%
}
}


/*NUMERO 2 */
.position-numéro-2 { 
position: relative;
left:  -150px;
top: -80px;  
margin: 0px auto 0px auto
}
.background-numéro-2{
position: relative;
background-repeat: no-repeat;
background-size:cover;
width: 550px;
height: 350px;  
left:  107px;
top: -170px;  
margin: 0px auto 0px auto;
border:#8bccc0 5px solid;
}
.div-rond-marron-numéro-2 { 
display:flex;
flex-direction: column;
align-items: center;
text-align: center;
border-radius: 50%;
width: 300px;
height:300px;
background-color: #8bccc0;
position: relative;
margin: 0px auto 0px auto;
right: -440px; 
top: -500px;
}
.numéro-2-liste { 
color:white;
font-weight:bold;
font-size: 1.2em;
position: absolute;
bottom: 80%;
border:1px solid white;
border-radius:50%;
padding:5px 15px 5px 15px
}
.h5-numéro-2{ 
font-size: 1.2em;
color:white;
font-weight:bold;
position: absolute;
bottom: 60%; }
.h5-numéro-2-englishversion{bottom: 65%;}  /*REPOSITIONEMENT ENGLISH VERSION*/
.paragraphe-inside-rond-numéro-2 { 
color:white;
position: absolute;
bottom: 12%;
}
.paragraphe-inside-rond-numéro-2-englishversion { bottom: 16% }  /*REPOSITIONEMENT ENGLISH VERSION*/
@media (max-width : 850px) {
.position-numéro-2 { 
    top: 10px; 
}
}
@media (max-width : 850px) {
.background-numéro-2 { 
    left:  150px;
    width: 95%;
}
}
@media (max-width : 850px) {
.div-rond-marron-numéro-2 { 
    left: 148px; 
    top: -650px;
}
}
@media (max-width : 300px) {
.div-rond-marron-numéro-2 { 
    width:95%
}
}


/*NUMERO 3 */
.position-numéro-3 { 
position: relative;
left:  -220px;
top: -360px;  
margin: 0px auto 0px auto
}
.background-numéro-3{
position: relative;
background-repeat: no-repeat;
background-size:cover;
background-position: 20%; /*Parce que l'image avait un espace de 5% environ chelou*/
width: 550px;
height: 350px;  
left:  300px;
top: -170px;  
margin: 0px auto 0px auto;
border:#cba675 5px solid;
}

.div-rond-marron-numéro-3 { 
display:flex;
flex-direction: column;
align-items: center;
text-align: center;
border-radius: 50%;
width: 300px;
height:300px;
background-color: #cba675;
position: relative;
margin: 0px auto 0px auto;
left: -25px; 
top: -500px;
}
.numéro-3-liste { 
color:white;
font-weight:bold;
font-size: 1.2em;
position: absolute;
bottom: 78%;
border:1px solid white;
border-radius:50%;
padding:5px 15px 5px 15px
}
.h5-numéro-3{ 
font-size: 1.2em;
color:white;
font-weight:bold;
position: absolute;
bottom: 65%; }
.h5-numéro-3-enslighversion{ bottom: 57% } /*REPOSITIONEMENT ENGLISH VERSION*/
.paragraphe-inside-rond-numéro-3 { 
color:white;
position: absolute;
bottom: 10%;
}
.paragraphe-inside-rond-numéro-3-enslighversion{ bottom: 10% } /*REPOSITIONEMENT ENGLISH VERSION*/
@media (max-width : 850px) {
.position-numéro-3 { 
    top: -280px; 
}
}
@media (max-width : 850px) {
.background-numéro-3 { 
    left:  220px;
    width: 95%;
}
}
@media (max-width : 850px) {
.div-rond-marron-numéro-3 { 
    left: 218px; 
    top: -650px;
}
}
@media (max-width : 300px) {
.div-rond-marron-numéro-3 { 
    width:95%
}
}


/*NUMERO 4 */
.position-numéro-4 { 
position: relative;
left:  -148px;
top: -637px;  
margin: 0px auto 0px auto
}
.background-numéro-4{
position: relative;
background-repeat: no-repeat;
background-size:cover;
width: 550px;
height: 350px;  
left:  107px;
top: -170px;  
margin: 0px auto 0px auto;
border:#8bccc0 5px solid;
}
.div-rond-marron-numéro-4 { 
display:flex;
flex-direction: column;
align-items: center;
text-align: center;
border-radius: 50%;
width: 300px;
height:300px;
background-color: #8bccc0;
position: relative;
margin: 0px auto 0px auto;
right: -440px; 
top: -500px;
}
.numéro-4-liste { 
color:white;
font-weight:bold;
font-size: 1.2em;
position: absolute;
bottom: 80%;
border:1px solid white;
border-radius:50%;
padding:5px 15px 5px 15px
}
.h5-numéro-4{ 
font-size: 1.2em;
color:white;
font-weight:bold;
position: absolute;
bottom: 65%; }
.h5-numéro-4-englishversion{ bottom: 65%; }
.paragraphe-inside-rond-numéro-4 { 
color:white;
position: absolute;
bottom: 17%;
}
.paragraphe-inside-rond-numéro-4-englishversion { bottom: 17%; }
@media (max-width : 850px) {
.position-numéro-4 { 
    top: -569px; 
}
}
@media (max-width : 850px) {
.background-numéro-4 { 
    left:  148px;
    width: 95%;
}
}
@media (max-width : 850px) {
.div-rond-marron-numéro-4 { 
    left: 146px; 
    top: -650px;
}
}
@media (max-width : 300px) {
.div-rond-marron-numéro-4 { 
    width:100%
}
}


/*NUMERO 5 */
.position-numéro-5 { 
position: relative;
left:  -220px;
top: -913px;  
margin: 0px auto 0px auto
}
.background-numéro-5{
position: relative;
background-repeat: no-repeat;
background-size:cover;
background-position: 20%; /*Parce que l'image avait un espace de 5% environ chelou*/
width: 550px;
height: 350px;  
left:  300px;
top: -170px;  
margin: 0px auto 0px auto;
border:#cba675 5px solid;
}

.div-rond-marron-numéro-5 { 
display:flex;
flex-direction: column;
align-items: center;
text-align: center;
border-radius: 50%;
width: 300px;
height:300px;
background-color: #cba675;
position: relative;
margin: 0px auto 0px auto;
left: -25px; 
top: -500px;
}
.numéro-5-liste { 
color:white;
font-weight:bold;
font-size: 1.2em;
position: absolute;
bottom: 80%;
border:1px solid white;
border-radius:50%;
padding:5px 15px 5px 15px
}
.h5-numéro-5{ 
font-size: 1.2em;
color:white;
font-weight:bold;
position: absolute;
bottom: 65%; }
.h5-numéro-5-englishversion{ bottom: 58%; }
.paragraphe-inside-rond-numéro-5 { 
color:white;
position: absolute;
bottom: 17%;
}
.paragraphe-inside-rond-numéro-5-englishversion { bottom: 18%; }
@media (max-width : 850px) {
.position-numéro-5 { 
    top: -858px; 
}
}
@media (max-width : 850px) {
.background-numéro-5 { 
    left:  220px;
    width: 95%;
}
}
@media (max-width : 850px) {
.div-rond-marron-numéro-5 { 
    left: 221px; 
    top: -650px;
}
}
@media (max-width : 300px) {
.div-rond-marron-numéro-5 { 
    width:100%
}
}




/*NUMERO 6 */
.position-numéro-6 { 
  position: relative;
  left:  -148px;
  top: -1188px;  
  margin: 0px auto 0px auto
  }
  .background-numéro-6{
  position: relative;
  background-repeat: no-repeat;
  background-size:cover;
  width: 550px;
  height: 350px;  
  left:  107px;
  top: -170px;  
  margin: 0px auto 0px auto;
  border:#8bccc0 5px solid;
  }
  .div-rond-marron-numéro-6 { 
  display:flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 50%;
  width: 300px;
  height:300px;
  background-color: #8bccc0;
  position: relative;
  margin: 0px auto 0px auto;
  right: -440px; 
  top: -500px;
  }
  .numéro-6-liste { 
  color:white;
  font-weight:bold;
  font-size: 1.2em;
  position: absolute;
  bottom: 80%;
  border:1px solid white;
  border-radius:50%;
  padding:5px 15px 5px 15px
  }
  .h5-numéro-6{ 
  font-size: 1.2em;
  color:white;
  font-weight:bold;
  position: absolute;
  bottom: 65%; }
  .h5-numéro-6-englishversion{ bottom: 60%; }
  .paragraphe-inside-rond-numéro-6 { 
  color:white;
  position: absolute;
  bottom: 17%;
  }
  .paragraphe-inside-rond-numéro-6-englishversion { bottom: 11%; }
  @media (max-width : 850px) {
  .position-numéro-6 { 
      top: -1146px; 
  }
  }
  @media (max-width : 850px) {
  .background-numéro-6 { 
      left:  148px;
      width: 95%;
  }
  }
  @media (max-width : 850px) {
  .div-rond-marron-numéro-6 { 
      left: 146px; 
      top: -650px;
  }
  }
  @media (max-width : 300px) {
  .div-rond-marron-numéro-6{ 
      width:100%
  }
  }

















.rotation-de-ouf{
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.rotation-de-ouf:hover{
transform:rotate3d(0,1,0,360deg);
}







/*CONSULTER ANNONCE INTERACTIVE*/
/*CONSULTER ANNONCE INTERACTIVE*/
/*CONSULTER ANNONCE INTERACTIVE*/

.div-h2-under-numéros {
position:relative;
top: -1550px;
left: 0px;
;
}

.h2-under-numéros { 
color:#cba675; 
font-size: clamp(2.5rem, 4.3vw, 2.7em);
font-weight: bold; 
text-align:center;
}

.under-numeros { 
margin-top: 20px;
color: #646161; 
font-size : 1.3em; 
text-align: center
}
.vidéo-div{
position: relative;
left: 90px;
height:auto;
}
@media (max-width : 991px) {
  .vidéo-div { left:0px; }}

.vidéo{
  border:5px solid #cba675; 
  border-radius:30px;
  width: 80%;
  height:500;

}
@media (max-width : 991px) {
  .vidéo { 
      width: 100%;
      height:100%;
  }
  }

.div-symbole { 
margin-top : 35px;
position:relative;
left: 0px;
border: 2px solid #acacac;
border-left: 10px solid #cba675;
border-radius: 30px;
padding: 20px;
width: 60%;
background-color:rgb(247, 243, 240);

}
@media (max-width : 1199px) {
  .div-symbole { 
      width: 70%;
      padding:10px 0px 0px 25px
  }
  }
  
@media (max-width : 991px) {
  .div-symbole { 
      width: 100%;
  }
  }
  @media (max-width : 991px) {
    .div-symbole { 
        width: 100%;
        padding:10px 0px 0px 25px
    }
    }

    .symbole { 
      font-size : 1.2em; 
      text-align:center;
      margin-right:20px;
      list-style-type: none;
      text-align:left;
      margin-top: 20px;
      color: #646161; 
      }
      @media (max-width : 991px) {
        .symbole { 
          font-size : 1.1em; 
          padding:5px;
        }
        }
      
      .span-symbole {
        font-size : 1.4em; 
        color: #646161; 
      }
      @media (max-width : 991px) {
        .span-symbole { 
          font-size : 1.1em; 
        }
        }
        @media (max-width : 767px) {
          .div-symbole { 
            font-size : 1.1em; 
          }
          }
      
/*PROTECTION ANTI ENREGISTRER SOUS*/ 
/*PROTECTION ANTI ENREGISTRER SOUS*/ 
  .div-symbole-protection { 
    position: absolute;
    opacity:0;
    height:170px;
    width:100%
  }
.symbole-img-protection {
  position: absolute;
  opacity:1;
  height:250px;
  width:100%;
  top:-260px;
}
@media (max-width : 333px) {
  .symbole-img-protection { 
     height:400px;
     top:-400px;
  }
  }
  @media (max-width : 230px) {
    .symbole-img-protection { 
       height:700px;
       top:-700px;
    }
    }
    @media (max-width : 157px) {
      .symbole-img-protection { 
         height:1000px;
         top:-1000px;
      }
      }
      @media (max-width : 95px) {
        .symbole-img-protection { 
          width:100px;
        }
        }
  









  #image-carte-1 { 
    background-image: url(../Photo/Newsletter/0-40K.png);
  }
  #image-carte-2 { 
    background-image: url(../Photo/Newsletter/40K-70K.png);
  }
  #image-carte-3 { 
    background-image: url(../Photo/Newsletter/70K-100K.png);
  }
  #image-carte-4 { 
    background-image: url(../Photo/Newsletter/100K-150K.png);
  }
  #image-carte-5 { 
    background-image: url(../Photo/Newsletter/150K+.png);
  }

  #image-carte-1-en { 
    background-image: url(../Photo/Newsletter/0-40K.png);
  }
  #image-carte-2-en { 
    background-image: url(../Photo/Newsletter/40K-70K.png);
  }
  #image-carte-3-en { 
    background-image: url(../Photo/Newsletter/70K-100K.png);
  }
  #image-carte-4-en { 
    background-image: url(../Photo/Newsletter/100K-150K.png);
  }
  #image-carte-5-en { 
    background-image: url(../Photo/Newsletter/150K+.png);
  }
  
  #image-carte-5-IG-en { 
    background-image: url(../Photo/Newsletter/rdgfgfrd.JPG);
  }

.image-carte {
background-size: 50px 40px;
width:50px;
height:40px;
border-radius:50%;
padding:15px;

}

.image-carte-5-IG {
  background-size: 13em;
  width:13em;
  height:2.6em;
  padding:20px 0px 20px 20px;
  background-repeat: no-repeat;
  list-style-type: none;
  font-size: 1em;
  border:none;
  color:transparent;
  }







/*TRAIT GRIS DECO*/
.trait-gris-payment { 
    position: relative;
    top: -820px;
    border-top: 2px solid #d8d8d8;
    width : 90% ;
    display: flex;
    justify-content:center;
    margin:auto;
}





/*ANIMATION TEMPORAIRE 5K INSTAGRAM*/
/*ANIMATION TEMPORAIRE 5K INSTAGRAM*/
/*ANIMATION TEMPORAIRE 5K INSTAGRAM*/


/*
@import url('https://fonts.googleapis.com/css?family=Roboto:300');

.body-escape{
  text-align:center;
  color:#242424;
  font-family:'Roboto';
  font-weight:bold;
  font-size:2em;
  overflow:hidden;
  position: relative;
  top:-800px;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform: translate3d(0,0,0);
}
@media (max-width : 991px) {.body-escape{ opacity:0}}

.body-escape-f {  left:-90px;}
.body-escape-EN {  left:-85px;}

.span-1 {
  animation-iteration-count: 1;
}

.div-g {display:inline-block;white-space:nowrap;}

.div-1 {animation: showup 7s infinite;}
@media (max-width : 991px) {.div-1 { animation:none}}

.div-2{width:0px;animation: reveal 7s infinite;}
@media (max-width : 991px) {.div-2 { animation:none}}

.div-2 .span-1 {margin-left:-355px;animation: slidein 7s infinite;}
@media (max-width : 991px) {.div-2 .span-1 { animation:none; margin-left:0px}}


@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1; }
    80% {opacity:1; }
    100% {opacity:0;}
}

@keyframes slidein {
    0% { margin-left:-800px; }
    20% { margin-left:-800px; }
    35% { margin-left:0px; overflow:hidden;}
    100% { margin-left:0px; }
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:0;width:0px;}
    30% {width:355px;}
    80% {opacity:1; }
    100% {opacity:0;width:355px;}
}

*/





.span-hidden-break-point {
  text-align:center;
  color:#242424;
  font-family:'Roboto';
  font-weight:bold;
  font-size:2em;
  position: absolute;
  top:-800px;
  left:0px;
    letter-spacing: 2px;
    background: linear-gradient(90deg, #000, #cba675, #000);
    background-repeat: repeat; /*POUR que l'animation ne se fasse que sur les couleurs, no-repeat pour que l'animation se fasse sur tout le texte*/
    background-size: 80%;
    animation: animate 7s linear infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0);
  }
  @media (min-width : 1199px) {.span-hidden-break-point { left:160px;}}
  @media (max-width : 1199px) {.span-hidden-break-point { left:100px;}}
  @media (max-width : 991px) {.span-hidden-break-point { left:0px;}}




  @keyframes animate {
    0% {
      background-position: -500%;
    }
    100% {
      background-position: 500%;
    }
  }
  /* POUR FAIRE DISPARAITRE ET APPRAITRE 2EME ANIMATION AU BREAK POINT SI JE METS 2EME ANIMATION
@media (min-width : 992px) {.span-hidden-break-point{ opacity:0}}
@media (max-width : 991px) {.span-hidden-break-point{ opacity:1}}
*/




.button-86 {
  all: unset;
  width: 100px;
  height: 30px;
  font-size: 16px;
  background: transparent;
  border: none;
  position: relative;
  color: #f0f0f0;
  cursor: pointer;
  z-index: 1;
  padding: 10px 20px;
 
  touch-action: manipulation;
}

.button-86::after,
.button-86::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -99999;
  transition: all .4s;
  text-decoration: none;

}

.button-86::before {
  transform: translate(0%, 0%);
  width: 100%;
  height: 100%;
  background: #28282d;
  opacity: 0.8;
  border-radius: 10px;
}

.button-86::after {
  transform: translate(10px, 10px);
  width: 35px;
  height: 35px;
  background: #ffffff15;
  backdrop-filter: blur(5px);
  text-decoration: none;
  -webkit-backdrop-filter: blur(5px);
  border-radius: 50px;
}

.button-86:hover::before {
  transform: translate(5%, 20%);
  width: 110%;
  height: 110%;
}

.button-86:hover::after {
  border-radius: 10px;
  transform: translate(0, 0);
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.button-86:active::after {
  transition: 0s;
  transform: translate(0, 5%);
  text-decoration: none;
}









/*LES BOUTONS DE PAYMENTS*/
/*LES BOUTONS DE PAYMENTS*/
/*LES BOUTONS DE PAYMENTS*/
/*LES BOUTONS DE PAYMENTS*/


.div-block-payement-général {
position:relative;
top: -600px;
}

.div-bloc-payment { 
position:relative;
top: -720px;
right:-140px;
}
/*BREAKPOINT pour garder de la place pour animation*/
@media (max-width : 991px) {.div-bloc-payment  { top: -690px;}}
@media (max-width : 769px) {.div-bloc-payment  { top: -700px;}}
@media (max-width : 492px) {.div-bloc-payment  { top: -650px;}}
@media (max-width : 306px) {.div-bloc-payment  { top: -600px;}}



@media (max-width : 991px) {.div-bloc-payment { right:-50px;}}


    @media (max-width : 767px) {
    .payment-1 , .payment-2 { 
            right:-70px;
        }
        }
        @media (max-width : 550px) {
            .payment-1 , .payment-2 { 
                    right:-10px;
                }
                }
                @media (max-width : 450px) {
                    .payment-1 , .payment-2 { 
                            left:-30px;
                        }
                        }
            
                        

    @media (max-width : 991px) {
        .payment-3 { 
            right:-120px;
        }
        }
        @media (max-width : 767px) {
            .payment-3 { 
                right:-70px;
            }
            }
            @media (max-width : 550px) {
                .payment-3 { 
                    right:-10px;
                }
                }
                @media (max-width : 450px) {
                    .payment-3 { 
                        right:35px;
                    }
                    }
    


.payment-général { 
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px 20px 35px 20px;
margin: 10px;
/*height:45vh;*/
height: 20%;
border-radius: 20px;
}

@media (max-width : 1199px) {.payment-général { top: 50px;}}
@media (max-width : 991px) {.payment-général { top: 0px;}}


/*Faire en sorte même dimenssion rectangle de payement, du 1er aux autres*/
.cache-payment-ajustement { color: #D3F2F8}
@media (min-width : 992px) {
  .cache-payment-ajustement { display:none;}}

.populaire-div { 
display:flex;
justify-content: center;
align-items: center;
text-align:center;
color:white;
background-color:#e08367; 
position:absolute; 
top: -25px; 
height:10%;
width:50%;
border-radius:10px;
}

/* -30 %*/
/* -30 %*/
/* -30 %*/
.promo-div-3-mois { 
display:flex;
justify-content: center;
align-items: center;
text-align:center;
position:absolute; 
top: -25px;
right:-40px;
height:10%;
width:50%;
font-size: 2em;
}


.months-offered {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size:0.9em;
}




/* -50 %*/
/* -50 %*/
/* -50 %*/
.promo-div-1-an {
display:flex;
justify-content: center;
align-items: center;
text-align:center;
position:absolute; 
top: -25px;
right:-40px;
height:10%;
width:50%;
font-size: 2em;
}


 .plus-border {
  border: 1px solid black;
  border-radius: 50%;
  padding:0px 5px 0px 5px;
}
@media (max-width : 575px) {
.plus-border { 
    margin-right: 5px
}
}


.payment-1 { background-color: #D3F2F8;}
.payment-2 { background-color: #AAE6F0; }
.payment-3 {background-color: #bcece4;}


@media (max-width : 995px) {
.div-bloc-payment { 
    width: 100%; 
}
}
@media (max-width : 769px) {
.div-bloc-payment { 
    width: 60%; 
}
}
@media (max-width : 550px) {
.div-bloc-payment { 
    width: 80%; 
}
}
@media (max-width : 450px) {
.div-bloc-payment { 
    width: 100%; 
}
}

.euros-payment{font-size: 2.7em }

.h5-payment { 
color:rgb(68, 65, 65);
font-size: 2em;
text-align: center;
}

.text-under-payment { 
text-align: center;
}


.Sinscrire1 {
font-size : 1.1em;
margin-top : 25px;
color:white;
background: #cba675; 
padding:20px 30px 20px 30px; 
border-radius:40px;
box-shadow: 0px 5px 8px rgba(0,0,0,0.3) ;
border: 0; cursor: pointer; 
animation : Sinscrire1 linear 2.5s;}
.Sinscrire1:hover, .Sinscrire1:focus { transform: scale(1.1, 1.1); box-shadow: 0px 5px 8px rgba(0,0,0,0.3) }
@keyframes Sinscrire1 {
0% { opacity : 0 ; transform : translate (350px) }
100% { opacity : 1 ; transform : translateY (0px) ; }
}

/*TRAIT GRIS DECO*/
.trait-gris-payment-2 { 
    position: relative;
    top: -730px; 
    left:-120px;
    border-top: 2px solid #d8d8d8;
    width : 80% ;
    display: flex;
    justify-content:center;
    margin:auto;
}


/*SE DESABONNER*/
/*SE DESABONNER*/
/*SE DESABONNER*/

  
          .transition, .ul-form .li-form i:before, .ul-form .li-form i:after, .p-form {
            transition: all 0.25s ease-in-out;
          }
          
          .flipIn, .ul-form .li-form, .li-form i:before,.li-form i:after {
            animation: flipdown 0.5s ease both;
          }
          
          .no-select, .h2-form {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
          }
          
          .div-1-form {
          position:relative;
          top: -1250px;
            perspective: 900;
            overflow-y: visible;
            font-family: "Titillium Web", sans-serif;
            color: rgba(48, 69, 92, 0.8);
            display:flex;
              justify-content:center;
              align-items:center;
              background:url(../Photo/Newsletter/Sans-titre-nn1.png)
              center center no-repeat fixed; /* no-repeat et surtout  "fixed" permet de créer l'effet lorsqu'on scroll, que l'image ne bouge pas*/
                background-size: cover;
                /*border-bottom: #ccc dashed 1px;*/
           }
              /*Pour réparer bug sur apple de merd qui fait disparaitre image en background ou l'a met pas en pleine écran*/
              @supports ( -webkit-touch-callout : none) {
                .div-1-form {background-attachment:scroll}}
                @supports not ( -webkit-touch-callout : none) {
                .div-1-form {background-attachment: fixed;}}


                @media (max-width : 492px) {.div-1-form  { top: -1150px;}} /*BREAKPOINT pour garder de la place pour animation du texte temporaire (5k insta)*/


      
           @media (max-width : 550px) {
              .div-1-form{ 
              margin-top: 30px;
            }
          }
          
          .div-2-form {
            min-height: 0;
            position: relative;
            left: 180px;
            margin: 90px 0;
            transform: translate(-50%, 0);
            box-shadow: 0 10px 0 0 #cba675 inset;
            background-color: #fefffa;
            max-width: 350px;
            padding: 30px;
            border-radius: 10px;
          }
          @media (max-width: 550px) {
            .div-2-form {
              display:flex;
              justify-content:center;
              box-sizing: border-box;
              transform: translate(0, 0);
              max-width: 300px;
              min-height: 80%;
              margin: 0;
              left: 0;
            }
          }
          
          .h2-form {
            color: #cba675;
            font-size: 1.3em;
            line-height: 34px;
            font-weight: 300;
            letter-spacing: 1px;
            display: block;
            margin: 0;
            cursor: pointer;
          }
          
          .p-form {
            color: rgba(48, 69, 92, 0.8);
            font-size: 17px;
            line-height: 26px;
            letter-spacing: 1px;
            position: relative;
            top:10%;
            max-height: 850px;
            opacity: 1;
            transform: translate(0, 0);
            margin-top: 14px;
            z-index: 2;
          }
          
          .ul-form {
            list-style: none;
            perspective: 900;
            padding: 0;
            margin: 0;
          }
          .ul-form .li-form {
            position: relative;
            padding: 0;
            margin: 0;
            padding-bottom: 4px;
            padding-top: 18px;
            border-top: 1px dotted #dce7eb;
          }
          .ul-form .li-form:nth-of-type(1) {
            animation-delay: 0.5s;
          }
          .ul-form .li-form:nth-of-type(2) {
            animation-delay: 0.75s;
          }
          .ul-form .li-form:nth-of-type(3) {
            animation-delay: 1s;
          }
          .ul-form .li-form:last-of-type {
            padding-bottom: 0;
          }
          .ul-form .li-form i {
            position: absolute;
            transform: translate(-6px, 0);
            margin-top: 16px;
            right: 0;
          }
          .ul-form .li-form i:before,.ul-form .li-form i:after {
            content: "<";
            color:#cba675;
            position: absolute;      
            margin-left:20px;
          }
          .ul-form .li-form i:before {
            transform: translate(-2px, 0) rotate(45deg);
          }
          .ul-form .li-form i:after {
            transform: translate(2px, 0) rotate(-45deg);
          }
          .ul-form .li-form input[type=checkbox] {
            position: absolute;
            cursor: pointer;
            width: 100%;
            height: 100%;
            z-index: 1;
            opacity: 0;
          }
          .ul-form .li-form input[type=checkbox]:checked ~ p {
            margin-top: 0;
            max-height: 0;
            opacity: 0;
            transform: translate(0, 50%);
          }
          .ul-form .li-form input[type=checkbox]:checked ~ i:before {
            transform: translate(2px, 0) rotate(45deg);
          }
          .ul-form .li-form input[type=checkbox]:checked ~ i:after {
            transform: translate(-2px, 0) rotate(-45deg);
          }
          
          @keyframes flipdown {
            0% {
              opacity: 0;
              transform-origin: top center;
              transform: rotateX(-90deg);
            }
            5% {
              opacity: 1;
            }
            80% {
              transform: rotateX(8deg);
            }
            83% {
              transform: rotateX(6deg);
            }
            92% {
              transform: rotateX(-3deg);
            }
            100% {
              transform-origin: top center;
              transform: rotateX(0deg);
            }
          }
  
    .bouton-unsub {
        font-size : 1em;
        color:white;
        background: #cba675; 
        padding:10px 30px 10px 30px; 
        border-radius:40px;
        box-shadow: 0px 5px 8px rgba(0,0,0,0.3) ;
        border: 0; cursor: pointer; 
        animation : Sinscrire1 linear 2.5s;}
        .Sinscrire1:hover, .Sinscrire1:focus { transform: scale(1.1, 1.1); box-shadow: 0px 5px 8px rgba(0,0,0,0.3) }
        @keyframes Sinscrire1 {
        0% { opacity : 0 ; transform : translate (350px) }
        100% { opacity : 1 ; transform : translateY (0px) ; }
        }



/*
        .p-gruger-le-système {
          background-color:#cba675; 
          width:100%;
          height:66px;
          z-index:4; 
          color:white; 
          display:flex; 
          justify-content: center;
          position: absolute;
          top: 660px;
        }
        .c-gruger-le-système { 
        justify-content: center;
        width: 50%;
        margin-left:35px; 
        }
        @media (max-width: 550px) { 
          .c-gruger-le-système {
            margin-left:67px; 
          }
        }
  */
        
    





/*FOOTER*/
footer {
    position: relative;
    top: -1250px;
}
@media (max-width: 492px) { footer {top: -1150px;}} /*BREAKPOINT pour garder de la place pour animation du texte temporaire (5k insta)*/





/*NAVIGATION FOOTER GAUCHE*/
/*NAVIGATION FOOTER GAUCHE*/
/*NAVIGATION FOOTER GAUCHE*/
.footerelem { 
  font-size: 1.6em;
  color: gray;
  list-style: none;
  text-decoration: none;
  font-family: Inter, sans-serif;
}
  .footerelem:hover {
    list-style: none;
    text-decoration: none;
    color: #cba675;
   }
   @media (max-width: 575px) { 
    .footerelem {
      font-size: 1.7em;
    }
  }
  
  
  
   
   
  .trait-gris-footer  { 
    border-top: 2px solid #d8d8d8;
    width : 80% ;
    display: flex;
    justify-content:center;
    margin:auto;
    margin-top: 25px;
  }
  
  @media (max-width: 575px) { 
    .trait-gris-footer {
      display:none
    }
  }
  
  
/* ICONE RESEAU SOCIAUX FOOTER DROITE*/
/* ICONE RESEAU SOCIAUX FOOTER DROITE*/
/* ICONE RESEAU SOCIAUX FOOTER DROITE*/

.div-footer-droite { 
  display:flex; 
  align-items:center; 
  flex-direction: column;
   margin-top : 26px;
   font-family: Inter, sans-serif;
  }

.socialfooter {
  font-size:2.1em;
  width:65px;
  height:65px;
  display:flex;
  align-items : center;
  justify-content:center;
  border-radius:50%;
  /*
  border:1px solid #ccc;
  */
  margin:0px 8px;
  color: #808080;
  opacity:0.75;
  margin-top:13px;
}
.socialfooter:hover, .socialfooter:focus { 
  transform: scale(1.1, 1.1); 
  box-shadow: 0px 5px 8px rgba(0,0,0,0.3) ;
 }
 @media (max-width: 575px) { 
  .socialfooter  {
    margin-top : 10px;
  }
}

 .socialfooterA:hover {
  color: gray;
  list-style: none;
  text-decoration: none;
 }
.socialfooterA { 
  list-style: none; 
  text-decoration: none; 
  color: gray; 
  font-size: 1.5em;

}


@media (max-width: 575px) { 
  .icone-horizontal  {
    display:flex;
    flex-direction:row
  }
}
  

  .trait-gris-right  { 
    border-top: 2px solid #d8d8d8;
    width : 80% ;
    display: flex;
    justify-content:center;
    margin:auto;
    margin-top: 25px;
  }
  
  
  
  

  
  
  
  
  
  
  
 
/* Image LOGO PROTEGER */
  /* Image LOGO PROTEGER */
  /* Image LOGO PROTEGER */
  .div-logo { 
    display: flex;
    justify-content: center;
    position: relative;
    /*
    margin-top:20px;
    margin-bottom:20px;
    */
  }
  #logo-img { 
    background-image: url(../Photo/Logo/LOGO-HOUSE-OF-JAPAN-SANS\ BORDURE.png);  
    background-size: 200px 200px;
    background-position: 100% 0%;;
    background-repeat: no-repeat;
    padding:100px; /*POUR CORRIGER BUG BORDURE GRISE RECTANGLE*/
  }
  .logo { 
    width: 100px;
    height:auto;
  }
  @media (max-width: 575px) { 
   .logo{
       margin-top : 25px;
   }
  }
  .logo-protection {
    position: absolute;
    opacity:0;
    height:200px;
    width:200px;
  }
  @media (max-width: 575px) { .logo{top : -50px;}}  /*POUR QUE IMAGE PROTECTION PAR DESSU LOGO COMBLE LA FAILLE/TROU QUAND BREAK POINT*/
  

   
  /* BANDEAU MARRON FOOTER */
  /* BANDEAU MARRON FOOTER */
  /* BANDEAU MARRON FOOTER */
  .bandeaumarronfooter { 
    background-color : #cba675; 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    justify-content: space-between;
    padding: 5px;
    font-family: Inter, sans-serif;

   }
   
   .Toutdroitreserved {
    padding:5px;
    font-size: 1.1rem; 
    color:white; 
    text-align: center;
     }
  
      .copyright-info {
      font-size: 0.7em; 
      color:white;
      color: #ffffff;
      text-align: center;
      padding:5px;
     }




   .attribution-licence {
    color:white;
    list-style-type: none;
   }
   .lien-attribution {
    color:white;
  }
   .lien-attribution:hover {
    color:#8bccc0;
    list-style-type: none;
   }

  
  
   /*JUSTE POUR LA PAGE NEWSLETTER - couvrir blanc bug */
   .image-de-fin {
    position: absolute;
    background: url(../Photo/Newsletter/Plan\ de\ travkkkail\ 1.png)
    center center no-repeat fixed; /* no-repeat et surtout  "fixed" permet de créer l'effet lorsqu'on scroll, que l'image ne bouge pas*/
    background-size:100%;
    width:100%;
    height :100%;
  }
   /*Pour réparer bug sur apple de merd qui fait disparaitre image en background ou l'a met pas en pleine écran*/
@supports ( -webkit-touch-callout : none) {
  .image-de-fin {background-attachment:scroll}}
  @supports not ( -webkit-touch-callout : none) {
  .image-de-fin  {background-attachment: fixed;}}