@import "minireset.css";
@import "cs-base.css";

/*html {
  overflow-x: clip;
  overflow-y: scroll; 
  max-width: 100%;
  font-size: clamp(0.6875rem, 0.0625rem + 0.7813vw, 1rem);
}
@media screen and (max-width: 769px) {
  html {
    overflow-x: clip;
  }
}*/
html {
  overflow-x: hidden;
  overflow-y: scroll; 
  max-width: 100%;
  font-size: clamp(0.6875rem, 0.0625rem + 0.7813vw, 1rem);
}
@media screen and (max-width: 769px) {
  html {
    overflow-x: hidden;
    /* font-size: clamp(0.75rem, 0.75rem + 0vw, 0.75rem); */
  }
}

/** @FONT FACE*/
@font-face {
  font-family: "am-tw";
  font-weight: 400;
  src: url(../fonts/am-tw.woff2) format("woff2"),
    url(../fonts/am-tw.woff) format("woff");
}
@font-face {
  font-family: "am-tw";
  font-weight: 600;
  src: url(../fonts/am-tw-s.woff2) format("woff2"),
    url(../fonts/am-tw-s.woff) format("woff");
}
@font-face {
  font-family: "am-tw";
  font-weight: 700;
  src: url(../fonts/am-tw-b.woff2) format("woff2"),
    url(../fonts/am-tw-b.woff) format("woff");
}

/* =================== */
/* = HTML TAGS =*/
/* ================= */

/*html {
  overflow-x: clip;
}*/

body {
   overflow-y: scroll!important;
}

a {
  text-decoration: none;
}


/* =================== */
/* = GENERAL CLASSES =*/
/* ================= */
.bebas-neue-regular {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}

: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*/
}
@media screen and (max-width: 1024px) {
  :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*/
  }
}
.main-font {
  font-family: var(--main-font);
}
.alt-font {
  font-family: var(--alt-font);
}
.oth-font {
  font-family: var(--oth-font);
}

.f-micro {
  font-size: 10px;
}
.f-micro-2 {
  line-height: 1.4em;
  font-size: 12px;
}
/*== GENERAL CALSSES*/

/**SPACING*/
.df-p {
  padding-left: var(--df-p);
  padding-right: var(--df-p);
}
.df-pl {
  padding-left: var(--df-p);
}
.df-pr {
  padding-right: var(--df-p);
}
.black {
  color: black;
}
.white {
  color: white;
}
.green {
  color: var(--green);
}
.pink {
  color: var(--pink);
}
.blue {
  color: var(--blue);
}

/**BG COLORS*/
.bg-black {
  background-color: black;
}
.bg-pink {
  background-color: var(--pink);
}
.bg-bordeaux {
  background-color: var(--bordeaux);
}
.bg-l-green {
  background-color: var(--l-green);
}
.bg-green {
  background-color: var(--green);
}
/* == FONT SIZES*/
.wide {
  font-size: var(--wide);
}

.df-em {
  font-weight: 700;
}

/*== DF TITLES*/
.df-title {
  font-size: var(--med3);
  line-height: 1.3em;
  font-family: var(--alt-font);
  letter-spacing: 16%;
  text-transform: uppercase;
}
.df-title-b {
  font-family: var(--alt-font);
  font-size: 2rem;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.125em;
  letter-spacing: 2px;
}

.df-title-c {
  font-family: var(--alt-font);
  font-size: var(--med);
  letter-spacing: 16%;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.125em;
}

.df-title-d {
  font-family: var(--alt-font);
  font-size: 2.8rem;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.125em;
  letter-spacing: 4px;
}

.sct-1 .show-m {
  display: none;
}
.swiper-txt {
  padding: 20px 16px 10px 16px;
  border-width: 2px;
  border-style: solid;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
}
.swiper-txt.blue {
  border-color: var(--blue);
}
.swiper-txt.black {
  border-color: black;
}
.swiper-txt.pink {
  border-color: var(--pink);
}

@media screen and (max-width: 1024px) {
  .swiper-txt p {
    font-weight: 400;
  }
  .hide-m {
    display: none;
  }
  .sct-1 .hide-m {
    display: none;
  }
  .sct-1 .show-m {
    display: block;
  }
  .df-title_span {
    font-size: 20px;
    line-height: 1em;
    display: block;
  }
  .df-title {
    font-size: 29px;
    letter-spacing: 3px;
  }
}
@media screen and (max-width: 420px) {
  .df-title_span {
    font-size: 14px;
  }
  .df-title {
    font-size: 21px;
  }

  
}

@media screen and (max-width: 370px) {
  .form-correctif {
    margin: 10vw 0;
  }
}
.df-list {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
  font-family: var(--main-font);
  font-weight: 600;
  font-size: var(--reg3);
}
.df-list_li {
  position: relative;
  padding-left: 1.875rem;
  margin-bottom: 0;
  line-height: 2.6em;
}
.df-list_li:before {
  content: "";
  display: block;
  position: absolute;
  top: 1.2em;
  background-color: black;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  left: 0.65rem;
}

.alt-list {
  font-size: var(--reg2);
  list-style-type: none;
  font-family: var(--main-font);
  font-weight: 600;
}
.alt-list_li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 1rem;
  line-height: 1.25em;
}
.alt-list_li:before {
  content: "";
  display: block;
  position: absolute;
  top: 0.5em;
  background-color: black;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  left: 0.65rem;
}

/*== DF PARAGRAPHS*/
.para-med3 {
  font-size: 1.35rem;
  line-height: 1.3em;
}
.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;
  }
}
.df-lsp {
  letter-spacing: 16%;
}

/*=> Main elements*/
.df-header {
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: white;
  padding: 0 3rem;
  display: flex;
  justify-content: space-between;
  gap: 0;
  align-items: center;
  height: 4.75vw;
}

.img-offre {
  position: absolute;
  width: 13vw;
  right: 3vw;
  top: unset;
  bottom: 1vw;
  /* top: 1vw; */
}

#form i {
  font-size: 70%;
}

@media screen and (max-width: 1024px) {
  .df-header {
    background-color: transparent;
    padding: 28px 18px;
    height: auto;
  }

  .img-offre {
    width: 30vw;
    right: 5vw;
    top: 22vw;
  }


}
.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;
  }
}

.df-header_logo-wrapper {
  width: 13.15vw;
  min-width: 160px;
}

/*========= MAIN =========*/

/****LAnding section */
.df-land-wrapper {
  padding-top: 4.74vw;
  height: 100vh;
}
@media screen and (max-width: 1024px) {
  .df-land-wrapper {
    padding-top: 0;
    height: 109.25vw;
  }
}
.df-land {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-top: 0rem;
  padding-bottom: 1rem;
  background-image: url(../img/bg-land-2.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 82%;
  position: relative;
}
#bg-video {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  z-index: 1;
  width: 100%;
}

.zi-2 {
  z-index: 2;
}
.land_logo-wrapper {
  width: 20vw;
  padding-top: 2vw;
} 

@media screen and (max-width: 1024px) {
  .land_logo-wrapper {
    width: 55%;
    max-width: 350px;
    min-width: 230px;
    padding-top: 36px;
  }
}
.main-content-wrapper {
  display: flex;
  gap: 0;
  position: relative;
}
.sct-1 {
  position: relative;
  background-color: white;
  z-index: 6;
}
.df-left {
  width: 77.4%;
}
.df-right {
  width: 22.6%;
  position: relative; /* requis pour Sticksy bottom-stuck */
}

@media screen and (max-width: 1024px) {
  .main-content-wrapper {
    flex-direction: column;
  }
  .df-left {
    width: 100%;
  }
  .df-right {
    width: 100%;
  }

  
}

.df-form-wrapper {
  display: flex;
  height: calc(110vh - (4.75vw + 10px));
  justify-content: flex-start;
  flex-direction: column;
  padding: 80px 15px 30px 15px;
  overflow-y: auto;
  overflow-x: hidden;
}

.df-form-wrapper::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.df-form-wrapper {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.df-right {
  z-index: 99;
  position: relative;
}

/*PRESENTATION SECTION*/

.pres_header {
  position: relative;
  padding: 2rem 4rem;
  display: flex;
  gap: 1vw;
  justify-content: space-between;
  align-items: center;
  background-color: var(--yellow);
}
.pres_header::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 25%;
  content: "";
  background-color: var(--l-yellow);
  z-index: 2;
}
.pres_header::after {
  position: absolute;
  bottom: 25%;
  left: 0;
  width: 100%;
  height: 25%;
  content: "";
  background-color: var(--l-yellow);
  z-index: 2;
}
@media screen and (max-width: 1024px) {
  .pres-sct {
    background-image: url("../img/bg-cs.png");
    padding: 30px 20px 4px  20px;
  }

  .pres-sct .img-wrapper {
    padding: 0 8px;
  }

  .df-form-wrapper {
    height: 110vh;
    overflow-y: visible;
    overflow-x: visible;
  }

  @media screen and (max-width : 1024px){
      .pres-sct .block-m.flag-wrapper{
    width: 34px;
    padding: 0 0 0 0;
    margin: 12px auto 0 auto;
    }
  }

  .pres_header {
    justify-content: center;
    padding: 0 0 18px 0;
    background-color: transparent;
    background-size: 56px auto;
  }
  .pres_header::before {
    display: none;
  }
  .pres_header::after {
    display: none;
  }
}

.pres-header_el {
  position: relative;
  z-index: 4;
}
.flag-wrapper {
  width: 5.89vw;
}
@media screen and (max-width: 1024px) {
  .flag-wrapper {
    width: 34px;
  }
}
.left-flag {
  transform: scalex(-1);
}

/*= SECTION 2*/
.sct-2 {
  display: flex;
}
.sct-2_left {
  width: 35.6%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sct-2_right {
  width: 64.4%;
  display: flex;
  align-items: end;
}

.para-reg3 p {
  font-size: var(--reg3);
  line-height: 1.3em;
  margin-bottom: 1.5rem;
}
.para-reg3 p:last-child {
  margin-bottom: 0;
}
.toggle-read-more-m {
  display: none;
}
@media screen and (max-width: 1024px) {
  .sct-2 {
    display: flex;
    flex-direction: column-reverse;
  }
  .sct-2_left {
    width: 55%;
    margin: 0 auto;
    min-width: 240px;
    max-width: 100%;
    padding-top: 30px;
    padding-bottom: 50px;
    padding-left: 0;
    padding-right: 0;
  }
  .sct-2_right {
    width: 100%;
  }
  .para-reg3 p {
    font-size: 14px;
  }

  .toggle-read-more-m {
    display: flex;
  }
  .read-more-m {
    display: none;
  }
}

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

.green-btn {
  border-color: var(--green);
  color: var(--green);
}
.df-btn {
  padding: 7px 5px 3px 5px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  border-width: 2px;
  border-style: solid;
  font-size: var(--reg2);
  font-weight: 700;
  font-family: var(--alt-font);
  letter-spacing: 16%;
}
@media screen and (max-width: 1024px) {
  .df-btn {
    font-size: 19px;
  }
}
.df-btn.green-btn:hover {
}

/*= SCT 3*/
.sct-3 {
}
.bg-waves-wrapper {
  min-height: 20px;
  overflow: hidden;
  background-color: white;
}
#bg-video-waves {
  position: absolute;
  top: -120%;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: 1;
}
@media screen and (max-width: 1024px) {
#bg-video-waves {

  top: -0%;

}
}
.sct-3-content {
  position: relative;
  z-index: 6;
  background-color: rgba(255, 255, 255, 0.75);
  padding-top: 3.375rem;
  padding-bottom: 6.875rem;
  padding-left: var(--df-p);
  padding-right: var(--df-p);
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}
.sct-3_left {
  width: 54%;
}
.sct-3_right {
  width: 46%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 4.6875rem 0 5.875rem;
}

@media screen and (max-width: 1024px) {
  .sct-3 {
    /* padding-left: 48px;
    padding-right: 48px;
    padding-bottom: 36px;
    padding-top: 30px; */
    flex-direction: column;
  }
  .sct-3_left {
    width: 100%;
  }
  .sct-3_right {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px 0 25px;
  }
}

/**SECTION 4*/
.alt-sct {
  padding-right: 6.375rem;
}
.df-ptb {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.sct-alt_left {
  width: 38.25%;
}
.sct-alt_right {
  width: 61.75%;
  padding: 3.75rem 0 0 5.5rem;
}

.sct-alt_left-reverse {
  width: 61.75%;
  padding: 3.75rem 5.5rem 0 0;
}
.sct-alt_right-reverse {
  width: 38.25%;
}

.alt-title {
  margin-bottom: 4.8125rem;
  font-weight: 500;
  font-family: var(--alt-font);
  line-height: 1em;
  letter-spacing: 16%;
  text-transform: uppercase;
  justify-content: center;
  text-align: center;
  font-size: 3rem;
  display: flex;
  width: 100%;
  padding: 1.125rem 1rem 1rem 1rem;
  border-width: 2px;
  border-style: solid;
}

.df-swiper-wrapper {
  padding: 50px 20px 54px 20px;
}

.img-wrapper.arrow {
  width: 60px;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding-top: 20px;
}

@media screen and (max-width: 1024px) {
  .rdv-cta-wrapper{
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 10;
  left: 0;
  display: flex;
  justify-content: center; 
}

#contact {
  z-index: 11;
}

.rdv-cta{
  width: 390px;
  padding-top: 2px;
  line-height: 1.15em;
  max-width: 90%;
  letter-spacing: 18%;
  font-size: 40px;
  border-width:4px;
  border-style: solid;
  background-color: white;
  font-family: var(--alt-font);
  text-transform: uppercase;
  text-align: center;
  font-weight: 500;
}


/* Common overlay style */
.offcanvas-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  opacity: 0;
  z-index: 99;
}

/* RDV offcanvas (slides from bottom) */
#rdv-offcanvas {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  background: var(--green);
  z-index: 100;
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.2);
  overflow-y: auto;
  transform: translateY(100%);
}

.rdv-header {
  display: flex;
  justify-content: flex-end;
  padding: 20px;
}

.rdv-content {
  padding: 20px;
}


  .alt-title {
    font-size: 37px;
    line-height: 0.9em;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
    letter-spacing: 3px;
  }
  .alt-title span {
    font-size: 0.864em;
    line-height: 1em;
  }

  .df-swiper-content {
    width: 90%;
    max-width: 300px;
    margin: 0 auto;
  }
  @media screen and (max-width : 440px){
      .df-swiper-content {
  
    max-width: 275px;
   
  }
  }
  .df-swiper-card {
    width: 100%;
    max-width: 312px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 428px) {
  .alt-title {
    padding-left: 4px;
    padding-right: 4px;
    font-size: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
  }
}

@media screen and (max-width: 400px) {
  .df-swiper-wrapper {
    padding: 30px 20px;
  }
}
.alt-title.black {
  border-color: black;
}
.alt-title.pink {
  border-color: var(--pink);
}
.alt-title.blue {
  border-color: var(--blue);
}
.alt-sct {
  display: flex;
}
.alt-sct.reverse {
  flex-direction: row-reverse;
}
.oth-sct {
  display: flex;
}
.oth-sct_left {
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: center;
  align-items: flex-start;
  padding: 2rem 3.125rem 1rem var(--df-p);
}

.oth-sct_right {
  display: flex;
}

.sct-6 .oth-sct_left {
  width: 41.2%;
}
.sct-6 .oth-sct_right {
  width: 58.8%;
  min-height: 39vw;
}

.sct-7 .oth-sct_left {
  width: 40.5%;
}
.sct-7 .oth-sct_right {
  width: 59.5%;
  min-height: 29.35vw;
}

.sct-8 .oth-sct_left {
  width: 34.8%;
}
.sct-8 .oth-sct_right {
  width: 65.2%;
  min-height: 30vw;
}
.sct-9 .oth-sct_left {
  width: 39.5%;
}
.sct-9 .oth-sct_right {
  width: 60.5%;
  min-height: 28.6vw;
}

.df-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}

.df-grid_cell {
  display: flex;
  flex-direction: column;
  padding-bottom: 2.5rem;
  padding-left: 1.5rem;
  gap: 1.5rem;
}

.pink-lines {
  background: linear-gradient(
    to bottom,
    rgba(241, 217, 210, 0.8) 2px,
    rgba(237, 182, 181, 0.8) 2px,
    rgba(237, 182, 181, 0.8) 4px,
    rgba(241, 217, 210, 0.8) 4px
  );
  background-size: 100% 4px; /* Each line is 4px tall, so this defines the pattern */
}
.yellow-lines {
  background: linear-gradient(
    to bottom,
    rgba(255, 238, 126, 0.8) 2px,
    rgba(249, 241, 204, 0.5) 2px,
    rgba(249, 241, 204, 0.5) 4px,
    rgba(255, 238, 126, 0.8) 4px
  );
  background-size: 100% 4px;
}
.blue-green-lines {
  background: linear-gradient(
    to bottom,
    rgba(183, 210, 217, 1) 2px,
    rgba(202, 223, 203, 0.5) 2px,
    rgba(202, 223, 203, 0.5) 4px,
    rgba(183, 210, 217, 1) 4px
  );
  background-size: 100% 4px;
}
.bg-green {
  background-color: #0F5641;
}
.bg-img-rencontrez-nous {
  background: url("../img/rencontrez-nous.jpg") lightgray 50% / cover no-repeat;
  height: 110vw;
  align-content: center;
}

.before, .after {
  display: inline-flex;
  width: 3vw;
}

.obj-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.obj-wrapper img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

.sct-10 {
  flex-direction: column;
  padding: 10px 0 28px 0;
}
.sct-10_cards {
  padding-left: 28px;
  display: flex;
  gap: 0;
}

.sct-10_cards__lists {
  width: 60%;
  padding-right: 26px;
}
.sct-10_cards__lists .df-list {
  margin-bottom: 50px;
}

.sct-10_cards__imgs {
  width: 40%;
  display: flex;
  flex-direction: column;
  gap: 40px;
  justify-content: flex-start;
  padding-top: 10vw;
}

.sct-10_cards__imgs .img-wrapper {
}
.alt-title.cs {
  border-color: transparent;
  margin-bottom: 20px;
}
@media screen and (max-width: 1024px) {
  .df-list_li {
    font-size: 12px;
    line-height: 22px;
    padding-left: 12px;
  }
  .df-list_li:before {
    width: 4px;
    height: 4px;
    top: 9px;
    left: 3px;
  }
  .before, .after{
    width: 7vw;
  }
}

/*?? FOOTER*/

footer {
  position: relative;
  z-index: 10;
  font-family: var(--oth-font);
}
.footer-content {
  color: white;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.footer-content-wrapper {
  width: 75%;
  padding: 3.125rem 0 6rem 3.75rem;
}
.footer-cols_left {
  width: fit-content;
}

.footer-logo-wrapper {
  width: 281px;
  position: relative;
  left: -1rem;
}

.footer-cols_right {
  width: fit-content;
  margin-left: auto;
}
.brand-btn {
  padding: 8px 2rem;
  color: white;
  font-size: var(--reg3);
  font-weight: 900;
  line-height: 1em;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  gap: 1px;
  transition: all 0.2s;
    box-shadow: 4px 4px 6px rgba(1, 40, 122, 0.384314);
}
.brand-btn:hover {
      box-shadow: 4px 4px 6px rgba(1, 40, 122, 0);
}
.brand-btn span {
  display: block;
  text-align: right;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 400;
  line-height: 10px;
}

.df-hori-list {
  color: white;
  display: flex;
  gap: 0.75rem;
  text-align: right;
}

.df-hori-list a {
  color: white;
  font-size: 1.125rem;
  line-height: 1.125em;
  font-weight: 900;
}
.legal-text {
  width: 100%;
  font-size: 10px;
  font-weight: 400;
  padding-top: 1rem;
  line-height: 2em;
}

.footer-logo-tagline {
  font-size: 1rem;
  font-weight: 300;
  color: white;
  margin-top: -10px;
}

@media screen and (max-width: 1024px) {
  .footer-content-wrapper {
    padding: 32px 45px 32px 45px;
    width: 100%;
  }
  .footer-content {
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
  }
  .footer-logo-wrapper {
    margin-bottom: 20px;
    width: 100%;
    max-width: 170px;
    left: 0;
  }
  .footer-cols_right {
    margin-left: 0;
  }
  .df-hori-list {
    margin-bottom: 42px;
    font-size: 25px;
    gap: 8px;
    text-align: center;
  }
  .brand-btn {
    font-size: 23px;
    padding: 10px 46px 10px 32px;
    margin-bottom: 26px;
  }
  .df-hori-list a {
    font-size: 16px;
  }
}

#offcanvas-menu {
  overflow-y: auto;

  -webkit-overflow-scrolling: touch; /* for smooth iOS scrolling */
}

body.menu-open {
  overflow: hidden; /* prevent body scroll when menu is open */
}

#menu-toggle {
  padding: 0;
  margin: 0;
}

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

#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%); /* Start hidden */
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
  padding: 18px 18px 55px 28px;
}

#menu-close {
  margin-bottom: 18px;
}

/*FORM STYLE*/

/* .aside-wrapper {
  position: sticky;
  top: calc(4.75vw + 10px);
}
@media screen and (max-width: 1024px) {
  .aside-wrapper {
    position: static;
  }
} */

.modal-cn-wrapper {
  padding: 4% 5%;
  border: 2px solid #14133b;
}
.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: 12px;
  padding: 10px;
  border: 0;
  border-radius: 4px;
  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);
}

/* 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: 326px;
  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; */
}

.cs-form-infos_group__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  cursor: pointer;
  opacity: 0;
}

.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: 320px;
}

/* .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: 4px;
  border: 1px solid white;
  padding: 0.5rem 1rem;
  width: 100%;
  background-color: white;
  color: black;
  font-size: 12px;
  transition: all 0.2s;
}

.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;
}
.tel-btn {
  cursor: pointer;
  border: 0px;
  font-size: 1.25rem;
  line-height: 1em;
  font-weight: 300;
  border-radius: 30px;
  padding: 0.75rem 1rem;
  text-align: center;
}

/* Tracé 20564 */

.cs-form_submit {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.375rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  width: 75%;
  max-width: 90%;
  border: 0px;
  font-size: 14px;
  line-height: 1em;
  border-radius: 4px;
  padding: 11px 40px 11px 40px;
  color: var(--green);
  text-align: center;
  box-shadow: 4px 4px 6px rgba(1, 40, 122, 0.384314);
  -webkit-appearance: none;
  appearance: none;
  background-color: #ffffff;
}
.meeting-date-wrapper {
  border: 1px solid #bb9857;
  padding: 2rem 1rem;
  border-radius: 8px;
  width: 533px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.mobile-form-trigger-wrapper {
  position: fixed;
  bottom: 0;
  z-index: 10;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  display: none;
}
.mobile-form-trigger {
  background-color: var(--orange);

  padding: 8px 68px;
  font-size: 20px;
  color: white;
  font-weight: 700;
}
@media screen and (max-width: 1025px) {
  .mobile-form-trigger-wrapper {
    display: flex;
  }

  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 (min-width:1025px) {
  .form-correctif {
    position: sticky;
    z-index: 90;
  }

  .swiper4 {
    display: none !important;
  }
}
.hystmodal__close {
  background-image: url(../img/Vector.svg) !important;
}
#myModal.hystmodal {
  align-content: start;
}
.hystmodal__window {
  width: 100% !important;
}
@media screen and (max-width: 769px) {
  .cs-form_submit {
    /* font-size: 20px; */
  }

  .tel-btn {
    font-size: 20px;
    padding: 10px 20px;
  }

}
.hide-dsk {
  display: none;
}
@media screen and (max-width: 1024px) {
  .hide-m {
    display: none;
  }
  .block-m {
    display: block;
  }
  .flex-m {
    display: flex;
  }
}

/*** 1620 -> 1920 ***/
@media screen and (max-width: 1920px) and (min-width: 1200px) {
    /* .form-correctif {
      margin-top: 3vw;
    } */

    .df-form-wrapper {
      height: calc(100vh - (4.75vw + 10px));
    }
}

#maquette {
  margin-top: 1vw;
}