/* --- Globals --- */
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

button:focus-visible {
  outline: 2px solid #4a90e2 !important;
}

a {
  text-decoration: none;
}

/* --- Desktop container --- */
.bimboum-desktop {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  position: relative;
  font-family: "Myriad Pro", Helvetica;
}

/* --- Background image full screen --- */
.bimboum-desktop .BIMBOUM-LANDING-PAGE {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* --- Logo header --- */
.logo {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box; /* pour que le padding soit inclus dans la largeur */
}

.logo a {
  display: block;
  cursor: pointer;
}

.logo img {
  width: 100%;
  height: auto;
  display: block;
}


/* --- Main frame content --- */
.bimboum-desktop .frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
   width: 100%;
  max-width: 1920px; /* limite max */
  padding-left: clamp(30px, 13vw, 250px);
  padding-right: clamp(30px, 13vw, 250px);
  padding-top: clamp(100px, 10vw, 200px);
  padding-bottom: clamp(100px, 10vw, 200px);
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.bimboum-desktop .text-wrapper {
  color: #ffffff;
  font-size: 18px; /* taille par défaut pour grand écran */
  line-height: 1.4;
  margin-bottom: 40px;
}

.bimboum-desktop .frame-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.bimboum-desktop .title {
  color: #ffffff;
  text-align: center;
}

.bimboum-desktop .avenue-du-grand-st {
  color: #ffffff;
  text-align: center;
}

.bimboum-desktop .avenue-du-grand-st a {
  color: #ffffff;
  line-height: 1.6;
}

/* --- Button --- */
.bimboum-desktop .BOUTON {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 26px 40px;
  background: rgba(206, 169, 57, 1);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.5s ease-in-out;
  box-shadow: 0 0 0 rgba(206, 169, 57, 0);
}

.bimboum-desktop .BOUTON:hover {
  background: rgba(180, 145, 40, 1);
  box-shadow: 0 4px 12px rgba(206, 169, 57, 0.4);
}

.bimboum-desktop .BOUTON:focus {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.bimboum-desktop .contactez-nous {
  color: #ffffff;
  font-size: 18px;
  transition: color 0.3s ease-in-out;
}

/* --- Background shape --- */
.bimboum-desktop .backgroung-shape {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 798px;
  height: 1024px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  z-index: 1;
}

/* --- Responsive margins et texte --- */

/* 1440px – 1920px */
@media screen and (max-width: 1920px) and (min-width: 1440px) {
  
}

/* < 1440px */
@media screen and (max-width: 1439px) and (min-width: 801px) {
  
}

/* ≤ 800px */
@media screen and (max-width: 800px) {
  

  .bimboum-desktop .text-wrapper {
    font-size: 16px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  }

  .bimboum-desktop .title {
    font-size: 18px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  }

  .bimboum-desktop .avenue-du-grand-st {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  }

  .bimboum-desktop .contactez-nous {
    font-size: 16px;
    padding: 20px 30px;
  }
  .bimboum-desktop .BOUTON {
    padding: 0px 0px; /* plus compact */
    font-size: 16px;    /* texte plus petit */
  }
   .bimboum-desktop .backgroung-shape {
    width: 400px;
    height: 512px;
  }
}

/* Smartphones verticaux */
@media screen and (max-width: 600px) and (orientation: portrait) {
  .bimboum-desktop .frame {
    padding-top: clamp(50px, 8vw, 150px);
  }
}