/* =============================================================
 * style.css â€” OptimisÃ© par optimize_css.py v6.7.0
 * Variables CSS extraites, propriÃ©tÃ©s factorisÃ©es
 * ============================================================= */

/* --- Reset minimal --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow-x: hidden; }

/* --- Variables CSS (extraites automatiquement) --- */
:root {
  --font-weight-400: 400;
  --font-ballers-delight: "ballers-delight";
  --color-light: white;
  --font-body: Montserrat;
  --gap-8-57px: 8.57px;
  --color-b95128: #B95128;
  --font-size-clamp-14-21px-0-2216: clamp(14.21px, 0.2216rem + 1.333vw, 29.14px);
  --font-size-34-67px: 34.67px;
  --color-efede5: #EFEDE5;
}

/* --- Classes optimisÃ©es --- */

/* =============================================================
 * Reset responsive minimal
 * GÃ©nÃ©rÃ© par fluidify_css.py v3.0.0
 * ============================================================= */
*, *::before, *::after {
  box-sizing: border-box;
}

/* =============================================================
 * CSS extrait du HTML par extract_styles.py v3.0.0
 * 1 bloc(s) <style> fusionnÃ©(s)
 * NE PAS MODIFIER â€” fichier regÃ©nÃ©rÃ© automatiquement
 * ============================================================= */
/* Reset minimal */
    *, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.page__img {
  flex: 1 1 0;
  height: 388.26px;
  max-width: 400px;
  min-width: 250px;
  max-height: 388.26px;
  min-height: 242.66px;
  object-fit: cover;
  object-position: center;
}

.page__mentions-legales-128d {
  font-size: clamp(22px, 1.008rem + 0.7339vw, 30.22px);
  font-family: var(--font-ballers-delight);
  font-weight: var(--font-weight-400);
  word-wrap: break-word;
  color: var(--color-b95128);
}

.page__mentions-legales {
  align-self: stretch;
}

.page__politique-de-e49d-f0eb {
  font-size: clamp(22px, 1.008rem + 0.7339vw, 30.22px);
  font-family: var(--font-ballers-delight);
  font-weight: var(--font-weight-400);
  word-wrap: break-word;
  color: var(--color-b95128);
}

.page__politique-de-e49d {
  align-self: stretch;
}

.page__contact-contact-09c8 {
  font-size: clamp(25.87px, 1.0669rem + 1.1vw, 38.19px);
  font-family: var(--font-ballers-delight);
  font-weight: var(--font-weight-400);
  word-wrap: break-word;
  color: var(--color-b95128);
}

.page__contact-contact-09c9 {
  font-size: clamp(25.87px, 1.5071rem + 0.2196vw, 28.33px);
  font-family: var(--font-body);
  font-weight: var(--font-weight-400);
  word-wrap: break-word;
  color: var(--color-b95128);
}

.page__contact-contact-74b3 {
  align-self: stretch;
  height: 83.10px;
  text-align: right;
}

.page__instagram-span {
  font-size: clamp(25.87px, 1.0669rem + 1.1vw, 38.19px);
  font-family: var(--font-ballers-delight);
  font-weight: var(--font-weight-400);
  word-wrap: break-word;
  color: var(--color-b95128);
}

.page__instagram {
  width: 363.57px;
  height: 43.44px;
  text-align: right;
}

.page__img-2 {
  width: 96.32px;
  height: 95.75px;
  object-fit: cover;
  object-position: center;
}

.page__img-3 {
  width: 100%;
  height: 257.5184%;
  left: 0.0000%;
  top: -172.5352%;
  position: absolute;
  object-fit: cover;
  object-position: center;
}

.page__nous-vous-23cc-span {
  font-size: clamp(33.44px, 0.5217rem + 3.1366vw, 68.57px);
  font-family: var(--font-body);
  font-weight: 200;
  word-wrap: break-word;
  color: var(--color-light);
}

.page__nous-vous-23cc {
  width: 773.14px;
  height: 313.71px;
  left: 5.9829%;
  top: 57.0748%;
  position: absolute;
  z-index: 1;
}

.page__merci-pour-votre-9d6d {
  font-size: clamp(37.62px, 0.587rem + 3.5286vw, 77.14px);
  font-family: "aviano-sans";
  font-weight: var(--font-weight-400);
  line-height: 102.86px;
  word-wrap: break-word;
  color: var(--color-light);
}

.page__merci-pour-votre-ccac {
  width: 429.43px;
  height: 445.71px;
  left: 5.9829%;
  top: 9.5915%;
  position: absolute;
  z-index: 2;
}

.page__contactez-nous-span {
  font-size: clamp(33.44px, 0.5217rem + 3.1366vw, 68.57px);
  font-family: "aviano-sans";
  font-weight: var(--font-weight-400);
  word-wrap: break-word;
  color: var(--color-light);
}

.page__contactez-nous {
  align-self: stretch;
  text-align: center;
}

.page__prenom-02-span {
  font-size: var(--font-size-clamp-14-21px-0-2216);
  font-family: var(--font-body);
  font-weight: var(--font-weight-400);
  word-wrap: break-word;
  color: var(--color-light);
}

.page__prenom-02 {
  align-self: stretch;
}

.page__nom-02-span {
  font-size: var(--font-size-clamp-14-21px-0-2216);
  font-family: var(--font-body);
  font-weight: var(--font-weight-400);
  word-wrap: break-word;
  color: var(--color-light);
}

.page__nom-02 {
  align-self: stretch;
}

.page__adresse-e-mail-span {
  font-size: var(--font-size-clamp-14-21px-0-2216);
  font-family: var(--font-body);
  font-weight: var(--font-weight-400);
  word-wrap: break-word;
  color: var(--color-light);
}

.page__adresse-e-mail {
  align-self: stretch;
}

.page__message-span {
  font-size: var(--font-size-clamp-14-21px-0-2216);
  font-family: var(--font-body);
  font-weight: var(--font-weight-400);
  word-wrap: break-word;
  color: var(--color-light);
}

.page__message {
  align-self: stretch;
}

.page__les-informations-d397 {
  font-size: clamp(6.69px, 0.1047rem + 0.6268vw, 13.71px);
  font-family: var(--font-body);
  font-weight: var(--font-weight-400);
  word-wrap: break-word;
  color: var(--color-light);
}

.page__les-informations-bbcc {
  flex: 1 1 0;
}

.page__accueil-span {
  font-size: var(--font-size-34-67px);
  font-family: var(--font-ballers-delight);
  font-weight: var(--font-weight-400);
  word-wrap: break-word;
  color: var(--color-efede5);
}

.page__accueil {
  text-align: center;
}

.page__menu-02-span {
  font-size: var(--font-size-34-67px);
  font-family: var(--font-ballers-delight);
  font-weight: var(--font-weight-400);
  word-wrap: break-word;
  color: var(--color-efede5);
}

.page__menu-02 {
  opacity: 0.60;
  text-align: center;
}

.page__photos-span {
  font-size: var(--font-size-34-67px);
  font-family: var(--font-ballers-delight);
  font-weight: var(--font-weight-400);
  word-wrap: break-word;
  color: var(--color-efede5);
}

.page__photos {
  opacity: 0.60;
  text-align: center;
}

.page__contact-span {
  font-size: var(--font-size-34-67px);
  font-family: var(--font-ballers-delight);
  font-weight: var(--font-weight-400);
  word-wrap: break-word;
  color: var(--color-efede5);
}

.page__contact {
  opacity: 0.60;
  text-align: center;
}

.page__img-4 {
  width: 118.33px;
  height: 41px;
  object-fit: cover;
  object-position: center;
}

.page__texte-gauche {
  flex: 1 1 0;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 43.44px;
}

.page__menu-droite-02 {
  width: 654px;
  height: 55px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.50);
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 63px;
  padding: 30px 10px;
}

.page__insta {
  width: 100%;
  align-self: stretch;
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
}

.page__container-2 {
  width: 100%;
  height: 8.6305%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 75.5030%;
  position: absolute;
  z-index: 1;
}

.page__bloc-gauche {
  flex: 1 1 0;
  align-self: stretch;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 40px;
  padding-left: 40px;
  padding-right: 40px;
}

.page__menu-droite {
  width: 36px;
  height: 44px;
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  gap: 28px;
}

.page__texte {
  flex: 1 1 0;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

.page__texte-02 {
  width: 100%;
  height: 52px;
  flex-grow: 1;
  display: inline-flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 10px;
  padding-right: 10px;
}

.page__bloc-droit {
  flex: 1 1 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-left: 41.55px;
  padding-right: 41.55px;
}

.page__menu-active-accueil {
  width: 100%;
  height: 52px;
  align-self: stretch;
  background: #B95128;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.50);
  overflow: hidden;
  border-bottom: 1px black solid;
  display: inline-flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.page__footer-vh-25 {
  width: 100%;
  height: 19.8790%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  bottom: 0.0000%;
  position: absolute;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./assets/img/image-8.png);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.page__menu {
  width: 100%;
  height: 2.2472%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 0.0000%;
  position: absolute;
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

.page__rectangle-02 {
  left: 0.0000%;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  position: absolute;
}

.page__prenom {
  width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--gap-8-57px);
  padding-left: 34.29px;
  padding-right: 34.29px;
}

.page__nom {
  width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--gap-8-57px);
  padding-left: 34.29px;
  padding-right: 34.29px;
}

.page__adresse-mail {
  width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--gap-8-57px);
  padding-left: 34.29px;
  padding-right: 34.29px;
}

.page__message_01 {
  width: 100%;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--gap-8-57px);
  padding-left: 34.29px;
  padding-right: 34.29px;
}

.page__case-coche {
  left: -1.5629%;
  top: 7.5001%;
  position: absolute;
}

.page__case-pas-coche {
  left: -1.5629%;
  top: 7.5001%;
  position: absolute;
  z-index: 1;
}

.page__bloc-check-box {
  width: 54.86px;
  height: 68.57px;
  position: relative;
}

.page__info {
  width: 100%;
  align-self: stretch;
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
  gap: var(--gap-8-57px);
  padding-left: 34.29px;
  padding-right: 34.29px;
}

.page__contenue {
  width: 100%;
  height: 100.0000%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 0.0000%;
  position: absolute;
  z-index: 1;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 17.14px;
}

.page__bloc-contact-02 {
  width: 100%;
  height: 100.0000%;
  left: 0.0000%;
  top: 0.0000%;
  position: absolute;
  overflow: hidden;
}

.page__bloc-1 {
  width: 47.0089%;
  height: 53.1818%;
  left: 37.8125%;
  top: 12.1717%;
  position: absolute;
  z-index: 1;
}

.page__rectangle {
  left: 0.0000%;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  position: absolute;
}

.page__bloc-contact {
  width: 47.0089%;
  height: 53.1818%;
  left: 10.9823%;
  top: 36.9192%;
  position: absolute;
  overflow: hidden;
}

.page__container-1-hero-vh-f46b {
  width: 100%;
  height: 73.3423%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 2.1608%;
  position: absolute;
  z-index: 2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(./assets/img/image-12.png);
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--gap-8-57px);
}

.page__desktop {
  width: 100%;
  height: 2314px;
  position: relative;
  background: white;
  overflow: hidden;
}

/* --- Blocs @media (responsive) --- */

@media (max-width: 370px) {
  .page__desktop {
    height: 1263px;
    overflow: hidden;
  }
  .page__img {
    height: 133.47px;
    min-width: 100px;
    min-height: 97.07px;
  }
  .page__contact-contact-74b3 {
    width: 312px;
    height: 57px;
  }
  .page__instagram {
    width: 246.22px;
    height: 29.42px;
  }
  .page__img-2 {
    width: 65.23px;
    height: 64.84px;
  }
  .page__img-3 {
    height: 93.4498%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
  }
  .page__nous-vous-23cc {
    width: 377.01px;
    height: 152.98px;
    left: 5.9823%;
    top: 57.0740%;
  }
  .page__merci-pour-votre-9d6d {
    line-height: 50.16px;
  }
  .page__merci-pour-votre-ccac {
    width: 209.41px;
    height: 217.35px;
    left: 5.9823%;
    top: 9.5926%;
  }
  .page__menu-02-span {
    width: 100%;
    height: 4.1172%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 0.0000%;
    position: absolute;
    z-index: 3;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    font-size: inherit;
    font-weight: normal;
    color: inherit;
  }
  .page__texte-gauche {
    gap: 35px;
  }
  .page__insta {
    height: 58px;
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .page__container-2 {
    height: 18.1314%;
    left: 0.1250%;
    top: 65.0831%;
    right: auto;
  }
  .page__texte {
    gap: 35px;
  }
  .page__footer-vh-25 {
    height: 19.7941%;
    background-image: url(./assets/img/image-15.png);
  }
  .page__prenom {
    padding-left: 16.72px;
    padding-right: 16.72px;
    gap: 4.18px;
  }
  .page__nom {
    padding-left: 16.72px;
    padding-right: 16.72px;
    gap: 4.18px;
  }
  .page__adresse-mail {
    padding-left: 16.72px;
    padding-right: 16.72px;
    gap: 4.18px;
  }
  .page__message_01 {
    padding-left: 16.72px;
    padding-right: 16.72px;
    gap: 4.18px;
  }
  .page__case-coche {
    left: -1.5625%;
    top: 7.4994%;
  }
  .page__case-pas-coche {
    left: -1.5625%;
    top: 7.4994%;
  }
  .page__bloc-check-box {
    width: 26.75px;
    height: 33.44px;
  }
  .page__info {
    padding-left: 16.72px;
    padding-right: 16.72px;
    gap: 4.18px;
  }
  .page__contenue {
    gap: 8.36px;
  }
  .page__bloc-1 {
    width: 55.1541%;
    height: 48.6331%;
    left: 38.2043%;
    top: 16.2431%;
  }
  .page__bloc-contact {
    width: 55.1541%;
    height: 48.6331%;
    left: 6.7256%;
    top: 38.8740%;
  }
  .page__container-1-hero-vh-f46b {
    height: 71.6548%;
    left: 0.2500%;
    top: 3.9588%;
    background-image: url(./assets/img/image-19.png);
    right: auto;
  }
}

@media (max-width: 370px) {
      body {
        max-width: 800px;
        overflow-x: hidden;
        margin: 0 auto;
      }
    }
/* ======= NEW MENU COMPONENT ======= */
.menu-bg {
  width: 100%;
  height: 107.5269%;
  left: 0.0000%;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
  position: absolute;
  object-fit: cover;
  object-position: center;
}

.logo-1-devor-1 {
  width: 181px;
  height: 64px;
  object-fit: cover;
  object-position: center;
}

.accueil-span {
  font-size: 40.44px;
  font-family: "ballers-delight";
  font-weight: 400;
  word-wrap: break-word;
  color: #EFEDE5;
}

.accueil {
  width: 147.78px;
  text-align: center;
}

.menu-span {
  font-size: 40.44px;
  font-family: "ballers-delight";
  font-weight: 400;
  word-wrap: break-word;
  color: #EFEDE5;
}

.menu {
  width: 216.22px;
  opacity: 0.60;
  text-align: center;
}

.photos-span {
  font-size: 40.44px;
  font-family: "ballers-delight";
  font-weight: 400;
  word-wrap: break-word;
  color: #EFEDE5;
}

.photos {
  width: 216.22px;
  opacity: 0.60;
  text-align: center;
}

.contact-span {
  font-size: 40.44px;
  font-family: "ballers-delight";
  font-weight: 400;
  word-wrap: break-word;
  color: #EFEDE5;
}

.contact {
  width: 216.22px;
  opacity: 0.60;
  text-align: center;
}

.menu-droite {
  width: 849px;
  height: 93px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 17.50px;
}

.logo {
  width: 100%;
  height: 93px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-active-accueil-e82f {
  width: 100%;
  align-self: stretch;
  position: relative;
  display: inline-flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.burger-menu-btn {
  display: none;
  cursor: pointer;
  z-index: 5;
}

@media (max-width: 767px) {
  .menu-bg {
    height: 100%;
    top: 0;
    z-index: 2;
    bottom: auto;
  }
  .logo-1-devor-1 {
    width: 147px;
    height: 52px;
  }
  
  .burger-menu-btn {
    display: block;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%); /* Centered vertically relative to the logo container */
  }

  .logo {
    padding-top: 19px;
    padding-bottom: 19px;
    align-self: stretch;
    z-index: 5;
    flex-direction: row; /* keep it row to align logo and burger */
    justify-content: center; /* Center the Devor logo */
    padding-left: 0;
    padding-right: 0;
    background: #B95128;
  }

  .menu-active-accueil-e82f {
    display: flex;
    flex-direction: column;
    z-index: 1000;
  }

  /* Dropdown styling */
  .menu-droite {
    width: 280px; /* Slightly narrower than full width for aesthetic */
    height: auto;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -10px); /* Start slightly translated up for animation */
    background: #B95128;
    padding-top: 30px;
    padding-bottom: 40px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 30px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    box-shadow: 0px 8px 15px rgba(0,0,0,0.3);
    border: 2px solid #EFEDE5; 
    border-top: none; /* Connect seamlessly to the header */
    z-index: 1; /* Below the logo */
    
    /* Animation states */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
  }

  .menu-droite.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -2px); /* Slight overlap with header to hide seam */
  }
}


/* -- Header fixe — padding contenu -- */
.page__tablet, .page__desktop {
    padding-top: 107px;
    height: auto !important;
    overflow: visible !important;
    position: relative !important;
}
html, body {
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* â”€â”€ Header fixe â€” padding contenu â”€â”€ */
.page__tablet, .page__desktop {
    padding-top: 107px;
    height: auto !important;
    overflow: visible !important;
    position: relative !important;
}
html, body {
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
/* == Menu actif : page contact == */
.accueil { opacity: 0.60 !important; }
.contact { opacity: 1 !important; }
.menu-item { opacity: 0.60; text-align: center; }
.menu-item .menu-span {
  font-size: 40.44px;
  font-family: "ballers-delight";
  font-weight: 400;
  word-wrap: break-word;
  color: #EFEDE5;
}

/* == Formulaire de contact == */
.form-field {
  width: 100%;
  height: 50px;
  padding: 12px 20px;
  border: 1px solid white;
  border-radius: 25px;
  background: linear-gradient(180deg, rgba(255,255,255,0.3) 39%, rgba(255,255,255,0.6) 78%);
  color: white;
  font-family: Montserrat, sans-serif;
  font-size: clamp(14px, 0.22rem + 1.33vw, 29px);
  outline: none;
  box-sizing: border-box;
}
.form-field::placeholder {
  color: rgba(255,255,255,0.5);
}
.form-field:focus {
  border-color: #B95128;
  background: linear-gradient(180deg, rgba(255,255,255,0.4) 39%, rgba(255,255,255,0.7) 78%);
}
.form-textarea {
  height: 237px;
  resize: vertical;
  line-height: 1.5;
}
.btn-envoyer {
  margin-top: 10px;
  padding: 14px 60px;
  border: 2px solid white;
  border-radius: 25px;
  background: #B95128;
  color: white;
  font-family: "aviano-sans", sans-serif;
  font-size: clamp(16px, 0.25rem + 1.5vw, 30px);
  font-weight: 400;
  letter-spacing: 3px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}
.btn-envoyer:hover {
  background: #a0441f;
  transform: scale(1.03);
}
.btn-envoyer:active {
  transform: scale(0.97);
}
.rgpd-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  width: 100%;
}
.rgpd-label input[type="checkbox"] {
  width: 22px;
  height: 22px;
  min-width: 22px;
  margin-top: 2px;
  accent-color: #B95128;
  cursor: pointer;
}

/* == Accessibilité : texte invisible pour lecteurs d'écran == */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
