/* Cleaned form-only CSS */
/* ===========================
   BEBAS NEUE
   =========================== */

/* Bebas Neue — Regular */
@font-face {
  font-family: "Bebas Neue Pro";
  src: url("../fonts/BebasNeuePro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Bebas Neue Pro — Light */
@font-face {
  font-family: "Bebas Neue Pro";
  src: url("../fonts/BebasNeuePro-Light.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

/* Bebas Neue Pro — Book */
@font-face {
  font-family: "Bebas Neue Pro";
  src: url("../fonts/BebasNeuePro-Book.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Bebas Neue Pro — Bold */
@font-face {
  font-family: "Bebas Neue Pro";
  src: url("../fonts/BebasNeuePro-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ===========================
   HELVETICA NEUE
   =========================== */

/* Helvetica Neue — Regular */
@font-face {
  font-family: "Helvetica Neue";
  src: url("https://use.typekit.net/af/b99dc8/0000000000000000775ad3ad/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Regular Italic — 700 italic */
@font-face {
  font-family: "Helvetica Neue";
  src: url("https://use.typekit.net/af/38500d/0000000000000000775ad3a7/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Regular — 400 */
@font-face {
  font-family: "Helvetica Neue";
  src: url("https://use.typekit.net/af/45d708/0000000000000000775ad3ab/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Regular Italic — 400 italic */
@font-face {
  font-family: "Helvetica Neue";
  src: url("https://use.typekit.net/af/2d9cd6/0000000000000000775ad3ac/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Bold — 700 */
@font-face {
  font-family: "Helvetica Neue";
  src: url("https://use.typekit.net/af/6240b8/0000000000000000775ad3b2/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gilroy";
  src: url('../fonts/Gilroy-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gilroy";
  src: url('../fonts/Gilroy-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gilroy";
  src: url('../fonts/Gilroy-RegularItalic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}


:root {
  /** FONTS*/
  --main-font: "am-tw", sans-serif;
  --alt-font: "Bebas Neue", sans-serif;
  --oth-font: "Roboto", sans-serif;

  /** FONT SIZES*/
  --giant: 7rem; /*113*/
  --huge: 6.5rem; /*104*/
  --bigger2: 5.85rem; /*86*/
  --bigger: 5rem; /*80*/
  --wide2: 4.78rem; /*76.48*/

  --wide: 4.936rem; /*78.99*/
  --large3: 4.17rem; /*66.71*/
  --large: 3.47rem; /*55.52*/
  --med4: 3.23rem; /*51.75*/
  --med3: 2.8125rem; /*45*/
  --med: 1.75rem; /*28px*/
  --reg3: 1.375rem; /*22px*/
  --reg2: 1.1875rem; /*19*/

  /**COLORS*/
  --green: #0f5641;
  --blue: #023556;
  --pink: #edb6b5;
  --bordeaux: #693d3f;
  --l-green: #cadfcb;
  --yellow: #ffee7ecc;
  --l-yellow: #f7edbfcc;

  /** PADDINGS*/
  --df-p: 2.375rem; /*38px*/
}

:root {
    /** PADDINGS*/
    --df-p: 20px;

    --wide: 44px; /*78.99*/
    --large3: 4.17rem; /*66.71*/
    --large: 3.47rem; /*55.52*/
    --med4: 3.23rem; /*51.75*/
    --med3: 2.8125rem; /*45*/
    --med: 1.75rem; /*28px*/
    --reg3: 1.375rem; /*22px*/
    --reg2: 1.1875rem; /*19*/
  }

body {
  font-family: "Bebas Neue Pro" !important;
}


.mobile {
  display : none;
}

.desktop {
  display : block;
}

@media (max-width: 768px) {
  .mobile {
    display : block;
  }

  .desktop {
    display : none;
  }
}

/* ----------------------------------- */
/* NAVBAR */
/* ----------------------------------- */

nav.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #F3946B;
  color: white;
  padding: 1vw 2vw;
  z-index: 20;
  position: fixed;
  width: 100%;
}

nav .nav_logo {
  height: 2.5vw;
  width: auto;
}

nav .nav_links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2vw;
  font-weight: 300;
  font-size: 1.2vw;
}

nav .nav_links a {
  font-weight: 300;
}

nav .nav_links a:hover {
  font-weight: bold;
  transition: all 0.6s;
}
/* ----------------------------------- */
/* HEADER */
/* ----------------------------------- */

header {
  width: 75%;
}

header #bg-header {
  width: 100%;
  height: 45vw;
  background-image: url('../img/sefri-vheader-desk-0426.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

header #bg-header .swiper-slide {
  width: 100%;
  height: 100%;
}

header #bg-header .bandeau {
  position: relative;
  top: 6vw;
  left: 0;
  width: 51vw;
  background-color: #F3946B;
  color: white;
  padding: 0.5vw 2vw;
}

header #bg-header .bandeau h2 {
  font-family: 'Gilroy';
  font-weight: 400;
  font-size: 2.1vw;
  margin-bottom: 0;
  font-style: italic;
}

header #bg-header .bandeau h2 b {
  font-weight: 700;
  font-family: 'Gilroy';
  font-style: normal;
}

header #bg-header .bandeau p {
  font-family: 'Gilroy';
  font-weight: 700;
  font-size: 2.1vw;
  margin-bottom: 0;
}

header #bg-header .bandeau p::after {
  content: "";
  width: 20vw;
  height: 10vw;
  background: url('../img/en-famille.png') no-repeat;
  position: absolute;
  top: 1.5vw;
  z-index: 15;
  background-size: 100%;
  left: 33vw;
}


/* ----------------------------------- */
/* MAIN */
/* ----------------------------------- */
main {
  width: 75%;
}

main .bandeau_main {
  width: 100%;
  background-color: #072647;
  color: white;
  padding: 1vw 2vw;
}

main .bandeau_main h2 {
  font-family: 'Gilroy';
  font-weight: 700;
  font-size: 1.7vw;
  margin-bottom: 0;

}

main .residence {
  display: flex;
  width: 100%;
}

main #horizons, main #lumiere {
  flex-direction: row-reverse;
}

main #horizons .residence_description, main #lumiere .residence_description {
  background-color: #F3946B;
}

main #hallize .residence_description, main #beaujour .residence_description {
  background-color: #072647;
}

main #horizons .residence_description .residence_cta, main #lumiere .residence_description .residence_cta{
  background-color: #36385E;
}

main #hallize .residence_description .residence_cta, main #beaujour .residence_description .residence_cta {
  background-color: #009881;
}

main #horizons .residence_description h4, main #lumiere .residence_description h4{
  color: #36385E;
}

main #hallize .residence_description h4, main #beaujour .residence_description h4 {
  color: #F3946B;
}

main .residence_visuel {
  width: 50%;
  height: auto;
  position: relative;
}

main .residence_description {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

main .residence_description_argu {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 2vw;
}

main .residence_description_argu div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vw;
  width: 30%;
  text-align: center;
}

main .residence_description_argu div img {
  max-height: 3vw;
  min-height: 3vw;
}

main .residence_description_argu div p {
  max-height: 4vw;
  min-height: 4vw;
}

main .residence_cta {
  width: fit-content;
  padding: 0.5vw 1vw;
  height: auto;
  border-radius: 15px;
  color: white;
}

main .residence_description h3 {
  font-weight: 100;
  color: white;
  font-size: 2.6vw;
  margin-bottom: 0;
}

main .residence_description h4 {
  font-weight: 600;
  font-size: 2.6vw;
}

main .residence_description_argu div p {
  font-family: "Helvetica Neue";
  font-weight: 400;
  color: white;
  font-size: 0.7vw;
}

main .residence_cta {
  font-family: "Helvetica Neue";
  font-size: 1.2vw;
  text-decoration: none;
}

/* ----------------------------------- */
/* FOOTER */
/* ----------------------------------- */

footer {
  width: 75%;
  height: auto;
  background-color: #f2f2f2;
  padding: 2vw;
}

footer p {
  font-family: "Helvetica Neue";
  font-size: 0.5vw;
  font-family: 300;
  color: #000000;
}

/* ----------------------------------- */
/* FORM */
/* ----------------------------------- */


form .form_header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2vw 0;
}

form .form_header_logo {
  width: 18vw;
  height: auto;
  margin-bottom: 0;
  text-align: center;
}

form .form_header_texte {
  font-family: "Helvetica Neue";
  font-size: 1vw;
  font-weight: 400;
  text-align: center;
  color: #fff;
  margin-bottom: 0;
}

section#hallize, section#horizons, section#volupte, section#lumiere {
  scroll-margin-top: 65px;
}


section.form {
  background-color: #F5F5F5;
  position: fixed;
  right: 0;
  top: 0;
  width: 25vw;
  height: 100%;
  z-index: 10;
  padding-top: 4.5vw;
  background-color: #072647;
  overflow-y: scroll;
}

section.form::-webkit-scrollbar {
  display: none;
}

.flo-form-wrapper {
  width: 100%;
}

#formDiv {
  width: 100%;
  background-color: #072647;
  padding-bottom: 5vw;

}

form .form_obli {
  font-size: 0.5vw;
  text-align: center;
  font-style: italic;
  font-family: "Helvetica Neue";
}

form .checkbox-text {
  font-size: 0.6vw;
  font-family: "Helvetica Neue";
  font-weight: 600;
}

form .form_checkbox_consent {
  margin: 1vw 0;
}

form .form_footer-tel {
  width: 100%;
  height: auto;
  margin-top: 1vw;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.form_civilite {
  display: flex;
  gap: 1vw;
  margin-bottom: 0.25vw;
  justify-content: center;
} 

.form_civilite .radio-group {
  width: 50%;
}


.f-micro {
  font-size: 10px;
}

.f-micro-2 {
  line-height: 1.4em;
  font-size: 12px;
}

.white {
  color: white;
}

.df-para-2 {
  font-size: 1.3125rem;
  text-transform: uppercase;
  font-weight: 500;
  font-family: var(--alt-font);
  line-height: 1.25em;
  margin-bottom: 2.5rem;
}


@media screen and (max-width : 1024px){
.df-para-2 {
    font-size: 22px;
  }
}

/* Style for the 'Voir plus' button */

.green-btn {
  border-color: var(--green);
  color: var(--green);
}

.cs-form {
  display: flex;
  flex-direction: column;
}

.checkbox-container {
  display: flex;
  align-items: flex-start;
}

.checkbox-container input[type="checkbox"] {
  margin-right: 10px;
  margin-top: 4px;
}

.checkbox-container input[type="checkbox"] {
  /* Agrandir la case à cocher */
  transform: scale(1.25);
  margin-right: 10px;
  margin-top: 2px;
  cursor: pointer;
}

.radio-group-title {
  font-size: 13px;
  font-weight: 900;
  padding-top: 1.25rem;
  margin-bottom: 2px;
  width: 100%;
}

.radio-group {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-bottom: 12px;
}

.radio-button {
  position: relative;
  width: 48%;
}

.radio-button input[type="radio"] {
/* display: none; On cache l'input natif */
  opacity: 0;
  width: 8vw;
  margin-top: -2vw;
  position: relative;
  height: 1.8vw;
  bottom: -1.8vw;  
}

.radio-button label {
  font-size: 0.75vw;
  padding: 10px;
  border: 0;
  border-radius: 20px;
  cursor: pointer;
  background-color: white;
  color: black;
  font-weight: 900;
  transition: all 0.2s ease;
  display: inline-block;
  width: 100%;
  text-align: center;
  background: #ffffff;
  box-shadow: 0px 3.28872px 3.28872px rgba(0, 0, 0, 0.25);
  font-family: "Helvetica Neue";
  text-transform: uppercase;
}

.civilite-options .radio-button {
  position: relative;
  width: 50%;
}

.form_civilite_label {
  width: 25%;
  font-family: "Helvetica Neue";
  text-align: center;
}

.civilite-options .radio-button input[type="radio"] {
/* display: none; On cache l'input natif */
  opacity: 0;
  width: 3vw;
  margin-top: -2vw;
  position: relative;
  height: 1.8vw;
  bottom: -1.8vw;  
}

.civilite-options .radio-button label {
  font-size: 0.75vw;
  padding: 10px;
  border: 0;
  border-radius: 20px;
  cursor: pointer;
  background-color: white;
  color: black;
  font-weight: 400;
  transition: all 0.2s ease;
  display: inline-block;
  width: 100%;
  text-align: center;
  background: #ffffff;
  box-shadow: 0px 3.28872px 3.28872px rgba(0, 0, 0, 0.25);
  font-family: "Helvetica Neue";
  text-transform: capitalize;
}

/* Rectangle 2 copie */

.radio-button input[type="radio"]:checked + label {
  background: #ffffff;
  box-shadow: 0px 3.28872px 3.28872px rgba(0, 0, 0, 0);
}

.radio-button label:hover {
}

.form-fields-wrapper {
  max-width: 20vw;
  margin-left: auto;
  margin-right: auto;
}

.form label {
  /* position: relative;
  color: #14133b;
  background-color: white;
  font-size: 1.125rem;
  line-height: 1em;
  text-align: center;
  padding: 0.75rem 2rem;
  border: 1px solid #bb9857;
  border-radius: 30px;
  display: block;
  cursor: pointer;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: 300;
  text-transform: uppercase;
  position: relative; */
}

.form input:checked + label {
}

.cs-form-group {
  margin-bottom: 1.5rem;
}

.cs-form-radio_group {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem;
}

.cs-form-infos_group {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 8px;
  margin: 0 auto;
  max-width: 20vw;
}

/* .cs-form-radio_group input {
  display: none;
}

*/

.cs-form-radio_group__item label {
  cursor: pointer;
  line-height: 1em;
  font-size: 11px;
}

input[type="radio"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: transparent;
  /* Not removed via appearance */
  margin: 0;
  appearance: none;
  font: inherit;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: grid;
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
}

.para-micro {
  font-size: 10px;
  margin-bottom: 8px;
}

input[type="radio"]::before {
  width: 15px;
  height: 15px;
  transition: all 0.3s;
  position: absolute;
  left: 0%;
  top: 50%;
  content: "";
  opacity: 1;
  border-radius: 50%;
  transition: 120ms transform ease-in-out;
  display: block;
  z-index: 4;
  border: 1px solid white;
  background-color: white;
  transform: translateY(-50%);
}

input[type="radio"]:checked::before {
  background-color: black;
  opacity: 1;
}

.radio-group .radio-button input:checked+label {
  background-color: black;
  color: white;
}

/* input[type="radio"]::after {
  position: absolute;
  z-index: 3;
  left: 0%;
  top: 0%;
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
border: 5px solid white;
  transition: 120ms transform ease-in-out;
 display: block;
 background-color: transparent

}

*/
.cs-form-input_group__item input {
  border-radius: 25px;
  border: 1px solid white;
  padding: 0.5rem 1rem;
  width: 100%;
  background-color: white;
  color: black;
  font-size: 14px;
  transition: all 0.2s;
  margin-bottom: 0.5vw;
  font-family: "Helvetica Neue";
}

.cs-form-input_group__item select {
  border-radius: 25px;
  border: 1px solid white;
  padding: 0.5rem 1rem;
  width: 100%;
  background-color: white;
  color: black;
  font-size: 12px;
  transition: all 0.2s;
  margin-bottom: 1vw;
  font-family: "Helvetica Neue";

  -webkit-appearance: none; /* supprime le style natif sur Safari */
  appearance: none;
  height: 38px; /* même hauteur que tes inputs */
  line-height: 1.2;
}  

.cs-form-radio_group__item {
  display: flex;
  gap: 2px;
  align-items: center;
}

.cs-form-radio_group__item select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 0px;
  border-radius: 30px;
  background: white;
}

.cs-form-input_group__item input::placeholder {
  color: black;
  opacity: 0.4;
  font-style: italic;
}

.cs-form-input_group__item input:focus {
  outline: 1px solid white;
  border: 1px solid white;
}

.cs-form-radio_group.bigger-radio-btns.mab_error label, .cs-form-radio_group.bigger-radio-btns.mab_error input, .cs-form-radio_group.smaller-radio-btns.mab_error label, .cs-form-radio_group.smaller-radio-btns.mab_error input {
  border: none !important;
}

.smaller-radio-btns .cs-form-radio_group__item {
  width: fit-content;
}

.small-radio-btns .cs-form-input_group__item {
  width: 48%;
}

.cs-form-input_group__item.input-ville {
  width: 100%;
}

.med-radio-btns .cs-form-radio_group__item {
  width: 27.5%;
}

.big-radio-btns .cs-form-radio_group__item {
  width: 29.5%;
}

.bigger-radio-btns .cs-form-radio_group__item {
  cursor: pointer;
}

@media (min-width: 1025px) {
  form select#programme {
    margin-bottom: 0.5vw;
  }
}


form select#programme option ,form select#programme, form select#budget option ,form select#budget {
  color: #999999;
  font-style: italic;
}

#confirmation {
  font-family: "Helvetica Neue";
  font-size: 1vw;
  text-align: center;
  color: #fff;
  padding: 2vw;
  margin-top: 2vw;
}

/* Tracé 20564 */

.cs-form_submit {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.375rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  width: 85%;
  max-width: 85%;
  border: 0px;
  font-size: 1vw;
  line-height: 1em;
  border-radius: 20px;
  padding: 11px 40px 11px 40px;
  color: #fff;
  text-align: center;
  /* box-shadow: 4px 4px 6px rgba(1, 40, 122, 0.384314); */
  -webkit-appearance: none;
  appearance: none;
  background-color: #F3946B;
}

section .residence_patch {
  position: absolute;
  width: 10vw;
  height: 10vw;
  margin-top: 17vw;
  margin-left: 26vw;
  margin-right: 1vw;
}


@media screen and (max-width: 1025px) {
input[type="radio"]:checked::before {
    background-color: black;
    opacity: 1;
  }
.radio-button input[type="radio"] {
    opacity: 0;
    width: 43vw;
    margin-top: -10vw;
    position: relative;
    height: 9.8vw;
    bottom: -9.8vw;
  }
}


@media screen and (max-width: 769px) {
.cs-form_submit {
    /* font-size: 20px; */
  }
}

@media (max-width: 768px) {
  /* --------------------------- */
  /* NAV_MOBILE */
  /* --------------------------- */

  nav.navbar {
    padding: 4vw 2vw;
    position: fixed;
  }

  nav.navbar .nav_logo {
    height: 9vw;
  }

  nav.navbar .nav_menu {
    width: 9vw;
  }

  /* --------------------------- */
  /* HEADER_MOBILE */
  /* --------------------------- */

  header {
    width: 100%;
    padding-top: 70px;
  }

  header #bg-header {
    height: 60vw;
    background-image: url('../img/sefri-vheader-mob-cc.jpg');
    background-position: 0 8vw;
    background-size: cover;
  }

  header #bg-header .bandeau {
    position: relative;
    top: -1vw;
    left: 0;
    width: 100%;
    background-color: #F3946B;
    color: white;
    padding: 2.5vw 5vw;
    background: url(../img/background-deco-sefri.png) no-repeat;
    background-size: 100%;
    background-position-y: -1vw;
  }

  header #bg-header .bandeau h2 {
    font-family: 'Gilroy';
    font-weight: 400;
    font-size: 3.3vw;
    margin-bottom: 0;
    font-style: italic;
  }

  header #bg-header .bandeau p {
    font-family: 'Gilroy';
    font-weight: 700;
    font-size: 3vw;
    margin-bottom: 0;
  }

  header #bg-header .bandeau p::after {
    content: "";
    width: 40vw;
    height: 13vw;
    background: url(../img/en-famille.png) no-repeat;
    position: absolute;
    top: 2.7vw;
    z-index: 15;
    background-size: 100%;
    left: 50vw;
  }

  /* --------------------------- */
  /* MAIN_MOBILE */
  /* --------------------------- */

  main {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  main .bandeau_main h2 {
    font-family: 'Gilroy';
    font-weight: 700;
    font-size: 3vw;
    margin-bottom: 0;
    text-align: center;
    margin: 3vw 0;
  }

  main .bandeau_main {
    width: 100%;
    background-color: #072647;
    color: white;
    padding: 2vw 2vw;
    background: url('../img/background-deco-blue-sefri.png') no-repeat;
    background-size: 100%;
    background-position-y: 0vw;
    position: relative;
    z-index: 1;
    margin-top: -2vw;
    height: 18vw;
  }

  main .residence {
    flex-direction: column;
  }

  main .residence_visuel, main .residence_description {
    width: 100%;
  }

  main .residence_title {
    text-align: center;
    margin: 4vw 2vw;
  }

  main .residence_title h3 {
    font-size: 6vw;
    margin-bottom: 1vw;
    font-weight: 100;
  }

  main .residence_title h4 {
    font-size: 6vw;
    font-weight: 600;
    margin-bottom: 0;
  }

  main #horizons .residence_title h4, main #lumiere .residence_title h4, main #beaujour .residence_title h3, main #hallize .residence_title h3 {
    color: #072647;
  }

  main #horizons .residence_title h3, main #lumiere .residence_title h3, main #beaujour .residence_title h4, main #hallize .residence_title h4 {
    color: #F3946B;
  }

  
  main .residence_description {
    height: 55vw;
    padding: 3vw;
  }

  main .residence_description_argu {
    margin-bottom: 6vw;
  }

  main .residence_description_argu div img {
    height: auto;
    margin-bottom: 3vw;
  }

  main .residence_description_argu div p {
    font-size: 2.5vw;
  }

  main .residence_description_argu div img {
  max-height: 10vw;
  min-height: 10vw;
}

main .residence_description_argu div p {
  max-height: 11vw;
  min-height: 11vw;
}

  main .residence_cta {
    font-size: 3.2vw;
    padding: 1.5vw 3vw;
  }

  main #horizons, main #lumiere {
    flex-direction: column;
  }

  main .main_cta_mobile {
    position: fixed;
    bottom: 0;
    width: 100%;
    border-radius: 16px;
    background: #F3946B90;
    color: white;
    text-align: center;
    font-family: "Bebas Neue Pro";
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 93.333% */
    text-transform: uppercase;
    padding: 5vw 0;
    z-index: 10;
  }

  /* ----------------------- */
  /* FORM MOBILE */
  /* ----------------------- */


  section.form {
    position: initial;
    width: 100%;
    height: 240vw;
    background-color: #072647;
    scroll-margin-top: 120px;
  }

  #formDiv {
    width: 100%;
    background-color: #072647;
    height: 50vw;
    padding-top: 15vw;
  }

  form .form_header_logo {
    width: 55vw;
    height: auto;
    margin-bottom: 4.5vw;
    text-align: center;
  }

  form .form_header_texte {
    font-family: "Helvetica Neue";
    font-size: 3.2vw;
    font-weight: 400;
    text-align: center;
    color: #fff;
    margin-bottom: 4vw;
  }

  .form-fields-wrapper {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .civilite-options .radio-button label {
    font-size: 2.9vw;
  }

  .form_civilite_label {
    font-size: 3.2vw;
  }

  .form_civilite {
    align-items: center;
  }

  .radio-button {
    position: relative;
    width: 100%;
  }

  .cs-form-infos_group{
    margin: 0;
    max-width: 39vw;
  }

  .cs-form-input_group__item input {
    margin-bottom: 3.5vw;
  }

  .cs-form-input_group__item select {
    margin-bottom: 3.5vw;
  }

  .radio-button input[type="radio"] {
    opacity: 0;
    width: 39vw;
    margin-top: -10vw;
    position: relative;
    height: 9.8vw;
    bottom: -9.8vw;
  }

  .radio-button label {
    font-size: 2.9vw;
  }

  form .form_obli {
    font-size: 1.6vw;
    margin-bottom: 4vw;
  }

  form .checkbox-text {
    font-size: 2.6vw;
    
  }

  .cs-form_submit {
    font-size: 4.1vw;
    background-color: #F3946B;
  }
  form select#budget {
    margin-bottom: 3vw;
  }

  form .form_checkbox_consent {
    margin: 3vw 0;
  }

  #confirmation {
    font-family: "Helvetica Neue";
    font-size: 4.5vw;
    text-align: center;
    color: #fff;
    padding: 2vw;
    margin-top: 110vw;
  }

  footer {
    width: 100%;
    padding: 6vw;
  }

  footer p {
    font-size: 2.7vw;
  }

  section .residence_patch {
    position: absolute;
    width: 25vw;
    height: 25vw;
    margin-top: 69vw;
    margin-left: 72vw;
    margin-right: 1vw;
  }

  
}

.df-nav-menu {
  display: flex;
  gap: 3.375rem;
  font-family: var(--alt-font);
  font-size: var(--med);
  color: black;
  text-transform: uppercase;
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
  align-items: center;
  font-weight: 400;
  letter-spacing: 16%;
}

.df-nav-menu_li {
  min-width: 9vw;
}

.df-nav-menu_li a {
  color: black;
  padding: 5px 0;
  display: block;
  position: relative;
}

.df-nav-menu_li a:before {
  opacity: 0;
  transition: all 0.4s;
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 10%;
  height: 2px;
  left: 0;
  background-color: var(--green);
  border-radius: 2px;
}

.df-nav-menu_li a:hover:before {
  opacity: 1;
  width: 100%;
}

@media screen and (max-width: 1024px) {
  .df-nav-menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 54px;
    font-size: 28px;
    line-height: 1em;
  }
}

/* Empêcher le scroll quand le menu est ouvert */
body.menu-open {
  overflow: hidden;
}

/* Bouton burger */
#menu-toggle {
  padding: 0;
  margin: 0;
}

/* Overlay du menu */
#menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  opacity: 0;
  z-index: 999;
}

/* Offcanvas menu */
#offcanvas-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 500px;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  z-index: 1000;
  transform: translateX(-100%); /* caché par défaut */
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
  padding: 18px 18px 55px 28px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* défilement fluide sur iOS */
}

/* Bouton de fermeture dans le offcanvas */
#menu-close {
  margin-bottom: 18px;
}