html, body { 
    margin:0;
    padding:0;
    height:100%;
    font-size: 1em;
    font-family: bodoni MT;
    overflow-x: hidden;  /*Pour éviter BUG scrolling horizontal à droite*/
}

.text-family { 
  font-family: Inter, sans-serif;
  font-size: 1.15em; 
  color:#646161
}

 /*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/Page-acceuil/PhotoAcceuilMaisonsDuJapon.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;}}

@media (max-width : 620px) {
  .featured1 { 
    background: url(../Photo/Page-acceuil/PhotoAcceuilMaisonsDuJapon.jpg) 
    center center no-repeat
  }
}




  /*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) ;
        }
    }
    .Sabonner1 {
        font-size : 1.5em;
        margin-top : 50px;
        color:white;
        background: #cba675; 
        padding:10px 30px 10px 30px; 
        border-radius:10px;
        box-shadow: 0px 5px 8px rgba(0,0,0,0.3) ;
        border: 0; cursor: pointer; 
        animation : boutonacceuil linear 2.5s;}
      .Sabonner1:hover, .Sabonner1:focus { transform: scale(1.1, 1.1);}
      @keyframes boutonacceuil {
        0% {
            opacity : 0 ;
            transform : translate (350px)
        }
        100% { 
            opacity : 1 ;
            transform : translateY (0px) ;
        }
    }
    /* FIN bloc parent du titre et bouton*/





    /* Bande MARRON EN BAS DE IMAGE ACCEUIL*/
    /* Bande MARRON EN BAS DE IMAGE ACCEUIL*/
    /* Bande MARRON EN BAS DE IMAGE ACCEUIL*/

.bandemarron { 
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20vh;
    background: #cba675;
    color: white;
}


.h2-inside-bande-marron { 
  text-align : center; 
}
@media (max-width : 620px) {
  .h2-inside-bande-marron{ 
    font-size: 1.7em;
  }
}
@media (max-width : 502px) {
  .h2-inside-bande-marron{ 
    font-size: 1.4em;
  }
}






  /*Les ICONES FACEBOOK ET INSTA (NE PAS OUBLIER DE RECUPERER LE CODE PERSO SUR LE SITE FONT AWESOME*/
  /*Les ICONES FACEBOOK ET INSTA (NE PAS OUBLIER DE RECUPERER LE CODE PERSO SUR LE SITE FONT AWESOME*/
  /*Les ICONES FACEBOOK ET INSTA (NE PAS OUBLIER DE RECUPERER LE CODE PERSO SUR LE SITE FONT AWESOME*/
  .iconacceuil {
    display:flex;
    align-items : center;
    justify-content:center;
    font-size: 1em;
    width:40px;
    height:40px;
    margin: 20px;
    cursor: pointer;
    border-radius: 20px;
    transition: all .4s;
  
  }
  .iconereseau {
    margin-top :40px;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .iconacceuil:nth-child(1):hover {
    box-shadow: -20px 0px 15px 10px #c32aa3;
  }
  .iconacceuil:nth-child(2):hover {
    box-shadow: 20px 0px 15px 10px #000102;
  }
/*
  .fa-tiktok {
    color: #000102;
    filter: drop-shadow(0 0 10px #141c2e);
  }
*/
  .fa-instagram {
    color: #c32aa3;
    filter: drop-shadow(0 0 10px #d6d3d6);
  }
  



  /*TEXTE HAUT DES IMAGES*/
   /*TEXTE HAUT DES IMAGES*/
    /*TEXTE HAUT DES IMAGES*/
  .exempledannonce { 
      display: flex;
      justify-content: center;
      font-size: clamp(2rem, 2.6vw, 2.8em);
      text-align: center;
      margin-top : 30px;
      color:#cba675;
      text-align: center;
  }


    /*BIBLI IMAGE 3 X 3*/
    /*BIBLI IMAGE 3 X 3*/
    /*BIBLI IMAGE 3 X 3*/
    .bibliimage6 { 
      display:flex; 
      justify-content:center; 
      margin-top: 35px
    }
    .images-des-6 { 
      width:100%;
      height:auto
    }



    /*Texte bas des 6 images*/
    /*Texte bas des 6 images*/
    /*Texte bas des 6 images*/
    .h3-bellow-images { 
      color:#cba675; 
      font-size: 2.2em;  
      font-weight: bold;
      margin-bottom: 30px;
      line-height: 1em;
    }



   
    



   /*BLOC S'ABONNER*/
   /*BLOC S'ABONNER*/
   /*BLOC S'ABONNER*/
  .div-sinscrire-news-letter {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 50px;
    margin-bottom: 50px;
  }
  .sinscrire-news-letter-text { 
    font-size:2.5em; 
    font-weight: bold; 
    text-align: center;
  }
  .Sabonner2 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-size : 1.5em;
        margin-top : 20px;
        color:white;
        background: #cba675; 
        padding:10px 30px 10px 30px; 
        border-radius:50px;
        border: 0; 
        cursor: pointer; 
        box-shadow: 20px 5px 8px rgba(0,0,0,0.3) ;
        animation : boutonacceuil2 ease 2.5s;}
      .Sabonner2:hover, .Sabonner2:focus { transform: scale(1.1, 1.1); box-shadow: -20px 5px 8px rgba(0,0,0,0.3) ;}
      @keyframes boutonacceuil2 {
        0% {
            opacity : 0 ;
            transform : translate (350px)
        }
        100% { 
            opacity : 1 ;
            transform : translateY (0px) ;
        }
    }
    .a-href-sinscrire-newsletter:hover {
      list-style: none;
      text-decoration: none;
    }
       /*FIN BLOC S'ABONNER*/




    /*BLOC GRIS POURQUOI MAISON PAS CHERS*/
    /*BLOC GRIS POURQUOI MAISON PAS CHERS*/
    /*BLOC GRIS POURQUOI MAISON PAS CHERS*/
  .div-bloc-gris-pk-house-cheap {
    margin-top:50px; 
    background-color: #f3f3f3; 
    border-radius: 50px;
  
  }
  .h3-pourquoi-maison-pas-chers { 
    color:#cba675; 
    font-weight:bold; 
    font-size : 2.3em;
  }

.div-photo-droite-house-cheap { 
  display:flex; 
  justify-content:center;
  align-items: end; 
  margin-top: 40px; 
  margin-bottom: 60px;
}
.image-droite-house-cheap { 
  width: 65%;
  height:auto;
  border: 2px solid black
}



/*Qui suis-je ? */
/*Qui suis-je ? */
/*Qui suis-je ? */
.div-bloc-entourer-gris-qui-suis-je {
  margin-top:50px; 
  padding-bottom: 35px;
  background-color: none; 
  border-radius: 50px; 
  border:#f2f2f2 2px solid
  }
  .div-photo-gauche-nostalgie { 
    margin-top: 50px; 
    display:flex; 
    justify-content:center; 
    align-items: end; 
    margin-bottom: 30px
  }
  .image-gauche-nostalgie { 
    width: 65%;
    height:auto;
    border: 2px solid black
  }
  .h3-qui-suis-je{ 
    color:#cba675; 
    font-weight:bold; 
    font-size : 2.3em;
  }
    .image-moi-now { 
      width:65px;
      height: 65px;
      border-radius: 50%;
    }
    /*.paragraphe-général-2 { 
      font-size: 1.3em; 
      color:#646161
    }*/

    .réseaux-sociaux-perso { 
        list-style: none;
        text-decoration: none;
      }
      .réseaux-sociaux-perso:hover {
        list-style: none;
        text-decoration: none;
    }
    .fa-brands { 
      font-size : 2.5em;
      padding: 0px 5px 0px 5px;
      animation : fa-brands ease 2.5s;}
    .fa-brands:hover, .fa-brands:focus { 
    transform: scale(1.1, 1.1) ;}
    @keyframes fa-brands {
      0% {
          opacity : 0 ;
          transform : translate (350px)
      }
      100% { 
          opacity : 1 ;
          transform : translateY (0px) ;
      }
  }
   
  /*ANIMATION DE FLECHE*/
  .arrow {
    text-align: center;
  }
  .bounce {
    -moz-animation: bounce 2s infinite;
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
  }
  
  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateX(0);
    }
    40% {
      transform: translateX(-30px);
    }
    60% {
      transform: translateX(-15px);
    }
  }













    /*Devenir propriétaire BLOC*/
    /*Devenir propriétaire BLOC*/
    .div-bloc { 
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    .h4-bloc {
      font-size:2.5em;
    margin-top: 50px;
    }
    .paragraphe-bloc { 
      color:#646161;
      font-size:1.3em;
      text-align: center;
    }
    .Sabonner3 {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      font-size : 1.5em;
      margin-top : 20px;
      color:#242323;
      background:rgb(240, 239, 239);
      padding:10px 30px 10px 30px; 
      border-radius:50px;
      border: solid 1px #cba675; 
      cursor: pointer; 
      box-shadow: 0px 5px 8px rgba(0,0,0,0.3) ;
      animation : boutonacceuil3 ease 2.5s;}
    .Sabonner3:hover, .Sabonner3:focus { 
    transform: scale(1.1, 1.1) ;}
    @keyframes boutonacceuil3 {
      0% {
          opacity : 0 ;
          transform : translate (350px)
      }
      100% { 
          opacity : 1 ;
          transform : translateY (0px) ;
      }
  }
      

    /*Newsletter 5 raisons de s'inscrire*/
    /*Newsletter 5 raisons de s'inscrire*/
    /*Newsletter 5 raisons de s'inscrire*/
    .div-5-raisons-gris-parent { 
      background: url(../Photo/Page-acceuil/image-représentant-pourquoi-maison-pas-cher.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*/
      background-size: cover;
      background-position: 50% 10%;
      border-radius: 50px; 
      margin-top:50px;
    }


  /*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-5-raisons-gris-parent  {background-attachment:scroll}}
@supports not ( -webkit-touch-callout : none) {
.div-5-raisons-gris-parent  {background-attachment: fixed;}}




    .div-inside-5-raisons { 
      background:linear-gradient(rgb(255, 254, 250),rgb(255, 250, 237));
      display: flex; 
      flex-direction:column; 
      align-items: center;
      background-color:white;
      border-radius: 20%;
      border:1px solid #b9b9b9;
    }
    /*
    .h2-5-raisons { 
      color:#8bccc0; 
      font-size: clamp(4.5rem, 10vw, 6em);
      font-weight: bold; 
      margin-top : 30px
    }*/
    .h3-5-raisons { 
      margin-top:50px;
      color:#cba675; 
      font-size: clamp(2.5rem, 5vw, 3em);
      font-weight: bold; 
      text-align: center;
    }
    .paragraphe-général-5-raisons { 
      color: #646161; 
      font-size : 1.4em; 
      text-align: center
    }


      
  

.div-des-3-column{
  display:flex;
  justify-content: center;
}
@media (max-width: 769px) { 
  .div-des-3-column {
    flex-direction:column; 
    justify-content:center; 
    align-items:center;
  }
}
.column-des-5 { 
  padding:30px;
  text-align: center;

}
@media (max-width: 993px) { 
  .column-des-5 {
    padding: 10px;
  }
}
@media (max-width: 769px) { 
  .column-des-5 {
    padding: 0px;
  }
}

i {
  font-family: FontAwesome; /*Sinon les icones affiche un carré vide! */
}
.icône-5-raisons {
color:#cba675;
font-size: 2.6em;
padding: 0px 0px 10px 0px;
}
  .h5-5-raisons{ 
    font-size: 1.6em;
    color:#cba675;
    font-weight:bold;}
    .paragraphe-5-raisons { 
      color:#646161;
    }



/*
    .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%
        }
      }
  
    .five-reasons-why:hover, .five-reasons-why:focus { transform: scale(1.1, 1.1);}
    .five-reasons-why:hover, .five-reasons-why:focus { transform: scale(1.1, 1.1);}
    .five-reasons-why:hover, .five-reasons-whyy:focus { transform: scale(1.1, 1.1);}
    .five-reasons-why:hover, .five-reasons-why:focus{ transform: scale(1.1, 1.1);}
    .five-reasons-why:hover, .five-reasons-why:focus{ transform: scale(1.1, 1.1);}
*/









  
   /*BOUTON s'inscrire*/
.Sinscrire1 {
    font-size : 1.5em;
    margin-top : 25px;
    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) ; }
}












/*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
  }
}






/* 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;
   }