@media (max-width: 900px) and (orientation: landscape) {
  .mobile-landscape-blocker {
    display: flex !important;
    position: fixed;
    z-index: 99999;
    font-family: "Montserrat", sans-serif;
    color: #ffffff;
    top: 0; left: 0; right: 0; bottom: 0;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    text-align: center;
    padding: 2em;
  }
  body *:not(.mobile-landscape-blocker) {
    display: none !important;
  }
  
   } 
  
 /* Pour placer la barre de recherche bien plus bas sous le header */
.search-bar.left-search {
  top: 180px; /* Ajuste cette valeur pour descendre la barre sous le header */
  position:relative;
   display: flex;
  justify-content: center;
  
}
 
 .search-bar {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-bottom: 50px;

}


#searchInput {
  width: 350px;
  padding: 12px 17px;
  border: 1px solid #ffffffe1;
  border-radius: 25px;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  background: #fff8f000;
  color: #ffffff;
  outline: none;  


}
#searchInput:focus {
  border-color: #a97bc7;
  box-shadow: 0 0 0 1px #dfcfec88;
  background: #ffffff00;
}

/* Style pour les images des messages du blog */
.blog-image {
  display: block;
  max-width: 250px;
  max-height: 150px;
  min-width: 250px;
  min-height: 150px;
  width: auto;
  height: auto;
  margin: 1em auto 0.5em auto;
  box-shadow: 0 2px 8px #0002;
  object-fit: contain;
  background: #fff;
  border-radius:30px;
}


body {
  background-color: #310439;
  margin: 0;
  font-family: 'Montserrat', serif;

}
html, body {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE et Edge */
}
html::-webkit-scrollbar, body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.footer-signature {
  margin-top: 20px;
  text-align: center;
  font-family: "Pinyon Script", serif; /* Police de caractère */
  font-weight: 300;
  font-size: 20px;
  color: #ffffffc5; /* Couleur du texte */
  letter-spacing: 1px;
  margin-top: -40px; /* Espace au-dessus de la signature */
}

.header-bar {
    background-color: #dfcfec00;
      backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

    width: 100%;
    height: 150px;
    margin: 0;
    position: fixed;
    top: 0;
    left: 0;
    box-sizing: border-box; /* Empêche le débordement */
    text-align: center;
    box-shadow: 0 2px 12px #a97bcf8e;
    z-index: 100;
}

.header-bar h1 {
    font-family: "Pinyon Script", sans-serif;
    color: #dfcfec;
    font-weight: 500; /* Ajouté pour un poids de police plus léger */
    font-size: 75px;
    text-align: center; /* Ajout pour centrer le texte horizontalement */
    margin-top: 20px; /* Ajustez cette valeur pour le centrage vertical */
  
}
.header-bar h2 {  
    
    font-family: "Cormorant Garamond", sans-serif;
    color: #ffffff88;
    font-size: 20px;
       font-weight: 500; /* Ajouté pour un poids de police plus léger */
    text-align: center; /* Optionnel, déjà hérité de .header-bar */
    position : relative;
    bottom: 70px;
    right: -90px;

  
   
    
} 


#conversation {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 170px;
  padding-bottom: 2em;
  min-height: 100vh;
  box-sizing: border-box;
}




.bulle-voyance {
    background: rgba(255, 255, 255, 0.891);
  border-color: #fff;
  color: #000000;
  border: 1px solid #fff;
  padding: 1.2em 1.5em;
  box-shadow: 0 4px 16px #0002;
  width: auto;
border-radius: 2em;
overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE et Edge */
  margin: 1em 10em;
  font-family: 'Montserrat', sans-serif;

  position: relative;



}


.bulle-voyance h3 {
  margin-top:-0.7em;

  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
 
}

div.bulle-voyance  {
  text-align: center;  
  font-size: 18px;
  font-weight: 250;
 padding:  35px ;


}


@media (max-width: 600px) {

  .search-bar.left-search {
    top: 130px !important;
  }
    .header-bar {
    height: 111px !important;
    min-height: 111px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100vw !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    }
    .header-bar h1 {
        font-size: 48px !important;
        margin: 0 !important;
    }
    .header-bar h2 {
        font-size: 16px !important;
        right: -50px !important;
        bottom: 10px !important;
        margin: 0 !important;
    }
.bulle-voyance {
  margin: 0.5em 2vw !important;
  left: 0 !important;
  right: 0 !important;
  width: 96vw !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  height: 30vh !important;
  padding: 30px 20px 20px 20px!important;
  display: flex !important;
  flex-direction: column !important;

      scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */ 
    overflow: auto !important;

}

.bulle-voyance h3 {
        font-size: 18px !important;
  
    }

    div .bulle-voyance {
      font-size: 16px !important;
 
    }
      .footer-signature {
        font-size: 15px !important;
 
   
    }

    div#conversation {
      padding-top: 130px !important; 
      gap: 10px !important;
    }
    .separateur-voyance {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.5em auto 1.5em auto; /* Même espace au-dessus et au-dessous */
  width: 90%;
  max-width: 700px;
  gap: 0.7em;
  z-index: 5;
}
.separateur-ligne {

  display: block;
  height: 2px;
  width: 100%;
  max-width: 220px;
  background: rgb(255, 255, 255);
  border-radius: 2px;
  opacity: 0.85;

}
.separateur-icone {
  font-size: 24px;
  color: #e0c00d;
  text-shadow: 0 2px 8px #b18be0aa;
  margin: 0 0.3em;
  font-family: 'Pinyon Script', cursive;
  letter-spacing: 0.1em;
}

 @keyframes border-gold-anim {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
 }


  }

@media (min-width: 601px) and (max-width: 1200px) {
    html, body {
      /* Hide vertical scrollbars but keep scrolling enabled */
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none;  /* IE and Edge */
    }
    html::-webkit-scrollbar, body::-webkit-scrollbar {
      display: none; /* Chrome, Safari, Opera */
    }


h1.header-title {
    font-size: 75px !important;
    
  }

h2.header-title{
    font-size: 24px !important;
    left: 75px !important;


  }

 
  .bulle-voyance {
    margin: 0.5em 8.5vw !important;
    min-width: 75vw;
  max-width: 75vw;
  height: 280px;
    box-sizing: border-box !important;
      padding: 1em 1em;
    font-size: 12px !important;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */ 
    overflow: auto !important;



  }
    .footer-signature {
      font-size: 21px !important;

    }
      
    div#conversation {
      padding-top: 195px !important;
      gap: 30px !important;
     
    }

.bulle-voyance h3 {
        font-size: 21px !important;



    }

    div .bulle-voyance {
      font-size: 18px !important;
 
    }
  }

 
@media (min-width: 1300px) and (max-width: 2000px) {

.header-bar 
  {
    height: 180px !important;
    min-height: 180px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
 
  }
  .header-bar h1 {
    font-size: 100px !important;
   
  }
  .header-bar h2 {
   font-size: 27px !important;
    left: 110px !important;
    top : -91px !important;
 }



.footer-signature {
  font-size: 22px !important;
  }
.search-bar.left-search {
  top: 220px!important; /* Ajuste cette valeur pour descendre la barre sous le header */
  position:relative;

  
}

.bulle-voyance {
  width: auto!important;
  height: auto!important;
 max-width: 900px!important;




}
      
    div#conversation {
      padding-top: 220px !important;
      gap: 30px !important;
     
    }
}