/* ------------------ Default html ------------------ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 1.6;
}

html.no-scroll{
  overflow: hidden; /* empêche tout scroll */
}


html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Noto Sans', sans-serif;
  color: rgb(255, 255, 255);
  font-weight: 300;
  transition: opacity 0.5s ease;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

/* ------------------ Texts ------------------ */
strong {
  font-weight: bold !important;
}

a {
  color: inherit;
}

.content_text {
    color: white;
    text-align: justify;
    font-size: 21px;
}

.content_text_highlight {
    color: #ffc546;

}
.content_text_highlight_bold{
    font-weight: bold;

}
.title {
  font-size: 46px;
  font-weight: 950;
  color: #d8a34f;
}


/* ------------------ Containers ------------------ */
.hbox {
  display: flex;
  align-items: start;
  justify-content: start;
}

.hbox_center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vbox {
  display: flex;
  flex-direction: column; 
  justify-content: space-between;
  align-items: flex-start;
}

.vbox_center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


 
.pop_up {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 80%;
  height: 600px;
  border: #000 10px solid;
  border-radius: 150px;
  color: #f0f0f0;
  opacity: 0.9;
  background-color: rgb(0, 0, 0);

}




/* ------------------ Buttons ------------------ */

button {

  cursor: pointer;

}

button:hover {
  background-color: #000000;
  color: white;
}

button.no-style {
  background-color: white;
  color: black;
  border: none;
  cursor: pointer;
}




/* ------------------ Autres ------------------ */

.divider {
    width: 10%;
    height: 2px;
    background-color: #b08d57;
    border-color: #b08d57;
    margin: 10px 0px 35px 0px;
}


#bgVideo {
  object-fit: cover;
  position: fixed;
  right: 0;
  bottom:  0;
  min-width: 100%;
  min-height: 100%;
  z-index: -100;
  transition: transform 4s ease;
  transform: scale(1); 
}

#bgVideo.zoom-out {
  transform: scale(1.6);
}

#content {
  opacity: 0;
  transition: opacity 1s ease;
}
#content.visible {
  opacity: 1;
}

.home_global{
  margin-top: 65vh;
}


.slide-in-bottom {
  position: fixed;  /* ou absolute dans un parent */
  transform: translateY(55vh);
  opacity: 0;
  transition: transform 2s linear, opacity 1.5s ease;
}
.slide-in-bottom.visible {
  position: relative;
  transform: translateY(0);
  opacity: 1;
}
.slide-in-bottom.already_visible {
  position: relative;
  transform: translateY(0);
  opacity: 1;
  transition: transform 0s, opacity 0s;
}

.slide-in-top {
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.8s ease, opacity 0.8s ease;
}
.slide-in-top.visible {
  transform: translateY(0);
  opacity: 1;
}
.slide-in-top.already_visible {
  transform: translateY(0);
  opacity: 1;
  transition: transform 0s, opacity 0s;
}

.slide-in-left {
  transform: translateX(-100%);
  opacity: 0;
  transition: transform 0.8s ease, opacity 0.8s ease;
}
.slide-in-left.visible {
  transform: translateX(0);
  opacity: 1;
}
.slide-in-left.already_visible {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0s, opacity 0s;
}

/* Le wrapper gère l'animation */
.slide-in-right {
  transform: translateX(15rem);
  opacity: 0;
  transition: transform 1s linear, opacity 0.8s ease;
  position: fixed;   /* 👈 garder la position fixe ici */
  z-index: 10001;

  width: fit-content;   /* 👈 shrink to content */
  height: fit-content;  /* 👈 évite qu’il prenne trop de place en hauteur */

  bottom: 0px;
  right: 0px;
}

.slide-in-right.visible {
  transform: translateX(0);
  opacity: 1;
}
.slide-in-right.already_visible {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0s, opacity 0s;
}
/* Les boutons restent alignés dans leur conteneur */
.contact_buttons {
  position: fixed;   /* 👈 garder la position fixe ici */
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 5rem;
  bottom: 10px;
  right: 50px;
  z-index: 10000;
}

.contact_buttons img {
  width: 100%;
  cursor: pointer;
  object-fit: contain;
}