/* style */

:root {
  --padding_defaut_mobile: 4.16vw;
  --progress-devis: 10px;
  --color-carousel-home: #00d4d2;
  --color-carousel-nav: rgba(255, 255, 255, 0.25);
  --color-carousel-nav-hover: rgba(255, 255, 255, 0.6);
  --gap-carousel: 24px;
  transition: var(--color-carousel-home) 0.5s;
  --width-house-modal: calc(100% / 2 - 10px);
  --width-service-modal: calc(100% / 2 - 10px);
  --background-slide-btn: #00d4d2;
  --url-background-modal-pc: url("https://centreservicesdev.fr/assets/img/services/modal-8-pc.jpg");
  --url-background-modal-bulle-pc: url("https://centreservicesdev.fr/assets/img/services/modal-8-bulle-pc.png");
  --url-background-modal-bulle-pc-merci: url("https://centreservicesdev.fr/assets/img/services/modal-8-bulle-pc-merci.png");
  --url-background-modal-circle-pc-merci: url("https://centreservicesdev.fr/assets/img/services/modal-circle-merci-8.png");
  --url-background-modal-mobile: url("https://centreservicesdev.fr/assets/img/services/modal-8-mobile.jpg");
  --visible-last-step-devis: block;
  --nbrDots: calc(50% - 72px);
  --col-width: 0px;
  --menu-height: 500px;
  --box-height: 0;
  --max-width-cities: 700px;
  --b-cyan: #37dfdf;
  --scrollbar-width: 0px;
  /* --article-height: auto; */
}

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

/*  A remettre ligne 1695 apres test */
#new_content h1 {
  margin-top: 45px;
}

/***************************
* FILS D'ARIANE
****************************/
body:has(.AL1) .breadcrumb_container {
  width: calc(80vw - 3 * var(--gap-carousel));
  top: 180px;
  left: 0;
}

#mainContainerDevis h1 {
  margin-top: 45px;
}

.breadcrumb_container {
  width: calc(80vw - 3 * var(--gap-carousel));
  margin: 0 auto;
  position: relative;
  top: 173px;
  left: 1.2vw;
  z-index: 5;
}

.breadcrumb_container nav > p {
  display: flex;
  align-items: center;
}

.breadcrumb_container nav > p span {
  font-size: 16px;
  padding: 0;
  color: var(--cs-link-color);
}

.breadcrumb_container nav > p a {
  font-size: 16px;
  padding: 0;
  color: var(--cs-link-color);
}

.breadcrumb_container nav > p a:hover {
  text-decoration: underline;
}

.breadcrumb_container nav img {
  width: 15px;
  margin: 0 10px;
  position: relative;
  top: 2px;
}

body:has(.gloss) .breadcrumb_container {
  top: 130px;
}

body:has(.gloss_blue) .breadcrumb_container {
  top: 120px;
}

/* body:has(.FP1) .breadcrumb_container {
  top: 150px;
} */

/* Demande de devis template A */
body:has(.AG2) .breadcrumb_container,
body:has(.AG1) .breadcrumb_container {
  top: 190px;
}

body:has(.AG2) .breadcrumb_container nav > p span,
body:has(.AC1) .breadcrumb_container nav > p span,
body:has(.AE2) .breadcrumb_container nav > p span,
body:has(.AG1) .breadcrumb_container nav > p span {
  color: #fff;
}

body:has(.AG2) .breadcrumb_container nav > p a,
body:has(.AC1) .breadcrumb_container nav > p a,
body:has(.AE2) .breadcrumb_container nav > p a,
body:has(.AG1) .breadcrumb_container nav > p a {
  color: #fff;
}

/* Page Agence */
body:has(.AE2) .breadcrumb_container {
  width: calc(80vw - 3 * var(--gap-carousel));
  margin: 0 auto;
  position: absolute;
  top: 130px;
  left: 15vw;
}

/* Page Ville couverte */
body:has(.AC1) .breadcrumb_container {
  position: absolute;
  top: 140px;
  left: 17vw;
}

/* Page Ville non couverte */
body:has(.AC2) .breadcrumb_container {
  left: 1.5vw;
}

/* Page services */
body:has(.BR1) .breadcrumb_container {
  position: absolute;
  top: 190px;
  left: 15vw;
}

@media (max-width: 1600px) {
  .breadcrumb_container {
    width: calc(100% - var(--gap-carousel) * 2);
    top: 171px;
    left: 1.8vw;
  }

  body:has(.AG2) .breadcrumb_container,
  body:has(.AG1) .breadcrumb_container {
    width: calc(80vw - var(--gap-carousel));
    left: 5vw;
  }

  body:has(.AE2) .breadcrumb_container {
    width: calc(100% - var(--gap-carousel) * 2);
    left: 5vw;
  }

  body:has(.AC1) .breadcrumb_container {
    left: 5vw;
  }

  body:has(.AC2) .breadcrumb_container {
    left: 2vw;
  }

  body:has(.BR1) .breadcrumb_container {
    left: 16.5vw;
  }
}

@media (max-width: 1200px) {
  body:has(.AG2) .breadcrumb_container,
  body:has(.AG1) .breadcrumb_container {
    top: 125px;
  }

  body:has(.AE2) .breadcrumb_container {
    top: 105px;
  }

  body:has(.AC1) .breadcrumb_container {
    top: 112px;
  }

  body:has(.AC2) .breadcrumb_container {
    top: 90px;
    left: 3vw;
  }

  body:has(.BR1) .breadcrumb_container {
    top: 125px;
    left: 15vw;
  }
}

@media (max-width: 980px) {
  .breadcrumb_container {
    top: 140px;
    left: 2.7vw;
  }
}

@media (max-width: 768px) {
  .breadcrumb_container {
    width: calc(100% - 40px);
    top: 128px;
  }

  body:has(.AL1) .breadcrumb_container {
    width: calc(100vw - 2 * var(--gap-carousel));
    top: 110px;
    left: 2vw;
  }

  body:has(.AG2) .breadcrumb_container,
  body:has(.AG1) .breadcrumb_container {
    position: absolute;
    top: 95px;
    left: 6vw;
  }

  .slide h3 {
    margin-top: 25px;
  }

  body:has(.AC1) .breadcrumb_container {
    left: 6vw;
  }

  body:has(.AC2) .breadcrumb_container {
    top: 100px;
    left: 4vw;
  }

  body:has(.BR1) .breadcrumb_container {
    top: 92px;
    left: 6vw;
  }
}

@media (max-width: 500px) {
  .breadcrumb_container {
    left: 5px;
  }

  body:has(.AL1) .breadcrumb_container {
    top: 100px;
  }

  body:has(.AG2) .breadcrumb_container,
  body:has(.AG1) .breadcrumb_container {
    left: 10vw;
  }

  body:has(.AE2) .breadcrumb_container {
    width: calc(100% - var(--gap-carousel) * 2);
    left: 8vw;
  }

  body:has(.AC1) .breadcrumb_container {
    left: 9vw;
  }

  body:has(.BR1) .breadcrumb_container {
    left: 9vw;
  }
}

@media (max-width: 400px) {
  .breadcrumb_container {
    left: 0;
  }
}
/***************************
* FIN
****************************/

/***************************
* PAGE SERVICE + VILLE (AE2)
****************************/
#service-city {
  padding: 150px 0 0;
}

#service-city h1 {
  text-align: center;
}

#service-city .hero {
  margin: 0 0 80px;
}

#service-city .hero > p {
  max-width: 50%;
  font-size: 20px;
  text-align: center;
  margin: 20px auto;
}

#service-city .average {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 30px;
}

#service-city .average_content {
  font-size: 25px;
}

#service-city .average_content span {
  font-size: inherit;
}

#service-city .star {
  width: 30px;
}

#service-city .stars {
  display: flex;
  margin: 0 10px 0 0;
  position: relative;
}

#service-city .star-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-image: url("https://centreservicesdev.fr/assets/img/icons/star_yellow_fill.svg");
  background-repeat: repeat-x;
  background-size: 30px 100%;
  pointer-events: none;
}

#service-city .block_btn_devis {
  display: flex;
}

#service-city .infos_agence {
  width: calc(80vw - var(--gap-carousel));
  margin: 80px auto;
  display: flex;
  gap: 40px;
  max-height: 550px;
}

#service-city .infos_agence h2 {
  color: #fff;
  text-align: center;
}

#service-city .infos_agence #landing_ville_photo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* min-height: 350px; */
  border-radius: 50px;
  padding: 80px;
  overflow: hidden;
  position: relative;
  object-fit: cover;
}

/* L'overlay sombre */
#service-city .infos_agence #landing_ville_photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  border-radius: inherit;
  z-index: 0;
}

/* Les enfants passent au-dessus de l'overlay */
#service-city .infos_agence #landing_ville_photo > * {
  position: relative;
  z-index: 1;
}

#service-city .infos_agence .picture_franchise {
  border-radius: 50px;
  overflow: hidden;
}

#service-city .infos_agence .picture_franchise img {
  width: 100%;
  object-fit: cover;
}

#service-city .info_service_agence {
  width: calc(80vw - var(--gap-carousel));
  margin: 0 auto;
  display: flex;
  gap: 48px;
}

#service-city .info_service_agence .content {
  padding: 60px;
  width: 50%;
  border-radius: 50px;
  background-color: #00bffe;
}

#service-city .info_service_agence .content h2 {
  color: #fff;
  font-size: 40px;
}

#service-city .info_service_agence .content p {
  color: #fff;
  font-size: 22px;
  margin: 0 0 10px;
}

#service-city .map_agence {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 50%;
  /* height: 100%; */
  border-radius: 50px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

#service-city #map-landing {
  width: 100%;
  height: 80%;
}

#service-city .map_agence .buttons {
  padding: 60px;
}

#service-city .map_agence .buttons button {
  padding: 10px 25px;
  font-size: 18px;
  border: none;
  border-radius: 16px;
}

#service-city .map_agence .devis {
  background-color: #00a9ff;
}

#service-city .map_agence .job {
  background-color: #fdb700;
}

#service-city .map_agence .resa {
  background-color: #6fce4b;
}

#service-city .tarifs_agence {
  width: calc(80vw - var(--gap-carousel));
  margin: 80px auto;
  display: flex;
  align-items: stretch;
  gap: 48px;
  /* border: 1px solid grey;
  border-radius: 50px;
  padding: 60px; */
}

#service-city .tarifs_agence #landing_credit_impot {
  padding: 0;
  position: relative;
  width: 50%;
  height: 100%;
  min-height: 300px;
}

#service-city .tarifs_agence #landing_credit_impot img {
  border-radius: 50px;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center;
}

#service-city .tarifs_agence #landing_credit_impot img:nth-of-type(2) {
  animation: slide-right-left 10s ease-in-out infinite;
  will-change: transform;
}

#service-city .tarifs_agence .infos_tarif {
  background-color: #f18700;
  width: 50%;
  border-radius: 50px;
  padding: 60px;
}

#service-city .block_confiance {
  width: calc(80vw - var(--gap-carousel));
  padding: 60px;
  margin: 80px auto;
  border: 1px solid grey;
  border-radius: 50px;
}

/***************************
* FIN
****************************/

/***************************
* PAGE LANDING PAGE
****************************/
#devis-2 .hero_intro_content {
  background-color: #655b5c;
  color: #fff;
  padding: 80px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-radius: 90px;
  height: 80vh;
}

#devis-2 .hero_intro_content > div {
  position: relative;
  top: -35px;
}

#devis-2 .hero_intro_content .bg_etoile_left,
#devis-2 .hero_intro_content .bg_etoile_right {
  width: 100px;
}

#devis-2 .hero_intro_content .bg_etoile_left {
  position: relative;
  left: 0;
  top: 20px;
}

#devis-2 .hero_intro_content .bg_etoile_right {
  position: relative;
  right: 0;
  top: -60px;
}

#devis-2 .hero_intro_content h3 {
  display: flex;
  position: relative;
  max-width: 64vw;
  font-family: "Agbalumo", sans-serif;
  text-align: center;
  font-size: 45px;
  line-height: 1.3;
  margin: 0 0 40px;
}

#devis-2 .hero_intro_content h3 span {
  font-family: inherit;
}

#devis-2 .hero_intro_content p.small {
  text-align: center;
  font-size: 16px;
  margin: 0 0 40px;
}

#devis-2 .hero_intro_content p.text {
  max-width: 55vw;
  font-size: 30px;
  text-align: center;
  margin: 0 auto;
}

#devis-2 .hero_intro_content button {
  cursor: pointer;
  display: flex;
  align-items: center;
  background-color: #655b5c;
  border: 2px solid #fff;
  font-size: 20px;
  border-radius: 10px;
  color: #fff;
  padding: 8px 25px;
}

#devis-2 .hero_intro_content button a {
  color: #fff;
}

#devis-2 .hero_intro_content button img {
  position: relative;
  top: 1px;
  left: 10px;
  width: 30px;
  transform: rotateZ(-45deg);
}

#devis-2 .container_infos ul {
  list-style: none;
}

#devis-2 .container_infos {
  display: flex;
  flex-direction: column;
  padding: 80px;
}

#devis-2 .container_infos.info_service {
  width: 100%;
  display: flex;
  flex-direction: row;
  background-color: #fff;
  gap: 40px;
  padding: 0;
}

#devis-2 .container_infos.info_service > div {
  width: 50%;
}

#devis-2 .container_infos.info_service .info_service_content {
  position: relative;
  background-color: #dad7c6;
  border-radius: 50px;
  padding: 80px;
  min-height: 700px;
  overflow: hidden;
}

#devis-2 .container_infos.info_service .info_service_content .bg_picture {
  position: absolute;
  bottom: 0;
  right: -203px;
  right: -250px;
  width: 820px;
  max-width: none;
  z-index: 2;
}

#devis-2 .container_infos.info_service .info_service_content .bg_line {
  position: absolute;
  bottom: -2px;
  left: -125px;
  width: 950px;
  max-width: none;
  z-index: 1;
}

#devis-2 .container_infos.info_service .info_service_content .container_logo {
  position: absolute;
  left: 60px;
  bottom: 60px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 50%;
}

#devis-2
  .container_infos.info_service
  .info_service_content
  .container_logo
  img {
  width: 40px;
}

#devis-2 .container_infos.info_service .info_service_content h3 {
  font-family: "Agbalumo", sans-serif;
  line-height: 1.1;
  font-size: 45px;
  color: #60571d;
  margin: 0 0 40px;
}

#devis-2 .container_infos.info_service .info_service_content .texts {
  max-width: 50%;
  position: relative;
  z-index: 3;
}

#devis-2 .container_infos.info_service .info_service_content p {
  font-size: 24px;
  color: #544b0b;
}

#devis-2 .container_infos.info_service .info_service_content p .choice_service {
  display: block;
  color: #544b0b;
  font-size: inherit;
  font-weight: 700;
}

#devis-2 .container_infos.info_service .info_agence {
  min-height: 520px;
  padding: 80px;
  background: url("https://centreservicesdev.fr/assets/img/ciel-01.jpg")
    no-repeat top left / cover;
  border-radius: 50px;
  margin: 0 0 40px;
}

#devis-2 .container_infos.info_service .info_agence h3 {
  font-size: 42px;
  text-align: center;
  color: #fff;
  margin: 0 0 40px;
}

#devis-2 .container_infos .average {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  font-weight: 700;
  margin: 0 auto 15px;
}

#devis-2 .container_infos p.average_content {
  text-align: center;
  color: #fff;
  font-size: 22px;
}

#devis-2 .container_infos .stars {
  display: flex;
  position: relative;
  padding: 0;
  top: 1px;
}

#devis-2 .container_infos .star {
  width: 35px;
}

#devis-2 .container_infos .star-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-image: url("https://centreservicesdev.fr/assets/img/icons/star_yellow_fill.svg");
  background-repeat: repeat-x;
  background-size: 35px 100%;
  pointer-events: none;
}

#devis-2 .container_infos.info_service .container_button {
  margin: 85px 0 0;
}

#devis-2 .container_infos.info_service .btn_view_avis {
  background-color: #fff;
  padding: 12px 32px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
}

#devis-2 .container_infos.info_service .btn_view_avis a {
  font-weight: 700;
  font-size: 20px;
  color: #008ef5;
}

#devis-2 .container_infos.info_service .info_intervenants {
  min-height: 520px;
  padding: 80px;
  border-radius: 50px;
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#devis-2 .container_infos.info_service .info_intervenants h3 {
  color: #000;
  font-size: 24px;
  margin: 0 0 20px;
}

#devis-2 .container_infos.info_service .info_intervenants p {
  color: #000;
  font-size: 24px;
}

#devis-2 .container_infos.info_service .info_intervenants .container_button button {
  cursor: pointer;
  display: flex;
  align-items: center;
  border: 2px solid #0087eb;
  font-size: 20px;
  border-radius: 10px;
  color: #000;
  padding: 8px 30px;
  background-color: inherit;
}

#devis-2 .container_infos.info_service .info_intervenants .container_button button img {
  position: relative;
  top: 1px;
  left: 10px;
  width: 30px;
  transform: rotateZ(-45deg);
}

#devis-2 .container_infos.info_avantage {
  width: 100%;
  background-color: #00a52d;
  padding: 100px 60px;
  height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#devis-2 .container_infos.info_avantage ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  /* padding: 60px 0; */
}

#devis-2 .container_infos.info_avantage ul li {
  font-family: "Agbalumo", sans-serif;
  color: rgba(255, 255, 255, 0.4);
  font-size: 45px;
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

#devis-2 .container_infos.info_avantage ul li.active {
  color: #ffffff;
  transform: scale(1.15);
}

.slide-up {
  transform: translateY(-60px);
  opacity: 0;
}

#devis-2 .container_infos.price_block {
  background-color: #f18700;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#devis-2 .container_infos.price_block h3 {
  color: #fff;
  font-size: 46px;
  line-height: 1;
  margin: 0 0 20px;
}

#devis-2 .container_infos.price_block .price_text {
  position: relative;
  top: -20px;
}

#devis-2 .container_infos.price_block .price_text p {
  font-size: 30px;
  color: #facea1;
  line-height: 1.1;
}

#devis-2 .container_infos.price_block .small_text p {
  font-size: 14px;
  color: #fff;
}

#devis-2 .container_infos.simple {
  padding: 80px;
  border-radius: 50px;
  background-color: #e2007d;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#devis-2 .container_infos.simple h3 {
  font-family: "Agbalumo", sans-serif;
  text-align: center;
  font-size: 46px;
  color: #fff;
  margin: 0 0 20px;
}

#devis-2 .container_infos.simple p {
  font-size: 14px;
  color: #fff;
  text-align: center;
  margin: 10px 0 0;
}
#devis-2 .container_infos.grid_100.simple .list {
    margin: 20px 0 40px;
}

#devis-2 .container_infos.simple .list {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 20px 0 0;
}

#devis-2 .container_infos.simple ul {
  padding: 0;
}

#devis-2 .container_infos.simple ul li {
  font-size: 30px;
  display: flex;
  font-weight: bold;
  color: #fff;
  line-height: 1.5;
  display: flex;
  align-items: center;
}

#devis-2 .container_infos.simple ul li img {
  width: 40px;
  height: 40px;
  background: inherit;
  margin: 0 10px 0 0;
  flex-shrink: 0;
}

#devis-2 .container_infos.promo {
  background-color: var(--colorPopupReduire) !important;
}

#devis-2 .container_infos.promo .container_promo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 0 70px;
}

#devis-2 .container_infos.promo .container_promo .container_promo_time {
  font-family: "Agbalumo", sans-serif;
  font-size: 90px;
  color: #fff;
  line-height: 0.8;
}

#devis-2 .container_infos.promo .container_promo .nbrHourPromo {
  position: relative;
  display: block;
  font-family: inherit;
  font-size: 170px;
  color: inherit;
  left: -25px;
}

#devis-2 .container_infos.promo .container_promo_img img {
  position: absolute;
  width: 180px;
  top: -10px;
  right: 0px;
}

#devis-2 .container_infos.promo .container_button button {
  width: 352px;
  border-radius: 10px;
  /* background-color: #ffe023; */
  background-color: var(--colorBtn) !important;
  /* color: #91885d; */
  color: var(--colorBtnTexte);
  text-align: center;
  padding: 10px;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

#devis-2 .container_infos.promo p.small {
  font-size: 14px;
  text-align: center;
  margin: 10px 0 0;
}

#devis-2 .container_infos.promo p.small a {
  color: #fff;
}

#devis-2 .container_info_agence {
  width: 100%;
  display: flex;
  background-color: #fff;
  min-height: 700px;
  padding: 0;
  border-radius: 0;
  gap: 48px;
}

#devis-2 .container_info_agence_left {
  width: 50%;
}

#devis-2 .container_info_agence_left .smiley {
  position: absolute;
  top: -99px;
  right: -110px;
  transform: rotate(-25deg);
}

#devis-2 .container_info_agence_left .smiley_blur {
  width: 200px;
  position: absolute;
  bottom: 0;
  left: -200px;
  transform: rotate(20deg);
  opacity: 0.8;
}

#devis-2 .container_info_agence .block_horaire {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  background-color: rgb(0, 191, 254);
  border-radius: 50px;
  height: 100%;
}

#devis-2 .container_info_agence .block_horaire {
}

#devis-2 .container_info_agence .block_horaire_content {
  padding: 80px;
}

#devis-2 .container_info_agence .block_horaire_content h3 {
  max-width: 90%;
  font-size: 74px;
  margin: 0 0 60px;
  color: #fff;
  font-family: "Agbalumo", sans-serif;
  line-height: 0.9;
}

#devis-2 .container_info_agence .block_horaire_content > p {
  color: #fff;
  font-size: 30px;
}

#devis-2 .container_info_agence .block_horaire_detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 30%;
  background-color: #fff;
  border-radius: 32px;
  padding: 40px;
}

#devis-2 .container_info_agence .block_horaire_detail .status {
  padding: 10px 24px;
  border-radius: 30px;
  font-size: 20px;
}

#devis-2 .container_info_agence .block_horaire_detail .status span {
  margin-right: 10px;
}

#devis-2 .container_info_agence .block_horaire_detail.open .status {
  text-align: center;
  background-color: #e6f9e5;
  color: #1bc61e;
}

#devis-2 .container_info_agence .block_horaire_detail.close .status {
  background-color: #f8d7da;
  color: #a12129;
}

#devis-2 .container_info_agence .block_horaire_detail .hour {
  margin: 40px 0;
}

#devis-2 .container_info_agence .block_horaire_detail .hour p {
  font-size: 30px;
  text-align: center;
  font-weight: 700;
}

#devis-2 .container_info_agence .block_horaire_detail .hour p .blue {
  color: #04bdfd;
}

#devis-2 .container_info_agence .block_horaire_detail .container_letters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

#devis-2 .container_info_agence .block_horaire_detail .container_letters > p {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border-radius: 50px;
  flex-shrink: 0;
  padding: 10px;
  font-size: 30px;
}

#devis-2 .container_info_agence .block_horaire_detail .horaires {
  width: 100%;
  margin: 0 0 20px;
}


#devis-2 .container_info_agence .block_horaire_detail .container_letters > p.blue {
  color: #00bcfd;
  background-color: #caf2fe;
}

#devis-2 .container_info_agence .block_horaire_detail .container_letters > p.grey {
  color: #5e5355;
  background-color: #dfddde;
  opacity: .7;
}

#devis-2 .container_info_agence_right {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

#devis-2 .container_info_agence_right #landing_ville_photo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 520px;
  border-radius: 50px;
  padding: 80px;
  overflow: hidden;
  position: relative;
}

/* L'overlay sombre */
#devis-2 .container_info_agence_right #landing_ville_photo::before {
  content: "";
  position: absolute;
  inset: 0;
  /* background: rgba(0, 0, 0, 0.6); */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
  border-radius: inherit;
  z-index: 0;
}

/* Les enfants passent au-dessus de l'overlay */
#devis-2 .container_info_agence_right #landing_ville_photo > * {
  position: relative;
  z-index: 1;
}

#devis-2 .container_info_agence_right #landing_ville_photo #agences_infos {
  margin: 20px 0 0;
}

#devis-2 .container_info_agence_right #landing_ville_photo .container_logo {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 50%;
  flex-shrink: 0;
  margin: 0 30px 0 0;
  /* position: relative;
  top: 10px; */
}

#devis-2 .container_info_agence_right #landing_ville_photo h3 {
  font-size: 40px;
  line-height: 1.1;
  display: flex;
}

#devis-2 .container_info_agence_right #landing_ville_photo h3 img {
  width: 40px;
  height: 40px;
}

#devis-2 .container_info_agence_right #agences_infos p {
  font-size: 30px;
  margin: 0 0 0 90px;
}

#devis-2 .container_info_agence_right #landing_ville_photo p.small {
  text-align: center;
  color: #fff;
  font-weight: 700;
  margin: 10px 0 0;
}

#devis-2 .container_info_agence_right #landing_ville_photo p.small a {
  color: #fff;
  font-weight: 700;
}

#devis-2 .container_info_agence_right #landing_ville_photo .container_button {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: auto 0 0 0;
}

#devis-2 .container_info_agence_right #landing_ville_photo .devis {
  height: 48px;
  border: none;
  border-radius: 10px;
  padding: 10px 25px;
  font-weight: 700;
  font-size: 20px;
  cursor: pointer;
  background-color: #00bffe;
  color: #fff;
  white-space: nowrap;
}

#devis-2 .container_info_agence_right .container_map {
  position: relative;
}

#devis-2 .container_info_agence_right .container_map .close_card_agence {
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 30px;
}

#devis-2 .container_info_agence_right .container_map .card_agence {
  width: fit-content;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #00bffe;
  border-radius: 20px;
  display: inline-flex;
  padding: 20px 50px 20px 20px;
  white-space: nowrap;
  align-items: center;
  min-width: 70%;
}

#devis-2 .container_info_agence_right .container_map .card_agence h3 {
  color: #fff;
  font-size: 30px;
}

#devis-2 .container_info_agence_right .container_map .devanture_agence {
  width: 140px;
  height: 140px;
  margin: 0 25px 0 0;
  border-radius: 10px;
}

#devis-2 .container_map .average {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  font-weight: 700;
  margin: 15px auto;
  gap: 10px;
}

#devis-2 .container_map p.average_content {
  text-align: center;
  color: #fff;
  font-size: 16px;
}

#devis-2 .container_map .stars {
  display: flex;
  position: relative;
  padding: 0;
  top: 1px;
}

#devis-2 .container_map .star {
  width: 20px;
}

#devis-2 .container_map .star-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-image: url("https://centreservicesdev.fr/assets/img/icons/star_yellow_fill.svg");
  background-repeat: repeat-x;
  background-size: 20px 100%;
  pointer-events: none;
}

#devis-2 .container_info_agence_right #map-landing {
  width: 100%;
  min-height: 520px;
  border-radius: 50px;
}

#devis-2 .container_infos .agence_address {
  margin: 30px 0 0;
  text-align: center;
}

#devis-2 .container_infos .agence_phone {
  text-align: center;
}

#devis-2 .container_infos .container_button {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: auto 0 0 0;
}

#devis-2 .container_infos button .icon {
  display: none;
}

#devis-2 .container_infos .devis {
  height: 48px;
  border: none;
  border-radius: 10px;
  padding: 10px 25px;
  font-weight: 700;
  font-size: 20px;
}

#devis-2 .container_infos .devis {
  cursor: pointer;
  background-color: #00bffe;
  color: #fff;
}

#devis-2 .container_infos.info_hours p.status_hours {
  margin: 0 0 20px;
}

#devis-2 .container_infos.info_hours > div.container_hours {
  margin: 0 0 20px;
}

#devis-2 .container_infos.info_hours > div > p {
  margin: 0 0 10px;
}

@media (max-width: 1600px) {
  #devis-2 .container_infos.price_block h3 {
    font-size: 40px;
  }

  #devis-2 .container_infos.price_block .price_text p {
    font-size: 25px;
  }

  #devis-2 .container_infos.simple h3 {
    font-size: 38px;
    margin: 0;
  }

  #devis-2 .container_infos.simple .list {
    margin: 10px 0 0;
  }

  #devis-2 .container_infos.simple ul li {
    font-size: 25px;
  }

  #devis-2 .container_infos.promo .container_promo .container_promo_time {
    font-size: 75px;
  }

  #devis-2 .container_infos.promo .container_promo .nbrHourPromo {
    font-size: 100px;
  }

  #devis-2 .container_infos.promo .container_promo_img img {
    width: 150px;
    right: 10px;
    top: -45px;
  }

  #devis-2 .container_info_agence_right #landing_ville_photo h3 {
    font-size: 40px;
  }

  #devis-2 .container_info_agence_right .container_map .devanture_agence {
    width: 120px;
    height: 120px;
  }

  #devis-2 .container_info_agence .block_horaire_detail .container_letters > p {
    width: 50px;
    height: 50px;
    font-size: 25px;
  }

  #devis-2 .container_info_agence .block_horaire_detail .hour p {
    font-size: 30px;
  }

  #devis-2 .container_info_agence .block_horaire_content h3 {
    font-size: 60px;
  }

  #devis-2 .container_infos.price_block h3 {
    font-size: 32px;
  }

  #devis-2 .container_infos.simple ul li img {
    width: 30px;
    height: 30px;
  }

  #devis-2 .container_info_agence .block_horaire_content h3 {
    font-size: 53px;
  }

  #devis-2 .container_info_agence_right .container_map .devanture_agence {
    width: 110px;
    height: 110px;
  }

  #devis-2 .container_info_agence_right .container_map .card_agence h3 {
    font-size: 25px;
  }

  #devis-2 .container_map p.average_content {
    font-size: 14px;
  }

  #devis-2 .container_info_agence_left .smiley_blur {
    width: 220px;
    left: -175px;
  }
}

@media (max-width: 1500px) {
  #devis-2 .container_infos.info_service .info_service_content h3,
  #devis-2 .container_infos.info_service .simple h3,
  #devis-2 .container_infos.info_service .info_agence h3 {
    font-size: 35px;
  }

  #devis-2 .container_infos.info_service .info_service_content p,
  #devis-2 .container_infos p.average_content,
  #devis-2 .container_infos.info_service .simple ul li {
    font-size: 20px;
  }

  #devis-2 .container_infos .devis,
  #devis-2 .container_infos.info_service .btn_view_avis a {
    font-size: 18px;
  }

  #devis-2 .container_infos.info_service .info_service_content .bg_picture {
    width: 650px;
    right: -270px;
  }

  #devis-2 .container_infos.info_service .info_service_content .bg_line {
    width: 800px;
  }
}

@media (max-width: 1400px) {
  #devis-2 .container_infos.info_service .info_intervenants {
    padding: 50px;
  }

  #devis-2 .container_infos.info_service .info_intervenants h3 {
    font-size: 22px;
  }

  #devis-2 .container_infos.info_service .info_intervenants p {
    font-size: 22px;
  }

  #devis-2
    .container_infos.info_service
    .info_intervenants
    .container_button
    button {
    font-size: 18px;
  }

  #devis-2 .container_infos.info_avantage ul li {
    font-size: 35px;
  }

  #devis-2 .container_infos.price_block {
    padding: 50px;
  }

  #devis-2 .container_infos.price_block h3 {
    font-size: 32px;
  }

  #devis-2 .container_infos.price_block .price_text p {
    font-size: 22px;
  }

  #devis-2 .container_infos.simple {
    padding: 50px;
  }

  #devis-2 .container_infos.simple h3 {
    font-size: 32px;
  }

  #devis-2 .container_infos.simple ul li {
    font-size: 20px;
  }

  #devis-2 .container_infos.simple ul li img {
    width: 22px;
    height: 22px;
  }

  #devis-2 .container_infos.promo {
    padding: 50px;
  }

  #devis-2 .container_infos.promo .container_promo {
    margin: 0;
  }

  #devis-2 .container_infos.promo .container_promo .container_promo_time {
    font-size: 65px;
  }

  #devis-2 .container_infos.promo .container_promo .nbrHourPromo {
    font-size: 90px;
  }

  #devis-2 .container_infos.promo .container_promo_img img {
    width: 120px;
    right: 20px;
    top: -30px;
  }

  #devis-2 .container_infos.promo .container_promo {
    top: 30px;
  }

  #devis-2 .container_info_agence_right #agences_infos p {
    font-size: 25px;
    margin: 0 0 0 80px;
  }

  #devis-2 .container_info_agence_right #landing_ville_photo {
    padding: 60px;
  }

  .landing #agences_infos {
    margin-top: 30px;
  }

  #devis-2 .container_info_agence_right #landing_ville_photo .devis {
    font-size: 16px;
  }

  #devis-2 .container_info_agence_left .smiley {
    width: 190px;
    top: -65px;
    right: -60px;
  }

  #devis-2 .container_info_agence_left .smiley_blur {
    width: 190px;
  }

  #devis-2 .container_info_agence .block_horaire_content h3 {
    font-size: 55px;
  }

  #devis-2 .container_info_agence .block_horaire_detail {
    gap: 10px;
  }

  #devis-2 .container_info_agence .block_horaire_detail .container_letters > p {
    width: 35px;
    height: 35px;
    font-size: 18px;
  }

  #devis-2 .container_info_agence .block_horaire_detail .hour p {
    font-size: 25px;
  }

  #devis-2 .container_info_agence_right #landing_ville_photo h3 {
    font-size: 35px;
  }

  #devis-2 .container_info_agence .block_horaire_detail .status {
    font-size: 16px;
  }

  #devis-2 .container_info_agence .block_horaire_content > p {
    font-size: 25px;
  }

  #devis-2 .container_info_agence {
    min-height: 0;
  }

  #devis-2 .container_info_agence_right #landing_ville_photo {
    min-height: 450px;
  }

  #devis-2 .container_info_agence_right #map-landing {
    min-height: 450px;
  }

  #devis-2 .container_infos.simple .list {
    margin: 20px 0;
  }

  #devis-2 .container_info_agence_right .container_map .card_agence h3 {
    font-size: 20px;
  }

  #devis-2 .container_info_agence_right .container_map .devanture_agence {
    width: 90px;
    height: 90px;
  }

  #devis-2 .container_info_agence_right .container_map .devanture_agence {
    margin: 0 15px 0 0;
  }

  #devis-2 .container_map .average {
    margin: 15px 0 0;
  }
}

@media (max-width: 1350px) {
  #devis-2 .hero_intro_content .bg_etoile_left,
  #devis-2 .hero_intro_content .bg_etoile_right {
    width: 80px;
  }

  #devis-2 .hero_intro_content h3 {
    font-size: 40px;
  }

  #devis-2 .hero_intro_content p.text {
    font-size: 25px;
  }

  #devis-2 .hero_intro_content .bg_etoile_left {
    top: 10px;
  }

  #devis-2 .hero_intro_content .bg_etoile_right {
    top: -50px;
  }
}

@media (max-width: 1300px) {
  #devis-2 .container_infos.info_service .info_intervenants h3 {
    font-size: 18px;
  }

  #devis-2 .container_infos.info_service .info_intervenants p {
    font-size: 18px;
  }

  #devis-2
    .container_infos.info_service
    .info_intervenants
    .container_button
    button {
    font-size: 20px;
  }

  #devis-2 .container_infos.price_block h3 {
    font-size: 30px;
  }

  #devis-2 .container_infos.price_block .price_text p {
    font-size: 20px;
  }

  #devis-2 .container_infos.price_block .small_text p {
    font-size: 12px;
  }

  #devis-2 .container_infos.simple h3 {
    font-size: 30px;
  }

  #devis-2 .container_infos.simple ul li {
    font-size: 18px;
  }

  #devis-2 .container_infos.simple ul li img {
    width: 20px;
    height: 20px;
  }

  #devis-2 .container_infos .devis,
  #devis-2 .container_infos.info_service .btn_view_avis a {
    font-size: 16px;
  }

  #devis-2 .container_infos.simple p {
    font-size: 12px;
  }

  #devis-2 .container_infos.promo .container_promo .container_promo_time {
    font-size: 50px;
  }

  #devis-2 .container_infos.promo .container_promo .nbrHourPromo {
    font-size: 75px;
  }

  #devis-2 .container_infos.promo .container_button button {
    width: 292px;
    font-size: 16px;
  }

  #devis-2 .container_infos.promo .container_promo_img img {
    width: 100px;
    right: 10px;
    top: -25px;
  }

  #devis-2 .container_info_agence_right .container_map .card_agence {
    padding: 20px;
  }

  #devis-2 .container_map .star {
    width: 15px;
  }

  #devis-2 .container_map .star-fill {
    background-size: 15px 100%;
  }

  #devis-2 .container_map p.average_content {
    font-size: 12px;
  }

  #devis-2 .container_info_agence_right #landing_ville_photo h3 {
    font-size: 30px;
  }

  #devis-2 .container_info_agence_right #landing_ville_photo .container_logo {
    margin: 0 20px 0 0;
  }

  #devis-2 .container_info_agence .block_horaire_content h3 {
    font-size: 50px;
  }

  #devis-2 .container_info_agence .block_horaire_content {
    padding: 20px 60px 0;
  }

  #devis-2 .container_info_agence .block_horaire_detail {
    gap: 0px;
  }

  #devis-2 .container_info_agence .block_horaire_detail .container_letters {
    gap: 12px;
  }

  /* #devis-2 .container_info_agence_right .container_map .devanture_agence {
    width: 90px;
    height: 90px;
  } */
}

@media (max-width: 1200px) {
  #devis-2 .container_infos.info_service,
  #devis-2 .hero_intro_content {
    border-radius: 60px;
  }

  #devis-2 .hero_intro_content h3 {
    max-width: 70vw;
  }

  #devis-2 .hero_intro_content p.text {
    max-width: 70vw;
  }

  #devis-2 .container_infos.info_service {
    gap: 20px;
  }

  #devis-2 .container_infos.info_service .info_service_content {
    padding: 45px;
  }

  #devis-2 .container_infos.info_service .info_agence {
    padding: 45px;
  }

  #devis-2 .container_infos.info_service .simple {
    padding: 45px;
  }

  #devis-2 .container_infos.info_service .info_agence {
    margin: 0 0 20px;
  }

  #devis-2 .container_infos.info_service .info_service_content h3,
  #devis-2 .container_infos.info_service .simple h3,
  #devis-2 .container_infos.info_service .info_agence h3 {
    font-size: 30px;
    margin: 0 0 30px;
  }

  #devis-2 .container_infos.info_service .info_service_content p,
  #devis-2 .container_infos p.average_content,
  #devis-2 .container_infos.info_service .simple ul li {
    font-size: 18px;
  }

  #devis-2 .container_infos.info_service .info_service_content .bg_picture {
    width: 500px;
    right: -200px;
  }

  #devis-2 .container_infos.info_service .info_service_content .bg_line {
    width: 650px;
  }

  #devis-2 .container_infos.info_service .info_service_content .texts {
    max-width: 100%;
  }

  #devis-2 .container_infos .average {
    margin: 0 auto 10px;
  }

  #devis-2 .container_infos .star {
    width: 30px;
  }

  #devis-2 .container_infos .star-fill {
    background-size: 30px 100%;
  }

  #devis-2 .container_infos.info_service .container_button {
    margin: 30px 0 0;
  }

  #devis-2 .container_infos .devis,
  #devis-2 .container_infos.info_service .btn_view_avis a {
    font-size: 14px;
    white-space: nowrap;
  }

  #devis-2 .container_infos.info_service .info_service_content {
    min-height: 0;
  }

  #devis-2.landing .grid_2x2 .content_size {
    gap: 20px;
  }

  #devis-2 .container_info_agence {
    gap: 20px;
  }

  #devis-2 .container_info_agence_right {
    gap: 20px;
  }

  #devis-2 .container_infos.info_service .info_agence {
    min-height: 350px;
  }

  #devis-2 .container_infos.info_service .info_intervenants {
    min-height: 350px;
  }

  #devis-2 .container_info_agence_right #landing_ville_photo {
    min-height: 350px;
  }

  #devis-2 .container_info_agence_right #map-landing {
    min-height: 350px;
  }

  #devis-2 .container_info_agence .block_horaire_content h3 {
    font-size: 45px;
    margin: 0 auto 35px;
    left: 0;
  }

  #devis-2 .container_info_agence .block_horaire_content > p {
    font-size: 20px;
  }

  #devis-2 .container_info_agence .block_horaire_detail {
    padding: 30px;
  }

  #devis-2 .container_info_agence_left .smiley_blur {
    width: 150px;
    left: -144px;
    bottom: -45px;
  }

  #devis-2 .container_info_agence_left .smiley {
    width: 150px;
    top: -50px;
    right: -45px;
  }

  #devis-2 .container_info_agence_right #landing_ville_photo .container_logo {
    width: 45px;
    height: 45px;
    margin: 0 15px 0 0;
  }

  #devis-2 .container_info_agence_right #landing_ville_photo h3 img {
    width: 35px;
    height: 35px;
  }

  #devis-2 .container_info_agence_right #landing_ville_photo h3 {
    font-size: 25px;
  }

  #devis-2 .container_info_agence_right #agences_infos p {
    font-size: 20px;
    margin: 0px 0 0 57px;
  }

  #devis-2 .container_info_agence_right .container_map .devanture_agence {
    width: 80px;
    height: 80px;
  }

  #devis-2 .container_info_agence_right .container_map .card_agence {
    padding: 15px;
  }

  #devis-2 .container_info_agence_right .container_map .card_agence h3 {
    font-size: 18px;
  }
}

@media (max-width: 1100px) {
  .landing .grid_2x2 .content_size {
    gap: 24px !important;
  }

  .landing .grid_2x2 .content_size > div {
    aspect-ratio: initial !important;
    /* border-radius: 35px!important; */
  }

  /* .landing #landing_credit_impot img {
    border-radius: 35px!important;
  } */

  #devis-2 .container_infos.info_service h3,
  #devis-2 .hero_intro_content h3 {
    font-size: 35px;
  }

  #devis-2 .container_infos.info_service p,
  #devis-2 .hero_intro_content p.text {
    font-size: 23px;
  }

  #devis-2 .hero_intro_content .bg_etoile_left,
  #devis-2 .hero_intro_content .bg_etoile_right {
    width: 65px;
  }

  #devis-2 .container_infos.info_avantage ul li {
    font-size: 28px;
  }

  #devis-2 .container_infos.price_block h3 {
    font-size: 25px;
  }

  #devis-2 .container_infos.price_block .price_text p {
    font-size: 18px;
  }

  #devis-2 .container_info_agence_right #landing_ville_photo .devis {
    font-size: 14px;
    padding: 8px 18px;
  }

  #devis-2 .container_info_agence .block_horaire_detail .status {
    font-size: 14px;
  }

  #devis-2 .container_info_agence .block_horaire_detail .hour p {
    font-size: 22px;
  }

  #devis-2 .container_info_agence .block_horaire_detail .hour {
    margin: 20px 0;
  }

  #devis-2 .container_info_agence .block_horaire_detail .container_letters > p {
    width: 25px;
    height: 25px;
    font-size: 14px;
  }

  #devis-2 .container_info_agence .block_horaire_content {
    padding: 20px 30px 0;
  }

  #devis-2 .container_info_agence .block_horaire_content h3 {
    font-size: 45px;
    margin: 0 auto 35px;
    left: 3vw;
  }

  #devis-2 .container_info_agence_right #landing_ville_photo {
    padding: 50px;
  }

  #devis-2 .container_info_agence_right #landing_ville_photo #agences_infos {
    margin: 30px 0 0;
  }

  #devis-2 .container_info_agence_right .container_map .devanture_agence {
    width: 70px;
    height: 70px;
  }

  #devis-2 .container_map .average {
    margin: 5px 0 0;
  }

  #devis-2 .container_map .average {
    gap: 4px;
  }

  #devis-2 .container_info_agence_right .container_map .card_agence h3 {
    font-size: 16px;
  }
}

@media (max-width: 900px) {
  #devis-2 .container_infos.info_avantage ul {
    padding: 30px 0;
  }

  #devis-2 .container_infos.info_avantage ul li {
    font-size: 25px;
  }

  #devis-2 .container_infos.price_block {
    padding: 40px;
  }

  #devis-2 .container_infos.price_block h3 {
    font-size: 22px;
  }

  #devis-2 .container_infos.price_block .price_text p {
    font-size: 18px;
  }

  #devis-2 .container_infos.simple {
    padding: 40px;
  }

  #devis-2 .container_infos.simple h3 {
    font-size: 25px;
  }

  #devis-2 .container_infos.simple ul li {
    font-size: 16px;
    line-height: 1;
  }

  #devis-2 .container_infos.info_avantage {
    padding: 60px 0;
  }

  #devis-2 .container_info_agence_right #landing_ville_photo .devis {
    font-size: 12px;
    padding: 4px 10px;
  }

  #devis-2 .container_info_agence_right #agences_infos p {
    font-size: 18px;
    margin: 0px 30px;
  }

  #devis-2 .container_info_agence_right .container_map .devanture_agence {
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 768px) {
  #devis-2 .slide {
    height: 82svh;
  }
   #devis-2 .slide h3 {
    line-height: 1;
    top: 75px;
    padding: 0 20px;
    margin-top: 20px;
    /* width: 90%;
    margin: 25px auto 0; */
   }

  #devis-2.landing .grid_2x2 .content_size {
    background-color: #dad7c6;
  }

  .landing .grid_2x2 {
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  .landing .grid_2x2 .content_size > div {
    border-radius: 0 !important;
  }

  .landing #landing_credit_impot img {
    border-radius: 0 !important;
  }

  .landing #landing_credit_impot {
    background-color: #f18700;
  }

  .landing .grid_2x2 .content_size {
    width: 100%;
    gap: 0 !important;
    margin: 0 !important;
  }

  #devis-2 .container_infos.promo .container_button button,
  #devis-2 .container_infos.info_service .info_intervenants .container_button button,
  #devis-2 .hero_intro_content button {
    /* width: 100%; */
    border-radius: 50px;
    /* justify-content: center; */
  }

  #devis-2 .container_infos.info_service .btn_view_avis {
    /* width: 100%; */
    border-radius: 50px;
    /* justify-content: center; */
  }

  #devis-2 .hero_intro_content p.small {
    margin: 20px 0 80px;
  }

  .landing #landing_credit_impot,
  .landing #landing_ville_photo {
    /* width: auto !important;
    height: auto !important; */
    position: relative;
    /* z-index: -1; */
  }

  #devis-2 .hero {
    position: relative;
    z-index: 20;
  }

  .landing .hero .block_radius_bottom {
    background-color: #655b5c !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    z-index: 2;
  }

  #devis-2 .hero_intro_content {
    z-index: 19;
  }

  #devis-2 .hero_intro_content h3 {
    max-width: 90vw;
  }

  #devis-2 .hero_intro_content p.text {
    max-width: 90vw;
  }

  #devis-2 .container_infos.info_service {
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
    z-index: 18;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  #devis-2 .container_infos.info_avantage {
    padding: 60px 0 10px;
  }

  #devis-2 .hero_intro_content {
    padding: 80px 20px 90px;
    border-radius: 50px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    height: auto;
    margin: -150px 0 0;
    position: relative;
    z-index: 19;
  }

  #devis-2 .container_infos.info_service > div {
    width: 100%;
  }

  #devis-2 .container_infos.info_service .info_agence {
    border-radius: 50px;
  }

  #devis-2 .container_infos.info_service .simple {
    border-radius: 50px;
  }
  #devis-2 .container_infos.info_service .info_service_content h3,
  #devis-2 .container_infos.info_service .simple h3,
  #devis-2 .container_infos.info_service .info_agence h3 {
    font-size: 35px;
    text-align: center;
    margin: 0 0 60px;
  }

  #devis-2 .container_infos.info_service .info_service_content .texts {
    max-width: 75%;
  }

  #devis-2 .container_infos.info_service .info_service_content p,
  #devis-2 .container_infos p.average_content,
  #devis-2 .container_infos.info_service .simple ul li {
    font-size: 23px;
  }

  #devis-2 .container_infos.info_service .info_service_content .bg_picture {
    width: 500px;
    right: -140px;
    bottom: -55px;
  }

  #devis-2 .container_infos.info_service .info_service_content {
    min-height: 800px;
    padding: 110px 40px 60px;
    border-radius: 50px;
    margin: -70px 0 0;
    z-index: 18;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  #devis-2 .container_infos.info_service .info_agence {
    min-height: 0;
    margin: -70px 0 0;
    position: relative;
    z-index: 17;
    border-radius: 0;
    padding: 100px 35px 80px;
  }

  #devis-2 .container_infos.info_service .info_agence .separator {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -35px;
  }

  #devis-2 .container_infos.info_intervenants,
  #devis-2 .container_infos.price_block,
  #devis-2 .container_infos.info_hours {
    margin: 0;
  }

  #devis-2 .container_infos.price_block {
    border-radius: 50px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    padding: 120px 35px 90px;
    margin: -70px 0 0;
    position: relative;
    z-index: 13;
  }

  #devis-2 .container_infos.info_service .info_intervenants {
    width: 100%;
    padding: 150px 32px 80px;
    margin: -70px 0 0;
    position: relative;
    z-index: 16;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  #devis-2 .container_infos.info_service .container_button {
    margin: 60px 0 0;
  }

  #devis-2 .container_infos.info_service {
    background-color: #00a52d;
  }

  #devis-2 .container_infos.info_service .info_intervenants h3 {
    font-size: 27px;
  }

  #devis-2 .container_infos.info_service .info_intervenants h3 {
    text-align: center;
  }

  #devis-2 .container_infos.info_service .info_intervenants p {
    font-size: 20px;
    text-align: center;
  }

  #devis-2 .container_infos.info_avantage {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 15;
    margin: -70px 0 0;
    background-color: #fdb700;
  }

  #devis-2 .container_infos.info_avantage > div {
    background-color: #00a52d;
    border-radius: 50px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    padding: 80px 45px 100px;
  }

  #devis-2 .landing #landing_credit_impot img {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  #devis-2 .container_infos {
    padding: 45px;
  }

  #devis-2 .container_infos.info_avantage ul li {
    font-size: 25px;
  }

  .landing #landing_credit_impot {
    /* min-height: 500px; */
    aspect-ratio: 4/3 !important;
    /* margin: -42px 0 0; */
    position: relative;
    z-index: 14;
    min-height: 350px;
  }

  #devis-2 .container_infos.price_block h3 {
    font-size: 32px;
    margin: 0 0 40px;
    text-align: center;
    line-height: 1.2;
  }

  #devis-2 .container_infos.price_block .price_text {
    top: 0;
    margin: 0 0 50px;
  }

  #devis-2 .container_infos.price_block .price_text p {
    font-size: 32px;
    text-align: center;
    color: #fff;
  }

  #devis-2 .container_infos.price_block .small_text p {
    font-size: 14px;
    text-align: center;
    color: #facea1;
    font-style: italic;
  }

  #devis-2 .container_infos.simple {
    width: 100%;
    margin: 0;
    padding: 140px 35px 80px;
    margin: -70px 0 0;
    position: relative;
    z-index: 12;
    border-radius: 50px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }

  #devis-2 .container_infos.simple h3 {
    font-size: 40px;
    margin: 0 0 30px;
  }

  #devis-2 .container_infos.simple .icon_validate {
    display: flex;
    justify-content: center;
  }

  #devis-2 .container_infos .devis {
    border-radius: 50px;
  }

  #devis-2 .container_infos.simple .icon_validate img {
    width: 55px;
    height: 55px;
  }

   #devis-2 .container_infos.grid_100.simple {
    border-radius: 0!important;
   }

  #devis-2 .container_infos.grid_100.simple .list {
    margin: 0;
  }
  #devis-2 .container_infos.simple .list {
    margin: 0;
    align-items: center;
  }

  #devis-2 .container_infos.simple ul li {
    font-size: 26px;
    line-height: 1.5;
    justify-content: center;
  }

  #devis-2 .container_infos.simple ul li img {
    width: 25px;
    height: 25px;
  }

  #devis-2 .container_infos.simple p {
    font-size: 14px;
  }

  #devis-2 .container_infos.promo {
    width: 100%;
    margin: 0;
    margin: -70px 0 0;
    position: relative;
    z-index: 11;
    padding: 0;
    background-color: #00bffe !important;
  }

  #devis-2 .container_infos.promo > div {
    padding: 110px 45px 70px;
    background-color: var(--colorPopupReduire) !important;
    border-radius: 50px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    margin: -20px 0 0;
  }

  #devis-2 .container_infos.promo .container_promo {
    margin: 0 0 100px;
  }

  #devis-2 .container_infos.promo .container_promo .container_promo_time {
    font-size: 70px;
  }

  #devis-2 .container_infos.promo .container_promo .nbrHourPromo {
    font-size: 140px;
  }

  #devis-2 .container_infos.promo .container_promo_img img {
    width: 150px;
    right: 25px;
    top: -30px;
  }

  #devis-2 .container_infos .container_button {
    margin: 40px 0 0;
  }

  #devis-2 .container_infos .container_button .block_btn_devis button {
    max-width: 100%;
    background-color: #01beff;
    font-size: 19px;
  }

  .landing #landing_ville_photo {
    aspect-ratio: 4/3 !important;
  }

  #devis-2 .container_info_agence {
    flex-wrap: wrap;
    /* background-color: rgba(0, 191, 254, 0.5); */
    background-color: #bbeefc;
  }

  #devis-2 .container_info_agence_left {
    width: 100%;
    /* padding: 150px 45px 80px; */
    /* margin: -70px 0 0;
    position: relative;
    z-index: 12; */
    border-radius: 50px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }

  #devis-2 .container_info_agence .block_horaire {
    border-radius: 50px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    position: relative;
    z-index: 11;
    margin: -70px 0 0;
    padding: 100px 35px 35px;
    height: auto;
  }

  #devis-2 .container_info_agence_right {
    width: 100%;
    margin: 10px auto 48px;
  }

  #devis-2 .container_info_agence_right .container_map {
    margin: 10px 0 0;
  }

  #devis-2 .container_info_agence_right #landing_ville_photo {
    width: calc(100% - 60px) !important;
    margin: 0 30px;
    border-radius: 32px;
  }

  #devis-2 .hero_intro_content > div {
    top: 0;
    margin: 0 0 80px;
  }

  #devis-2 .container_info_agence .block_horaire_content {
    padding: 25px 0 70px;
  }

  #devis-2 .container_info_agence .block_horaire_content h3 {
    text-align: center;
    margin: 0 auto 46px;
    font-size: 36px;
    line-height: 1.2;
  }

    #devis-2 .container_info_agence_right #landing_ville_photo #agences_infos {
    margin: 20px 0 0 20px;
  }

  #devis-2 .container_info_agence .block_horaire_content > p {
    text-align: center;
  }

  #devis-2 .container_info_agence .block_horaire_detail .hour p {
    font-size: 25px;
  }

  #devis-2 .container_info_agence_right #landing_ville_photo p.small a {
    font-size: 12px;
    font-style: italic;
  }

  #devis-2 .container_info_agence .block_horaire_detail {
    padding: 40px;
  }

  #devis-2 .container_info_agence .block_horaire_detail .container_letters > p {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  #devis-2 .container_info_agence .block_horaire_detail .container_letters {
    gap: 18px;
  }

  #devis-2 .container_info_agence .block_horaire_detail .hour {
    margin: 30px 0;
  }

  #devis-2 .container_info_agence_right #landing_ville_photo h3 {
    font-size: 35px;
  }

  #devis-2 .container_info_agence_right #agences_infos p {
    font-size: 25px;
    margin: 0px 0 0 60px;
  }

  #devis-2 .container_info_agence_right #agences_infos p {
    font-size: 25px;
    margin: 0px 0 0 60px;
  }

  #devis-2 .container_info_agence_right #map-landing {
    width: calc(100% - 60px);
    margin: auto;
    border-radius: 32px;
    min-height: 82svh;
  }

  #devis-2 .container_info_agence_right .container_map .devanture_agence {
    width: 100px;
    height: 100px;
  }

  #devis-2 .container_info_agence_right .container_map .card_agence h3 {
    font-size: 20px;
  }

  #devis-2 .container_map p.average_content {
    font-size: 14px;
  }

  #devis-2 .container_map .average {
    margin: 15px 0 0;
  }

  #devis-2 .container_info_agence_right #landing_ville_photo {
    padding: 50px 30px;
  }

  #devis-2 .container_info_agence_right #landing_ville_photo .devis {
    max-width: 100%;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 19px;
  }

  #devis-2 .container_infos.info_avantage ul li.active {
    transform: scale(1);
  }

  #devis-2 .container_infos.info_avantage > div {
    padding: 80px 40px 60px;
  }

   #devis-2 .container_infos.info_avantage ul {
    padding: 0;
  }

  #devis-2 .block_4_icones .block_radius_bottom {
    background-color: #fff;
  }
}

@media (max-width: 650px) {
  #devis-2 .container_infos.info_avantage ul li {
    font-size: 20px;
  }
}

@media (max-width: 550px) {
  #devis-2 .container_infos.info_service .btn_view_avis a {
    font-size: 20px;
  }

  #devis-2 .container_infos.info_service .info_agence h3 {
    margin: 0 0 25px;
  }

  #devis-2 .container_infos.info_service .info_service_content h3,
  #devis-2 .container_infos.info_service .simple h3,
  #devis-2 .container_infos.info_service .info_agence h3 {
    font-size: 36px;
    margin: 44px 0 46px;
  }

  #devis-2 .container_infos.info_service .info_agence h3 {
    text-align: center;
    margin: 30px 0 30px;
  }

  #devis-2 .container_infos.info_service .info_service_content p,
  #devis-2 .container_infos p.average_content,
  #devis-2 .container_infos.info_service .simple ul li {
    font-size: 20px;
  }

  #devis-2 .container_infos p.average_content {
    margin: 0 0 30px;
  }

  #devis-2 .container_infos.info_service .info_service_content .bg_picture {
    width: 450px;
    right: -160px;
    bottom: -35px;
  }

  #devis-2 .container_infos.info_service .info_service_content .bg_line {
    width: 580px;
    left: -20px;
  }

  #devis-2 .container_infos.info_service .info_service_content .container_logo {
    left: 40px;
    bottom: 40px;
    width: 60px;
    height: 60px;
  }

  #devis-2 .container_infos.info_service .info_service_content .container_logo img {
    width: 30px;
    height: 53px;
  }
}

@media (max-width: 500px) {
  #devis-2 .hero_intro_content h3 {
    font-size: 36px;
    line-height: 1.1;
    width: 80vw;
    position: relative;
    left: 20px;
    margin: 0 0 46px;
  }

  #devis-2 .hero_intro_content .bg_etoile_left,
  #devis-2 .hero_intro_content .bg_etoile_right {
    position: absolute;
    width: 120px;
  }

  #devis-2 .hero_intro_content p.text {
    font-size: 18px;
    padding: 0 20px;
  }

  #devis-2 .hero_intro_content .bg_etoile_left {
    display: none;
  }

   #devis-2 .hero_intro_content {
    padding: 130px 20px 90px;
  }

  #devis-2 .hero_intro_content .bg_etoile_right {
    top: -115px;
    right: 95px;
    right: 25vw;
  }

  #devis-2 .container_infos.info_service .info_intervenants h3 {
    font-size: 22px;
  }

  #devis-2 .container_infos {
    padding: 30px 20px;
  }

  #devis-2 .container_infos.info_avantage ul li {
    font-size: 25px;
    text-align: center;
    line-height: 1;
    margin: 0 0 20px;
    /* color: #fff; */
  }

  #devis-2 .container_infos.simple h3 {
    font-size: 30px;
  }

  #devis-2 .container_infos.simple p {
    font-size: 12px;
    font-style: italic;
  }

  #devis-2 .container_infos.promo p.small a {
    font-style: italic;
  }

  #devis-2 .container_infos.promo .container_button button {
    font-size: 20px;
  }

  #devis-2 .container_infos.promo .container_promo_img img {
    width: 160px;
    right: -55px;
    top: 0px;
  }



  #devis-2 .container_info_agence_right .container_map .devanture_agence {
    width: 80px;
    height: 80px;
  }

  #devis-2 .container_map p.average_content {
    font-size: 12px;
  }

  #devis-2 .container_info_agence_right .container_map .card_agence h3 {
    font-size: 18px;
  }

  #devis-2 .container_map .average {
    margin: 10px 0 0;
  }

  #devis-2 .container_info_agence_right #landing_ville_photo h3 {
    font-size: 30px;
  }

  #devis-2 .container_info_agence_right #agences_infos p {
    font-size: 20px;
  }

  #devis-2 .container_info_agence .block_horaire_detail .container_letters {
    gap: 10px;
  }

  #devis-2 .container_info_agence .block_horaire_detail .container_letters > p {
    width: 28px;
    height: 29px;
    font-size: 17px;
  }

  #devis-2 .container_infos.price_block .price_text {
    margin: 0 0 46px;
  }

  #devis-2 .container_info_agence_right #landing_ville_photo h3 {
    font-size: 24px;
  }

  #devis-2 .container_info_agence_right .container_map .devanture_agence {
    width: 80px;
    height: 80px;
  }

  #devis-2 .container_info_agence_right .container_map .close_card_agence {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 20px;
  }

  #devis-2 .container_map .average {
    margin: 5px 0 0;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  #devis-2 .container_info_agence_right #agences_infos p {
    font-size: 18px;
    /* margin: 0px 0 0 40px; */
    margin: 0px 0 5px;
  }

  #devis-2 .container_info_agence .block_horaire_detail .hour p {
    font-size: 22px;
  }
}

@media (max-width: 450px) {
  #devis-2 .container_infos.info_service .info_service_content p,
  #devis-2 .container_infos p.average_content,
  #devis-2 .container_infos.info_service .simple ul li {
    font-size: 18px;
  }

  #devis-2 .container_infos.info_service .info_service_content .bg_picture {
    width: 420px;
    right: -115px;
  }

  #devis-2 .container_infos.info_service .info_service_content .bg_line {
    width: 400px;
    left: -15px;
    bottom: 40px;
  }

  #devis-2 .container_infos.info_service .info_service_content .texts {
    max-width: 65%;
  }

  #devis-2 .container_infos.info_service .simple p {
    font-size: 12px;
  }

  /* #devis-2 .container_infos.info_service .info_intervenants {
    padding: 40px;
  } */

  #devis-2 .container_infos.info_service .info_intervenants h3 {
    font-size: 20px;
  }

  #devis-2 .container_infos.promo {
    /* padding: 40px; */
  }

  #devis-2 .container_infos.simple h3 {
    font-size: 32px;
  }
}
/***************************
* FIN DE LA PAGE DEMANDE DE DEVIS 2 *
****************************/

/***************************
* PAGE SERVICES
****************************/
.mt_0 {
  margin-top: 0 !important;
}

.mb_5vw {
  margin-bottom: 5vw;
}

.mb_48 {
  margin-bottom: 48px;
}

.mb_8 {
  margin-bottom: 8px;
}

.mt_8 {
  margin-top: 8px;
}

.mt_5vw {
  margin-top: 5vw;
}

.mt_12 {
  margin-top: 12px;
}

.mt_24 {
  margin-top: 24px;
}

.mt_48 {
  margin-top: 48px;
}

header nav.click,
header .nav_fixed.click {
  cursor: pointer;
}

header nav.border .nav_services li:not(#showServices) {
  display: flex;
}

header nav.border,
header .nav_fixed.border {
  border: 1px solid #ddd;
}

#containerMapFindAgency {
  width: 100%;
  margin: 25px auto;
  height: 400px;
  position: relative;
}

#containerMapFindAgency div#map-find-agency {
  width: 100%;
  height: 100%;
  border-radius: var(--cs-radius) !important;
}

#agencesOutreMer {
  position: absolute;
  z-index: 10;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin: auto;
  height: 100%;
  padding: 15px;
  flex-wrap: wrap;
  width: 175px;
}

#agencesOutreMer div {
  cursor: pointer;
}

#agencesOutreMer img {
  width: 65px;
  height: auto;
  margin: auto;
}

#services-agence {
}

#services-agence .hero {
  position: relative;
  top: 0;
  left: 0;
  inset: 0;
  padding: 170px 0 0;
  width: 100%;
  height: 100%;
  min-height: 950px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  max-height: 90%;
}

#services-agence .hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: var(--bgPageService);
  background-position: var(--bgPosition);
  background-size: cover;
  background-repeat: no-repeat;
  z-index: -1;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  max-height: 90%;
}

#services-agence .hero.reverse::before {
  transform: rotateY(180deg);
  /* background-position: bottom; */
}

#services-agence .hero h1 {
  font-size: 70px;
  font-family: "Agbalumo", sans-serif;
  text-align: center;
  color: var(--btn-color, #697c68);
  padding: 60px 0 24px 0;
  line-height: 1em;
}

#services-agence .average {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 30px;
}

#services-agence .average_content {
  font-size: 25px;
}

#services-agence .average_content span {
  font-size: inherit;
}

#services-agence .star {
  width: 30px;
}

#services-agence .stars {
  display: flex;
  margin: 0 10px 0 0;
  position: relative;
}

.hero .stars {
  background: rgba(255, 255, 255, 0.7);
  padding: 0;
  border-radius: 36px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
}

#services-agence .star-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-image: url("https://centreservicesdev.fr/assets/img/icons/star_yellow_fill.svg");
  background-repeat: repeat-x;
  background-size: 30px 100%;
  pointer-events: none;
}

#services-agence #centerContent {
  width: calc(80vw - 3 * var(--gap-carousel) - 42px);
  margin: auto;
}

#services-agence .contentServices {
  display: flex;
  gap: 50px;
  position: relative;
  z-index: 10;
}

#services-agence .contentServices.first {
  gap: 100px;
}

#services-agence .contentServices.imgRight {
  justify-content: end;
}

#services-agence .contentServices.imgLeft {
  justify-content: flex-end;
}

#services-agence .contentServices:has(.container_car_animate) {
  align-items: center;
}

#services-agence .textContentServices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

#services-agence .textContentServices {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

#services-agence .contentServices.first .textContentServices {
  margin-top: 24px;
}

#services-agence .textContentServices h3 {
  font-size: 2em;
}

#services-agence .listPictos a,
#services-agence .listPictos span {
  font-size: 14px;
  color: #666666;
}

#services-agence .imageContentServices {
  position: relative;
  background-image: var(--bgImage);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 550px;
  min-width: 370px;
  border-radius: 50px;
  border: 1px solid transparent;
  /* flex: 1; */
}

#services-agence .imageContentServices.firstImage {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#services-agence .imageContentServices.firstImage .bulleImg {
  position: absolute;
  top: 0;
  right: 50px;
  width: 100%;
  height: 100%;
  background-image: var(--bgImageBefore);
  background-size: cover;
  background-repeat: no-repeat;
  animation: slide-right-left 10s ease-in-out infinite;
}

#services-agence .contentServices.first .imageContentServices {
  margin-top: -190px;
}

#services-agence .contentServices .textContentServices {
  /* flex: 3; */
}

#services-agence .contentServices.imgRight .textContentServices {
  text-align: right;
}

#services-agence .contentServices.imgLeft {
  flex-direction: row-reverse;
}

#services-agence .contentServices.imgLeft .textContentServices {
  text-align: left;
  align-items: flex-start;
}

#services-agence .listPictos {
  display: flex;
  user-select: none;
  flex-wrap: wrap;
  gap: 10px 0;
}

#services-agence .listPictos > .blockPromo .animate_scale {
  position: relative;
  transition: all 0.3s;
}

#services-agence .listPictos > .blockPromo .animate_scale:hover {
  transform: scale(1.05) translateY(-5px);
}

#services-agence .listPictos img.animate_scale {
  transition: all 0.3s;
}

#services-agence .listPictos img.animate_scale:hover {
  transform: scale(1.05) translateY(-5px);
}

#services-agence .listPictos > * {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90px;
  text-align: center;
  margin-left: 10px;
}

#services-agence .contentServices.imgLeft .listPictos div {
  margin-right: 10px;
  margin-left: 0;
}

#services-agence .listPictos .imgPicto {
  border: 1px solid #ccc;
  border-radius: 18px;
  width: 90px;
  height: 90px;
}

#services-agence .listPictos > *.blockPromo {
  position: relative;
}

#services-agence .listPictos > *.blockPromo .imgPromo {
  position: absolute;
  width: 50px;
  height: 50px;
  top: -35px;
  left: 20px;
}

#services-agence .listPictos .imgPromo {
  width: 50px;
  height: 50px;
  position: absolute;
}

#services-agence .listPictos .contentPromo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-color: var(--colorModal);
  background-color: var(--colorModal);
}

#services-agence .listPictos .contentPromo * {
  font-family: "Agbalumo", sans-serif;
  color: var(--colorText);
}

#services-agence .listPictos .contentPromo span.nbrHour {
  font-size: 2.5em;
  margin-top: -9px;
  line-height: 40px;
}

#services-agence .listPictos .contentPromo span.smallText {
  font-size: 1em;
}

#services-agence .listPictos .imgPicto.noBorder {
  border: 0;
}

#services-agence .btn.devis {
  border-radius: 50px;
  background: var(--btn-color, #687b66);
  padding: 10px 15px;
  color: white;
  font-weight: bold;
  cursor: pointer;
  padding-right: 25px;
  z-index: 100;
  position: relative;
}

#btn_evaluation {
  background: #00e4df !important;
}

#services-agence .btn.devis.insideImg {
  margin: auto;
  margin-top: 50px;
  width: max-content;
}

#services-agence .btn.devis .back_menu_devis {
  display: inline-block;
  vertical-align: middle;
}

/*BLOC TROUVER VOTRE AGENCE*/
#services-agence .blocFindOrga {
  /* width: calc(80vw - 3 * var(--gap-carousel) - 65px);
  margin: 5vw auto; */
  background: linear-gradient(135deg, #007bff, #00c3ff);
  padding: 10dvh 0;
  text-align: center;
  color: white;
  border-radius: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 45vh;
}

#services-agence .findOrgaTitle {
  padding: 0;
}

#services-agence .contentServices.first .imageContentServices .block_btn_devis {
  margin: 50px 0;
}

#services-agence .impot {
  position: relative;
  display: inline-block;
  padding: 40px 20px;
  border-radius: 5px;
  background-color: rgba(36, 30, 25, 0.5);
  color: black;
  border-radius: 50px;
  margin: 0 0 30px;
  top: -395px;
}

#services-agence .impot > img {
  width: 150px;
  position: absolute;
  right: -40px;
  top: -70px;
}

#services-agence .impot .cyan {
  color: #00e9e4;
}

#services-agence .impot > div {
  font-family: "Agbalumo", sans-serif;
  text-align: center;
  color: #fff;
  line-height: 1;
}

#services-agence .impot > div span {
  font-family: inherit;
}

#services-agence .impot > div.line_1 {
  font-size: 30px;
}

#services-agence .impot > div.line_2 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 120px;
  margin: 0 0 35px;
  line-height: 0.5;
}

#services-agence .impot > div.line_2 span {
  font-size: 30px;
  position: relative;
  top: 17px;
}

#services-agence .impot > div.line_3 {
  font-size: 30px;
}

#services-agence .impot > div.line_3 span {
  font-size: 40px;
}

#services-agence .impot > div.line_3 small {
  position: relative;
  top: -15px;
}

#services-agence .impot > div.line_4 {
  font-size: 25px;
}

#services-agence .container_car_animate > div {
  min-width: 370px;
  min-height: 550px;
  border-radius: 50px;
}

#services-agence #visite_evaluation .caption .title {
  font-size: 2em;
}

#visite_evaluation .caption .link a {
  color: #000;
  background: #fff;
  position: relative;
  cursor: pointer;
}

#services-agence #visite_evaluation {
  --aniSIze: 50%;
}

#services-agence .block_btn_devis button {
  background: var(--btn-color, #687b66);
  white-space: nowrap;
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2);
}

/** Carte */
.outerMarker {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 50px;
}

.outerMarker .marker {
  cursor: pointer;
  width: 50px;
  height: 50px;
}

.cayenneShow {
  left: 70px;
}

.reunionShow {
  right: 65px;
}

@media (max-width: 1200px) {
  #services-agence #centerContent {
    width: 90vw;
  }

  #services-agence .contentServices.first {
    gap: 50px;
  }

  #services-agence .hero {
    padding: 100px 0 0;
    min-height: 850px;
  }

  #services-agence .service_content > div {
    bottom: 395px;
  }
}

@media (max-width: 1000px) {
  #services-agence .hero {
    min-height: 720px;
  }

  #services-agence .hero h1 {
    font-size: 60px;
    padding: 30px 0 0;
  }

  #services-agence .average_content {
    font-size: 20px;
  }

  #services-agence .star {
    width: 25px;
  }

  #services-agence .star-fill {
    background-size: 25px 100%;
  }

  #services-agence
    .contentServices.first
    .imageContentServices
    .block_btn_devis {
    margin: 40px 0;
  }

  #services-agence .impot {
    padding: 40px;
    margin: 0 0 20px;
    top: -250px;
  }

  #services-agence .impot > img {
    width: 130px;
  }

  #services-agence .impot > div.line_1 {
    font-size: 25px;
  }

  #services-agence .impot > div.line_2 {
    font-size: 80px;
  }

  #services-agence .impot > div.line_3 {
    font-size: 20px;
    white-space: nowrap;
  }

  #services-agence .impot > div.line_3 span {
    font-size: 25px;
  }

  #services-agence .impot > div.line_4 {
    font-size: 20px;
  }

  .block_btn_devis button.grey {
    font-size: 14px;
  }

  #services-agence .imageContentServices {
    min-width: 300px;
  }
}

@media screen and (max-width: 900px) {
  #services-agence .contentServices {
    flex-wrap: wrap;
  }

  #services-agence .impot {
    margin: 0;
    /* top: 0; */
  }

  #services-agence .impot > img {
    width: 120px;
    right: -40px;
    top: -50px;
  }

  #services-agence .contentServices.first {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  #services-agence .contentServices.first .imageContentServices {
    margin-top: -100px;
  }

  #services-agence .imageContentServices {
    height: 350px;
  }

  #services-agence .imageContentServices.firstImage {
    background-position: unset;
  }

  #services-agence .contentServices.first .imageContentServices {
    /* margin-top: 0; */
  }

  #services-agence .contentServices.imgLeft,
  #services-agence .contentServices.imgRight {
    justify-content: center;
  }

  #services-agence .imageContentServices {
  }

  #services-agence .contentServices.imgLeft {
    flex-direction: row;
  }

  #services-agence .contentServices.first .textContentServices {
    margin-top: 0;
  }

  #services-agence .contentServices.imgRight .textContentServices {
    align-items: center;
    order: 2;
  }

  #services-agence .contentServices.imgLeft .textContentServices {
    align-items: center;
    order: 2;
  }

  #services-agence .listPictos {
    gap: 0;
  }

  #services-agence .contentServices.imgLeft .listPictos div {
    margin: 0;
    /* margin-bottom: 10px; */
  }

  #services-agence .listPictos div {
    margin: 0;
    /* margin-bottom: 10px; */
  }

  #services-agence .textContentServices {
    flex-direction: column;
    align-items: flex-start;
  }

  #services-agence .textContentServices h3 {
    font-size: 1.5em;
  }

  #services-agence .textContentServices * {
    text-align: center;
  }

  #services-agence .listPictos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  #services-agence .container_car_animate > div {
    min-height: 350px;
  }

  #services-agence #visite_evaluation {
    --aniSIze: 65%;
  }
}

@media (max-width: 768px) {
  #services-agence .hero {
    min-height: 590px;
    max-height: 90dvh;
  }

  #services-agence .hero::before {
    max-height: 90dvh;
  }

  #services-agence .impot {
    /* padding: 30px; */
  }

  #services-agence .contentServices.first .imageContentServices {
    margin-top: -30px;
  }

  #services-agence .hero h1 {
    font-size: 32px;
    padding: 10px 0 16px 0;
    width: 90%;
    margin: auto;
  }

  #services-agence .textContentServices {
    margin-top: 0;
  }

  #services-agence .btn.devis.insideImg {
    /* margin-top: 225px; */
  }

  #services-agence .average_content {
    font-size: 16px;
  }

  #services-agence .star {
    width: 20px;
  }

  #services-agence .star-fill {
    background-size: 20px 100%;
  }

  #services-agence .service_content {
    width: calc(100% - 38px);
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
  }

  #services-agence .service_content h2 {
    text-align: center;
    font-size: 25px;
  }

  #services-agence .service_content > div {
    bottom: 270px;
  }

  #services-agence .service_content article {
    order: 2;
    position: relative;
    bottom: 240px;
  }

  #services-agence .impot > img {
    width: 110px;
    top: -50px;
  }
}

@media (min-width: 768px) {
  #services-agence .block_btn_devis {
    display: flex;
  }
}

@media (max-width: 450px) {
  #services-agence .imageContentServices.firstImage .bulleImg {
    top: 12px;
    right: 65px;
    width: 90%;
    height: 90%;
  }

  #services-agence .impot {
    padding: 40px;
    margin: 0 0 20px;
    top: -210px;
  }

  #services-agence .listPictos > * {
    margin-left: 0;
  }

  #services-agence .listPictos {
    gap: 20px;
  }

  #services-agence #input_search_agence {
    font-size: 15px;
  }
}

@media (max-width: 400px) {
  #services-agence .container_car_animate > div {
    min-width: 355px;
  }
}

@media (max-width: 380px) {
  #services-agence .container_car_animate > div {
    min-width: 335px;
  }
}

/***************************
* FIN DE LA PAGE SERVICES *
****************************/
#modal-promo #inside-modal-promo:before {
  position: absolute;
  content: "";
  width: 1200px;
  height: 1200px;
  background: url("https://centreservicesdev.fr/assets/img/promotions/flash-02.png")
    no-repeat center / cover;
  z-index: -1;
  animation: rotation 120s linear infinite;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

#modal-promo .modalPromoActions:after {
  position: absolute;
  margin-left: 180px;
  margin-top: 18px;
  content: "";
  width: 36px;
  height: 36px;
  background: url("https://centreservicesdev.fr/assets/img/promotions/mouse-01.png")
    no-repeat center/36px;
  animation: mouse01 1s linear infinite;
  pointer-events: none;
}

@keyframes mouse01 {
  0% {
    margin-top: 18px;
    margin-left: 180px;
  }

  50% {
    margin-top: 28px;
    margin-left: 194px;
  }
}

/***************************
* Bloc visite d'évaluation
****************************/
#visite_evaluation {
  --aniDur: 12s;
  --aniSIze: 70%;
  --aniEase: cubic-bezier(0.65, 0.05, 0.36, 1);
  padding: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #00e4df;
}

#visite_evaluation .background {
  pointer-events: none !important;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-color: #00e4df;
  background-image: url(https://centreservicesdev.fr/assets/img/decor-01.png);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: auto var(--aniSIze);
  animation: bg-lg var(--aniDur) var(--aniEase) infinite;
  will-change: background-position, opacity;
}

#visite_evaluation .caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100px;
  width: 100%;
  height: 100%;
  z-index: 3;
  color: #000;
  text-align: center;
  animation: caption-lg var(--aniDur) var(--aniEase) infinite;
  will-change: opacity;
  display: flex;
  justify-content: center;
  align-items: center;
}

#visite_evaluation .caption .btn {
  color: #000;
  background: #fff;
  position: relative;
  cursor: pointer;
}

#visite_evaluation .car {
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background: url(https://centreservicesdev.fr/assets/img/voiture.png) no-repeat
    bottom center/auto var(--aniSIze);
  animation: car-lg var(--aniDur) var(--aniEase) infinite;
  will-change: left, opacity;
}

@keyframes bg-lg {
  0% {
    opacity: 1;
    background-position: bottom left;
  }

  60% {
    opacity: 1;
    background-position: bottom right;
  }

  90% {
    opacity: 1;
    background-position: bottom right;
  }

  95% {
    opacity: 0;
    background-position: bottom right;
  }

  96% {
    opacity: 0;
    background-position: bottom left;
  }

  98% {
    opacity: 1;
    background-position: bottom left;
  }

  100% {
    opacity: 1;
    background-position: bottom left;
  }
}

@keyframes car-lg {
  0% {
    bottom: 0;
    opacity: 1;
    left: 20%;
  }

  10% {
    bottom: 0;
    opacity: 1;
    left: 20%;
  }

  40% {
    bottom: 0;
    opacity: 1;
    left: -25%;
  }

  60% {
    bottom: 0;
    opacity: 1;
    left: -22%;
  }

  90% {
    bottom: 0;
    opacity: 1;
    left: -22%;
  }

  95% {
    bottom: 0;
    opacity: 0;
    left: -22%;
  }

  96% {
    bottom: 0;
    opacity: 0;
    left: 20%;
  }

  98% {
    bottom: 0;
    opacity: 1;
    left: 20%;
  }

  100% {
    bottom: 0;
    opacity: 1;
    left: 20%;
  }
}

@keyframes caption-sm {
  0% {
    bottom: 100px;
  }

  50% {
    bottom: 100px;
  }

  60% {
    bottom: 100px;
  }

  70% {
    bottom: 100px;
  }

  80% {
    bottom: 0;
  }

  100% {
    bottom: 0;
  }
}

@media (max-width: 768px) {
  #visite_evaluation {
    --aniSIze: 60%;
  }

  #visite_evaluation .caption {
    opacity: 1 !important;
    bottom: 90px;
    line-height: 1em;
  }

  #visite_evaluation .caption a {
    line-height: 1em;
    border: 2px solid #fff !important;
  }

  #visite_evaluation .caption {
    animation-name: caption-sm;
  }

  #visite_evaluation .caption .title {
    font-family: Agbalumo !important;
    color: #fff;
    line-height: 1em;
    padding-top: 7vw;
  }

  #visite_evaluation .car {
    animation-name: car-sm;
    left: 20%;
  }

  #visite_evaluation .background {
    animation-name: bg-sm;
  }

  @keyframes bg-sm {
    0% {
      opacity: 1;
      background-position: bottom left;
    }

    60% {
      opacity: 1;
      background-position: bottom right;
    }

    90% {
      opacity: 1;
      background-position: bottom right;
    }

    95% {
      opacity: 0;
      background-position: bottom right;
    }

    96% {
      opacity: 0;
      background-position: bottom left;
    }

    98% {
      opacity: 1;
      background-position: bottom left;
    }

    100% {
      opacity: 1;
      background-position: bottom left;
    }
  }

  @keyframes car-sm {
    0% {
      bottom: 0;
      opacity: 1;
      left: 20%;
    }

    10% {
      bottom: 0;
      opacity: 1;
      left: 20%;
    }

    40% {
      bottom: 0;
      opacity: 1;
      left: -25%;
    }

    60% {
      bottom: 0;
      opacity: 1;
      left: -20%;
    }

    90% {
      bottom: 0;
      opacity: 1;
      left: -20%;
    }

    95% {
      bottom: 0;
      opacity: 0;
      left: -20%;
    }

    96% {
      bottom: 0;
      opacity: 0;
      left: 20%;
    }

    98% {
      bottom: 0;
      opacity: 1;
      left: 20%;
    }

    100% {
      bottom: 0;
      opacity: 1;
      left: 20%;
    }
  }

  @keyframes caption-sm {
    0% {
      bottom: 100px;
    }

    50% {
      bottom: 100px;
    }

    60% {
      bottom: 100px;
    }

    70% {
      bottom: 100px;
    }

    80% {
      bottom: 100px;
    }

    100% {
      bottom: 100px;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  #visite_evaluation .background,
  #visite_evaluation .caption,
  #visite_evaluation .car {
    animation: none !important;
  }

  #visite_evaluation .caption {
    opacity: 1;
  }
}

/******** Variante sur la landing page AL1 ***********/

#mainContainerDevis #visite_evaluation {
  border: 0 !important;
  min-height: 430px;
}

@media (max-width: 560px) {
  #mainContainerDevis #visite_evaluation {
    border: 0 !important;
    height: 300px;
    min-height: 300px;
  }

  #mainContainerDevis #visite_evaluation .title {
    width: 80%;
    margin: auto;
  }
}

/***************************
* Fin du bloc visite d'évaluation
****************************/

/***************************
* Page de demande de devis B *
****************************/

#test_titre_landing span {
  display: block;
  padding: 16px;
  font-size: 18px;
  width: 100%;
  font-style: italic;
}

#test_titre_landing {
  background: rgba(61, 183, 255, 0.1);
  border-radius: 16px;
  display: block;
  padding: 16px;
  color: rgba(61, 183, 255, 1);
  border: 2px solid rgba(61, 183, 255, 0.5);
}

.brush_light span {
  position: absolute;
  top: 6px;
  background: 100% 100% no-repeat
    url(https://static.centreservices.fr/images/csfr/illustrations/brush-01.svg);
  width: 100%;
  height: 26px;
  z-index: 0;
}

.brush_light {
  position: relative;
}

@media all and (max-width: 1200px) {
  .brush_light span {
    position: absolute;
    top: 3px;
  }
}

#mainContainerDevis #avis_block {
  background: #f5f5f5;
}

#mainContainerDevis #avis_block img {
  width: clamp(120px, 40%, 40%);
}

#mainContainerDevis #votre_agence {
  position: relative;
  top: 0px;
  margin-bottom: 24px;
  font-style: italic;
  color: #999;
}

#mainContainerDevis #votre_agence img {
  width: 12px;
  display: inline-block;
  position: relative;
  top: 5px;
  opacity: 0.85;
}

#mainContainerDevis #votre_agence span {
  text-indent: 32px;
  font-size: 13px;
}

#mainContainerDevis .blockbtn {
  background: linear-gradient(135deg, #00bfff 10%, #0081ff 90%, #0081ff);
  cursor: pointer;
  color: #fff;
  padding: 12px 16px;
  border-radius: 36px;
  margin-top: 12px;
  display: inline-block;
  z-index: 1;
  position: relative;
}

#mainContainerDevis #reseau_block {
  background: url("https://static.centreservices.fr/images/photo-agence/Agence%20CS%2002.jpg")
    no-repeat center/cover;
  color: #fff;
  border: 0;
}

#mainContainerDevis #reseau_block h3 {
  padding: 0 7vw;
}

#mainContainerDevis #logo_block {
  background: url("https://centreservicesdev.fr/assets/img/logo_block.jpg")
    no-repeat center/70%;
  min-height: 600px !important;
}

@media (max-width: 768px) {
  #mainContainerDevis #logo_block {
    background-size: 80%;
    min-height: 50dvh !important;
  }
}

#mainContainerDevis .left * {
  max-width: 40vw;
}

#mainContainerDevis h3,
#mainContainerDevis .title {
  font-size: 1.7em;
  margin-bottom: 12px;
}

#mainContainerDevis .ecologie {
  background: url("https://centreservicesdev.fr/assets/img/respect-environnement.jpg")
    no-repeat right center/cover;
  min-height: 60dvh;
  display: flex;
  align-items: center;
}

#mainContainerDevis .ecologie > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  color: #fff;
  width: clamp(320px, 40%, 600px);
  padding: 0 0 0 min(5vw, 72px);
  text-align: left;
}

#mainContainerDevis .ecologie > div {
  padding: 0 0 0 4vw;
  width: 100%;
  justify-content: flex-start;
}

#mainContainerDevis .ecologie h3 {
  font-family: Agbalumo;
  font-size: 3vw;
  line-height: 0.9em;
}

#mainContainerDevis .ecologie > div h3,
#mainContainerDevis .market_bloc.ecologie > div p {
  width: 50%;
}

@media (max-width: 768px) {
  #mainContainerDevis .ecologie > div h3,
  #mainContainerDevis .market_bloc.ecologie > div p {
    width: 70%;
  }
}

#mainContainerDevis .ecologie span {
  font-family: Agbalumo;
  color: #fff300;
}

#mainContainerDevis .ecologie p {
  width: 80%;
  color: #fff;
}

#mainContainerDevis .ecologie {
  text-align: left;
}

#mainContainerDevis .ecologie h3 {
  font-family: Agbalumo;
  font-size: 2vw;
  line-height: 0.9em;
}

#mainContainerDevis .ecologie p {
  width: 80%;
  color: #fff;
  font-size: 0.92em;
}

@media (max-width: 768px) {
  #mainContainerDevis .ecologie {
    background: url("https://centreservicesdev.fr/assets/img/respect-environnement.jpg")
      no-repeat center/cover;
    padding-left: 5vw;
    min-height: 400px;
  }

  #mainContainerDevis .ecologie h3 {
    font-size: 28px;
    line-height: 1.1em;
    font-family: Agbalumo;
    font-size: 22px;
    line-height: 22px;
  }

  #mainContainerDevis .ecologie > div {
    width: 90%;
    padding: 0;
  }

  #mainContainerDevis .ecologie p {
    width: 80%;
    color: #fff;
    font-size: 0.92em;
  }
}

#mainContainerDevis #credit_block img {
  width: clamp(120px, 40%, 40%);
}

#mainContainerDevis #eco_block img {
  width: clamp(80px, 100px, 100px);
}

#mainContainerDevis .block {
  width: 100%;
  border-radius: 30px;
  border: 1px solid #ddd;
  margin-bottom: 24px;
}

#mainContainerDevis .block {
  min-height: 500px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0;
}

#mainContainerDevis #emploi_block {
  min-height: auto;
  padding: 0 0 48px 0;
}

#mainContainerDevis #emploi_block p {
  padding: 0 5vw;
}

#mainContainerDevis #emploi_block h3 {
  padding: 0 5vw;
}

@media (max-width: 560px) {
  #mainContainerDevis #emploi_block .content_block {
    padding: 0 !important;
  }

  #mainContainerDevis #emploi_block img {
    border-radius: 29px 29px 0 0;
  }
}

#mainContainerDevis .block .content_block .picto,
#landing .block .content_block img {
  max-width: 100%;
  height: auto;
  margin: auto;
  margin-bottom: 24px;
}

#mainContainerDevis #evaluation_block {
  position: relative;
}

#mainContainerDevis #evaluation_block #clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

#mainContainerDevis #evaluation_block .content_block {
  position: relative;
  z-index: 1;
}

@media (max-width: 560px) {
  #mainContainerDevis .block .content_block {
    padding: 20px;
  }
}

.x-agence {
  position: relative;
  width: 100%;
  max-width: 700px;
  overflow: hidden;
  border-radius: 30px;
  margin: auto;
  margin-bottom: 24px;
}

.x-slides {
  display: flex;
  width: 200%;
  height: 100%;
  transition: transform 1s ease-in-out;
}

.x-slides img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: 100%;
  min-width: 100%;
}

.x-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.x-dot {
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}

.x-dot.active {
  background: #feb500;
}

#mainContainerDevis {
  width: calc(80vw - 3 * var(--gap-carousel));
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 115px;
  grid-template-areas: "left right";
}

@media (max-width: 768px) {
  #mainContainerDevis {
    grid-template-columns: 1fr;
    grid-template-areas: "right" "left";
    margin-top: 90px;
    width: calc(100vw - 2 * var(--gap-carousel));
  }
}

#mainContainerDevis .left {
  grid-area: left;
}

@media (max-width: 768px) {
  #mainContainerDevis .left * {
    max-width: 100%;
  }
}

#mainContainerDevis .right {
  grid-area: right;
}

#mainContainerDevis .h2 {
  text-align: left;
  padding-left: 0;
}

#mainContainerDevis #modal-form-contact-container main,
#mainContainerDevis :is(#modal-container-box, #modal-container-devis-alt) main {
  width: 90%;
}

#mainContainerDevis
  :is(#modal-container-box, #modal-container-devis-alt):not(.home)
  main {
  padding: 0 20px 20px;
}

#mainContainerDevis #modal-container:has(.form),
#mainContainerDevis #modal-container-alt:has(.form),
#mainContainerDevis #modals-container.map,
#mainContainerDevis #modals-container.chat,
#mainContainerDevis #modals-container,
#mainContainerDevis #modal-container,
#mainContainerDevis #modal-container-alt,
#mainContainerDevis #modal-form-contact-container {
  box-shadow: none;
  opacity: 1;
  position: sticky;
  top: 120px;
  margin-top: 50px;
}

#mainContainerDevis :is(#modal-container-box, #modal-container-devis-alt) {
  justify-content: center;
}

#mainContainerDevis
  :is(#modal-container-box, #modal-container-devis-alt)
  .modal_title
  h3.left {
  margin: 16px 0 0 0;
  padding-bottom: 0 !important;
}

#mainContainerDevis #modal-container:has(.form) {
  min-height: auto;
}

@media (max-width: 768px) {
  #mainContainerDevis #modal-container,
  #mainContainerDevis #modals-container,
  #mainContainerDevis #modal-form-contact-container,
  #mainContainerDevis #modal-container-alt {
    position: static !important;
    top: auto !important;
    margin-top: 0 !important;
    box-shadow: none !important;
  }

  #mainContainerDevis #modal-form-contact-container main,
  #mainContainerDevis
    :is(#modal-container-box, #modal-container-devis-alt)
    main {
    width: 100%;
  }

  #mainContainerDevis #modal-container,
  #mainContainerDevis #modal-container-alt {
    background: none !important;
    border-radius: 16px;
    border: 1px solid #ddd;
    margin-top: 5vw !important;
  }
}

/***************************
* Fin de la page de demande de devis B *
****************************/

/***************************
* AJOUT VILLE NON COUVERTE *
****************************/
html,
body {
  scroll-behavior: smooth;
}

.uncovered_city_agences {
  position: relative;
  padding: 115px 0 0;
  scroll-behavior: smooth;
}

.uncovered_city_agences .no_city {
  width: calc(80vw - 3 * var(--gap-carousel));
  margin: 7vw auto -5vw;
  text-align: center;
}

.uncovered_city_agences .anchors {
  width: calc(80vw - 3 * var(--gap-carousel));
  margin: 40px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
}

.uncovered_city_agences .anchor {
  background-color: #00a9ff;
  border-radius: 30px;
  padding: 10px;
}

.uncovered_city_agences .anchor a {
  color: #fff;
}

.uncovered_city_agences [id^="orga-"] {
  scroll-margin-top: 170px;
}

.uncovered_city_agences h1 {
  font-family: "Agbalumo", sans-serif;
  color: #00a0ff;
  text-align: center;
  font-size: 50px;
  line-height: 1;
  margin: 50px 0 0;
}

.uncovered_city_agence {
  /* width: calc(80vw - 3 * var(--gap-carousel)); */
  width: calc(70vw - 3 * var(--gap-carousel));
  height: 350px;
  background-color: #befbff;
  border-radius: 90px;
  margin: 120px auto;
  position: relative;
  padding: 50px;
  scroll-margin-top: 170px;
}

.uncovered_city_agence > div {
  display: flex;
  align-items: flex-end;
  position: relative;
  top: -100px;
}

.uncovered_city_agence_pictures {
  width: 350px;
  display: flex;
  position: relative;
}

.uncovered_city_agence_pictures .devanture_agence {
  width: 350px;
  height: 350px;
  border-radius: 30px;
}

.uncovered_city_agence_pictures .picture_user {
  width: 110px;
  height: 110px;
  border-radius: 30px;
  position: absolute;
}

.uncovered_city_agence .circle_white {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
}

.uncovered_city_agence .circle_blue_l {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #befbff;
  position: absolute;
}

.uncovered_city_agence .circle_blue_s {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #befbff;
  position: absolute;
}

.uncovered_city_agence.left .circle_blue_s {
  top: 0;
  right: 0;
}

.uncovered_city_agence.left .circle_blue_s.left {
  right: auto;
  left: -30px;
  top: auto;
  bottom: 75px;
}

.uncovered_city_agence.right .circle_blue_s.right {
  right: -30px;
  top: auto;
  bottom: 75px;
}

.uncovered_city_agence.left .circle_blue_l {
  top: -40px;
  right: 35px;
}

.uncovered_city_agence.left .circle_white {
  top: 50px;
  right: 50px;
}

.uncovered_city_agence.right .circle_blue_s {
  top: -10px;
  left: 0;
}

.uncovered_city_agence.right .circle_blue_l {
  top: -40px;
  left: 40px;
}

.uncovered_city_agence.right .circle_white {
  top: 50px;
  left: 50px;
}

.uncovered_city_agence.left .uncovered_city_agence_pictures .picture_user {
  bottom: -20px;
  right: -40px;
}

.uncovered_city_agence.right .uncovered_city_agence_pictures .picture_user {
  bottom: -20px;
  left: -40px;
}

.uncovered_city_agence_content {
  width: calc(100% - 350px);
  position: relative;
  top: 20px;
  display: flex;
  flex-direction: column;
}

.uncovered_city_agence.left .uncovered_city_agence_content {
  align-items: flex-start;
  left: 80px;
}

.uncovered_city_agence.right .uncovered_city_agence_content {
  align-items: flex-end;
  right: 80px;
}

.uncovered_city_agence_content h3 {
  font-size: 35px;
  font-weight: 500;
  margin: 0 0 15px;
}

.uncovered_city_agence_content p {
  font-weight: 500;
  font-size: 18px;
}

.uncovered_city_agence.right .uncovered_city_agence_content p {
  text-align: end;
}

.uncovered_city_agence_content .buttons {
  margin: 30px 0 0;
  display: flex;
  flex-direction: column;
}

.uncovered_city_agence.right .uncovered_city_agence_content .buttons {
  align-items: flex-end;
}

.uncovered_city_agence_content .buttons > div {
  display: flex;
  gap: 25px;
}

.uncovered_city_agence_content .buttons > div:last-child {
  margin-top: 15px;
}

.uncovered_city_agence_content .buttons button {
  height: 48px;
  border: none;
  border-radius: 16px;
  padding: 10px 25px;
  font-weight: 700;
  font-size: 18px;
}

.uncovered_city_agence_content .buttons .devis {
  cursor: pointer;
  background-color: #00a9ff;
  color: #fff;
}

.uncovered_city_agence_content .buttons .devis .icon {
  display: none;
}

.uncovered_city_agence_content .buttons .google {
  background-color: #fff;
  display: flex;
  align-items: center;
}

.uncovered_city_agence_content .buttons .google .logo_google {
  margin: 0 5px 0 0;
}

.uncovered_city_agence_content .buttons .google .stars {
  margin: 0 5px 0 0;
}

.uncovered_city_agence_content .buttons .phone {
  background-color: #00e6df;
  color: #fff;
  white-space: nowrap;
}

.uncovered_city_agence_content .buttons .phone a {
  color: #fff;
}

.uncovered_city_agence_content .buttons .phone .icon {
  display: none;
}

.uncovered_city_agence_content .buttons .youtube {
  cursor: pointer;
  background-color: #ff0000;
  color: #fff;
  display: flex;
  align-items: center;
}

.uncovered_city_agence_content .buttons .youtube img {
  width: 40px;
  margin: 0 15px 0 0;
}

#map-uncovered-city {
  /* width: calc(80vw - 3 * var(--gap-carousel)); */
  width: calc(70vw - 3 * var(--gap-carousel));
  margin: 85px auto;
  height: 500px;
  border-radius: 90px;
}

/* Marker (click) */
.marker_info_agence {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 10px 20px 10px;
}

.marker_info_agence h2 {
  font-size: 16px;
  padding: 0 0 15px;
  text-align: center;
}

#new_content .marker_info_agence h2 {
  font-size: 16px !important;
  padding: 0 0 15px;
  text-align: center;
}

.marker_info_agence button {
  background-color: #00a9ff;
  border: none;
  border-radius: 16px;
  padding: 10px 15px;
}

.marker_info_agence button a {
  color: #fff;
}

#new_content .marker_info_agence button a {
  color: #fff;
}

@media (max-width: 1600px) {
  .uncovered_city_agence {
    width: calc(100% - var(--gap-carousel) * 2);
  }

  .uncovered_city_agences .anchors {
    width: calc(100% - var(--gap-carousel) * 2);
  }

  #map-uncovered-city {
    width: calc(100% - var(--gap-carousel) * 2);
  }
}

@media (max-width: 1200px) {
  .uncovered_city_agence.left .circle_blue_s.left,
  .uncovered_city_agence.right .circle_blue_s.right {
    display: none;
  }

  .uncovered_city_agence_pictures .devanture_agence {
    width: 300px;
    height: 300px;
  }

  .uncovered_city_agence.right .uncovered_city_agence_pictures {
    right: -35px;
  }

  .uncovered_city_agence.left .uncovered_city_agence_pictures .picture_user {
    right: 0;
  }

  .uncovered_city_agence_pictures .picture_user {
    width: 100px;
    height: 100px;
  }

  .uncovered_city_agence {
    height: 300px;
  }

  .uncovered_city_agence_content {
    width: calc(100% - 300px);
  }

  .uncovered_city_agence.left .uncovered_city_agence_content {
    left: 40px;
  }

  .uncovered_city_agence.right .uncovered_city_agence_content {
    align-items: flex-end;
    right: 45px;
  }

  .uncovered_city_agence_content h3 {
    font-size: 25px;
    margin: 0 0 5px;
  }

  .uncovered_city_agence_content p {
    font-size: 16px;
  }

  .uncovered_city_agence_content .buttons {
    margin: 15px 0 0;
  }

  .uncovered_city_agence_content .buttons button {
    font-size: 14px;
  }

  .uncovered_city_agence_content .buttons > div {
    gap: 15px;
  }
}

@media (max-width: 950px) {
  .uncovered_city_agence_content h3 {
    font-size: 22px;
  }

  .uncovered_city_agence_content h3 span {
    display: block;
  }

  .uncovered_city_agence_content p {
    font-size: 14px;
  }

  .uncovered_city_agence_pictures .devanture_agence {
    width: 270px;
    height: 270px;
  }

  .uncovered_city_agence {
    height: 270px;
  }

  .uncovered_city_agence_pictures .picture_user {
    width: 90px;
    height: 90px;
  }

  .uncovered_city_agence_content {
    width: calc(100% - 270px);
  }

  .uncovered_city_agence.left .uncovered_city_agence_content {
    left: 30px;
  }

  .uncovered_city_agence.right .uncovered_city_agence_content {
    right: 30px;
  }

  .uncovered_city_agence.right .uncovered_city_agence_pictures {
    right: -45px;
  }

  .uncovered_city_agence_content .buttons .google .logo_google {
    width: 20px;
  }

  .uncovered_city_agence_content .buttons .google .stars .star {
    display: none;
  }

  .uncovered_city_agence_content .buttons .youtube span {
    display: none;
  }

  .uncovered_city_agence_content .buttons .youtube {
    padding: 10px;
  }

  .uncovered_city_agence_content .buttons .youtube img {
    margin: 0;
  }
}

@media (max-width: 768px) {
  #promoBandeau {
    margin-top: 50px;
  }

  .uncovered_city_agence {
    width: calc(100% - 38px);
    margin: 100px 19px;
    height: 580px;
    border-radius: 30px;
  }

  .uncovered_city_agences h1 {
    font-size: 40px;
    margin: 10px 0 0;
  }

  .uncovered_city_agences .anchors {
    width: calc(100% - 38px);
  }

  .uncovered_city_agences .no_city {
    width: 100%;
    margin: 7vw 0 0;
    padding: 0 20px;
  }

  .uncovered_city_agence_content h3 {
    text-align: center;
  }

  .uncovered_city_agence_content h3 span {
    display: inline;
  }

  .uncovered_city_agence_content_text {
    text-align: center;
  }

  .uncovered_city_agence > div {
    flex-wrap: wrap;
    justify-content: center;
  }

  .uncovered_city_agence_content {
    width: 100%;
  }

  .uncovered_city_agence.right .uncovered_city_agence_content p {
    text-align: inherit;
  }

  .uncovered_city_agence.right .uncovered_city_agence_content {
    right: 0;
    order: 2;
    align-items: center;
    margin: 20px 0 0;
  }

  .uncovered_city_agence.right .uncovered_city_agence_pictures {
    right: 0;
  }

  .uncovered_city_agence.left .uncovered_city_agence_content {
    margin: 20px 0 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .uncovered_city_agence_pictures {
    width: 320px;
    justify-content: center;
  }

  .uncovered_city_agence_pictures .devanture_agence {
    width: 320px;
    height: 320px;
  }

  .uncovered_city_agence_pictures .picture_user {
    width: 120px;
    height: 120px;
  }

  .uncovered_city_agence.left .uncovered_city_agence_pictures .picture_user {
    right: -35px;
  }

  .uncovered_city_agence.right .uncovered_city_agence_content .buttons {
    align-items: flex-start;
  }

  .uncovered_city_agence_content .buttons .phone {
    cursor: pointer;
  }

  .uncovered_city_agence_content .buttons .google {
    order: 2;
  }

  .uncovered_city_agence_content .buttons .youtube {
    padding: 10px 25px;
    order: 2;
  }

  .uncovered_city_agence_content .buttons .youtube span {
    display: block;
  }

  .uncovered_city_agence_content .buttons .youtube img {
    margin: 0 15px 0 0;
  }

  .uncovered_city_agence_content .buttons .google .stars .star {
    display: block;
  }

  #map-uncovered-city {
    width: calc(100% - 38px);
    border-radius: 30px;
  }
}

@media (max-width: 525px) {
  .uncovered_city_agence {
    height: 570px;
  }

  .uncovered_city_agence:has(.youtube) {
    height: 635px;
  }

  .uncovered_city_agences h1 {
    font-size: 35px;
  }

  .uncovered_city_agence_pictures .devanture_agence {
    width: 250px;
    height: 250px;
  }

  .uncovered_city_agence_pictures .picture_user {
    width: 100px;
    height: 100px;
  }

  .uncovered_city_agence.left .uncovered_city_agence_pictures .picture_user {
    right: 5px;
  }

  .uncovered_city_agence.right .uncovered_city_agence_pictures .picture_user {
    left: 5px;
  }

  .uncovered_city_agence_content .buttons > div {
    flex-direction: column;
  }

  .uncovered_city_agence_content .buttons button {
    width: 194px;
  }
}

@media (max-width: 470px) {
  .uncovered_city_agence {
    height: 520px;
  }

  .uncovered_city_agence:has(.youtube) {
    height: 610px;
  }

  .uncovered_city_agences h1 {
    font-size: 30px;
  }

  .uncovered_city_agence_pictures .devanture_agence {
    width: 200px;
    height: 200px;
  }

  .uncovered_city_agence_pictures .picture_user {
    width: 90px;
    height: 90px;
  }

  .uncovered_city_agence.left .uncovered_city_agence_pictures .picture_user {
    right: -5px;
  }

  .uncovered_city_agence.right .uncovered_city_agence_pictures .picture_user {
    left: -5px;
  }
}

/***************************
*           FIN            *
****************************/

.functioning .number {
  position: absolute;
  background: #00a2ff;
  color: #fff !important;
  text-align: center;
  width: 36px;
  height: 36px;
  font-size: 18px !important;
  border-radius: 36px;
  top: -15px;
  line-height: 34px;
  font-weight: bold;
}

.functioning .line_pc {
  width: 80% !important;
  left: 10vw;
  top: 75px;
}

@media (max-width: 1600px) {
  .functioning .line_pc {
    display: none !important;
  }

  .functioning .line_mobile {
    top: 40px;
    width: 50vw;
    left: calc(25vw - 20px);
    margin: 0;
  }

  .functioning .number {
    width: 24px;
    height: 24px;
    font-size: 13px !important;
    top: -15px;
    line-height: 24px;
  }
}

#franchise_video {
  position: relative;
}

#franchise_video img {
  width: 100%;
  border-radius: 48px;
  margin-bottom: 24px;
  z-index: 1;
  position: relative;
  transition: all 0.2s;
  cursor: pointer;
}

#franchise_video #background_video {
  position: absolute;
  top: 0;
  z-index: 0;
}

#franchise_video #logo_youtube:hover {
  transform: scale(1.05);
}

#franchise_video #nom_agence {
  position: absolute;
  top: 24px;
  left: 36px;
  z-index: 2;
  font-family: Agbalumo;
  font-size: 36px;
  color: #fff;
  pointer-events: none;
}

#franchise_video #nom_ville {
  position: absolute;
  top: 50px;
  left: 36px;
  z-index: 2;
  font-family: Agbalumo;
  font-size: 52px;
  color: #3ffffe;
  pointer-events: none;
}

#franchise_video #nom_franchise {
  position: absolute;
  bottom: 36px;
  left: 36px;
  z-index: 2;
  color: #3ffffe;
  font-size: 20px;
  pointer-events: none;
}

@media (max-width: 768px) {
  #franchise_video img {
    border-radius: 24px;
  }

  #franchise_video #nom_agence {
    font-size: 16px;
    top: 14px;
    left: 16px;
  }

  #franchise_video #nom_ville {
    font-size: 22px;
    top: 26px;
    left: 16px;
  }

  #franchise_video #nom_franchise {
    font-size: 12px;
    bottom: 16px;
    left: 16px;
  }

  #franchise_video #logo_youtube:hover {
    transform: scale(1);
  }
}

.head_bloc {
  text-align: center;
  margin: 5vw;
  width: 90%;
}

.head_bloc h2 {
  margin-bottom: 12px !important;
  line-height: 1em;
}

.actu.home {
  background: none;
  margin-top: 10vw;
}

.actu.home h2,
.actu.agence h2 {
  color: #000;
  line-height: 1em;
  margin: auto;
  width: 80%;
}

.actu.agence h2 {
  color: #3db7ff;
  padding-bottom: 0;
}

@media (max-width: 768px) {
  .actu.home h2 {
    padding-bottom: 24px;
  }

  .actu.home h2 br {
    display: none;
  }
}

.actu.home h2 span,
.actu.agence h2 span {
  opacity: 0.65;
  font-family: Agbalumo;
}

.actu.agence h2 span {
  opacity: 1;
}

.actu.home h2 .emoji,
.actu.agence h2 .emoji {
  opacity: 1;
}

.actu.home .actu_list {
  background: none;
}

.actu.home .block_radius_bottom,
.actu.home .hide_pc_tablet {
  display: none;
  opacity: 0;
}

.actu.home .actu_list_item {
  margin: 0 0 5vw 0;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.05);
}

.youtube-overlay {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-image: url(https://centreservicesdev.fr/assets/img/overlay_youtube_logo.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top;
  pointer-events: none;
}

#new_content .youtube-overlay {
  position: absolute;
  top: 16%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  transform: scale(1.3);
}

.intervention_area_content span a {
  height: 36px;
  display: inline-block;
  padding: 0 12px;
  line-height: 33px;
  margin: 4px 2px;
  border-radius: 36px;
  box-shadow: 0 5px 10px rgba(0, 0, 255, 0.1);
  background: rgba(255, 255, 255, 0.1);
}

.intervention_area_content span a:hover {
  background: rgba(255, 255, 255, 0.1);
}

.lazy {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease;
}

.lazy_show {
  opacity: 1;
  transform: translateY(0);
}

iframe {
  border-radius: 20px;
}

#maquettes_mobile {
  display: none;
}

#maquettes_tablet {
  display: none;
}

#maquettes_pc {
  display: none;
}

#bloc_liens_maquettes {
  padding: 5vw 10vw 15vw 10vw;
}

#bloc_liens_maquettes a {
  display: block;
  margin: 8px 0 6px 0;
}

#chat-widget-container:not(.loaded) {
  display: none !important;
}

#chat-widget-minimized {
  visibility: hidden !important;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Lato", sans-serif;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body.noOverflow {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* body {
  overflow-x: hidden;
} */

img {
  display: block;
}

a {
  text-decoration: none;
}

hr {
  border-top: 1px solid #fff;
  border-bottom: 0;
  border-right: 0;
  border-left: 0;
  background: none;
  height: 1px;
  margin: 24px 0;
}

.scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scroll-x::-webkit-scrollbar {
  display: none;
}

.hide_mobile {
  display: none !important;
}

.hide_mobile_tablet {
  display: none !important;
}

.avis.hide_avis {
  display: none;
}

.gloss {
  box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.35);
}

.gloss_blue {
  box-shadow: 0 0 0 1px #ddd;
}

.text-color-default {
  color: #767676 !important;
}

.text_center {
  text-align: center;
}

.font_xxl,
h1,
h2 {
  font-size: 30px;
}

.font_xl {
  font-size: 25px;
}

.font_l {
  font-size: 18px;
}

.font_m,
h3,
p,
li,
a,
button {
  font-size: 14px;
}

.font_s {
  font-size: 12px;
}

.font_modal_h3 {
  font-size: 20px;
}

.bold {
  font-weight: bold;
}

.displaynone,
.hide {
  display: none !important;
}

.not_visibility {
  visibility: hidden;
}

.fade_out {
  opacity: 0;
}

.white_space {
  white-space: nowrap;
}

.relative {
  position: relative;
}

.pb_20 {
  padding-bottom: 20px;
}

.pt_20 {
  padding-top: 20px;
}

.mb_8 {
  margin-bottom: 8px;
}

.mb_10 {
  margin-bottom: 10px;
}

.mr_10 {
  margin-right: 10px;
}

.mt_30 {
  margin-top: 30px;
}

.mt_50 {
  margin-top: 50px;
}

.hover {
  transition: all 0.25s ease;
}

.hover:hover {
  transform: translateY(-3px);
}

.nav_services.hideonpc {
  display: none;
}

.c-yellow {
  color: #ffea34;
}

.c-grey {
  color: #ececec;
}

.grecaptcha-badge {
  visibility: hidden !important;
}

.border.beforeSAP {
  width: calc(100% - 110px);
}

.h2 {
  width: 100%;
  text-align: center;
  padding: 30px 20px 20px 20px;
  font-weight: 600;
  line-height: 1;
}

/* Bas de section avec border radius pour mobile (Bouton devis) */
.block_radius_bottom {
  position: relative;
  padding-bottom: 5px;
}

.block_radius_bottom > div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  padding-bottom: 10px;
}

.radius_bottom {
  position: absolute;
  left: 0;
  bottom: 30px;
  width: 100vw;
  height: 50px;
  position: relative;
  overflow: hidden;
}

.radius_bottom > div {
  height: 100%;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
}

.radius_bottom.turquoise_cyan {
  background-color: #00e4df;
}

.radius_bottom.turquoise_cyan > div {
  background-color: #ccf2f2;
}

.radius_bottom.cyan_white {
  background-color: #fff;
}

.radius_bottom.cyan_white > div {
  background-color: #00e4df;
}

.radius_bottom.turquoise > div {
  background-color: #00e4df;
}

.block_btn_devis {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 3;
}

.block_btn_devis button {
  cursor: pointer;
  display: flex;
  padding: 0px 25px 0 16px;
  border-radius: 50px;
  background: linear-gradient(90deg, #00dfff 10%, #00b8ff 90%, #00b8ff);
  border: none;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  height: 54px;
  line-height: 50px;
}

.block_btn_devis.rush button {
  background: linear-gradient(90deg, #00bfff 10%, #0081ff 90%, #0081ff);
}

.block_btn_devis button span {
  background-image: url(https://centreservicesdev.fr/assets/img/icons/arrow.png);
  background-size: 36px;
  background-position: center;
  background-repeat: no-repeat;
  width: 36px;
  margin-right: 8px;
  height: 92%;
  position: relative;
  top: 2px;
}

.block_btn_devis button span.animate_move_button {
  animation: move-arrow-button-mobile 1.5s infinite forwards;
}

.block_btn_devis .info {
  font-size: 12px;
  color: #a6a6a6;
  padding: 10px 0 30px;
  font-style: italic;
}

.block_btn_devis .info.blue {
  color: #00009c;
}

.block_btn_devis .info.orange {
  color: rgba(182, 88, 0, 42%);
}

.letter_cercle.pomme {
  background-color: #8db600;
  /* vert pomme */
}

.letter_cercle.cyan {
  background-color: #00b7eb;
  /* cyan lumineux */
}

.letter_cercle.yellow {
  background-color: #ffd300;
  /* jaune franc */
}

#tools_home_cs {
  position: fixed;
  top: 50%;
  right: 36px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 101;
}

#tools_home_cs .hover,
#tools_home_cs > div {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer !important;
}

#tools_home_cs .call_to_action_icon,
#tools_home_cs .call_to_action_icon a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: #fff;
  border-radius: 120px;
  border: 0 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

#tools_home_cs .call_to_action_icon img {
  width: 48px;
  height: 48px;
  display: block;
  border: 0 !important;
  cursor: pointer !important;
  padding: 0;
}

#tools_home_cs .icon-text {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 50px;
  white-space: nowrap;
  position: absolute;
  right: 62px;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.3s ease;
  pointer-events: none;
}

#tools_home_cs .hover:hover .icon-text,
#tools_home_cs > div:hover .icon-text {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

#tools_home_cs #icon-comment {
  background: #00e4df;
}

#tools_home_cs.not_visible {
  opacity: 0;
  visibility: hidden;
}

#tools_home_cs.visible {
  opacity: 1;
  visibility: visible;
}

/*************** BLOC AVEC LES ICÔNES H3 ET TEXTE ************************/
.group_info {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.group_info > div {
  width: 41%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 17px 8px;
}

.group_info > div h3 {
  color: #00a2ff;
  text-align: center;
  margin: 15px 0 15px;
}

.group_info > div h3.black {
  color: #000;
}

.group_info > div p {
  font-size: 14px;
  text-align: center;
  max-width: 165px;
}

/******************* CERCLE AVEC LES ICÔNES (PRÉSENT DANS LE BLOC PRÉCÉDENT  ****************************/
.icon_cercle {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #43bafd;
}

.icon_cercle img {
  position: relative;
  width: 100%;
}

.icon_cercle.white {
  background-color: #fff;
}

.icon_cercle.lightblue {
  background-color: #ccf2f2;
}

.icon_cercle.lightyellow {
  background-color: rgba(252, 234, 16, 20%);
}

.icon_cercle.lightgreen {
  background-color: rgba(149, 193, 31, 22%);
}

.icon_cercle.lightpink {
  background-color: rgba(229, 0, 108, 10%);
}

/* ***********************
   *       HEADER        *
   *********************** */
header {
  margin: 0 auto;
  z-index: 22;
  width: 100%;
  position: absolute;
  top: 0;
  padding: 19px 19px 0;
  display: flex;
  justify-content: center;
}

header nav {
  /* max-width: 1696px; */
  width: 100%;
  position: relative;
  background-color: #fff;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 34px;
  top: 0;
  left: 0;
  transition: all 0.8s;
  z-index: 105;
}

header.nav_agence .container_logo,
nav.BR1 .container_logo {
  cursor: pointer;
}

header nav.fixed {
  visibility: hidden;
  position: fixed;
  left: auto;
  opacity: 0;
}

header nav .nav_left {
  display: flex;
  flex: 1;
  align-items: center;
}

header .nav_services {
  display: none;
}

header .nav_buttons {
  display: none;
}

header nav ul {
  display: flex;
  align-items: center;
  list-style: none;
}

header nav .nav_services li {
  display: flex;
  align-items: center;
  font-weight: 600;
}

header nav .other_service {
  padding-bottom: 14px !important;
  padding-top: 8px !important;
  border-radius: 0 0 24px 24px !important;
}

header nav .other_service a:hover {
  color: #555;
}

header .back_menu_services {
  cursor: pointer;
  background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-link.svg")
    no-repeat;
  width: 38px;
  height: 38px;
  margin-right: 10px;
  transition: all 0.3s;
}

header nav ul li a {
  font-weight: 600;
  color: #878787;
  font-size: 16px;
  white-space: nowrap;
}

header nav ul li.job {
  display: flex;
  align-items: center;
  color: #00009c;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
}

header nav:not(.nav_fixed) ul li.job {
  margin-right: 28px;
}

header nav:not(.nav_fixed) ul li.job a {
  color: #00009c;
}

header nav.nav_fixed ul li.job a {
  color: #fff;
  font-size: 12px;
}

header nav ul li.devis {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 5px 20px 5px 10px;
  border-radius: 50px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.devis {
  cursor: pointer;
}

header .nav_services li.active .back_menu_services {
  background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-link-active.svg")
    no-repeat;
}

header .container_logo .avatar.animate_logo {
  animation: turn-logo 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite forwards;
}

#showServices {
  position: relative;
}

#showServices a {
  position: relative;
  z-index: 10;
}

#showServices > ul {
  transition: all 0.3s;
}

#showServices > ul li {
  transition: all 0.3s;
}

#showServices {
  transition: all 0.3s;
}

#showServices:hover .back_menu_services.turn {
  background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-link-hover.svg")
    no-repeat;
  color: red;
  transform: rotateZ(45deg);
}

#showServices ul.other_service li:has(a:hover) .back_menu_services {
  background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-link-hover.svg")
    no-repeat;
}

#showServices:hover > ul {
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.05);
  width: fit-content;
  height: auto;
  background: #fff;
  display: block !important;
  position: absolute;
  text-align: left;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  top: 38px;
  left: 19px;
  padding: 5px 16px 3px;
  z-index: 10;
}

header:has(#showServices:hover) .nav_services {
  overflow: initial;
}

#showServices:hover > ul > li {
  margin-bottom: 5px;
  padding: 0 3px;
  position: relative;
  top: -9px;
}

header nav li:has(> a:hover) .back_menu_services {
  background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-link-hover.svg")
    no-repeat;
}

/** Bloc Logo */
.container_logo {
  position: relative;
  display: flex;
  align-items: center;
}

.container_logo .copyright {
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 48px;
}

.container_logo .avatar {
  cursor: pointer;
  margin-right: 10px;
  width: 38px;
  height: 48px;
}

.container_logo .logo_name {
  width: 150px;
  height: 48px;
}

/************* ICÔNE DEVANT LE LIEN JOB (NAV + MENU MOBILE) ********************/
.back_menu_job {
  background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-job.png")
    no-repeat;
  background-size: contain;
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

/************* ICÔNE DEVANT LE BOUTON DEVIS (NAV + MENU MOBILE) ********************/
.back_menu_devis {
  background: url("https://centreservicesdev.fr/assets/img/icons/arrow.png")
    no-repeat;
  background-size: contain;
  width: 30px;
  height: 30px;
}

/******************* BOUTON OUVRIR-FERMER MENU MOBILE ****************/
#header-icon {
  position: absolute;
  padding: 1em;
  width: 60px;
  cursor: pointer;
  z-index: 5;
  right: 16px;
}

#header-icon::before {
  content: "";
  position: absolute;
  width: 28px;
  height: 3.3px;
  background: var(--color-carousel-home);
  transform: translateY(-10px);
  box-shadow: 0 7.8px var(--color-carousel-home);
  transition: 0.3s;
  border-radius: 30px;
}

#header-icon::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 3.4px;
  background: var(--color-carousel-home);
  transform: translateY(5px);
  transition: 0.5s;
  border-radius: 30px;
}

/* ***********************
   *      NAV FIXE      *
   *********************** */
header .nav_fixed {
  width: calc(100% - 38px);
  z-index: 1000;
  position: fixed;
  /* top: 19px; */
  top: 2.4dvh;
  left: 19px;
  padding: 10px 16px;
  opacity: 0;
  transition: all 0.5s;
  visibility: hidden;
  --nav-offset: 19px;
  top: var(--nav-offset);
}

/* Ajustement pour iPhone avec support des safe areas */
@supports (-webkit-touch-callout: none) and (top: env(safe-area-inset-top)) {
  header .nav_fixed {
    --safe-top: env(safe-area-inset-top);
    top: calc(var(--safe-top) + var(--nav-offset));
  }
}

header .nav_fixed_buttons {
  display: flex;
  align-items: center;
}

header .nav_fixed.visible {
  visibility: visible;
  opacity: 1;
  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.1);
}

header .nav_fixed.none {
  display: none;
}

header nav ul.nav_fixed_buttons li {
  cursor: pointer;
  padding: 8px 18px;
  border-radius: 50px;
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: 12px;
}

header nav ul li.devis,
header .nav_fixed .devis {
  background: var(
    --btn-color,
    linear-gradient(90deg, #00dfff 10%, #00b8ff 90%, #00b8ff)
  );
  margin: 0 0 0 0;
}

header .nav_fixed .devis {
  margin: 0 12px 0 0;
}

header .nav_fixed .devis .content_pc {
  display: none;
}

header nav.nav_fixed .job {
  background-color: #2e2f7a;
  color: #fff;
}

header .nav_fixed .container_logo .avatar {
  width: 38px;
  height: 48px;
}

header .nav_fixed .container_logo .copyright {
  width: 38px;
  height: 48px;
}

header .nav_fixed .container_logo .logo_name {
  width: 150px;
  height: 48px;
  display: none;
}

header .nav_fixed .back_menu_devis,
header .nav_fixed .back_menu_job {
  display: none;
}

/* ***********************
   *      FOOTER     *
   *********************** */
footer {
  padding: 50px 19px 10px;
}

footer.cta {
  padding: 50px 19px 100px;
}

footer p,
footer li,
footer li a {
  font-size: 12px;
}

footer li a {
  color: inherit;
}

.footer_top p {
  padding: 20px 0;
}

.footer_lists {
  display: flex;
}

.text-color-default svg,
.text-color-default span {
  display: inline-block;
  margin-right: 3px;
}

.footer_list svg {
  transform: scale(1.2);
  opacity: 0.6;
}

.footer_list {
  width: 40%;
}

.footer_list:first-child {
  margin-right: 30px;
}

.footer_list h3 {
  padding: 20px 0 10px 0;
}

.footer_list h3.last_h3 {
  padding: 20px 0 10px 0;
}

.footer_lists ul {
  list-style: none;
}

.footer_lists li {
  line-height: 1.5;
}

.footer_bottom {
  margin-top: 50px;
  border-top: 1px solid #e0dbdb;
  padding: 20px 0;
}

.footer_bottom p {
  font-size: 10px;
  color: #a8a4a4;
  margin: 10px 0;
}

.footer_bottom p:last-child {
  margin-top: 30px;
}

.footer_bottom p a {
  font-size: inherit;
  text-decoration: underline;
  color: inherit;
}

.footer_bottom p:last-child a {
  text-decoration: none;
}

/************* PAGE D'ACCUEIL AGENCE **************************/
.block_pc:not(.promotion) {
  padding: 100px 0 0;
  background-color: #00e4df;
  background-image: url(https://centreservicesdev.fr/assets/img/backgrounds/background-AE2-pc.svg);
  background-size: cover;
  background-position: right bottom;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  padding-bottom: 19px;
}

.house_cs {
  width: 80px;
  margin: 20px auto;
}

.block_pc h1,
.block_pc h2 {
  font-family: "Agbalumo", sans-serif;
  text-align: center;
  color: #f6f6f6;
  line-height: 1.1em;
  width: calc(100% - 38px);
  margin: 0 auto;
}

.block_pc h1 span,
.block_pc h2 span {
  font-family: "Agbalumo", sans-serif;
}

.block_pc h1 span.white_space:last-child,
.block_pc h2 span.white_space:last-child {
  white-space: wrap;
}

.block_pc_icons {
  display: flex;
  justify-content: space-evenly;
  margin: 50px auto;
  max-width: 340px;
}

.block_pc_icon {
  position: relative;
  bottom: 0;
}

.block_pc_icons > div {
  position: relative;
  transition: all 0.5s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.block_pc_icon img {
  width: 50px;
  border: 3px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  background: var(--b-cyan);
}

.icon-text {
  color: #fff;
  display: block;
  font-weight: 700;
  margin: 5px 0 0;
}

.phone_line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 25px;
  background: #fff;
  transition: height 0.3s ease-out;
  display: none;
  z-index: 1;
  top: 60px;
}

.phone_agence {
  position: absolute;
  display: none;
  bottom: -40px;
  left: -31px;
  color: #fff;
  font-family: "Agbalumo", sans-serif;
  white-space: nowrap;
  padding: 1px 10px 3px;
  font-size: 14px;
  z-index: 2;
  box-sizing: border-box;
}

.phone_agence::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid #fff;
  border-radius: 12px;
  z-index: -1;
  clip-path: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%);
  transition: none;
}

.block_pc_icon.animate_icons {
  animation: icons-animate 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.block_pc_right {
  width: calc(100% - 38px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, var(--col-width));
  grid-template-rows: repeat(12, var(--col-width));
}

.row_grid_1 {
  position: relative;
  grid-column: 3 / 6;
  grid-row: 2 / 5;
}

.row_grid_2 {
  position: relative;
  grid-column: 7 / 11;
  grid-row: 2 / 6;
  z-index: 2;
}

.row_grid_3 {
  position: relative;
  grid-column: 1 / 13;
  grid-row: 6 / 13;
}

.row_grid_3 img {
  width: calc(var(--col-width) * 12);
  height: calc(var(--col-width) * 7);
  border-radius: 30px;
}

/* Taille exacte des cartes */
.row_grid_1 .flip-card {
  width: calc(var(--col-width) * 3);
  height: calc(var(--col-width) * 3);
}

.row_grid_2 .flip-card {
  width: calc(var(--col-width) * 5);
  height: calc(var(--col-width) * 5);
}

.row_grid_2 .flip-text img {
  width: 50px;
  height: 50px;
  margin: 0 auto;
}

.row_grid_3 .flip-card {
  width: calc(var(--col-width) * 12);
  height: calc(var(--col-width) * 7);
}

/* Flip card effect */
.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  border-radius: 30px;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 30px;
  top: 0;
  left: 0;
}

/* Face avant */
.flip-card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
}

/* Face arrière */
.flip-card-back {
  background-color: #fff;
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.flip-card-front img.devanture_agence {
  box-shadow: 0 30px 30px rgba(0, 0, 0, 0.2);
}

.flip-text {
  font-size: 12px;
  text-align: center;
  padding: 15px;
  color: #000;
}

.flip-text.img {
  padding: 0;
}

/********* Page Agence ********************/
.block_pc {
  position: relative;
  z-index: 2;
}

.address .address__left .background_cyan > div {
  width: calc(100% - 38px - 16px - 16px);
  margin: 20px auto;
}

.address h4 {
  font-size: 25px;
  margin: 30px;
}

.address h4.none {
  margin: 30px 0 0;
}

.address .address__left .background_cyan > div:first-child {
  padding: 96px 0 0;
}

.address > div a.link_blue {
  color: #00bcf8;
}

a.link_blue {
  color: #00bcf8;
}

.background_cyan {
  background-color: #ccf2f2;
}

.address__left {
  margin: -60px 0 0;
}

.address .address__left > div.block_radius_bottom {
  width: 100%;
  margin: -20px 0 0;
  background-color: #f6f6f6;
}

.address .address__left > div.block_radius_bottom > div {
  background-color: #ccf2f2;
  padding-bottom: 45px;
}

.address > div .avis_name p {
  color: #000;
}

.address .welcome_content {
  width: calc(100% - 16px - 38px - 16px);
  margin: 0 auto;
}

.address .welcome h3 {
  color: #16dedd;
  font-family: "Agbalumo", sans-serif;
  font-size: 42px;
  margin: 0 0 10px;
  padding: 15px 0 0;
}

.address .welcome_content > p {
  margin: 0 0 20px;
}

.hero_orga .block_btn_devis button {
  font-size: 18px;
}

.address .block_btn_devis {
  align-items: center;
}

.block_btn_job {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  z-index: 3;
  margin: 20px 0;
  align-items: center;
}

.block_btn_job .job {
  cursor: pointer;
  display: flex;
  padding: 0px 25px 0 16px;
  border-radius: 50px;
  background: #2e2f7a;
  border: none;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  height: 54px;
  line-height: 50px;
  width: fit-content;
}

.block_btn_job button span {
  background-image: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-job.png");
  background-size: 36px;
  background-position: center;
  background-repeat: no-repeat;
  width: 36px;
  height: 100%;
  margin-right: 8px;
}

.block_btn_job .job a {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 50px;
}

.background_grey {
  background-color: #f6f6f6;
}

.block_radius_bottom.welcome {
  width: 100%;
  margin: -20px 0 0;
}

.block_radius_bottom.welcome > div {
  padding-bottom: 45px;
  background-color: #f6f6f6;
}

.block_4_icones.agence .block_radius_bottom > div {
  background-color: #fff;
}

.icon_titre {
  width: 100%;
  margin: auto;
  max-width: 200px;
  margin-top: 36px;
  margin-bottom: -16px;
  margin-top: 48px;
}

.icon_titre img {
  width: 120px;
  height: 120px;
  text-align: center;
  margin: auto;
  background: #eee;
  border-radius: 100px;
}

.list_avis .letter_cercle {
  margin-left: 0;
}

.avis.none {
  margin: 0;
  padding: 0 0 10px;
}

.list_avis .stars {
  position: absolute;
  right: 20px;
}

.list_avis .avis_content > p {
  text-align: start;
}

.block_btn_avis {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  margin: 20px 0 20px 0;
}

.block_btn_avis.none {
  margin: 0 0 20px;
}

.block_btn_avis.none button:first-child {
  margin-right: 0;
}

.block_btn_avis .logo_google {
  width: 25px;
  margin-right: 10px;
}

.block_btn_avis .stars {
  margin: 0 10px;
}

.list_avis .avis {
  margin: 20px 30px;
}

.block_btn_avis button:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 30px 0 16px;
  border: 1px solid #d9d9d9;
  border-radius: 50px;
  background: #fff;
  font-size: 19px;
  font-weight: 700;
  height: 54px;
  line-height: 50px;
  margin-right: 15px;
}

.block_btn_avis button:last-child {
  border: 1px solid #d9d9d9;
  border-radius: 50px;
  background-color: #fff;
  padding: 5px;
  height: 54px;
  width: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.block_btn_avis button:last-child img {
  cursor: pointer;
  width: 63px;
}

.block_radius_bottom.blue {
  background-color: #16dedd;
  top: -20px;
  background: url("https://centreservicesdev.fr/assets/img/background_bloc_01.svg");
  background-position-x: 0%;
  background-position-y: 0%;
  background-size: auto;
  background-size: 100px;
  background-position: 0 -42px;
  width: 100%;
  height: 0px;
  z-index: 3;
}

.block_radius_bottom.blue > div {
  background-color: #fff;
  height: 50px;
}

.block_radius_bottom.white {
  background-color: #fff;
  top: -20 px;
}

.block_radius_bottom.white > div {
  background: url("https://centreservicesdev.fr/assets/img/background_bloc_01.svg");
  background-size: 100px;
  background-position: 2px 4px;
  background-color: #16dedd;
  height: 50px;
}

.block_radius_bottom.lightGrey {
  background-color: #f6f6f6;
  padding-bottom: 10px;
}

.block_radius_bottom.lightGrey > div {
  background-color: #fff;
  height: 120px;
  position: relative;
  bottom: 20px;
}

.block_4_icones.agence {
  margin-top: 5vw;
  background-color: #fff;
}

.covered_city .block_4_icones.agence {
  margin-top: 0;
}

.orga_services .block_radius_bottom {
  margin-top: 55px;
}

.cities {
  background: url("https://centreservicesdev.fr/assets/img/background_bloc_01.svg");
  background-size: 100px;
  background-position: 0 -42px;
  background-color: #16dedd;
  margin-top: -20px;
  padding-top: 45px;
}

.list_cities {
  transition: max-height 0.3s ease-out;
  overflow: hidden;
  max-height: 200px;
  padding: 0 19px;
}

.list_cities.open {
  transition-delay: 0;
  max-height: 2000px;
}

.cities h2 {
  text-align: center;
  color: #fff;
  padding: 30px 40px 10px;
  font-size: 28px;
}

.see_more_city {
  cursor: pointer;
}

.name_page {
  text-align: center;
}

.list_cities {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 19px;
}

.list_cities button {
  cursor: pointer;
  background-color: #fff;
  border-radius: 50px;
  padding: 10px 14px;
  font-weight: 700;
  text-transform: uppercase;
  border: none;
  font-size: 14px;
  box-shadow: 3px 3px 3px #16dedd;
  color: #16dedd;
  height: 37px;
}

.list_cities button a {
  color: #16dedd;
}

.list_cities button.see_more_city,
.list_cities button.see_less_city {
  display: flex;
  align-items: center;
  font-weight: 900;
  background-color: #16dedd;
  border: 2px solid #fff;
  color: #fff;
}

.list_cities button.see_more_city img,
.list_cities button.see_less_city img {
  margin-left: 5px;
}

.see_less_city img {
  transform: rotate(45deg);
}

.orga_services h2 {
  text-align: center;
  padding: 40px 40px 20px;
  font-size: 28px;
}

.services_list {
  position: relative;
  padding: 0 20px;
}

.services_list ul {
  list-style: none;
  padding: 0;
}

.services_list ul li {
  display: table;
  width: 100%;
  vertical-align: middle;
  font-weight: 600;
}

.services_list ul li span {
  height: 38px;
  display: table-cell;
  vertical-align: middle;
}

.services_list ul li a {
  font-size: 16px;
  color: #535353;
  font-weight: 600;
  margin-right: 10px;
  margin-left: 10px;
  position: relative;
  top: -2px;
}

.services_list ul li span.back_menu_link {
  background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-link.svg")
    no-repeat;
  background-position: center;
  width: 38px;
  min-width: 38px;
  height: 48px;
  margin-right: 10px;
}

.services_list ul li span.back_menu_phone {
  background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-phone.png")
    no-repeat;
  background-size: contain;
  width: 38px;
  height: 38px;
  margin-right: 10px;
}

.services_list ul li span.back_menu_devis {
  background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-devis.png")
    no-repeat;
  background-size: contain;
  width: 38px;
  height: 38px;
}

.services_list ul li .last-child {
  padding-left: 10px;
}

.services_list ul li span.back_menu_job {
  background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-job.png")
    no-repeat;
  background-size: contain;
  width: 38px;
  height: 38px;
  margin-right: 10px;
}

.services_list ul li span.line {
  background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-line-horizontale.svg")
    no-repeat;
  background-size: auto 38px;
  background-position: left;
  height: 38px;
  width: 100%;
  margin-left: 10px;
}

.services_list ul li span.angle_top {
  background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-line-radius-top.svg")
    no-repeat;
  background-size: auto 48px;
  background-position: center;
  width: 38px;
  min-width: 38px;
  height: 48px;
}

.services_list ul li span.angle_bottom {
  background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-line-radius-bottom.svg")
    no-repeat;
  background-size: 100%;
  width: 38px;
  min-width: 38px;
  height: 38px;
  background-position: 0 -5px;
}

.services_list ul span.line_verticale {
  background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-line-verticale.svg")
    repeat-y;
  background-size: 100%;
  background-position: center;
  width: 38px;
  min-width: 38px;
  height: 48px;
}

.services_list .logo_sap {
  background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-logo-sap.svg")
    no-repeat;
  width: 110px;
  height: 75px;
  position: absolute;
  top: 64px;
  right: 15px;
}

.logo_sap.three {
  top: 45px !important;
}

.services_list .logo_sap.three {
  top: 34px !important;
}

.questions {
  background-color: #f6f6f6;
  padding: 0 0 5px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  margin-bottom: 35px;
}

.questions a {
  color: #0097db;
}

.questions > div {
  background-color: #fff;
  border-radius: 50px;
  width: calc(100% - 40px);
  margin: 0 20px 20px;
  height: 70px;
  transition: all 0.5s;
  overflow: hidden;
  position: relative;
}

.questions > div.open {
  height: auto;
}

.questions div h3 {
  cursor: pointer;
  font-size: 16px;
  padding: 20px 60px 20px 35px;
  position: relative;
  height: 70px;
  display: block;
  overflow: hidden;
  line-height: 1.2;
}

.questions > div.open h3 {
  height: auto;
}

.questions div h3 span {
  display: block;
  max-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  top: 5px;
  max-width: 90%;
}

.questions > div.open h3 span {
  max-height: none;
  white-space: normal;
}

.questions div h3 svg {
  position: absolute;
  right: 20px;
  top: 20px;
  transform: none;
  width: 30px;
  height: 30px;
  transition: all 0.3s;
  flex-shrink: 0;
}

.questions > div.open h3 svg {
  fill: #e4e4e4;
  transform: rotate(45deg);
  top: 20px;
}

.questions p {
  padding: 0 35px 20px 35px;
}

.questions ul {
  list-style-type: disc;
  padding: 0 35px 20px 75px;
}

.questions li {
  margin: 0 0 10px;
}

.questions p:last-child {
  padding: 0 35px 35px 35px;
}

.box_services {
  height: 120px;
  overflow: hidden;
  margin: 0 20px;
}

.box_services_title {
  cursor: pointer;
  position: relative;
  width: 100%;
  height: 100px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
}

.box_services_title h2 {
  color: #fff;
  font-size: 25px;
  padding: 0 30px;
  line-height: 0.8em;
  font-family: "Agbalumo", sans-serif;
  position: relative;
  top: -3px;
}

.box_services_title > div {
  color: #fff;
  padding: 10px 30px;
}

.box_services_title h2 span {
  color: #fff;
  position: absolute;
}

.box_services_title h2 span img {
  transition: all 0.3s;
}

.box_services_title h2 span img.open {
  transform: rotateZ(90deg);
}

.box_services_content {
  opacity: 0;
  width: 100%;
  background-color: #eef8ff;
  font-weight: 700;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  position: relative;
  top: -25px;
  overflow: hidden;
  padding: 25px 0 20px;
  transition: all 0.5s;
}

.box_services_content p {
  color: #98b9ce;
  padding: 20px 30px;
}

.box_services_content button {
  color: #fff;
  margin: 00px 30px 10px 28px;
  border-radius: 30px;
  padding: 8px 16px 10px 16px;
  border: none;
  font-weight: 700;
}

.box_services.open {
  height: 520px;
  height: var(--box-height);
}

.box_services.open .box_services_content {
  opacity: 1;
}

.box_services[data-id-service="8"] .box_services_title {
  background-image: url("https://centreservicesdev.fr/assets/img/bouton-8.png");
}

.box_services[data-id-service="2"] .box_services_title {
  background-image: url("https://centreservicesdev.fr/assets/img/bouton-2.png");
}

.box_services[data-id-service="4"] .box_services_title {
  background-image: url("https://centreservicesdev.fr/assets/img/bouton-4.png");
}

.box_services[data-id-service="3"] .box_services_title {
  background-image: url("https://centreservicesdev.fr/assets/img/bouton-3.png");
}

.box_services[data-id-service="1"] .box_services_title {
  background-image: url("https://centreservicesdev.fr/assets/img/bouton-1.png");
}

.box_services.impot .box_services_title {
  background-image: url("https://centreservicesdev.fr/assets/img/bouton-50.png");
}

.box_services.nettoyage .box_services_title {
  background-image: url("https://centreservicesdev.fr/assets/img/bouton-vitre.png");
}

.services_image .box_services[data-id-service="8"] .box_services_title h2 span {
  top: 25px;
  left: 166px;
}

.services_image .box_services[data-id-service="2"] .box_services_title h2 span {
  top: 23px;
  left: 136px;
}

.services_image .box_services[data-id-service="4"] .box_services_title h2 span {
  top: 25px;
  left: 141px;
}

.services_image .box_services[data-id-service="3"] .box_services_title h2 span {
  top: 25px;
  left: 159px;
}

.services_image .box_services[data-id-service="1"] .box_services_title h2 span {
  top: 47px;
  left: 107px;
}

.services_image .box_services.impot .box_services_title h2 span {
  top: 45px;
  left: 133px;
}

.services_image .box_services.nettoyage .box_services_title h2 span {
  top: 25px;
  left: 160px;
}

.text {
  /* width: calc(100% - 16px - 38px - 16px);
  margin: 25px auto 48px; */
}

.text h2 {
  color: #16dedd;
  font-size: 20px;
  margin: 20px 0;
}

.text p {
  padding: 0 0 20px;
  color: #c0c0c0;
}

.content_bh {
  margin: 0 34px 20px;
}

.emploi h2 {
  padding: 0;
  font-size: 25px;
}

.emploi > p {
  padding: 10px 50px 30px;
  color: #3b0075;
}

.block_marketing {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  margin-bottom: 50px;
  padding-right: 19px;
}

.box_marketing {
  min-width: 250px;
  width: 250px;
  padding: 50px 30px;
  border-radius: 30px;
  color: #fff;
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-height: 470px;
}

.box_marketing .img_content {
  border-radius: 30px;
  width: 100%;
  margin: 0 0 20px;
  border-radius: 5px;
}

.block_marketing::-webkit-scrollbar {
  display: none !important;
}

.box_marketing h2 {
  color: #fff;
  text-align: start;
}

.box_marketing h3 {
  color: #fff;
}

.box_marketing p {
  color: #fff;
  white-space: normal;
}

.box_marketing .date_content {
  margin: 15px 0;
}

.box_marketing a {
  color: #fff;
}

.box_marketing.blue {
  background-color: #16dedd;
}

.box_marketing.green {
  background-color: #3aaa35;
}

.box_marketing.yellow {
  background-color: #fcc000;
}

.box_marketing.grey {
  background-color: #d9d9d9;
  margin: 0 0 0 20px;
}

.box_marketing:nth-child(1) {
  margin: 0 20px;
}

.box_marketing:nth-child(2) {
  margin-right: 20px;
}

.box_marketing:nth-child(3) {
  margin-right: 20px;
}

.box_marketing.franchise {
  margin-right: 20px;
}

.box_marketing.franchise:nth-child(4) {
  margin-right: 20px;
}

.box_marketing.blue button a {
  color: #16dedd;
}

.box_marketing.green button a {
  color: #3aaa35;
}

.box_marketing.yellow button a {
  color: #fcc000;
}

.box_marketing.link {
  /* background-image: url(https://centreservicesdev.fr/assets/img/femme-de-menage.jpg); */
  background-image: url(https://centreservicesdev.fr/assets/img/femme-de-menage-1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right top;
}

.box_marketing h3 {
  white-space: wrap;
  color: #fff;
  opacity: 0.6;
  margin: 0 0 10px;
}

.box_marketing.link h3 {
  color: #fff;
}

.box_marketing.blue button {
  color: #80edec;
}

.box_marketing.green button {
  color: #74c371;
}

.box_marketing.yellow button {
  color: #fddc72;
}

.box_marketing.link button {
  background-color: #fff;
}

.box_marketing.link button a {
  color: #d1476e;
}

.box_marketing.link {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.box_marketing.link[data-numner-annonce="0"] {
  justify-content: flex-start;
  width: calc(100% - 19px);
  margin: 0 0 0 19px;
}

.box_marketing.link[data-numner-annonce="0"] button {
  margin-top: 0;
  width: fit-content;
}

.box_marketing.link[data-numner-annonce="1"] {
  width: 500px;
  margin: 0;
}

.box_marketing.link[data-numner-annonce="2"] {
  width: calc((100% - var(--gap-carousel)) / 2 - 10px);
  margin: 0 20px 0 0;
}

.box_marketing.link h3 {
  font-size: 25px;
  opacity: 1;
}

.box_marketing button {
  cursor: pointer;
  background-color: #fff;
  padding: 8px 12px;
  border: none;
  border-radius: 30px;
  font-weight: 700;
  margin-top: 20px;
  position: relative;
  top: 0;
}

.call_to_action {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  background-color: #fff;
  align-items: center;
  text-align: center;
  justify-content: space-between;
  padding: 20px 20px 16px 20px;
  width: 100%;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
  border-radius: 42px 42px 0 0;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05);
}

.call_to_action #icon-comment img {
  background-color: var(--b-cyan);
}

.call_to_action.visible {
  opacity: 1;
  visibility: visible;
}

.call_to_action_icon img {
  width: 52px;
  border: 2px solid #37dfdf;
  border-radius: 50px;
  padding: 3px;
}

.call_to_action .icon-text {
  margin: 4px 0 0;
  color: #000;
  font-size: 13px;
}

/************* CAROUSEL SLIDE DES SERVICES (ACCUEIL) ***********************/
.slider-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: auto;
  overflow-x: hidden;
}

.slider-wrapper {
  display: flex;
  transition: transform 0.3s ease;
}

.slide {
  position: relative;
  height: 75vh;
  background: #535353;
  display: flex;
  align-items: center;
  font-size: 2em;
  flex-shrink: 0;
  width: 100vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  min-height: 590px;
  user-select: none;
}

body {
  overflow-x: hidden;
}

#carousel-2 .slide {
  height: 280px;
  border-radius: 35px;
  overflow: hidden;
  min-height: 280px;
  width: calc(100vw - 30px);
  margin: 0 15px;
}

#carousel-2 .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-home img {
  width: 100%;
  height: 100%;
}

.slider-nav {
  margin: auto;
  position: relative;
  bottom: var(--gap-carousel);
}

.slider-nav button {
  position: absolute;
  bottom: 145px;
  background: var(--color-carousel-nav);
  color: #fff;
  border: none;
  cursor: pointer;
  z-index: 3;
  border-radius: 50%;
}

#carousel-2 .slider-nav button {
  position: absolute;
  bottom: -10px;
  background: var(--color-carousel-nav);
  color: #fff;
  border: none;
  cursor: pointer;
  z-index: 3;
  border-radius: 50%;
}

.slider-nav button:hover {
  color: var(--color-carousel-nav-hover);
}

.img_next {
  background: url("https://centreservicesdev.fr/assets/img/next-slider-pc.svg");
}

.img_prev {
  background: url("https://centreservicesdev.fr/assets/img/prev-slider-pc.svg");
}

.slider-nav button,
.img_prev,
.img_next {
  height: 48px;
  width: 48px;
  touch-action: none;
}

#carousel-2 .slider-nav button,
#carousel-2 .slider-nav .img_prev,
#carousel-2 .slider-nav .img_next {
  height: 38px;
  width: 38px;
  touch-action: none;
}

#carousel-2 .slider-nav .next {
  right: 35px;
}

#carousel-2 .slider-nav .prev {
  left: 35px;
}

.slider-nav .next {
  right: calc(var(--gap-carousel) / 2);
}

.slider-nav .prev {
  left: calc(var(--gap-carousel) / 2);
}

.slider-dots {
  display: none;
  position: absolute;
  z-index: 3;
  left: var(--nbrDots);
  bottom: 94px;
  text-align: center;
}

.slider-dots span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: var(--color-carousel-nav);
  border-radius: 50%;
  margin: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.slider-dots span:hover {
  background: var(--color-carousel-nav-hover);
}

.slider-dots .active {
  background: #fff;
}

/******************* SECTION HERO ********************/
#slide50 {
  background-image: url("https://centreservicesdev.fr/assets/img/services/slider-50-mobile.jpg");
}

#slide1 {
  background-image: url("https://centreservicesdev.fr/assets/img/services/slider-1-mobile.jpg");
}

#slide1 h3 {
  text-shadow: 0 10px 20px rgba(0, 0, 255, 0.05);
}

#slide2 {
  background-image: url("https://centreservicesdev.fr/assets/img/services/slider-2-mobile.jpg");
}

#slide3 {
  background-image: url("https://centreservicesdev.fr/assets/img/services/slider-3-mobile.jpg");
}

#slide4 {
  background-image: url("https://centreservicesdev.fr/assets/img/services/slider-4-mobile.jpg");
}

#slide5 {
  background-image: url("https://centreservicesdev.fr/assets/img/services/slider-2-mobile.jpg");
}

#slide8 {
  background-image: url("https://centreservicesdev.fr/assets/img/services/slider-8-mobile.jpg");
}

.bulle_tablet {
  display: none;
}

.img_bulle_tablette {
  display: none;
}

.slide_tilte {
  width: 50%;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.slide h3 {
  font-size: 30px;
  z-index: 3;
  font-family: "Agbalumo", sans-serif;
  position: absolute;
  top: 88px;
  left: 0;
  color: #fff;
  text-align: center;
  padding: 0;
  font-weight: 700;
  width: 100%;
}

.slide h3 span {
  font-family: inherit;
}

.slide_tilte p {
  display: none;
}

.btn_slide {
  display: none;
}

#courbe {
  width: 100%;
  height: 100%;
  background-image: url("https://centreservicesdev.fr/assets//img/courbe.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 3;
  width: 105%;
  position: absolute;
  top: -35px;
  left: -5px;
  overflow-x: hidden;
}

.time {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 20px 15px 10px;
  color: #878787;
}

.time img {
  margin-right: 10px;
}

.hero .block_radius_bottom {
  background-color: #ccf2f2;
  top: -120px;
}

.hero .block_radius_bottom > div {
  background-color: #fff;
}

.hero .block_radius_bottom .block_btn_devis button {
  background: var(--color-carousel-home);
}

/***************** SECTION SERVICES *******************/
.block_4_icones {
  background-color: #ccf2f2;
  margin-top: -120px;
}

.block_4_icones .block_radius_bottom {
  background-color: #ccf2f2;
  /* box-shadow: 0 30px 30px #ccf2f2 */
}

.block_4_icones .block_radius_bottom > div {
  background-color: #ccf2f2;
  padding-top: 35px;
}

/***************** SECTION FONCTION ********************/
.block_function {
  padding: 0 0 10px;
}

.block_function .group_info > div:last-child {
  width: 43%;
}

.block_function .block_radius_bottom {
  background-color: #fcd995;
}

.block_function .block_radius_bottom > div {
  background-color: #fff;
  padding-top: 35px;
}

/***************** SECTION SERVICES À DOMICILE ***********************/
.block_4_icones_dom {
  background-color: #fcd995;
  margin-top: -20px;
}

.block_4_icones_dom h2 {
  color: #fff;
}

.block_4_icones_dom .block_button {
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  background-color: #fff;
}

.block_4_icones_dom .group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.block_4_icones_dom .group div {
  width: 45%;
  text-align: center;
  padding-bottom: 40px;
}

.block_4_icones_dom .group div img {
  width: 100px;
  margin: 0 auto;
}

.block_4_icones_dom .block_radius_bottom {
  background-color: #fff;
}

.block_4_icones_dom .block_radius_bottom > div {
  background-color: #fcd995;
  padding-top: 35px;
}

/******************* SECTION LISTE DES SERVICES ********************/
.block_list h2 {
  padding: 30px 50px 5px;
  margin: 20px 0 10px;
}

.block_list h2 img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(45deg, #00dfff 20%, #00b8ff 60%, #00b8ff);
  margin: 0 auto 8px;
  margin-bottom: 8px;
}

.block_list ul {
  margin: 0 auto;
  padding-left: 50px;
}

.block_list ul {
  margin: 0 auto;
  padding-left: 50px;
}

.block_list ul li {
  display: flex;
  align-items: center;
  padding: 5px;
}

.block_list ul li img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(90deg, #00d9ff 20%, #00b6ff 60%, #00b6ff);
  background: linear-gradient(45deg, #00dfff 20%, #00b8ff 60%, #00b8ff);
  margin-right: 10px;
}

/******************* SECTION GOOGLE *******************/
.block_google {
  background-color: #474747;
  margin: 30px 19px 0;
  border-radius: 20px;
  padding: 25px 0;
}

.block_google .block_google_text > p {
  max-width: 265px;
  text-align: center;
  color: #fff;
  font-weight: 600;
  padding: 10px 10px 30px;
  margin: 20px auto;
  line-height: 1;
  border-bottom: 1px solid #535353;
}

.block_google .block_google_text > p > span {
  color: #00b6ff;
}

.block_google .block_stars p {
  max-width: 265px;
  text-align: center;
  color: #fff;
  font-weight: 600;
  padding: 10px 10px 30px;
  margin: 20px auto;
  line-height: 1;
  padding-top: 30px;
  margin-bottom: 0;
  padding-bottom: 0;
}

.stars {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.star {
  width: 15px;
}

.logo_g {
  margin: 5px auto 0;
  width: 30px;
}

/******************* SECTION AVIS **********************/
.block_avis {
  background-color: #f6f6f6;
  padding: 20px 0 0;
}

.block_avis .h2 {
  margin: 10px 0 0;
  padding: 20px 20px 10px;
}

.block_avis .block_radius_bottom {
  background-color: #fff;
}

.block_avis .block_radius_bottom > div {
  background-color: #f6f6f6;
  padding-top: 35px;
}

.block_avis .star {
  width: 12px;
}

.avis {
  position: relative;
  background-color: #fff;
  display: flex;
  align-items: center;
  margin: 20px 19px;
  border-radius: 16px;
  padding: 20px 0;
}

.block_avis .stars {
  position: absolute;
  top: 20px;
  right: 3%;
}

.avis:last-child {
  margin-bottom: 0;
}

.avis_content > p {
  color: #a3a3a3;
  font-style: italic;
  padding: 10px 28px 0 20px;
}

.avis_name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 25px;
}

.avis_name p {
  font-weight: 600;
  padding: 0 10px 0 20px;
}

.block_avis .see_more {
  display: none;
}

.letter_cercle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin-left: 20px;
  flex-shrink: 0;
}

.letter_cercle.pink {
  background-color: #eb7aac;
}

.letter_cercle.orange {
  background-color: #f9b233;
}

.letter_cercle.green {
  background-color: #3aaa35;
}

.logo_google {
  width: 15px;
  margin-right: 2px;
}

/************** VILLE COUVERTE ***************************/
.covered_city_hero {
  background-color: #00ccff;
  display: flex;
  flex-direction: column;
}

.breadcrumb {
  color: #fff;
  padding: 115px 0 0 0;
}

.breadcrumb p {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.breadcrumb a {
  color: #fff;
}

.breadcrumb img {
  width: 15px;
  margin: 0 10px;
  position: relative;
  top: 2px;
}

.covered_city .breadcrumb {
  background-color: #00ccff;
}

.covered_city_title h1 {
  font-family: "Agbalumo", sans-serif;
  color: #fff;
  text-align: center;
  line-height: 1.1;
  margin: 20px;
  font-size: 35px;
}

.covered_city_left {
  margin: -50px 0 0;
  position: relative;
  order: 2;
  background: #fff;
}

.covered_city_title {
  order: 1;
  color: #fff;
  position: relative;
}

.covered_city_title .block_radius_bottom {
  background-color: #fff;
}

.covered_city_title .block_radius_bottom > div {
  background-color: #00ccff;
  padding-bottom: 50px;
  position: relative;
  z-index: 2;
}

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

.covered_city_average .stars {
  margin: 20px 0;
}

.covered_city_average .star {
  width: 20px;
}

.covered_city_average > div {
  font-size: 14px;
  font-weight: bold;
}

.content_average {
  color: #fff;
  margin: 0 19px;
}

.google_white {
  width: 25px;
}

.covered_city_hero .block_btn_devis button {
  background: #00ccff;
  border: 2px solid #fff;
  margin: 20px 0 0 0;
}

.covered_city_car {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  bottom: -27px;
  z-index: 5;
  left: 0;
}

.covered_city_car p {
  font-size: 14px;
}

.car_cs {
  width: 70px;
  margin-left: 15px;
}

.coordinate_picture img {
  width: 100%;
  position: relative;
  z-index: 1;
  max-height: 432px;
  object-fit: cover;
  border-radius: 28px;
}

.coordinate {
  margin: 0 0 24px 0;
}

.coordinate_address {
  background: #ccf2f2;
  padding: 10vw;
  border-radius: 0 0 50px 50px;
}

.coordinate_address > div > div {
  margin: 20px 0;
}

.coordinate_address > div:not(:last-child) {
  width: calc(100% - 38px - 16px - 16px);
  margin: 0 auto;
  padding-top: 24px;
}

.coordinate_address .block_radius_bottom {
  background-color: #fff;
}

.coordinate_address .block_radius_bottom > div {
  background-color: #ccf2f2;
  padding-bottom: 28px;
}

.coordinate_map {
  border-radius: 28px;
}

@media (max-width: 768px) {
  .coordinate_picture img {
    border-radius: 0 0 50px 50px;
  }

  .coordinate_map #map-coordinate {
    margin-top: -50px;
    height: 350px;
    background-color: #ccf2f2;
  }
}

#map-coordinate {
  width: 100%;
  height: 250px;
  border-radius: 28px;
}

.intervene h2 {
  color: #3db7ff;
  text-align: center;
  margin: 40px 20px 20px;
}

.intervene_content {
  padding: 0vw 10vw 10vw 10vw;
  text-align: center;
}

.intervene_content p {
  color: #43c0ff;
  padding: 0 0 20px;
}

.intervention_area {
  position: relative;
  background: url("https://centreservicesdev.fr/assets/img/ciel-01.jpg")
    no-repeat top left / cover;
  padding: 40px 0 0;
  margin: 84px 5vw 10vw 5vw;
  border-radius: 28px;
}

.intervention_area_img {
  width: 100px;
  position: absolute;
  top: -60px;
  left: calc(50% - 50px);
}

.intervention_area h2 {
  font-family: Agbalumo;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  padding: 24px 48px;
  line-height: 1em;
}

.intervention_area_content {
  color: #fff;
  text-align: center;
  padding: 0 40px 40px 40px;
  line-height: 1.4em;
}

.intervention_area_content a {
  color: inherit;
}

.intervention_area .block_radius_bottom {
  background-color: #fff;
}

.intervention_area .block_radius_bottom > div {
  background-color: #262626;
  padding-bottom: 50px;
}

#toggleCitiesInterventionArea {
  cursor: pointer;
  display: block;
  margin: 1rem auto 0;
  text-align: center;
  display: flex;
  align-items: center;
  font-weight: 900;
  color: #fff;
  background-color: rgba(0, 150, 255, 0.4);
  font-size: 14px;
  border-radius: 50px;
  border: 2px solid #fff;
  height: 37px;
  padding: 10px 14px;
  text-transform: uppercase;
  margin: 20px auto 0;
}

#toggleCitiesInterventionArea img {
  margin-left: 5px;
}

/* Animation "croix" sur l'image du bouton */
#toggleCitiesInterventionArea.rotate img {
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.covered_city .block_4_icones.agence .block_radius_bottom > div {
  box-shadow: none;
}

.actu {
  background-color: #ccf2f2;
  position: relative;
  top: -1px;
}

.actu h2 {
  text-align: center;
  padding: 40px 19px 3vw;
  color: #3db7ff;
}

.actu_list {
  width: calc(100% - 38px);
  margin: -25px 19px 0;
}

.actu_list_item {
  position: relative;
  bottom: -30px;
  background-color: #fff;
  /* box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px,rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px; */
  border-radius: 30px;
  overflow: hidden;
  margin: 40px 0;
  z-index: 3;
}

.actu_list_item:last-child {
  margin: 40px 0 0;
}

.actu_list_item h3 {
  font-size: 18px;
  margin: 20px 0;
  min-height: 48px;
}

.actu_list_item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  /* largeur / hauteur */
  object-fit: cover;
}

.actu_list_item > div {
  background-color: #fff;
  padding: 30px;
}

.actu_list_item button {
  cursor: pointer;
  background: linear-gradient(90deg, #00dfff 10%, #00b8ff 90%, #00b8ff);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 50px;
}

.actu_list_item button a {
  color: #fff;
}

.actu .block_radius_bottom {
  background-color: #fff;
}

.actu .block_radius_bottom > div {
  background-color: #ccf2f2;
  padding-bottom: 50px;
  position: relative;
  z-index: 2;
}

.functioning h2 {
  text-align: center;
  margin: 40px 19px;
}

.block_6_icones .group_info {
  position: relative;
}

.block_6_icones .line_pc,
.block_6_icones .line_mobile {
  position: absolute;
  height: 3px;
  background-color: #ccf2f2;
  margin: 0 auto;
}

.functioning .block_radius_bottom {
  background-color: #fff;
  padding: 0;
  margin-top: 20px;
  background: #ccf2f2;
}

.functioning .block_radius_bottom > div {
  background-color: #fff;
}

/************** VILLE NON COUVERTE ***************************/
.uncovered_city_hero {
  background-color: #00ccff;
  display: flex;
  flex-direction: column;
  padding: 115px 0 0;
}

.uncovered_city_hero h2 {
  font-family: "Agbalumo", sans-serif;
  color: #fff;
  text-align: center;
  line-height: 1.1;
  margin: 20px 19px 40px;
  font-size: 35px;
}

.uncovered_city_hero h2 span {
  font-family: "Agbalumo", sans-serif;
}

#form_uncovered_city > div {
  width: fit-content;
  margin: 0 auto;
}

#form_uncovered_city p {
  font-size: 20px;
  margin: 20px 0;
}

.form_select > div {
  position: relative;
  width: fit-content;
  margin: 0 auto;
  width: 225px;
}

.form_select > div::after {
  content: "";
  background: url(https://centreservicesdev.fr/assets/img/icons/arrow_select_bottom.svg);
  width: 24px;
  height: 24px;
  position: absolute;
  right: 6px;
  top: 7px;
  pointer-events: none;
}

.form_select select {
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  padding: 5px 35px 5px 10px;
  border: none;
  background-color: #fff;
  font-size: 20px;
  appearance: none;
  position: relative;
}

.input_icone {
  position: relative;
  /* display: flex;
  align-items: center;
  justify-content: center; */
}

.submitCityError {
  position: absolute;
  bottom: 65px;
  right: 0;
}

#suggestions {
  background-color: #fff;
  width: 330px;
  max-height: 400px;
  overflow-y: auto;
}

.suggestion-item {
  cursor: pointer;
  padding: 5px;
}

.input_icone > div {
  position: relative;
  width: 225px;
}

.input_icone input {
  width: 100%;
  border: none;
  padding: 11px 10px;
  border-radius: 10px;
  font-size: 20px;
  margin: 0 0 5px;
}

.search {
  cursor: pointer;
  position: absolute;
  top: 9px;
  right: 51px;
  width: 30px;
}

.input_marker {
  cursor: pointer;
  background-color: #019eff;
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  padding: 5px;
  border-radius: 10px;
}

.uncovered_city_hero .block_radius_bottom {
  background-color: #f6f6f6;
  padding-bottom: 0;
}

.uncovered_city_hero .block_radius_bottom > div {
  background-color: #00ccff;
  padding-bottom: 50px;
  position: relative;
  z-index: 2;
}

.no-service-area h2 {
  text-align: center;
  padding: 40px 19px 0;
}

.no-service-area p {
  margin: 20px 19px;
}

.no-service-area .group_button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.no-service-area .group_button > button {
  cursor: pointer;
  display: flex;
  padding: 0px 25px;
  border-radius: 50px;
  /* background: linear-gradient(90deg, #00dfff 10%, #00b8ff 90%, #00b8ff); */
  background: #2e2f7a;
  border: none;
  font-size: 19px;
  font-weight: 700;
  height: 54px;
  line-height: 50px;
}

.no-service-area .block_radius_bottom > div {
  padding-bottom: 50px;
  background-color: #f6f6f6;
}

.no-service-area .group_button > button a {
  color: #fff;
  font-size: 19px;
  font-weight: 700;
}

.rappel {
  margin: 0 0 20px;
}

.uncovered_city .block_4_icones .block_radius_bottom {
  background-color: #ccf2f2;
}

.reseaux h2 {
  text-align: center;
  padding: 40px 19px 0;
}

.reseaux_icons {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 0;
}

.facebook,
.instagram {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  flex-shrink: 0;
}

.facebook {
  background-color: #404395;
  margin: 0 20px 0 0;
}

.instagram {
  background-color: #d30096;
}

.reseaux .block_radius_bottom > div {
  background-color: #fff;
  box-shadow: 0 30px 30px rgba(0, 0, 0, 0.03);
}

/****************** MODAL POUR LES COOKIES *****************/
#mainCookiesModal {
  height: 100dvh;
  width: 100vw;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  animation: open-modal 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#insideCookiesModal {
  width: 90%;
  max-width: 500px;
  height: auto;
  max-height: 70%;
  background-color: white;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  animation: open-modal-container 0.3s cubic-bezier(0.165, 0.84, 0.44, 1)
    forwards;
}

#headerLogo {
  margin-top: 10px;
  padding-bottom: 6px;
  height: 60px;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
}

#headerLogo > div,
#headerLogo > label {
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 20px;
}

#headerLogo > label {
  padding-right: 20px;
}

#headerLogo label {
  cursor: pointer;
  padding-right: 10px;
}

#closeModalCookies:checked + #mainCookiesModal {
  animation: close-modal 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#headerLogo div img {
  height: 70%;
  height: 50%;
  width: auto;
}

#headerLogo label img {
  cursor: pointer;
  margin-left: 8px;
  position: relative;
  top: 1px;
}

#headerLogo label small {
  font-size: x-small;
}

.typeCookiesContainer > div:not(:last-child) {
  border-bottom: 1px solid lightgray;
}

.typeCookiesContainer label {
  position: relative;
  font-weight: 600;
  cursor: pointer;
}

.typeCookiesContainer label:before {
  content: url(../img/icons/fleche.svg);
  position: absolute;
  left: -30px;
  top: -5px;
  height: 30px;
  display: inline-block;
  width: 30px;
  transform: rotate(-180deg);
  transition: all ease 0.5s;
}

#navCookiesModal {
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid #ddd;
}

#navCookiesModal > label {
  flex: 1;
  text-align: center;
  height: 100%;
  line-height: 48px;
  font-weight: 500;
  cursor: pointer;
  flex: 3;
}

#navCookiesModal > label:first-child {
  flex: 4;
}

#navCookiesModal label.clicked {
  color: #00c2ff;
  border-bottom: 2px solid #00c2ff;
}

#contentCookiesModal {
  flex: 1;
  overflow: auto;
}

#contentCookiesModal .contentDiv {
  padding: 20px 40px;
  padding: 20px 30px;
}

.descriptionTypeCookies {
  padding: 10px 0;
}

input[name="typeCookies"] {
  position: absolute;
  left: -10000px;
}

input[name="typeCookies"]:not(:checked) ~ div.detailsCookies {
  display: none;
}

.detailsCookies ul {
  margin-top: 0;
  padding-left: 20px;
}

.detailsCookies ul li {
  border: 1px solid #00c2ff;
  border-radius: 5px;
  padding: 10px;
  padding-bottom: 14px;
}

input[name="typeCookies"]:checked + label:before {
  transform: rotate(-90deg);
  top: -6px;
}

input[name="contentDivCookies"] {
  position: absolute;
  left: -10000px;
}

input[name="contentDivCookies"]:not(:checked) + div.contentDiv {
  display: none;
}

input[name="contentDivCookies"]:checked + div.contentDiv {
  display: block;
}

#footerCookiesModal {
  height: 80px;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: end;
  justify-content: center;
  gap: 20px;
  border-top: 1px solid #ddd;
  padding: 20px;
}

.btnCookies {
  width: 25%;
  display: inline-block;
  min-width: calc(50% - 10px);
  text-align: center;
  height: 40px;
  line-height: 36px;
  border: 1px solid #00c2ff;
  font-weight: 600;
  cursor: pointer;
  border-radius: 12px;
}

#refusedCookies {
  color: #666;
  font-weight: normal;
  border: 1px solid #ddd;
}

.btnCookies.primary {
  background-color: #00c2ff;
  color: white;
}

/****************** MODAL DU FORMULAIRE DE CONTACT *****************/
#modals,
#modal-contact,
#modal-video,
#modal-form-contact {
  display: none;
  position: fixed;
  top: -env(safe-area-inset-bottom);
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background-color: rgba(51, 49, 49, 0.55);
  padding: 20px;
  z-index: 1999;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  inset: 0;
  transition: all 0.5s;
}

#modals-container,
#modal-container,
#modal-form-contact-container {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  height: auto;
  border-radius: 16px;
  background-color: #fff;
  box-shadow:
    rgba(17, 17, 26, 0.1) 0px 8px 24px,
    rgba(17, 17, 26, 0.1) 0px 16px 56px,
    rgba(17, 17, 26, 0.1) 0px 24px 80px;
  overflow: auto;
  opacity: 0;
  transition: all 0.5s;
}

#modal-form-contact-container .form_contact_header {
  position: relative;
  background: url("https://centreservicesdev.fr/assets/img/modal_contact/services/modal-info--mobile.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  min-height: 170px;
}

#modal-form-contact-container .form_contact_header .background_bulle {
  display: none;
}

#modal-form-contact-container .form_contact_header .close_modal {
  cursor: pointer;
  position: absolute;
  width: 30px;
  height: 30px;
  right: 10px;
  top: 10px;
  background: url("https://centreservicesdev.fr/assets/img/icons/close.svg");
  background-size: 100%;
}

#modal-form-contact-container main {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 20px;
}

#modal-form-contact-container main:has(.treatment) {
  display: block;
  /* padding: 0; */
}

#modal-form-contact-container main > div {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px;
}

#modal-form-contact-container main > div.treatment {
  width: 100%;
  height: 100%;
  min-height: 400px;
  display: block;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

#modal-form-contact-container main > div#loader-modal {
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

#modal-form-contact-container:has(#loader-modal) .form_contact_header,
#modal-form-contact-container:has(.treatment) .form_contact_header {
  display: none;
}

#modal-form-contact-container:has(.treatment) .close_modal {
  cursor: pointer;
  position: absolute;
  width: 30px;
  height: 30px;
  right: 10px;
  top: 10px;
  background: url("https://centreservicesdev.fr/assets/img/icons/close_blue.svg");
  background-size: 100%;
}

#modal-form-contact-container:has(#loader-modal) h3 {
  font-size: 20px;
}

/* #modal-form-contact-container main > div.content {
  display: block;
  width: 100%;
  box-shadow: none;
  border-radius: 0;
} */

/* #modal-form-contact-container main>div.treatment h2 {
  text-align: center;
  color: #2d3178;
  font-size: 25px;
  margin: 15px 0 25px;
} */

#modal-form-contact-container main > div img {
  width: 100%;
}

#modal-form-contact-container main > div p {
  text-align: center;
  color: #000;
  position: relative;
  top: -7px;
  text-align: center;
  font-weight: 700;
}

#modal-form-contact-container main:has(form) {
  display: flex;
  flex-direction: column;
  margin: 0;
  /* padding: 15px 50px; */
}

#modal-form-contact-container main:has(form) h3 {
  font-size: 20px;
}

.modal-form-contact-other {
  cursor: pointer;
}

#modal-contact:has(.form),
#modals.map,
#modals.chat {
  display: none;
  position: fixed;
  top: -env(safe-area-inset-bottom);
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background-color: rgba(51, 49, 49, 0.55);
  padding: 20px;
  z-index: 1999;
  justify-content: center;
  /* align-items: center; */
  overflow: hidden;
  inset: 0;
  transition: all 0.5s;
}

#modal-container:has(.form),
#modals-container.map,
#modals-container.chat {
  position: relative;
  top: calc(30% - 80px);
  top: 0;
  left: 0;
  width: 100%;
  max-width: 500px;
  min-height: 630px;
  border-radius: 16px;
  background-color: #fff;
  box-shadow:
    rgba(17, 17, 26, 0.1) 0px 8px 24px,
    rgba(17, 17, 26, 0.1) 0px 16px 56px,
    rgba(17, 17, 26, 0.1) 0px 24px 80px;
  overflow: auto;
  opacity: 0;
  transition: all 0.5s;
}

#modal-promo {
  display: none;
  position: fixed;
  top: -env(safe-area-inset-bottom);
  width: 100%;
  height: 100dvh;
  z-index: 1999;
  overflow: hidden;
  inset: 0;
  transition: all 0.5s;
}

#modal-promo.show {
  animation: open-modal 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-promo.close {
  animation: close-modal 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.datesPromo {
  color: var(--colorDates);
}

.urlPromo {
  color: var(--colorPlus);
  position: relative;
  z-index: 10;
}

#modals-container-promo {
  position: relative;
  top: 0px;
  left: 0;
  width: 100vw;
  height: auto;
  overflow: hidden;
  opacity: 1;
  transition: all 0.5s;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#modal-promo.show #modals-container-promo {
  animation: open-modal-container 0.3s cubic-bezier(0.165, 0.84, 0.44, 1)
    forwards;
}

#modal-promo.close #modals-container-promo {
  animation: close-modal-container 0.3s cubic-bezier(0.165, 0.84, 0.44, 1)
    forwards;
}

#modal-promo #containerPromoImg {
  height: 100px;
  width: 375px;
}

#modals-container-promo > div#inside-modal-promo {
  width: 375px;
  max-width: 100%;
  max-height: 90vh;
  border-radius: 32px;
  background-color: #fff;
  overflow: auto;
  opacity: 1;
  transition: all 0.5s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 50px;
  padding-top: 15px;
  overflow: hidden;
}

#modals-container-promo > div#inside-modal-promo > * {
  text-align: center;
}

#modal-promo .colorBtn {
  display: block;
  padding: 10px 10px 13px 10px;
  border-radius: 12px;
  text-align: center;
  background-color: var(--colorBtn) !important;
  width: 100%;
  font-size: 18px;
  line-height: 18px;
}

#modal-promo .nomPromo {
  font-weight: 900;
}

#modal-promo .modalPromoActions {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: bold;
}

#modal-promo .colorBtnTexte {
  color: var(--colorBtnTexte) !important;
}

#modal-promo .colorModal {
  background-color: var(--colorModal) !important;
}

#modal-promo .colorText {
  color: var(--colorText) !important;
}

#modal-promo .textePromo {
  font-size: 32px;
  font-family: Agbalumo;
}

#modal-promo .contentTextePromo {
  line-height: 50px;
}

#modal-promo .textePromo:first-of-type {
  font-size: 8em;
  font-family: Agbalumo;
}

#modal-promo .textePromo:last-of-type {
  font-size: 4em;
  font-family: Agbalumo;
}

#modal-promo .closeModalPromo {
  width: 28px;
  height: 28px;
  cursor: pointer;
  align-self: end;
  margin-right: -20px;
  margin-top: 0;
}

#modal-promo .closeModalPromoRefused {
  margin-top: 20px;
  color: lightgray;
  cursor: pointer;
}

#modal-promo .imgPromo {
  position: relative;
  top: -50px;
  width: 200px;
  left: calc(50% - 100px);
  height: auto;
  z-index: 100;
}

#promoBandeau {
  height: 60px;
  padding: 5px 20px;
  border-radius: 24px;
  box-shadow: 0px 3px 15px 0px #0000001a;
  width: 100%;
  margin: auto;
  position: relative;
  line-height: 50px;
  background-color: var(--colorPopupReduire) !important;
  z-index: 0;
}

.containerSectionPromoBandeau {
  width: calc(80vw - var(--gap-carousel));
  margin: calc(var(--gap-carousel) * 2 + 5vw) auto 0;
}

@media (max-width: 768px) {
  #promoBandeau {
    margin-top: 50px;
  }

  .containerSectionPromoBandeau {
    margin: 50px 5vw 0 5vw;
    width: auto;
  }
}

#promoBandeau span.mobileHide {
  float: left;
  margin: 0 10px;
}

#imgPromoBandeau img {
  height: 118px;
  width: auto;
  position: absolute;
  left: -5px;
  display: inline-block;
  top: -68px;
}

#titlePromoBandeau {
  font-size: 1.5em;
  font-weight: bold;
  line-height: 26px;
  margin-left: 80px;
  float: left;
}

#promotionDetails #agenceParticipantes {
  display: grid;
  list-style: none;
  padding: 0;
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

#promotionDetails .block_pc.promotion {
  display: flex;
  justify-content: center;
}

#promotionDetails #mainContent {
  max-width: 70%;
}

#promotionDetails #mainContent img {
  width: 300px;
  height: auto;
  margin: auto;
}

.block_pc.promotion {
  padding-bottom: 0;
}

.nav.gloss.promotion,
.nav_fixed.promotion.visible {
  box-shadow: 0 0 0 12px rgb(190, 251, 255);
}

.hero_orga.promotion {
  font-size: 22px;
  line-height: 34px;
}

#promotionDetails #agenceParticipantes li {
  margin-top: 5px;
  line-height: 14px;
}

#promotionDetails #titlePromo {
  background-color: var(--colorModal);
  padding: 50px;
  border-radius: 24px;
}

#promotionDetails #titlePromo span:first-child {
  font-size: 1.5em;
  line-height: 0;
}

#promotionDetails .titlelisteAgence {
  margin-top: 24px;
  font-weight: bold;
}

#promotionDetails .colorText {
  color: var(--colorText) !important;
}

#promotionDetails .hero_orga {
  margin: var(--gap-carousel) auto 0;
  width: calc(80vw - 3 * var(--gap-carousel));
}

#promotionDetails .hero_orga p {
  font-size: 22px;
  line-height: 34px;
}

#promotionDetails #agenceParticipantes a {
  color: #767676 !important;
}

#promotionDetails .promoDevis {
  display: block;
  padding: 10px 20px 13px 20px;
  border-radius: 12px;
  text-align: center;
  background-color: var(--colorBtn) !important;
  color: var(--colorBtnTexte) !important;
  width: max-content;
  margin-top: 24px;
  font-size: 18px;
  line-height: 18px;
}

@media screen and (max-width: 1200px) {
  #promotionDetails #mainContent {
    width: 95vw;
    margin-top: 100px;
  }
}

@media screen and (max-width: 768px) {
  #promotionDetails .hero_orga {
    margin: auto;
    width: 90vw;
    margin-top: 40px;
  }

  #promotionDetails #mainContent {
    max-width: 100%;
  }
}

#textSuppPromotion {
  margin-top: 10px;
}

#titlePromoBandeau.textDefault {
  margin-left: 76px;
  margin-top: -10px;
}

#titlePromoBandeau span.nbrHourPromo {
  font-size: 1.75em;
  line-height: 29px;
}

#titlePromoBandeau span.textDefault,
#titlePromoBandeau span.nbrHourPromo {
  font-family: Agbalumo;
}

#datesPromoBandeau {
  float: left;
  color: var(--colorDates);
}

#promoBandeau .nomPromo {
  float: left;
  color: var(--colorText) !important;
  font-size: 1.5em;
}

#promoBandeau .btnBandeau {
  display: inline-block;
  padding: 8px 14px;
  padding-top: 7px;
  border-radius: 12px;
  text-align: center;
  background-color: var(--colorBtn) !important;
  width: max-content;
  margin-right: 20px;
  font-size: 18px;
  line-height: 18px;
  color: var(--colorBtnTexte);
}

#promoBandeau .colorText {
  color: var(--colorText) !important;
}

#datesPromoBandeau {
  font-size: 1.5em;
}

#linkPromoBandeau {
  float: right;
}

#linkPromoBandeau a {
  color: var(--colorPlus);
  cursor: pointer;
  font-size: 12px;
}

#promoBandeau span.mobileHide {
  color: var(--colorText);
}

@media screen and (max-width: 1450px) {
  #titlePromoBandeau span.nbrHourPromo {
    font-size: 1.6em;
  }

  #titlePromoBandeau {
    font-size: 1.4em;
  }

  #datesPromoBandeau {
    font-size: 1.4em;
  }
}

@media screen and (max-width: 1780px) {
  #datesPromoBandeau,
  #promoBandeau .nomPromo {
    font-size: 1.3em;
  }
}

@media screen and (max-width: 1360px) {
  #titlePromoBandeau {
    font-size: 1.5em;
    line-height: 35px;
  }

  #datesPromoBandeau,
  #promoBandeau .nomPromo,
  #promoBandeau .btnBandeau {
    font-size: 1.1em;
  }

  #promoBandeau .btnBandeau {
    font-size: 14px;
  }
}

@media screen and (max-width: 1240px) {
  #titlePromoBandeau {
    font-size: 1.25em;
  }

  #promoBandeau .nomPromo,
  #datesPromoBandeau,
  #promoBandeau .btnBandeau {
    font-size: 1em;
  }

  #promoBandeau span.mobileHide {
    margin: 0 5px;
  }
}

@media screen and (max-width: 1106px) {
  #modals-container-promo > div#inside-modal-promo {
    padding: 50px;
    padding-bottom: 25px;
    padding-top: 35px;
    zoom: 0.8;
  }

  #modal-promo .closeModalPromo {
    margin-top: -10px;
  }

  #modal-promo .imgPromo {
    zoom: 0.8;
    top: 0px;
  }

  #modal-promo #containerPromoImg {
    width: 100%;
  }

  #modal-promo .colorBtn {
    font-size: 1.5em;
  }

  #promoBandeau {
    height: auto;
    padding: 26px;
    width: auto;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    line-height: unset;
    width: 100%;
  }

  #promoBandeau .btnBandeau {
    font-size: 14px;
    margin-top: 10px;
    margin-left: 0;
  }

  #imgPromoBandeau img {
    top: -100px;
    right: -10px;
    left: unset;
    height: 160px;
  }

  #titlePromoBandeau {
    margin-left: 0;
    line-height: 50px;
    width: 100%;
    margin-top: -15px;
  }

  #promoBandeau .mobileHide {
    display: none;
  }

  #datesPromoBandeau,
  #linkPromoBandeau,
  #promoBandeau .nomPromo {
    font-size: 1em;
    display: block;
    float: unset;
  }

  #promoBandeau .textDefault {
    display: block;
    font-size: 1.5em;
  }

  #titlePromoBandeau span.nbrHourPromo {
    font-family: Agbalumo;
    font-size: 1.75em;
  }
}

#modals-container,
#modal-container #modal-form-contact-container {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  height: auto;
  border-radius: 16px;
  background-color: #fff;
  box-shadow:
    rgba(17, 17, 26, 0.1) 0px 8px 24px,
    rgba(17, 17, 26, 0.1) 0px 16px 56px,
    rgba(17, 17, 26, 0.1) 0px 24px 80px;
  overflow: auto;
  opacity: 1;
  transition: all 0.5s;
}

#modals.chat {
  overflow: hidden;
}

#modals-container.chat {
  background-color: #f8f8f8;
  overflow: hidden;
}

#modals-container.chat .close_modals {
  background-color: #f8f8f8;
}

.mask_blur_chat_left {
  width: 300px;
  height: 200px;
  background: #f8f8f8;
  mask: radial-gradient(circle at bottom right, transparent 30px, #f8f8f8 31px);
  mask-composite: subtract;
  -webkit-mask: radial-gradient(
    circle at bottom right,
    transparent 30px,
    #f8f8f8 31px
  );
  -webkit-mask-composite: destination-out;
}

.iframe-chat {
  width: 100%;
  height: 100%;
  border: none;
}

.mask_blur_chat_left {
  display: none;
}

.mask_blur_chat_left,
.mask_blur_chat_right {
  position: absolute;
  background-color: #f8f8f8;
  top: 0;
}

.mask_blur_chat_right {
  width: 60px;
  height: 40px;
  right: 0;
}

#modals-container:has(.horaires) {
  min-height: 400px;
}

#icon-chat,
#icon-chatBot {
  position: fixed;
  width: 48px;
  height: 48px;
  bottom: 48px;
  right: 48px;
  background-color: #00e4df;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 150;
  border: 2px solid transparent;
  /* display: none; */
}

#icon-chat.agence.visible,
#icon-chatBot.agence.visible {
  opacity: 1;
  visibility: visible;
  transition: all 0.5s;
}

#icon-chat.agence,
#icon-chatBot.agence {
  opacity: 0;
  visibility: hidden;
}

#icon-chat img,
#icon-chatBot img {
  width: 50px;
}

:is(#modal-container-box, #modal-container-devis-alt) {
  width: 100%;
}

:is(#modal-container-box, #modal-container-devis-alt).services {
  background-color: #fcd995;
}

:is(#modal-container-box, #modal-container-devis-alt).services main {
  width: 100%;
}

:is(#modal-container-box, #modal-container-devis-alt)
  main
  .modal_content#grid-container
  > div {
  padding: 10px;
}

:is(#modal-container-box, #modal-container-devis-alt) header {
  padding: 0;
  position: relative;
}

:is(#modal-container-box, #modal-container-devis-alt) header .background_bulle {
  display: none;
}

:is(#modal-container-box, #modal-container-devis-alt).home header {
  background: var(--url-background-modal-mobile);
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  min-height: 170px;
}

:is(#modal-container-box, #modal-container-devis-alt) .close_modal {
  cursor: pointer;
  position: absolute;
  width: 30px;
  height: 30px;
  right: 10px;
  top: 10px;
  background: url("https://centreservicesdev.fr/assets/img/icons/close_blue.svg");
  background-size: 100%;
}

.close_modals {
  cursor: pointer;
  position: absolute;
  width: 30px;
  height: 30px;
  right: 10px;
  top: 10px;
  background: url("https://centreservicesdev.fr/assets/img/icons/close_black.svg");
  background-size: 100%;
  z-index: 9999;
}

#modals.map .close_modals {
  width: 40px;
  height: 40px;
  transform: scale(0.8);
}

.horaires_title {
  padding: 50px 30px 30px;
  font-size: 18px;
}

.horaires {
  width: calc(100% - 60px);
  margin: 0 auto;
  font-size: 14px;
}

.horaires .bold {
  color: #000 !important;
}

.horaires > div {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 00;
  padding: 7px 0;
  border-top: 1px solid #eee;
}

.horaires > div:hover {
  background: rgba(0, 0, 0, 0.05);
}

.horaires > div:first-child {
  border-top: none;
}

.map_view {
  position: relative;
}

#map {
  width: 100%;
  height: calc(100dvh - 40px);
}

:is(#modal-container-box, #modal-container-devis-alt).home .close_modal,
:is(#modal-container-box, #modal-container-devis-alt).services .close_modal {
  background: url("https://centreservicesdev.fr/assets/img/icons/close.svg");
  background-size: 100%;
  top: 10px;
}

:is(#modal-container-box, #modal-container-devis-alt) .background .close_modal {
  top: 10px;
}

:is(#modal-container-box, #modal-container-devis-alt) .steps_count {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  margin-bottom: 20px;
}

:is(#modal-container-box, #modal-container-devis-alt)
  .steps_count.visible_last_step {
  display: var(--visible-last-step-devis);
}

:is(#modal-container-box, #modal-container-devis-alt) .steps_count p {
  text-align: center;
  margin-top: 20px;
  color: #a8a4a4;
}

:is(#modal-container-box, #modal-container-devis-alt) .steps_count .progress {
  position: relative;
  background-color: #eceaea;
  height: 3px;
  top: 3px;
  width: 60px;
  left: calc(50% - 30px);
  border-radius: 50px;
}

:is(#modal-container-box, #modal-container-devis-alt)
  .steps_count
  .progressBar {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--progress-devis);
  height: 3px;
  background-color: #0081ff;
  border-radius: 50px;
}

:is(#modal-container-box, #modal-container-devis-alt).form
  .steps_count
  .progressBar {
  width: 100%;
}

:is(#modal-container-box, #modal-container-devis-alt) .img_background {
  width: 100%;
  object-fit: cover;
  border-top-right-radius: 16px;
  border-top-left-radius: 16px;
}

:is(#modal-container-box, #modal-container-devis-alt) .modal_title .time img {
  margin-right: 10px;
  position: relative;
  left: -10px;
}

:is(#modal-container-box, #modal-container-devis-alt) .modal_title > img {
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

:is(#modal-container-box, #modal-container-devis-alt) .modal_title h3 {
  text-align: center;
  margin: 0 auto 0px;
  padding: 0 20px 20px 20px;
  font-size: 20px;
}

:is(#modal-container-box, #modal-container-devis-alt).services h3 {
  padding: 0 !important;
}

:is(#modal-container-box, #modal-container-devis-alt) .modal_title h3.left {
  max-width: 100%;
  text-align: left;
  margin: 10px 0 20px 0;
}

:is(#modal-container-box, #modal-container-devis-alt) main {
  padding: 0 20px 20px;
}

:is(#modal-container-box, #modal-container-devis-alt):not(.home) main {
  padding: 60px 20px 20px;
}

:is(#modal-container-box, #modal-container-devis-alt)
  main#loader-treatment-main {
  padding: 20px 20px 20px;
}

:is(#modal-container-box, #modal-container-devis-alt).home main {
  padding: 0 20px 20px;
}

:is(#modal-container-box, #modal-container-devis-alt) main .modal_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

:is(#modal-container-box, #modal-container-devis-alt).services
  main
  .modal_content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

:is(#modal-container-box, #modal-container-devis-alt)
  main
  .modal_content
  > div {
  cursor: pointer;
  width: var(--width-house-modal);
  height: var(--width-house-modal);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  padding: 15px;
}

:is(#modal-container-box, #modal-container-devis-alt).services
  main
  .modal_content
  > div {
  width: var(--width-service-modal);
  height: var(--width-service-modal);
  background-color: inherit;
  box-shadow: none;
  padding: 0;
}

:is(#modal-container-box, #modal-container-devis-alt) .modal_content img {
  width: 100%;
}

:is(#modal-container-box, #modal-container-devis-alt) .modal_content > div p {
  position: relative;
  top: -7px;
  text-align: center;
  font-weight: 700;
  white-space: nowrap;
}

:is(#modal-container-box, #modal-container-devis-alt) ul {
  width: 100%;
  list-style: none;
  padding: 0;
}

:is(#modal-container-box, #modal-container-devis-alt) li {
  width: 100%;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  padding: 20px;
  font-weight: 600;
  margin: 20px 0;
}

:is(#modal-container-box, #modal-container-devis-alt) ul.choice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

:is(#modal-container-box, #modal-container-devis-alt) ul.choice li {
  width: calc(50% - 10px);
  text-align: center;
  padding: 20px 0;
  margin: 0;
  margin: 10px 0;
}

:is(#modal-container-box, #modal-container-devis-alt) .modal_content > div p {
  max-width: 100%;
  white-space: wrap;
}

/* Partie formulaire */
#modal-form-contact-container main form,
:is(#modal-container-box, #modal-container-devis-alt) form {
  width: 100%;
}

#modal-form-contact-container main form input,
#modal-form-contact-container main form textarea,
:is(#modal-container-box, #modal-container-devis-alt) form input,
:is(#modal-container-box, #modal-container-devis-alt) form textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid lightgrey;
  padding: 10px 8px;
  font-size: 14px;
}

#modal-form-contact form select {
  cursor: pointer;
  position: relative;
  width: 100%;
  border-radius: 10px;
  border: 1px solid lightgrey;
  padding: 10px 8px;
  font-size: 14px;
  background-color: #fff;
  appearance: none;
}

:is(#modal-container-box, #modal-container-devis-alt) form select {
  cursor: pointer;
  position: relative;
  width: 100%;
  border-radius: 10px;
  border: 1px solid lightgrey;
  padding: 10px 8px;
  font-size: 14px;
  background-color: #fff;
  appearance: none;
}

:is(#modal-container-box, #modal-container-devis-alt) form .block_city {
  position: relative;
}

:is(#modal-container-box, #modal-container-devis-alt)
  form
  .block_city:has(select)::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 2px;
  height: 40px;
  width: 40px;
  background: url("https://centreservicesdev.fr/assets/img/formSelect.png");
  border-radius: 0 10px 10px 0;
  pointer-events: none;
}

#modal-form-contact-container main form textarea,
:is(#modal-container-box, #modal-container-devis-alt) form textarea {
  resize: none;
  height: 100px;
}

:is(#modal-container-box, #modal-container-devis-alt) form .form_check {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

:is(#modal-container-box, #modal-container-devis-alt)
  form
  .form_check
  label:first-child {
  margin-right: 20px;
}

:is(#modal-container-box, #modal-container-devis-alt) form .form_check label {
  font-size: 14px;
  font-weight: 700;
  position: relative;
  bottom: 5px;
  margin-right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

:is(#modal-container-box, #modal-container-devis-alt)
  form
  .form_check
  label::before {
  content: "";
  cursor: pointer;
  background: #fff;
  border-radius: 50%;
  height: 25px;
  width: 25px;
  display: inline-block;
  margin-right: 5px;
  border: 1px solid #ddd;
}

:is(#modal-container-box, #modal-container-devis-alt)
  form
  .form_check
  label.checked::before {
  content: "";
  background-image: url(https://centreservicesdev.fr/assets/img/icons/validate_white.svg);
  cursor: pointer;
  background-color: #00b8ff;
  border-radius: 50%;
  height: 25px;
  width: 25px;
  margin-right: 5px;
  border: 1px solid #00b8ff;
  background-position: 0 1px;
}

:is(#modal-container-box, #modal-container-devis-alt) form .form_check input {
  cursor: pointer;
  margin-right: 3px;
  width: 20px;
  height: 20px;
}

:is(#modal-container-box, #modal-container-devis-alt) form input[type="radio"] {
  display: none;
}

:is(#modal-container-box, #modal-container-devis-alt)
  form
  input[type="radio"]::before {
  content: url("https://centreservicesdev.fr/assets/img/icons/validate_white.svg");
}

#modal-form-contact-container main form .form_row,
:is(#modal-container-box, #modal-container-devis-alt) form .form_row {
  position: relative;
  display: flex;
  margin-bottom: 12px;
}

:is(#modal-container-box, #modal-container-devis-alt)
  form
  .form_row
  input:not(input[type="radio"]),
:is(#modal-container-box, #modal-container-devis-alt) form .form_row textarea {
  width: 100%;
}

#modal-form-contact-container main form .form_row input#zipcode,
:is(#modal-container-box, #modal-container-devis-alt)
  form
  .form_row
  input#zipcode {
  max-width: 100px;
}

#modal-form-contact-container main form .form_submit,
:is(#modal-container-box, #modal-container-devis-alt) form .form_submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#modal-form-contact-container main form .form_submit button,
:is(#modal-container-box, #modal-container-devis-alt) form .form_submit button {
  background-color: #009ffa;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

:is(#modal-container-box, #modal-container-devis-alt)
  form
  .form_submit
  .return {
  width: fit-content;
  padding: 0;
  text-align: end;
}

/* Loader et traitement de la modal */
#loader-modal {
  position: relative;
  margin-bottom: 20px;
}

:is(#modal-container-box, #modal-container-devis-alt).thanks main {
  /* height: 100%; */
  min-height: 140px;
}

#modal-form-contact-container:has(#loader-modal) main,
:is(#modal-container-box, #modal-container-devis-alt).treatment main {
  width: 100%;
  height: 100%;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

#modal-form-contact-container:has(#loader-modal) main img,
:is(#modal-container-box, #modal-container-devis-alt).treatment main img {
  width: 150px;
}

#modal-form-contact-container:has(#loader-modal) main > div#loader-modal img,
:is(#modal-container-box, #modal-container-devis-alt).treatment
  main
  #loader-modal
  img {
  width: 60px;
}

#modal-form-contact-container:has(#loader-modal)
  main
  > div#loader-modal
  img.loader_background,
:is(#modal-container-box, #modal-container-devis-alt).treatment
  main
  #loader-modal
  img.loader_background {
  width: 140px;
  margin-top: -30px;
}

#modal-form-contact-container:has(#loader-modal)
  main
  > div#loader-modal
  img.loader_action,
:is(#modal-container-box, #modal-container-devis-alt).treatment
  main
  #loader-modal
  img.loader_action {
  position: absolute;
  bottom: 0;
  right: 0;
}

#modal-form-contact-container:has(#loader-modal)
  main
  > div#loader-modal
  img.loader_action.load,
:is(#modal-container-box, #modal-container-devis-alt).treatment
  main
  #loader-modal
  img.loader_action.load {
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

:is(#modal-container-box, #modal-container-devis-alt).thanks main {
  margin: 0;
  background-color: #cff9fa;
  position: relative;
  padding: 10px;
  background: var(--url-background-modal-circle-pc-merci);
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: #cff9fa;
  top: -1px;
}

.confetis1 {
  background: url(https://centreservicesdev.fr/assets/img/services/confetis-1.png);
  background-repeat: no-repeat;
  width: 80%;
  height: 140px;
  position: absolute;
  z-index: 5;
  transition: opacity 0.5s;
}

.confetis2 {
  background: url(https://centreservicesdev.fr/assets/img/services/confetis-2.png);
  background-repeat: no-repeat;
  width: 80%;
  height: 140px;
  position: absolute;
  z-index: 5;
  transition: opacity 0.5s;
}

:is(#modal-container-box, #modal-container-devis-alt).thanks main .content {
  background-color: #fff;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  margin: 20px;
  padding: 20px;
  border-radius: 16px;
}

#modal-form-contact-container main > div.treatment h2,
:is(#modal-container-box, #modal-container-devis-alt).thanks main .content h2 {
  text-align: center;
  color: #2d3178;
  font-size: 25px;
  margin: 15px 0 25px;
}

#modal-form-contact-container .content_top,
:is(#modal-container-box, #modal-container-devis-alt).thanks main .content_top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 37%;
  border-bottom: 1px solid #e9e9e9;
  min-height: 140px;
}

#modal-form-contact-container .container_logo .avatar,
:is(#modal-container-box, #modal-container-devis-alt).thanks
  main
  .content_top
  .container_logo
  .avatar {
  width: 80px;
  height: 80px;
}

#modal-form-contact-container .container_logo .copyright,
:is(#modal-container-box, #modal-container-devis-alt).thanks
  main
  .content_top
  .container_logo
  .copyright {
  width: 80px;
  height: 80px;
}

#modal-form-contact-container main:has(.treatment) .reseaux,
:is(#modal-container-box, #modal-container-devis-alt).thanks main .reseaux {
  width: 100%;
  background-color: #f9f9f9;
  padding: 30px;
  border-radius: 16px;
}

#modal-form-contact-container main:has(.treatment) .reseaux > p,
:is(#modal-container-box, #modal-container-devis-alt).thanks main .reseaux > p {
  text-align: center;
  font-size: 16px;
  color: #44266a;
}

#modal-form-contact-container main:has(.treatment) .reseaux_icons,
:is(#modal-container-box, #modal-container-devis-alt).thanks
  main
  .reseaux_icons {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px 0 0 0;
}

#modal-form-contact-container main:has(.treatment) .reseaux .facebook,
:is(#modal-container-box, #modal-container-devis-alt).thanks
  main
  .reseaux
  .facebook {
  background-color: #404395;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-right: 20px;
  padding: 5px;
  flex-shrink: 0;
}

#modal-form-contact-container main:has(.treatment) .reseaux .instagram,
:is(#modal-container-box, #modal-container-devis-alt).thanks
  main
  .reseaux
  .instagram {
  background-color: #d30096;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 5px;
  flex-shrink: 0;
}

:is(#modal-container-box, #modal-container-devis-alt) .return {
  width: 100%;
  cursor: pointer;
  text-align: center;
  color: #a8a4a4;
  padding: 24px 10px 10px 10px;
}

.separator_input {
  width: 20px;
}

:is(#modal-container-box, #modal-container-devis-alt).form h3 {
  padding-left: 0 !important;
}

.errorForm {
  background-color: #d10000;
  border: none;
  border-radius: 50px;
  padding: 5px 10px;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  display: none;
}

.errorForm.visible {
  display: block;
}

input.error {
  border-color: #ff0000 !important;
  color: #ff0000 !important;
}

.error {
  border-color: #ff0000 !important;
}

:is(#modal-container-box, #modal-container-devis-alt)
  form
  select#select_city.error {
  border: 1px solid #ff0000;
  color: #ff0000;
}

/*** ANIMATION OUVERTURE & FERMETURE DE LA MODALE ***/
#modal-contact.show,
#modal-video.show,
#modals.show,
#modal-form-contact.show {
  display: flex;
  animation: open-modal 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-contact.show #modal-container,
#modals.show #modals-container,
#modal-form-contact.show #modal-form-contact-container {
  animation: open-modal-container 0.3s cubic-bezier(0.165, 0.84, 0.44, 1)
    forwards;
}

#modal-contact.close #modal-container,
#modals.close #modals-container,
#modal-form-contact.close #modal-form-contact-container {
  animation: close-modal-container 0.3s cubic-bezier(0.165, 0.84, 0.44, 1)
    forwards;
}

#modal-contact.close,
#modal-video.close,
#modals.close,
#modal-form-contact.close {
  animation: close-modal 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

/************** MENU MOBILE *******************/
#menu-mobile {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out;
  background-color: rgba(0, 0, 0, 0);
  z-index: 3;
  display: flex;
  justify-content: center;
  overflow: hidden;
  opacity: 1;
  transition: background-color 0.3s ease;
}

#menu-mobile-content {
  width: calc(100% - 38px);
  margin: 19px;
  background-color: white;
  border-radius: 34px;
  padding: 10px 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  height: 68px;
}

#menu-mobile .border {
  border-bottom: 1px solid #e6e6e6;
  opacity: 0;
}

#menu-mobile .menu_mobile_top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  /* border-top-left-radius: 34px;
  border-top-right-radius: 34px; */
}

#menu-mobile .menu_mobile_top .close {
  cursor: pointer;
  position: relative;
  top: -1px;
  right: 10px;
}

#menu-mobile .menu_mobile_main {
  padding: 10px 0;
  position: relative;
}

#menu-mobile .menu_mobile_bottom {
  padding-top: 10px;
}

#menu-mobile .menu_mobile_bottom ul li {
  padding: 4px 0;
  width: fit-content;
}

#menu-mobile ul {
  list-style: none;
  padding: 0;
}

#menu-mobile ul li {
  display: table;
  width: 100%;
  vertical-align: middle;
  font-weight: 600;
  opacity: 0;
}

#menu-mobile ul li span {
  height: 38px;
  display: table-cell;
  vertical-align: middle;
}

#menu-mobile ul li a {
  font-size: 14px;
  color: #535353;
  font-weight: 600;
  margin-right: 10px;
  margin-left: 10px;
  position: relative;
  top: -2px;
}

#menu-mobile ul li span.back_menu_link {
  background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-link.svg")
    no-repeat;
  background-position: center;
  width: 38px;
  min-width: 38px;
  height: 48px;
  margin-right: 10px;
}

#menu-mobile ul li span.back_menu_phone {
  background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-phone.png")
    no-repeat;
  background-size: contain;
  width: 38px;
  height: 38px;
  margin-right: 10px;
}

#menu-mobile ul li span.back_menu_devis {
  background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-devis.png")
    no-repeat;
  background-size: contain;
  width: 38px;
  height: 38px;
}

#menu-mobile ul li .last-child {
  padding-left: 10px;
}

#menu-mobile ul li span.back_menu_job {
  background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-job.png")
    no-repeat;
  background-size: contain;
  width: 38px;
  height: 38px;
  margin-right: 10px;
}

#menu-mobile ul li span.line {
  background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-line-horizontale.svg")
    no-repeat;
  background-size: auto 38px;
  background-position: left;
  height: 38px;
  width: 100%;
  margin-left: 10px;
}

#menu-mobile ul li span.angle_top {
  background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-line-radius-top.svg")
    no-repeat;
  background-size: auto 48px;
  background-position: center;
  width: 38px;
  min-width: 38px;
  height: 48px;
}

#menu-mobile ul li span.angle_bottom {
  background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-line-radius-bottom.svg")
    no-repeat;
  background-size: 100%;
  width: 38px;
  min-width: 38px;
  height: 38px;
  background-position: 0 -5px;
}

#menu-mobile ul span.line_verticale {
  background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-line-verticale.svg")
    repeat-y;
  background-size: 100%;
  background-position: center;
  width: 38px;
  min-width: 38px;
  height: 48px;
}

#menu-mobile span.logo_sap {
  background: url("https://centreservicesdev.fr/assets/img/menu_mobile/back-menu-logo-sap.svg")
    no-repeat;
  width: 110px;
  height: 75px;
  position: absolute;
  top: 64px;
  right: -4px;
  opacity: 0;
}

#menu-mobile .menu_mobile_bottom li,
#menu-mobile .menu_mobile_bottom li a {
  font-size: 16px;
  color: #00b6ff;
  cursor: pointer;
}

#menu-mobile .menu_mobile_bottom li:last-child a {
  color: #00009c;
}

/****************** ANIMATION OUVERTURE & FERMETURE DU MENU MOBILE **********************/
#menu-mobile.show {
  visibility: visible;
  opacity: 1;
  animation: background-opacity 0.5s linear forwards;
}

#menu-mobile.close #menu-mobile-content {
  height: var(--menu-height);
}

#menu-mobile.show .border,
#menu-mobile.show .border {
  animation: open-box 0.5s 0.4s forwards;
}

#menu-mobile.close {
  animation: background-opacity 0.4s linear forwards reverse;
}

#menu-mobile.show #menu-mobile-content {
  animation: open-box-content 0.3s linear forwards;
}

#menu-mobile.show .menu_mobile_main ul li:nth-child(1) {
  animation: open-box 0.5s 0.1s forwards;
}

#menu-mobile.show .menu_mobile_main ul li:nth-child(2) {
  animation: open-box 0.5s 0.17s forwards;
}

#menu-mobile.show .menu_mobile_main ul li:nth-child(3) {
  animation: open-box 0.5s 0.24s forwards;
}

#menu-mobile.show .menu_mobile_main ul li:nth-child(4) {
  animation: open-box 0.5s 0.31s forwards;
}

#menu-mobile.show .menu_mobile_main ul li:nth-child(5) {
  animation: open-box 0.5s 0.38s forwards;
}

#menu-mobile.show .menu_mobile_bottom ul li:nth-child(1) {
  animation: open-box 0.5s 0.45s forwards;
}

#menu-mobile.show .menu_mobile_bottom ul li:nth-child(2) {
  animation: open-box 0.5s 0.52s forwards;
}

#menu-mobile.show .menu_mobile_bottom ul li:nth-child(3) {
  animation: open-box 0.5s 0.58s forwards;
}

#menu-mobile.show .logo_sap {
  animation: open-box 0.5s 0.4s forwards;
}

#menu-mobile.close #menu-mobile-content {
  animation: close-box-content 1s linear forwards;
}

#menu-mobile {
  visibility: hidden;
  opacity: 0;
}

#menu-mobile.show {
  visibility: visible;
  opacity: 1;
  animation: background-opacity 0.3s linear forwards;
}

#menu-mobile.close {
  animation: background-opacity 0.3s linear forwards reverse;
}

#menu-mobile.close #menu-mobile-content {
  animation: close-box-content 0.3s linear forwards;
}

#menu-mobile.close .menu_mobile_main ul li,
#menu-mobile.close .menu_mobile_bottom ul li,
#menu-mobile.close .logo_sap {
  animation: open-box 0.3s forwards reverse;
}

/**************** LOADER ****************************/
#loader {
  position: fixed;
  top: -50px;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background: #fff;
}

#loader.emploi p {
  color: #00bfff;
}

#loader.emploi {
  height: 466px;
  width: 100%;
  position: relative;
  margin: 0;
}

#merci {
  width: 100%;
}

#merci h2 {
  padding: 0 !important;
  width: 100% !important;
  color: #0b2b3a;
  line-height: 1;
  padding-bottom: 10px !important;
}

#loader.audit p {
  color: #00bfff;
}

#loader.audit {
  height: 500px;
  width: 100%;
  position: relative;
  margin: 0;
}

#loader-avis {
  margin-top: 20px;
}

#loader > div,
#loader-avis > div {
  height: 150px;
  width: 100%;
}

#loader img.cercle,
#loader-avis img.cercle {
  width: 80px;
  height: 80px;
  position: relative;
  top: calc(50% - 40px);
  left: calc(50% - 40px);
}

#loader p {
  font-size: 20px;
  margin-top: 15px;
  color: #00bfff;
  font-family: sans-serif;
  font-weight: 600;
  text-align: center;
}

.loader_avatar {
  position: relative;
  z-index: 9999;
}

.loader_avatar img.avatar {
  position: absolute;
  top: calc(50% - 24px);
  left: calc(50% - 24px);
}

/********************** ANIMATIONS **********************************/
/* Bouton du menu (ouvrir fermer) */
header.active #header-icon::before {
  transform: translateY(0px) rotate(45deg);
  box-shadow: 0 0 #ccc;
  background: #ccc;
}

header.active #header-icon::after {
  transform: translateY(0px) rotate(-45deg);
  background-color: #ccc;
}

header.active nav.border {
  border: none;
}

nav.border {
  transition: border-width 0.8s;
}

/* Loader */
#loader img.cercle,
#loader-avis img.cercle {
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

/* Apparition au scroll */
/* .reveal-loaded .reveal [class*="reveal-"] {
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition: 0s !important;
}

.reveal-loaded .reveal-reverse [class*="reveal-"] {
  opacity: 0 !important;
  transform: translateY(-50px) !important;
  transition: 0s !important;
}

.reveal-loaded [class*="reveal-"] {
  transition: 1s cubic-bezier(0.5, 0, 0, 1);
}

.reveal-loaded .reveal-2:not(.open) {
  transition-delay: 0.1s;
}

.reveal-loaded .reveal-3:not(.open) {
  transition-delay: 0.2s;
}

.reveal-loaded .reveal-4:not(.open) {
  transition-delay: 0.3s;
}

.reveal-loaded .reveal-5:not(.open) {
  transition-delay: 0.4s;
}

.reveal-loaded .reveal-6:not(.open) {
  transition-delay: 0.5s;
} */

/* Ouverture fermeture du menu mobile (opacité) */
@keyframes open-content-service {
  0% {
    height: 0;
  }

  25% {
    height: 80px;
  }

  50% {
    height: 160px;
  }

  75% {
    height: 240px;
  }

  100% {
    height: 335px;
  }
}

@keyframes open-modal {
  0% {
    background-color: rgba(51, 49, 49, 0);
  }

  50% {
    background-color: rgba(51, 49, 49, 0.35);
  }

  100% {
    background-color: rgba(51, 49, 49, 0.55);
  }
}

@keyframes close-modal {
  0% {
    background-color: rgba(51, 49, 49, 0.55);
  }

  50% {
    background-color: rgba(51, 49, 49, 0.35);
  }

  100% {
    background-color: rgba(51, 49, 49, 0);
  }
}

@keyframes open-modal-container {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes close-modal-container {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 0;
    transform: scale(0);
  }
}

@keyframes turn-logo {
  0% {
    transform: rotateZ(0deg);
  }

  25% {
    transform: rotateZ(45deg);
  }

  70% {
    transform: rotateZ(45deg);
  }

  100% {
    transform: rotateZ(-720deg);
  }
}

@keyframes move-arrow-button {
  0% {
    transform: translateX(0px);
  }

  50% {
    transform: translateX(0px);
  }

  75% {
    transform: translateX(12px);
  }

  100% {
    transform: translateX(0px);
  }
}

@keyframes move-arrow-button-mobile {
  0% {
    transform: translateX(0px);
  }

  50% {
    transform: translateX(0px);
  }

  75% {
    transform: translateX(8px);
  }

  100% {
    transform: translateX(0px);
  }
}

/* Fait tourner le looader à l'infini */
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Modifie l'opacity du background (ouverture fermeture du menu mobile) */
@keyframes background-opacity {
  0% {
    background-color: rgba(0, 0, 0, 0);
  }

  35% {
    background-color: rgba(0, 0, 0, 0.1);
  }

  70% {
    background-color: rgba(0, 0, 0, 0.15);
  }

  100% {
    background-color: rgba(0, 0, 0, 0.25);
  }
}

/* Ouverture fermeture du menu mobile (opacité) */
@keyframes open-box {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

/* Ouverture du menu mobile (hauteur) - toutes les 12.5% */
@keyframes open-box-content {
  0% {
    height: 68px;
  }

  12.5% {
    height: calc(var(--menu-height) * 0.202);
  }

  25% {
    height: calc(var(--menu-height) * 0.25);
  }

  37.5% {
    height: calc(var(--menu-height) * 0.375);
  }

  50% {
    height: calc(var(--menu-height) * 0.5);
  }

  62.5% {
    height: calc(var(--menu-height) * 0.625);
  }

  75% {
    height: calc(var(--menu-height) * 0.75);
  }

  87.5% {
    height: calc(var(--menu-height) * 0.875);
  }

  100% {
    height: var(--menu-height);
  }
}

/* Fermeture du menu mobile (hauteur) - inverse, toutes les 12.5% */
@keyframes close-box-content {
  0% {
    height: calc(var(--menu-height));
  }

  12.5% {
    height: calc(var(--menu-height) * 0.875);
  }

  25% {
    height: calc(var(--menu-height) * 0.75);
  }

  37.5% {
    height: calc(var(--menu-height) * 0.625);
  }

  50% {
    height: calc(var(--menu-height) * 0.5);
  }

  62.5% {
    height: calc(var(--menu-height) * 0.375);
  }

  75% {
    height: calc(var(--menu-height) * 0.25);
  }

  87.5% {
    height: calc(var(--menu-height) * 0.202);
  }

  100% {
    height: 68px;
  }
}

@keyframes icons-animate {
  0% {
    bottom: 0;
  }

  50% {
    bottom: 15px;
  }

  100% {
    bottom: 0;
  }
}

/* Keyframes pour la descente du trait */
@keyframes line-down {
  0% {
    height: 0;
  }

  100% {
    height: 15px;
  }
}

/* Animation du tracé de bordure : départ centre haut, droite, bas, gauche, haut */
@keyframes border-sequence {
  0% {
    clip-path: polygon(49.5% 0%, 49.5% 0%, 49.5% 0%, 49.5% 0%);
  }

  25% {
    clip-path: polygon(49.5% 0%, 100% 0%, 100% 0%, 100% 0%);
  }

  50% {
    clip-path: polygon(49.5% 0%, 100% 0%, 100% 100%, 100% 100%);
  }

  75% {
    clip-path: polygon(49.5% 0%, 100% 0%, 100% 100%, 0% 100%);
  }

  100% {
    clip-path: polygon(49.5% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%);
  }
}

/********************** RESPONSIVE **************************/

/* MAX WIDTH */
@media (max-width: 350px) {
  #courbe {
    top: -30px;
  }
}

@media (max-width: 375px) {
  .hide_375 {
    display: none;
  }
}

@media (max-width: 428px) {
  #maquettes_mobile {
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .text_center_on_mobile {
    text-align: center;
  }

  .block_pc:not(.promotion) {
    background-image: url(https://centreservicesdev.fr/assets/img/backgrounds/background-AE2-mobile.svg) !important;
  }
}

@media (max-width: 768px) {
  #tools_home_cs {
    gap: 0;
    position: fixed;
    top: auto;
    right: auto;
    bottom: 5vw;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 90vw;
    height: 64px;
    padding: 10px !important;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 9999px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.28s ease,
      transform 0.28s ease,
      visibility 0s linear 0.28s;
    will-change: opacity, transform;
    z-index: 101;
  }

  #tools_home_cs.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity 0.28s ease,
      transform 0.28s ease,
      visibility 0s;
  }

  #tools_home_cs .hover,
  #tools_home_cs > div {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: static;
  }

  #tools_home_cs .call_to_action_icon,
  #tools_home_cs .call_to_action_icon a {
    width: 36px;
    height: 36px;
    background: transparent;
    border-radius: 120px;
    border: 0 !important;
    position: relative;
    /*! top:-3px; */
    box-shadow: 0 0 0;
  }

  #tools_home_cs .hover {
    width: 20%;
    min-width: 20%;
  }

  #tools_home_cs .call_to_action_icon img {
    width: 32px;
    height: 32px;
    position: relative;
    top: -4px;
  }

  #tools_home_cs .icon-text {
    position: static;
    background: none;
    color: #333;
    font-size: 9px;
    padding: 0;
    border-radius: 0;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    margin-top: -8px !important;
  }

  #tools_home_cs #icon-comment {
    background: none;
  }

  /* ***********************
   *      FOOTER     *
   *********************** */
  .footer_list svg {
    transform: scale(1);
    position: relative;
    top: 3px;
  }
}

/* MIN WIDTH */
@media (min-width: 429px) and (max-width: 1080px) {
  #maquettes_tablet {
    display: block;
  }
}

@media screen and (max-width: 1550px) and (min-width: 1200px) {
  .nav_services.hideonpc {
    display: flex;
  }

  .nav_services:not(.hideonpc) {
    display: none;
  }
}

@media (min-width: 380px) {
  .block_6_icones .line_3 {
    top: 775px;
  }
}

@media (min-width: 396px) {
  .block_6_icones .line_2 {
    top: 433px;
  }

  .block_6_icones .line_3 {
    top: 755px;
  }
}

@media (min-width: 410px) {
  .block_6_icones .line_2 {
    top: 415px;
  }

  .block_6_icones .line_3 {
    top: 740px;
  }
}

@media (min-width: 400px) {
  #modal-form-contact-container .form_contact_header,
  :is(#modal-container-box, #modal-container-devis-alt).home header {
    min-height: 190px;
  }

  #menu-mobile ul li a {
    font-size: 16px;
  }
}

@media (min-width: 450px) {
  #modal-form-contact-container .form_contact_header,
  :is(#modal-container-box, #modal-container-devis-alt).home header {
    min-height: 212px;
  }
}

@media (min-width: 500px) {
  .slide {
    background-position: 0 15%;
  }

  #courbe {
    top: -49px;
  }

  .hero .block_radius_bottom {
    top: -95px;
  }

  .block_4_icones {
    margin-top: -96px;
  }

  #modal-form-contact-container .form_contact_header,
  :is(#modal-container-box, #modal-container-devis-alt).home header {
    min-height: 230px;
  }
}

@media (min-width: 550px) {
  .hero .block_radius_bottom {
    top: -37px;
  }

  .block_4_icones {
    margin-top: -45px;
  }
}

@media screen and (min-width: 600px) {
  #insideCookiesModal {
    width: 90%;
    margin-top: 0;
  }

  #headerLogo div img {
    height: 70%;
  }

  #headerLogo label {
    padding-right: 20px;
  }

  #headerLogo label small {
    font-size: small;
  }

  #contentCookiesModal .contentDiv {
    padding: 20px 40px;
  }

  #navCookiesModal > label {
    flex: 1;
  }

  #navCookiesModal > label:first-child {
    flex: auto;
  }

  #footerCookiesModal {
    justify-content: center;
    justify-content: end;
  }

  .hero .block_radius_bottom {
    top: 0;
  }

  .block_4_icones {
    margin-top: 0;
  }

  .box_marketing.link[data-numner-annonce="0"] {
    background-image: url(https://centreservicesdev.fr/assets/img/femme-de-menage-large-1.jpg);
  }

  .bloc_avis {
    border: 1px solid #ddd;
    padding: 0 48px 48px 48px;
    margin-top: 110px !important;
    border-radius: 48px;
  }

  .bloc_avis .icon_titre {
    margin-top: -64px;
    z-index: 1;
    position: relative;
  }

  .bloc_avis .icon_titre img {
    background: #fefbcf;
  }
}

@media (min-width: 700px) {
  .slide {
    background-position: 0px 20%;
  }
}

@media (min-width: 768px) {
  #icon-chat,
  #icon-chatBot {
    width: 70px;
    height: 70px;
  }

  #icon-chat img,
  #icon-chatBot img {
    width: 60px;
  }

  #loader {
    top: 0;
  }

  #modals .map,
  #modals .chat {
    align-self: center;
  }

  #modals-container.map,
  #modals-container.chat {
    height: 677px;
  }

  #map {
    height: 677px;
  }

  .chatbox {
    width: 800px;
  }

  .hide_mobile {
    display: block !important;
  }

  .hide_pc_tablet {
    display: none !important;
  }

  .img_bulle_tablette {
    display: block;
    width: 75%;
    margin: 0 auto;
  }

  header .nav_buttons {
    display: flex;
  }

  header nav:not(.nav_fixed) ul li.job {
    display: none;
  }

  header nav:not(.nav_fixed) ul li.devis {
    position: relative;
    right: 60px;
  }

  .font_modal_h3 {
    font-size: 30px;
  }

  .font_s {
    font-size: 16px;
  }

  header .nav_fixed {
    width: calc(80vw - 3 * var(--gap-carousel));
    top: calc(var(--gap-carousel) / 2);
    left: auto;
  }

  header {
    padding: 0;
  }

  header nav {
    top: calc(2 * var(--gap-carousel));
    width: calc(80vw - 3 * var(--gap-carousel));
  }

  header nav ul.nav_fixed_buttons li {
    font-size: 16px;
  }

  header .nav_fixed .devis .content_mobile {
    display: none;
  }

  header .nav_fixed .devis .content_pc {
    display: block;
  }

  .block_radius_bottom {
    display: none;
  }

  .block_btn_devis {
    display: none;
  }

  .block_btn_devis button span.animate_move_button {
    animation: none;
  }

  .slider-container {
    padding: 0;
  }

  .slider-wrapper {
    padding: 0 10%;
  }

  .slide,
  #carousel-2 .slide {
    height: 70vh;
    width: calc(80vw - var(--gap-carousel));
    border-radius: 60px;
    margin: var(--gap-carousel) calc(var(--gap-carousel) / 2);
    background-position: top;
    overflow: hidden;
  }

  .slide h3 {
    position: initial;
    width: 100%;
    text-align: center;
    margin-bottom: 32px;
  }

  .slide_tilte {
    text-align: center;
  }

  .slide_tilte p {
    margin: 12px 0;
    text-align: center;
    display: block;
    color: #fff;
    font-style: italic;
    font-size: 14px;
    margin: 0 36px;
    margin: 22px 0 0 0;
  }

  .slide_tilte button {
    cursor: pointer;
    display: flex;
    font-weight: 600;
    letter-spacing: 1px;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    background-color: var(--background-slide-btn);
    color: #fff;
    border: 0;
    border-radius: 24px;
    padding: 0 30px 0 24px;
    height: 80px;
    height: 64px;
    box-shadow:
      0 0 0 8px #fff,
      0 0 0 16px rgba(255, 255, 255, 0.3);
    transition: all ease-in-out 0.1s;
    position: relative;
    top: 0px;
  }

  .slide_tilte button span:first-child {
    background-image: url("https://centreservicesdev.fr/assets/img/icons/arrow.png");
    background-size: cover;
    width: 40px;
    height: 40px;
  }

  .slide_tilte button span:last-child {
    position: relative;
    top: -2px;
    white-space: nowrap;
  }

  .slider-dots {
    display: block;
    bottom: 35px;
  }

  .slider-nav {
    max-width: calc(80vw - var(--gap-carousel));
  }

  .slider-nav button,
  #carousel-2 .slider-nav button {
    position: absolute;
    bottom: var(--gap-carousel);
  }

  #carousel-2 .slider-nav button,
  #carousel-2 .slider-nav .img_prev,
  #carousel-2 .slider-nav .img_next,
  .slider-nav button,
  .img_prev,
  .img_next {
    height: 68px;
    width: 68px;
  }

  .slider-nav .next,
  #carousel-2 .slider-nav .next {
    right: var(--gap-carousel);
  }

  .slider-nav .prev,
  #carousel-2 .slider-nav .prev {
    left: var(--gap-carousel);
  }

  .slide_tilte button:hover {
    top: -4px;
  }

  .slide_tilte button img {
    margin-right: 0px;
    margin-left: -24px;
  }

  h2 {
    padding: 20px 20px 20px;
    margin: 0;
  }

  .block_4_icones {
    width: calc(80vw - var(--gap-carousel));
    margin: 0 auto;
    border-radius: 90px;
    border-radius: 60px;
    padding: 25px 0;
  }

  .block_function {
    padding: 0;
    margin: var(--gap-carousel) 0;
  }

  .block_4_icones_dom {
    max-width: 80vw;
    width: calc(80vw - var(--gap-carousel));
    margin: 0 auto;
    border-radius: 90px;
    border-radius: 60px;
    padding: 25px 0;
  }

  .block_list {
    width: calc(80vw - var(--gap-carousel));
    margin: var(--gap-carousel) auto;
  }

  .block_list h2 {
    margin: 20px 0;
    padding: 0;
  }

  .block_google {
    width: calc(80vw - var(--gap-carousel));
    margin: 0 auto;
    border-radius: 90px;
    border-radius: 60px;
  }

  .block_values {
    margin: var(--gap-carousel) 0;
  }

  .block_avis {
    background-color: #f6f6f6;
    padding: 40px 0 40px;
    width: calc(80vw - var(--gap-carousel));
    margin: 0 auto;
    border-radius: 90px;
    border-radius: 60px;
  }

  .block_avis .h2 {
    padding: 0px 0 20px;
  }

  .avis {
    position: relative;
    margin: 20px 48px;
  }

  .block_avis .stars {
    position: absolute;
    top: 20%;
    right: 3%;
  }

  #slide50 {
    background-image: url("https://centreservicesdev.fr/assets/img/services/slider-50-tablet.jpg");
  }

  #slide1 {
    background-image: url("https://centreservicesdev.fr/assets/img/services/slider-1-tablet.jpg");
  }

  #slide2 {
    background-image: url("https://centreservicesdev.fr/assets/img/services/slider-2-tablet.jpg");
  }

  #slide3 {
    background-image: url("https://centreservicesdev.fr/assets/img/services/slider-3-tablet.jpg");
  }

  #slide4 {
    background-image: url("https://centreservicesdev.fr/assets/img/services/slider-4-tablet.jpg");
  }

  #slide5 {
    background-image: url("https://centreservicesdev.fr/assets/img/services/slider-2-tablet.jpg");
  }

  #slide8 {
    background-image: url("https://centreservicesdev.fr/assets/img/services/slider-8-tablet.jpg");
  }

  .bulle_tablet {
    position: absolute;
    display: block;
    background-position: top;
    background-repeat: no-repeat;
    height: 275px;
    width: 108%;
    bottom: 275px;
    left: 80px;
  }

  #slide50 .bulle_tablet {
    background-image: url("https://centreservicesdev.fr/assets/img/services/bulle-50-tablet.png");
  }

  #slide1 .bulle_tablet {
    background-image: url("https://centreservicesdev.fr/assets/img/services/bulle-1-tablet.png");
  }

  #slide2 .bulle_tablet {
    background-image: url("https://centreservicesdev.fr/assets/img/services/bulle-2-tablet.png");
  }

  #slide3 .bulle_tablet {
    background-image: url("https://centreservicesdev.fr/assets/img/services/bulle-3-tablet.png");
  }

  #slide4 .bulle_tablet {
    background-image: url("https://centreservicesdev.fr/assets/img/services/bulle-4-tablet.png");
  }

  #slide5 .bulle_tablet {
    background-image: url("https://centreservicesdev.fr/assets/img/services/bulle-5-tablet.png");
  }

  #slide8 .bulle_tablet {
    background-image: url("https://centreservicesdev.fr/assets/img/services/bulle-8-tablet.png");
  }

  .slide_tilte button {
    font-size: 17px;
  }

  .slide h3 {
    font-size: 1.3em;
    line-height: 1em;
  }

  .slider-dots {
    left: 41%;
  }

  footer {
    width: calc(80vw - var(--gap-carousel));
    margin: var(--gap-carousel) auto 0;
  }

  :is(#modal-container-box, #modal-container-devis-alt).services
    main
    .modal_content {
    justify-content: center;
  }

  :is(#modal-container-box, #modal-container-devis-alt).services
    .modal_content
    > div {
    transition: all 0.5s;
  }

  :is(#modal-container-box, #modal-container-devis-alt).services
    .modal_content
    > div:hover {
    scale: 1.05;
  }

  #modal-form-contact-container main:has(.treatment),
  :is(#modal-container-box, #modal-container-devis-alt).thanks main {
    padding: 0;
    overflow: hidden;
  }

  #modal-form-contact-container main:has(.treatment) {
    width: 50%;
  }

  #modal-form-contact-container main:has(.treatment) .content h2,
  :is(#modal-container-box, #modal-container-devis-alt).thanks
    main
    .content
    h2 {
    font-size: 28px;
    margin: 22px 0 25px;
  }

  #modal-form-contact-container main:has(.treatment) .reseaux > p,
  :is(#modal-container-box, #modal-container-devis-alt).thanks
    main
    .reseaux
    > p {
    font-size: 23px;
  }

  #modal-form-contact-container main:has(.treatment) .content_top,
  :is(#modal-container-box, #modal-container-devis-alt).thanks
    main
    .content_top {
    min-height: 200px;
  }

  #modal-form-contact-container main:has(.treatment) .reseaux .facebook,
  :is(#modal-container-box, #modal-container-devis-alt).thanks
    main
    .reseaux
    .facebook {
    width: 50px;
    height: 50px;
  }

  #modal-form-contact-container main:has(.treatment) .reseaux .instagram,
  :is(#modal-container-box, #modal-container-devis-alt).thanks
    main
    .reseaux
    .instagram {
    width: 50px;
    height: 50px;
  }

  /* #modal-form-contact-container .form_contact_header .close_modal {
    display: none;
  } */

  #modal-form-contact-container div.treatment .close_modal {
    display: none;
  }

  .confetis1,
  .confetis2 {
    height: 200px;
  }

  #modal-form-contact-container main:has(.treatment) .confetis1,
  #modal-form-contact-container main:has(.treatment) .confetis2 {
    width: 50%;
  }

  #menu-mobile-content {
    position: relative;
    width: calc(80vw - 3 * var(--gap-carousel));
    top: calc(2 * var(--gap-carousel));
    margin: 0;
    left: 0;
  }

  #modal-form-contact-container,
  #modal-container:has(.form),
  #modal-container {
    max-width: 800px;
    min-height: 677px;
    min-height: 64px;
    height: auto;
  }

  #modals-container.map,
  #modals-container.chat {
    max-width: 800px;
    min-height: 677px;
  }

  .service_hidden {
    display: none;
  }

  :is(#modal-container-box, #modal-container-devis-alt) {
    max-width: auto;
  }

  :is(#modal-container-box, #modal-container-devis-alt) .modal_title h3 {
    max-width: 80%;
    font-size: 22px;
    margin: auto;
    margin-bottom: 12px;
    white-space: wrap;
  }

  #modal-form-contact-container .form_contact_header .close_modal,
  :is(#modal-container-box, #modal-container-devis-alt).home .close_modal,
  :is(#modal-container-box, #modal-container-devis-alt) .close_modal {
    background: url("https://centreservicesdev.fr/assets/img/icons/close.svg");
    background-size: 100%;
    right: auto;
    left: 12px;
    top: 12px;
  }

  :is(#modal-container-box, #modal-container-devis-alt).services {
    padding: 20px 0 30px;
  }

  :is(#modal-container-box, #modal-container-devis-alt) .modal_title .time img {
    left: 0;
  }

  :is(#modal-container-box, #modal-container-devis-alt).home header,
  :is(#modal-container-box, #modal-container-devis-alt) header {
    width: 40%;
    background: var(--url-background-modal-pc);
    background-size: cover;
    background-position: right;
    height: 677px;
  }

  :is(#modal-container-box, #modal-container-devis-alt)
    header
    .background_bulle {
    position: absolute;
    top: 0;
    left: 36px;
    width: 100%;
    display: block;
    background: var(--url-background-modal-bulle-pc);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    height: 677px;
    pointer-events: none;
  }

  #modal-form-contact-container .form_contact_header {
    background: url("https://centreservicesdev.fr/assets/img/modal_contact/services/modal-info-pc.jpg");
    width: 40%;
    background-size: cover;
    background-position: right;
    height: 677px;
  }

  #modal-form-contact-container .form_contact_header .background_bulle {
    position: absolute;
    top: 0;
    left: 36px;
    width: 100%;
    display: block;
    background: url("https://centreservicesdev.fr/assets/img/modal_contact/services/modal-info-bulle-pc.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    height: 677px;
    pointer-events: none;
    z-index: 2;
  }

  :is(#modal-container-box, #modal-container-devis-alt).thanks main {
    padding: 20px;
    background: var(--url-background-modal-circle-pc-merci);
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: #cff9fa;
  }

  :is(#modal-container-box, #modal-container-devis-alt).thanks main .content {
    background-color: #fff;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    margin: 20px;
    padding: 20px;
    border-radius: 16px;
    /* margin: -25px auto; */
  }

  :is(#modal-container-box, #modal-container-devis-alt).thanks .circle {
    width: 100%;
    height: 100%;
  }

  :is(#modal-container-box, #modal-container-devis-alt).thanks
    header
    .background_bulle {
    background: var(--url-background-modal-bulle-pc-merci);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    height: 677px;
    pointer-events: none;
  }

  :is(#modal-container-box, #modal-container-devis-alt) .steps_count {
    width: 60%;
  }

  :is(#modal-container-box, #modal-container-devis-alt) header.stage {
    margin-bottom: 0;
  }

  :is(#modal-container-box, #modal-container-devis-alt)
    header.stage
    .steps_count {
    position: absolute;
    right: 0;
  }

  :is(#modal-container-box, #modal-container-devis-alt)
    main
    .modal_content
    > div,
  :is(#modal-container-box, #modal-container-devis-alt) li {
    border-radius: 20px;
  }

  :is(#modal-container-box, #modal-container-devis-alt)
    main
    .modal_content#grid-container
    > div {
    max-width: 26%;
  }

  #modal-form-contact-container,
  :is(#modal-container-box, #modal-container-devis-alt) {
    display: flex;
  }

  #modal-form-contact-container main,
  :is(#modal-container-box, #modal-container-devis-alt) main {
    width: 60%;
    padding: 50px;
    margin: auto;
  }

  #modal-form-contact-container main:has(form) h3 {
    font-size: 22px;
  }

  #modal-form-contact-container main form {
    width: 100%;
  }

  :is(#modal-container-box, #modal-container-devis-alt).services
    main
    .modal_content {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  :is(#modal-container-box, #modal-container-devis-alt).services
    main
    .modal_content
    > div {
    width: var(--width-service-modal);
    height: var(--width-service-modal);
  }

  :is(#modal-container-box, #modal-container-devis-alt).home
    main
    .modal_content {
    flex-wrap: nowrap;
    flex-direction: column;
  }

  :is(#modal-container-box, #modal-container-devis-alt) main,
  :is(#modal-container-box, #modal-container-devis-alt):has(header.stage) main {
    padding: 15px 50px;
  }

  :is(#modal-container-box, #modal-container-devis-alt).services
    .modal_title
    h3 {
    padding: 10px 0 30px;
    font-size: 30px;
  }

  :is(#modal-container-box, #modal-container-devis-alt).home
    main
    .modal_content
    > div {
    margin: 10px 0;
  }

  :is(#modal-container-box, #modal-container-devis-alt) .modal_content > div p {
    max-width: 100%;
    white-space: wrap;
  }

  :is(#modal-container-box, #modal-container-devis-alt)
    form
    .form_check
    label.checked::before {
    background-position: 0 0;
  }

  :is(#modal-container-box, #modal-container-devis-alt) form {
    width: 100%;
    margin: 0;
  }

  :is(#modal-container-box, #modal-container-devis-alt).treatment main {
    width: 60%;
    height: auto;
  }

  #modal-form-contact-container main:has(form) {
    margin: auto;
  }

  footer {
    width: calc(80vw - 3 * var(--gap-carousel));
    width: calc(100% - var(--gap-carousel) * 2);
    margin: var(--gap-carousel) auto 0;
    display: flex;
    flex-wrap: wrap;
    padding: 50px 0;
  }

  footer.cta {
    padding: 50px 19px 10px;
  }

  footer h3 {
    font-weight: 500;
    font-size: 20px;
    white-space: nowrap;
  }

  .footer_top {
    width: calc(40% - 30px);
    margin-right: 30px;
  }

  .footer_lists {
    width: 60%;
    justify-content: space-around;
  }

  .footer_list {
    width: 35%;
  }

  .footer_list:first-child {
    margin-right: 0;
  }

  .footer_list h3 {
    padding: 0 0 20px;
  }

  .footer_top p {
    width: 80%;
    font-size: 18px;
    line-height: 22px;
    color: #787878;
  }

  footer li a {
    font-size: 18px;
    line-height: 22px;
    color: #787878;
  }

  /*********** PAGE AGENCE **********/
  header.nav_agence nav {
    top: calc(var(--gap-carousel) / 2);
    width: calc(100% - var(--gap-carousel) * 2);
  }

  header.nav_agence #menu-mobile-content {
    width: calc(100% - var(--gap-carousel) * 2);
    top: calc(var(--gap-carousel) / 2);
  }

  .horaires_title {
    font-size: 24px;
  }

  header.nav_agence .nav_services.hideonpc {
    display: flex;
    margin-left: 20px;
  }

  header.nav_agence .nav_fixed .container_logo .logo_name {
    display: block;
  }

  /* header.nav_agence .nav_fixed .nav_services {
    display: flex;
    margin-left: 20px;
  } */

  header nav .nav_services li:not(#showServices) {
    display: none;
  }

  .house_cs {
    width: 90px;
    margin: 0 auto;
  }

  .bloc_pc {
    display: flex;
  }

  .block_pc_content {
    width: calc(100% - var(--gap-carousel) * 2);
    margin: 0 auto;
    display: flex;
  }

  .block_pc_left {
    width: calc(50% - 40px);
    margin: 0 40px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    top: -20px;
  }

  .block_pc h1,
  .block_pc h2 {
    width: 100%;
    font-size: 35px;
  }

  .block_pc_icons {
    max-width: 340px;
    margin: 0 auto;
  }

  .block_pc_icon img {
    width: 50px;
  }

  .block_pc_icons > div {
    margin: 0 15px;
  }

  .flip-text {
    font-size: 14px;
  }

  .phone_agence {
    bottom: -48px;
    left: -50px;
    font-size: 20px;
  }

  .block_pc_right {
    width: 50%;
    transform: scale(0.9);
    transform-origin: center left;
  }

  #icon-phone img {
    cursor: default;
  }

  .hero_orga {
    margin-top: 36px;
  }

  .address {
    display: flex;
    padding: 40px 0 0;
    width: calc(100% - var(--gap-carousel) * 2);
    margin: 0 auto;
    position: relative;
  }

  .address.bottom {
    align-items: flex-end;
  }

  .address h4 {
    margin: 30px 0;
  }

  .address__left {
    margin: 0;
    position: relative;
    padding: 0;
  }

  .address .address__left .background_cyan > div:first-child {
    padding: 0;
  }

  .address > div a.link_blue {
    color: #16dedd;
  }

  a.link_blue {
    color: #16dedd;
  }

  .address__left small {
    text-align: end;
  }

  .block_radius_bottom.address {
    display: none;
  }

  .address__left.fixed {
    position: fixed;
    top: 80px;
    z-index: 10;
    transition: none;
  }

  .background_grey {
    background-color: #fff;
  }

  .background_cyan {
    background-color: #fff;
  }

  .address__left-placeholder {
    display: none;
  }

  .address__left.fixed + .address__left-placeholder {
    display: block;
    width: calc(50% - 40px);
    margin: 0 40px 0 0;
    height: auto;
    min-height: 1px;
    visibility: hidden;
  }

  .address__left.absolute {
    position: absolute;
    z-index: 10;
  }

  .address .address__left .background_cyan > div {
    margin: 0;
    width: 100%;
  }

  .address .welcome {
    width: 50%;
  }

  .address .welcome_content {
    width: 100%;
  }

  .address > div:first-child {
    width: calc(50% - 40px);
    margin: 22px 40px 0 0;
  }

  .address > .lazy div h3 {
    text-align: end;
    padding: 10px 0;
    margin: 15px 0 0;
  }

  .address > .lazy div h3::first-child {
    margin: 0;
  }

  .address .lazy div p {
    text-align: end;
  }

  .address > div > div {
    margin: 0;
  }

  .address .welcome h3 {
    color: #16dedd;
    font-family: "Agbalumo", sans-serif;
    font-size: 35px;
    padding: 0;
  }

  .address .welcome_content > p {
    margin: 0 0 20px;
  }

  .block_btn_avis {
    margin: 0;
  }

  .list_avis .avis {
    width: 100%;
    margin: 0;
  }

  .list_cities.open {
    max-width: 100%;
  }

  .services_list {
    padding: 0;
  }

  .services_list > ul {
    width: calc(100% - var(--gap-carousel) * 2);
    margin: 0 auto;
  }

  .cities {
    margin: 50px auto;
    padding: 45px 0;
    width: calc(100% - var(--gap-carousel) * 2);
    border-radius: 90px;
  }

  .list_cities {
    padding: 10px 19px;
    max-width: var(--max-width-cities);
    margin: 0 auto;
  }

  .list_cities button {
    height: 52px;
  }

  .list_cities.open {
    padding: 10px 48px;
  }

  .questions div h3 span {
    max-width: 80%;
  }

  .questions_title {
    position: relative;
    width: calc(100% - var(--gap-carousel) * 2);
    margin: 50px auto 0;
  }

  .questions_title h2 {
    color: #16dedd;
    font-size: 40px;
    padding: 0;
    margin: 0 32px 30px;
  }

  .questions_title > img {
    width: 150px;
    position: absolute;
    bottom: -100px;
    right: 100px;
    border-radius: 30px;
    z-index: 3;
  }

  .questions div h3 span {
    top: 0;
  }

  .questions {
    width: calc(100% - var(--gap-carousel) * 2);
    margin: 0 auto 60px;
    border-radius: 90px;
    padding: 45px;
    background-color: #f9f9f9;
  }

  .questions > div {
    height: 90px;
    width: fit-content;
    border: none;
    /* background-color: #f5f5f5; */
    margin: 0;
    max-width: 100%;
    width: 100%;
  }

  .questions > div:not(:last-child) {
    margin: 0 0 40px;
  }

  .questions > div:first-child {
    width: 66%;
  }

  .questions > div h3 {
    position: relative;
    font-size: 20px;
    padding: 30px 20px 30px 35px;
    margin-bottom: 20px;
  }

  .questions div.open h3 {
    margin-bottom: 0;
  }

  .questions div h3 svg {
    position: absolute;
    width: 40px;
    height: 40px;
    right: 35px;
    top: 24px;
  }

  .questions > div.open {
    height: fit-content;
  }

  .questions > div.open h3 svg {
    top: 27px;
  }

  .services_image {
    /* margin-left: var(--gap-carousel); */
    overflow-x: auto;
    white-space: nowrap;
    padding: 20px 0 0 var(--gap-carousel);
  }

  .services_image {
    scrollbar-width: thin;
    /* Pour Firefox */
    scrollbar-color: rgba(0, 0, 0, 0.3) #f0f0f0;
    /* Pour Firefox */
  }

  /* Pour Chrome, Edge, Safari (WebKit) */
  .services_image::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  .services_image::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 10px;
  }

  .services_image::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border: 2px solid #f0f0f0;
    /* Pour créer un peu d'espace autour */
  }

  .services_image::-webkit-scrollbar-thumb:hover {
    background-color: #e55a00;
  }

  .box_services {
    position: relative;
    display: inline-block;
    /* width: 30.35%; */
    /* width: calc(80vw - var(--gap-carousel)); */
    width: calc(100% * 0.301);
    margin: 0 20px 0 0;
    height: auto;
    perspective: 1200px;
    /* clé pour l'effet 3D */
    transform-style: preserve-3d;
    overflow: visible;
    /* width: calc((80vw - 3 * var(--gap-carousel) - 2 * 63px) / 3); */
    width: calc((100% - var(--gap-carousel) * 2 - 24px) / 3);
  }

  .box_services_title {
    justify-content: space-between;
    height: 440px;
    border-radius: 50px;
    padding: 40px 0;
    background-size: 900px;
    background-position: bottom right;
    backface-visibility: hidden;
    transition:
      transform 0.8s ease,
      opacity 0.8s ease;
    transform-style: preserve-3d;
    margin: 20px 0;
    cursor: auto;
  }

  .flipped_card {
    cursor: pointer;
  }

  .box_services_title h2 {
    font-size: 38px;
    white-space: wrap;
  }

  .box_services_title img {
    position: relative;
    top: 20px;
    left: 20px;
    width: 45px;
  }

  .box_services_content {
    margin: 20px 0;
    cursor: pointer;
    padding: 40px 20px;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 440px;
    border-radius: 50px;
    backface-visibility: hidden;
    transition:
      transform 0.8s ease,
      opacity 0.8s ease;
    transform-style: preserve-3d;
    transform: rotateY(180deg);
    opacity: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .box_services.flipped .box_services_title {
    transform: rotateY(180deg);
    opacity: 0;
    z-index: 1;
  }

  .box_services.flipped .box_services_content {
    transform: rotateY(0deg);
    opacity: 1;
    z-index: 2;
  }

  .box_services_content > div:first-child {
    max-height: 300px;
    overflow-y: auto;
    padding: 10px 0 0;
  }

  .box_services_content p {
    width: 100%;
    color: #fff;
    white-space: normal;
    /* font-size: 18px; */
    line-height: 1.5em;
    padding: 0 10px 20px 10px;
  }

  .box_services_content_buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .box_services_content_buttons > button {
    cursor: pointer;
    background-color: #fff;
    font-size: 16px;
    padding: 0 15px;
    font-weight: bold;
    border-radius: 50px;
    position: relative;
    top: 20px;
    right: 10px;
    margin: 0;
    height: 45px;
  }

  .box_services_content_buttons img {
    width: 45px;
    transform: rotate(45deg);
    position: relative;
    top: 20px;
  }

  .text {
    /* width: calc(100% - var(--gap-carousel) * 2 - 48px);
    margin: 20px auto; */
  }

  .content_bh {
    width: calc(100% - var(--gap-carousel) * 2 - 48px);
    margin: 20px auto;
  }

  .text h2 {
    font-size: 45px;
    padding: 0;
  }

  .text p {
    max-width: 70%;
    color: #767676;
    padding: 0 0 20px;
  }

  .emploi h2 {
    font-size: 45px;
  }

  .block_marketing.franchise {
    padding-left: calc(var(--gap-carousel) + 24px);
    padding-right: calc(var(--gap-carousel) + 24px) !important;
  }

  /* .box_marketing.franchise:first-child {
    margin: 0 20px 0 cacl(var(--gap-carousel) -24px);
  } */

  .box_marketing.link[data-numner-annonce="0"] {
    justify-content: center;
    width: calc(100% - var(--gap-carousel) * 2 + 19px);
    margin: 0;
  }

  .box_marketing.link[data-numner-annonce="0"] h3 {
    font-size: 40px;
    margin-left: 8vw;
  }

  .box_marketing.link[data-numner-annonce="0"] button {
    margin-left: 8vw;
    padding: 12px 20px;
  }

  .box_marketing.link[data-numner-annonce="1"] {
    width: calc((100% - var(--gap-carousel) * 2 + 19px) - 269px);
    background-image: url(https://centreservicesdev.fr/assets/img/femme-de-menage-large-1.jpg);
    margin: 0;
  }

  .box_marketing.link[data-numner-annonce="1"] {
    justify-content: center;
    align-items: flex-start;
    background-position: top;
  }

  .box_marketing.link[data-numner-annonce="1"] h3 {
    font-size: 35px;
  }

  .box_marketing.link[data-numner-annonce="1"] button {
    padding: 12px 20px;
    width: fit-content;
  }

  .box_marketing.link[data-numner-annonce="2"] {
    justify-content: center;
    align-self: start;
    min-height: 544px;
  }

  .box_marketing.link[data-numner-annonce="2"] h3 {
    font-size: 35px;
    margin-left: 2vw;
  }

  .box_marketing.link[data-numner-annonce="2"] button {
    margin-left: 2vw;
    padding: 12px 20px;
    width: fit-content;
  }

  /************** VILLE COUVERTE ***************************/
  .covered_city_hero {
    width: 100%;
    flex-direction: row;
    justify-content: center;
  }

  .breadcrumb {
    padding: calc(var(--gap-carousel) + 80px) 0 0 6vw;
    text-align: start;
  }

  .covered_city_left {
    position: relative;
    width: calc(50% - 64px);
    margin-right: 64px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    order: 1;
    background: none;
  }

  .coordinate {
    margin: 0 0 24px 0;
    background: none;
  }

  .covered_city_title {
    order: 2;
    width: 50%;
    color: #fff;
    padding-bottom: 84px;
  }

  .covered_city_left .coordinate {
    position: absolute;
    right: 0;
    top: 72px;
    z-index: 3;
  }

  .coordinate_picture img {
    margin: 0 0 36px 0;
  }

  .coordinate_map {
    margin: 0;
  }

  #map-coordinate {
    margin: 0;
    min-height: 300px;
  }

  .coordinate {
    width: 94%;
    background-color: none;
    overflow: hidden;
  }

  .coordinate_address {
    background-color: #fff;
    padding: 50px;
    border: 1px solid #dadada;
    margin: 36px 0 0 0;
    border-radius: 28px;
  }

  .coordinate_address > div:not(:last-child) {
    width: 100%;
    margin: 0 0 40px;
    padding-top: 0;
  }

  .coordinate_address h3 {
    text-align: end;
    margin: 0 0 10px;
  }

  .coordinate_address p {
    text-align: end;
  }

  .covered_city_title h1 {
    text-align: start;
    font-size: 50px;
    line-height: 1;
    margin: 65px 0 0;
  }

  .covered_city_average {
    justify-content: flex-start;
    margin: 0;
  }

  .covered_city_average > div {
    font-size: 18px;
    font-weight: bold;
  }

  .content_average {
    margin: 0 10px;
  }

  .google_white {
    width: 30px;
  }

  .covered_city_hero .block_btn_devis {
    display: flex;
    align-items: flex-start;
  }

  .covered_city_hero .block_btn_devis button {
    background: #00ccff;
    border: 2px solid #fff;
    margin: 0;
  }

  .covered_city_car {
    width: 100%;
    justify-content: flex-start;
    left: 0;
    bottom: -84px;
    z-index: 2;
  }

  .covered_city_car.animate_car {
    animation: move-car-cs 8s linear forwards;
  }

  .covered_city_car p {
    font-size: 18px;
    font-style: itablic;
  }

  .car_cs {
    width: 85px;
    margin-left: 15px;
  }

  @keyframes move-car-cs {
    0% {
      left: 0;
    }

    35% {
      left: 600px;
      opacity: 1;
    }

    40% {
      left: 550px;
      opacity: 0;
    }

    50% {
      left: -1000px;
      opacity: 0;
    }

    52% {
      left: -1000px;
      opacity: 1;
    }

    54% {
      left: -900px;
    }

    100% {
      left: 0px;
    }
  }

  .intervene {
    display: flex;
  }

  .intervene h2 {
    padding: 0;
    font-size: 40px;
    line-height: 1.1;
    margin: 80px 0 20px;
    text-align: start;
  }

  .intervene_left {
    width: calc(50% - 40px);
    margin: 0 40px 0 0;
  }

  .intervene_right {
    width: 50%;
  }

  .intervene_content {
    padding: 0;
    max-width: 90%;
    text-align: left !important;
  }

  .intervene_content p {
    font-size: 16px;
  }

  .intervention_area_content {
    padding: 0 70px;
  }

  .intervention_area {
    margin: 150px auto 0;
    padding: 45px 0;
    width: calc(100% - var(--gap-carousel) * 2);
    border-radius: 90px;
  }

  .containerSectionPromoBandeau {
    margin: 0 auto 0;
    padding: 0;
    width: calc(100% - var(--gap-carousel) * 2);
    margin-top: calc(var(--gap-carousel) + 50px);
  }

  .intervention_area h2 {
    font-size: 40px;
    line-height: 1.1;
  }

  #toggleCitiesInterventionArea {
    height: 52px;
  }

  .block_4_icones h2 {
    font-size: 40px;
    text-align: center;
    padding: 0;
    margin: 40px 0;
  }

  .actu {
    margin-top: 5vw;
    background-color: #fff;
    padding: 0;
  }

  .actu h2 {
    font-size: 40px;
  }

  .functioning h2 {
    font-size: 40px;
  }

  .actu_list {
    position: relative;
    display: flex;
    width: calc(100% - var(--gap-carousel) * 2);
    /* background-color: #ccf2f2; */
    border-radius: 90px;
    align-items: stretch;
    justify-content: center;
    gap: 20px;
    /* height: 370px; */
    margin: 0 auto 100px;
  }

  .actu_list .abs {
    position: absolute;
    width: 100%;
    height: 75%;
    background-color: #ccf2f2;
    /* background-color: red; */
    border-radius: 90px;
    top: 27%;
  }

  .actu_list_item {
    position: initial;
    /* height: var(--article-height); */
    width: calc(31% - 20px);
    /* position: relative;
    bottom: 165px;
    min-height: 441px; */
  }

  .actu_list_item:last-child {
    margin: 40px 0;
  }

  .block_6_icones .group_info > div {
    width: 30%;
  }

  .block_6_icones .line,
  .block_6_icones .line_2 {
    width: 70vw !important;
    left: 15vw;
    top: 92px;
  }

  .block_6_icones .line_2 {
    top: 415px;
  }

  .block_6_icones .line_3 {
    display: none;
  }

  /************** VILLE NON COUVERTE ***************************/
  .breadcrumb p {
    margin-top: 12px;
    justify-content: flex-start;
  }

  .uncovered_city_hero_pc {
    background-color: #00ccff;
    display: flex;
    justify-content: center;
    padding: 125px 0 50px;
  }

  .uncovered_city_hero {
    width: calc(50% - 80px);
    margin: 0 40px 0 0;
  }

  .uncovered_city_hero_pc .background_grey {
    background-color: inherit;
  }

  .uncovered_city_hero {
    background-color: inherit;
    padding: 0;
  }

  .uncovered_city_hero h2 {
    margin: 40px 0;
    padding: 0;
    line-height: 1;
    font-size: 40px;
  }

  .no-service-area {
    width: 50%;
  }

  .no-service-area h2 {
    width: 85%;
    text-align: start;
    color: #fff;
    margin: 40px 0;
    padding: 0;
    line-height: 1;
  }

  .no-service-area p {
    width: 85%;
    margin: 20px 0;
    color: #fff !important;
    font-size: 20px;
  }

  .no-service-area .group_button {
    align-items: flex-start;
    margin: 40px 0 0;
  }

  .no-service-area .group_button > button {
    background-color: #00ccff;
    border: 3px solid #fff;
  }

  .reseaux {
    background-color: #f6f6f6;
    padding: 40px 0 40px;
    border-radius: 60px;
  }

  .reseaux:not(.modal) {
    width: calc(100% - var(--gap-carousel) * 2);
    margin: 50px auto 0;
  }

  .reseaux h2 {
    font-size: 40px;
  }

  .facebook,
  .instagram {
    width: 80px;
    height: 80px;
  }

  .facebook {
    margin: 0 50px 0 0;
  }

  .covered_city .block_4_icones.agence {
    margin-top: 20vw;
  }

  /************* MODALE DE CONTACT n***********/
  #modal-form-contact-container:has(#loader-modal) .form_contact_header,
  #modal-form-contact-container:has(.treatment) .form_contact_header {
    display: block;
  }

  #modal-form-contact-container:has(#loader-modal) main {
    width: 60%;
  }
}

@media (min-width: 800px) {
  .block_4_icones.agence {
    width: calc(100% - var(--gap-carousel) * 2);
  }

  .block_4_icones.agence .group_info {
    flex-wrap: nowrap;
  }
}

@media (min-width: 820px) {
  header .nav_fixed .container_logo .logo_name {
    display: block;
  }

  .block_4_icones_dom .group div {
    width: 30%;
  }

  header nav.nav_fixed ul li.job a {
    font-size: 16px;
  }
}

@media (min-width: 820px) {
  .box_marketing.link[data-numner-annonce="1"] h3 {
    margin-left: 4vw;
  }

  .box_marketing.link[data-numner-annonce="1"] button {
    margin-left: 4vw;
  }

  .box_marketing.link[data-numner-annonce="2"] {
    width: calc((100% - var(--gap-carousel) * 2 + 19px) - 538px);
    margin: 0;
  }
}

@media (min-width: 890px) {
  .covered_city .block_4_icones.agence {
    margin-top: 27vw;
  }
}

@media (min-width: 900px) {
  .intervention_area {
    margin: 270px auto 0;
  }
}

@media (min-width: 980px) {
  header.nav_agence .nav_services.hideonpc {
    display: none;
  }

  header.nav_agence .nav_services:not(.hideonpc) {
    display: flex;
    margin-left: 10px;
  }

  header.nav_agence nav .nav_services li:not(#showServices) {
    display: block;
  }

  header.nav_agence nav .nav_services li {
    margin: 0 10px;
  }

  .covered_city .block_4_icones.agence {
    margin-top: 30vw;
  }
}

@media (min-width: 1000px) and (orientation: portrait) {
  .slide_tilte button {
    width: 350px;
    font-size: 24px;
  }

  .slide_tilte button span:first-child {
    left: 10px;
  }

  .slide h3 {
    font-size: 1.9em;
    line-height: 1em;
  }
}

@media (min-width: 1024px) {
  /* Affichage au hover */
  .block_pc_icons > div:last-child:hover .phone_line,
  .block_pc_icons > div:last-child:hover .phone_agence {
    display: block;
  }

  .block_pc_icons > div:last-child:hover .icon-text.phone {
    visibility: hidden;
  }

  /* Animation de la bordure */
  .block_pc_icons > div:last-child:hover .phone_agence::before {
    animation: border-sequence 0.7s ease-out forwards;
  }

  /* Animation du trait */
  .block_pc_icons > div:last-child:hover .phone_line {
    animation: line-down 0.3s ease-out forwards;
  }

  .slide h3 {
    margin-bottom: 42px;
  }

  .box_marketing:not(.franchise) {
    /* width: calc((100% - var(--gap-carousel) * 2 - 40px) / 4); */
    width: calc((100% - var(--gap-carousel) - 60px) / 4);
    min-width: auto;
  }

  .emploi > h2 {
    margin: 0;
  }

  .emploi > p {
    padding: 0;
    margin-bottom: 20px;
  }

  .block_marketing:not(.franchise) {
    margin: 30px 0 0;
    padding-right: 0;
    margin: 50px auto 50px var(--gap-carousel);
  }

  .box_marketing {
    min-height: 420px;
    padding: 30px;
  }

  .box_marketing:first-child {
    margin: 0 20px 0 0;
  }

  .box_marketing.franchise:nth-child(1) {
    margin: 0 20px 0 calc(var(--gap-carousel) + 4px);
  }

  /* .box_marketing.franchise:nth-child(5) {
    margin: 0 20px 0 0;
  } */

  .box_marketing.green {
    margin-right: 20px;
  }

  .box_marketing.yellow {
    margin-right: 20px;
  }

  .box_marketing hr {
    margin: 30px 0;
  }

  .box_marketing h2 {
    padding: 0;
    font-size: 40px;
  }

  .box_marketing h3 {
    font-size: 20px;
  }

  .box_marketing button,
  .box_marketing button a {
    font-size: 18px;
  }

  .box_marketing.link[data-numner-annonce="0"] {
    width: calc((100% - var(--gap-carousel)));
    background-image: url(https://centreservicesdev.fr/assets/img/femme-de-menage-large-1.jpg);
  }

  .box_marketing.link[data-numner-annonce="1"] {
    width: calc(((100% - var(--gap-carousel)) / 4) * 3);
    background-image: url(https://centreservicesdev.fr/assets/img/femme-de-menage-large-1.jpg);
    margin: 0 25px 0 0;
  }

  .box_marketing.link[data-numner-annonce="2"] {
    width: calc((100% - var(--gap-carousel)) / 2 - 10px);
    background-image: url(https://centreservicesdev.fr/assets/img/femme-de-menage-medium-1.jpg);
    margin: 0 20px 0 0;
    background-position: top;
  }

  .box_marketing.link[data-numner-annonce="1"] h3 {
    font-size: 40px;
    margin-left: 8vw;
  }

  .box_marketing.link[data-numner-annonce="1"] button {
    margin-left: 8vw;
  }

  .box_services_title h2 {
    font-size: 48px;
  }

  .questions > div:first-child {
    width: 75%;
  }

  .actu_list {
    margin: 50px auto 100px;
  }
}

@media (min-width: 1081px) {
  #maquettes_pc {
    display: block;
  }
}

@media screen and (min-width: 1100px) {
  .intervention_area {
    margin: 350px auto 0;
  }

  .slide {
    height: 80vh;
  }

  .br {
    display: none;
  }
}

@media screen and (min-width: 1200px) {
  :root {
    --gap-carousel: 48px;
  }

  header .nav_services.hideonpc {
    margin-left: 10px;
  }

  header nav {
    height: 84px;
    padding: 21px;
    border-radius: 70px;
  }

  #header-icon {
    display: none;
  }

  header nav ul li.devis span:last-child {
    position: relative;
    bottom: 2px;
  }

  header .nav_fixed .devis {
    order: 2;
    padding: 5px 20px 5px 10px;
    /* background: linear-gradient(90deg, #00bfff 10%, #0081ff 90%, #0081ff); */
    font-size: 16px;
    font-weight: 700;
    margin: 0;
  }

  header .nav_fixed .back_menu_devis,
  header .nav_fixed .back_menu_job {
    display: block;
  }

  header nav.nav_fixed .job {
    background-color: #fff;
    color: #2e2f7a;
    padding: 0;
    margin-right: 28px;
  }

  header.nav_agence nav.nav_fixed .job {
    /* margin-right: 28px; */
  }

  header nav.nav_fixed ul li.job a {
    color: #2e2f7a;
    font-size: 16px;
  }

  header .container_logo {
    margin-right: 12px;
  }

  header .nav_services {
    display: flex;
    flex: 1;
    height: 38px;
    overflow: hidden;
  }

  header .nav_buttons {
    display: flex;
  }

  .back_menu_job {
    display: inline-block;
  }

  header nav:not(.nav_fixed) ul li.job a {
    position: relative;
    bottom: 8px;
  }

  header nav:not(.nav_fixed) ul li.job {
    display: block;
  }

  header nav:not(.nav_fixed) ul li.devis {
    position: initial;
  }

  header .nav_fixed {
    padding: 21px;
  }

  header .nav_fixed .container_logo .avatar {
    width: 42px;
    height: 53px;
  }

  header .nav_fixed .container_logo .copyright {
    width: 42px;
    height: 53px;
  }

  header .nav_fixed .container_logo .logo_name {
    height: 53px;
  }

  header.nav_agence .nav_services.hideonpc {
    margin-left: 0;
  }

  header.nav_agence .nav_fixed .nav_services {
    margin-left: 10px;
  }

  header nav .nav_services li:not(#showServices) {
    display: block;
  }

  header.nav_agence nav .nav_services li {
    margin: 0 10px;
  }

  header .nav_fixed .back_menu_job {
    margin-right: 13px;
  }

  .bulle_tablet {
    display: none;
  }

  #slide50 {
    background-image: url("https://centreservicesdev.fr/assets/img/services/slider-50-pc.jpg");
  }

  #slide1 {
    background-image: url("https://centreservicesdev.fr/assets/img/services/slider-1-pc.jpg");
  }

  #slide2 {
    background-image: url("https://centreservicesdev.fr/assets/img/services/slider-2-pc.jpg");
  }

  #slide3 {
    background-image: url("https://centreservicesdev.fr/assets/img/services/slider-3-pc.jpg");
  }

  #slide4 {
    background-image: url("https://centreservicesdev.fr/assets/img/services/slider-4-pc.jpg");
  }

  #slide5 {
    background-image: url("https://centreservicesdev.fr/assets/img/services/slider-2-pc.jpg");
  }

  #slide8 {
    background-image: url("https://centreservicesdev.fr/assets/img/services/slider-8-pc.jpg");
  }

  .img_bulle_tablette {
    display: none;
  }

  .slider-nav button,
  .img_prev,
  .img_next {
    height: 84px;
    width: 84px;
  }

  .container_logo .copyright {
    width: 42px;
    height: 53px;
  }

  .container_logo .avatar {
    margin-right: 10px;
    width: 42px;
    height: 53px;
  }

  .container_logo .logo_name {
    height: 53px;
  }

  .slider-dots {
    bottom: 55px;
  }

  .slide {
    border-radius: 90px;
  }

  .slide h3 {
    /* margin: 0 36px; */
    font-size: 2.1em;
    width: 100%;
    line-height: 0.8em;
    left: 0;
    margin-left: 15px;
  }

  .slide_tilte {
    margin-top: 36px;
    margin-left: 0;
    padding: 0px 49px;
  }

  .slide_tilte button {
    /* margin-top: 30px; */
    left: auto;
  }

  .slide_tilte p {
    /* width: 100%; */
    margin: 22px 36px 0;
  }

  h2.h2 {
    font-size: 40px;
    padding: 0 0 calc(var(--gap-carousel) / 2);
    padding: 0 0 var(--gap-carousel);
  }

  .block_4_icones {
    padding: calc(var(--gap-carousel) * 2) var(--gap-carousel);
    border-radius: 90px;
  }

  .block_function {
    padding: calc(var(--gap-carousel) * 2) var(--gap-carousel);
    margin: 0;
  }

  .block_function .group_info > div,
  .block_function .group_info > div:last-child {
    width: 20%;
  }

  .block_4_icones_dom {
    padding: calc(var(--gap-carousel) * 2) var(--gap-carousel);
    border-radius: 90px;
  }

  .block_4_icones_dom .group div {
    width: 16%;
  }

  .block_4_icones_dom h3 {
    font-size: 16px;
  }

  .block_list {
    padding: calc(var(--gap-carousel) * 2) var(--gap-carousel);
  }

  .block_list h2 img {
    width: 60px;
    height: 60px;
  }

  .block_list ul {
    display: grid;
    grid-template-columns: repeat(3, 2fr);
  }

  .block_list ul li {
    font-size: 18px;
    padding: 15px 0;
  }

  .block_list ul li img {
    width: 35px;
    height: 35px;
  }

  .block_google {
    width: calc(80vw - var(--gap-carousel));
    margin: 0 auto;
    border-radius: 90px;
    display: flex;
    align-items: center;
    padding: calc(var(--gap-carousel) * 2) var(--gap-carousel);
  }

  .block_google .block_google_text {
    width: 33%;
  }

  .block_google .block_google_text > p {
    border: none;
  }

  .block_google .block_stars {
    width: 33%;
    padding: 10px 0;
  }

  .block_google .block_stars p {
    padding: 0;
    margin: 0 auto;
  }

  .block_values {
    padding: calc(var(--gap-carousel) * 2) var(--gap-carousel);
  }

  .block_avis {
    padding: calc(var(--gap-carousel) * 2) var(--gap-carousel);
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 90px;
  }

  .block_avis .avis {
    margin: 20px 0;
    width: fit-content;
    min-width: 810px;
    max-width: 810px;
    align-items: center;
    padding: 40px 0;
  }

  .block_avis .avis_content {
    max-width: 700px;
  }

  .avis p {
    font-size: 16px;
  }

  .avis_name p {
    font-size: 18px;
  }

  .block_avis .stars {
    top: 10%;
  }

  .logo_google {
    width: 22px;
  }

  .block_avis .star {
    width: 18px;
  }

  .block_avis .see_more {
    cursor: pointer;
    display: block;
    padding: 10px 20px;
    background: #00bfff;
    color: #fff;
    font-size: 16px;
    border: none;
    border-radius: 10px;
    margin-top: 20px;
  }

  .group_info {
    flex-wrap: nowrap;
  }

  .group_info > div {
    width: 25%;
    margin: 0;
  }

  .group_info > div p {
    font-size: 16px;
  }

  .letter_cercle {
    width: 80px;
    height: 80px;
  }

  .footer_bottom p {
    font-size: 14px;
  }

  /**********PAGE AGENCE ********/
  .house_cs {
    width: 100px;
  }

  .hero_orga > h2 {
    font-size: 45px;
  }

  .block_pc {
    padding: calc(var(--gap-carousel) * 2 + 48px) 50px 80px;
    display: flex;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .block_pc_content {
    width: calc(80vw - 3 * var(--gap-carousel));
    margin: 0 auto;
    display: flex;
  }

  .block_pc_left {
    width: calc(50% - 80px);
    margin: 0 80px 0 0;
  }

  .box_services {
    width: calc((100% - var(--gap-carousel) * 2) / 3);
  }

  .questions > div:first-child {
    width: 77%;
  }

  .box_marketing.link[data-numner-annonce="2"] {
    width: calc((100% - var(--gap-carousel)) / 2);
    background-image: url(https://centreservicesdev.fr/assets/img/femme-de-menage-medium-1.jpg);
    margin: 0 20px 0 0;
  }

  .box_marketing.franchise {
    /* width: calc((100% - var(--gap-carousel) * 2 - 48px) / 4);
    width: calc((100% - var(--gap-carousel) - 60px) / 4); */
    /* flex: 0 0 calc((100% - 3 * 20px) / 4) */
    flex: 0 0 calc((100% - (4 - 1) * 50px) / 4);
  }

  .box_marketing.franchise:nth-child(1) {
    margin: 0 20px 0 0;
  }

  .block_6_icones .line {
    width: 82vw !important;
    margin: 0 auto;
    left: 10vw;
    top: 75px;
  }

  .block_6_icones .line_2 {
    display: none;
  }

  @keyframes move-car-cs {
    0% {
      left: 0;
    }

    35% {
      left: 800px;
      opacity: 1;
    }

    40% {
      left: 850px;
      opacity: 0;
    }

    50% {
      left: -1500px;
      opacity: 0;
    }

    52% {
      left: -1500px;
      opacity: 1;
    }

    54% {
      left: -1400px;
    }

    100% {
      left: 0px;
    }
  }

  .intervention_area {
    margin: 420px auto 0;
  }

  .actu_list {
    /* margin: 260px auto 0; */
  }

  .actu_list_item {
    /* min-height: 485px; */
    padding-bottom: 20px;
  }

  /************** VILLE NON COUVERTE ***************************/
  .uncovered_city_hero_pc {
    padding: 200px 0 50px;
  }

  .covered_city .block_4_icones.agence {
    margin-top: 28vw;
  }
}

@media screen and (min-width: 1300px) {
  .slide h3 {
    margin-left: 0;
  }
}

@media screen and (min-width: 1400px) {
  .intervention_area {
    margin: 500px auto 0;
  }
}

@media screen and (min-width: 1550px) {
  header nav .nav_services li {
    margin: 0 10px;
  }
}

@media screen and (min-width: 1600px) {
  footer {
    width: calc(80vw - 3 * var(--gap-carousel));
    margin: var(--gap-carousel) auto 0;
    display: flex;
    flex-wrap: wrap;
    padding: 50px 0;
  }

  footer h3 {
    font-weight: 500;
    font-size: 26px;
    white-space: nowrap;
  }

  .footer_top {
    width: calc(40% - 30px);
    margin-right: 30px;
  }

  .footer_lists {
    width: 60%;
    justify-content: space-around;
  }

  .footer_list {
    width: 35%;
  }

  .footer_list:first-child {
    margin-right: 0;
  }

  .footer_list h3 {
    padding: 0 0 20px;
  }

  .footer_top p {
    width: 80%;
    font-size: 22px;
    line-height: 34px;
    color: #787878;
  }

  footer li a {
    font-size: 22px;
    line-height: 34px;
    color: #787878;
  }

  .hide_pc {
    display: none;
  }

  .font_m {
    font-size: 18px;
    line-height: 1.5em;
  }

  .font_l {
    font-size: 20px;
  }

  .hide_mobile_tablet {
    display: block;
  }

  header .nav_services {
    overflow: initial;
  }

  .group_info > div h3,
  .group_info > div p {
    max-width: 160px;
  }

  .slide_tilte {
    padding: 0px 96px;
  }

  .slide_tilte button {
    /* width: 100%; */
    height: 80px;
    left: 0;
    font-size: 28px;
  }

  .slide_tilte button span:first-child {
    width: 52px;
    height: 52px;
    position: relative;
    left: -12px;
  }

  .slide h3 {
    font-size: 2.7em;
    width: 100%;
    margin-left: 0;
    margin-bottom: 52px;
  }

  .slide_tilte button span:last-child {
    left: auto;
  }

  .slide_tilte button span:first-child.animate_move_button {
    animation: move-arrow-button 1.5s infinite forwards;
  }

  .slide_tilte p {
    width: 100%;
    font-size: 16px;
    margin: 22px 0 0 0;
  }

  /********** PAGE AGENCE ************/
  header.nav_agence nav {
    width: calc(80vw - 3 * var(--gap-carousel));
  }

  .block_pc h1,
  .block_pc h2 {
    font-size: 70px;
    line-height: 66px;
    width: 100%;
  }

  .block_pc_icons {
    justify-content: center;
    margin: 10px auto 0;
  }

  .block_pc_icon img {
    width: 60px;
  }

  .phone_agence {
    position: absolute;
    /* display: none; */
    bottom: -57px;
    left: -71px;
    color: #fff;
    font-family: "Agbalumo", sans-serif;
    white-space: nowrap;
    padding: 2px 10px 8px 16px;
    font-size: 28px;
    z-index: 2;
    box-sizing: border-box;
  }

  /* Keyframes pour la descente du trait */
  @keyframes line-down {
    0% {
      height: 0;
    }

    100% {
      height: 30px;
    }
  }

  .block_pc_right {
    width: 50%;
    display: grid;
    grid-template-columns: repeat(12, var(--col-width));
    grid-template-rows: repeat(12, var(--col-width));
    transform: scale(0.9);
    transform-origin: center left;
  }

  .row_grid_1 {
    position: relative;
    grid-column: 3 / 6;
    grid-row: 2 / 5;
  }

  .row_grid_2 {
    position: relative;
    grid-column: 7 / 12;
    grid-row: 1 / 6;
    z-index: 2;
  }

  .row_grid_3 {
    position: relative;
    grid-column: 1 / 12;
    grid-row: 6 / 11;
  }

  .row_grid_3 img {
    width: calc(var(--col-width) * 11);
    height: calc(var(--col-width) * 7);
    border-radius: 30px;
  }

  /* Taille exacte des cartes */
  .row_grid_1 .flip-card {
    width: calc(var(--col-width) * 3);
    height: calc(var(--col-width) * 3);
  }

  .row_grid_2 .flip-card {
    width: calc(var(--col-width) * 6);
    height: calc(var(--col-width) * 6);
  }

  .row_grid_2 .flip-text img {
    width: 60px;
    height: 60px;
    margin: 10px auto;
  }

  .row_grid_3 .flip-card {
    width: calc(var(--col-width) * 11);
    height: calc(var(--col-width) * 7);
  }

  /* Flip card effect */
  .flip-card {
    perspective: 1000px;
  }

  .flip-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    border-radius: 30px;
  }

  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }

  .flip-card-front,
  .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 30px;
    top: 0;
    left: 0;
  }

  /* Face avant */
  .flip-card-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
  }

  /* Face arrière */
  .flip-card-back {
    background-color: #fff;
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .flip-text {
    font-size: 20px;
    text-align: center;
    padding: 15px;
    color: #000;
  }

  .flip-text.img {
    padding: 0;
  }

  .link_blue {
    color: #16dedd;
  }

  .address {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    padding: 80px 0 0;
    width: calc(80vw - 3 * var(--gap-carousel));
    margin: 0 auto;
    position: relative;
  }

  .address.bottom {
    align-items: flex-end;
  }

  .address__left {
    position: relative;
  }

  .address__left.fixed {
    position: fixed;
    top: 80px;
    z-index: 10;
    transition: none;
  }

  /* .address__left-placeholder {
  display: none;
} */

  .address__left.fixed + .address__left-placeholder {
    display: block;
    width: calc(50% - 80px);
    margin: 0 80px 0 0;
    height: auto;
    min-height: 1px;
    visibility: hidden;
  }

  .address__left.absolute {
    position: absolute;
    z-index: 10;
  }

  .address .address__left > div {
    margin: 0;
    width: 100%;
  }

  .address .welcome {
    width: 50%;
  }

  .address .welcome_content {
    width: 100%;
  }

  .address > div:first-child {
    width: calc(50% - 80px);
    margin: 40px 80px 0 0;
  }

  .address > .lazy div h3 {
    text-align: end;
    padding: 10px 0;
  }

  .address .lazy div p {
    text-align: end;
  }

  .address > div > div {
    margin: 0;
  }

  .address .welcome h3 {
    color: #16dedd;
    font-family: "Agbalumo", sans-serif;
    font-size: 60px;
  }

  .address .welcome_content > p {
    margin: 0 0 20px;
  }

  .address > div a.link_blue {
    color: #16dedd;
  }

  .block_btn_avis {
    /* justify-content: flex-start; */
    margin: 0;
  }

  .block_btn_avis button:first-child {
    padding: 5px 30px 5px 16px;
    height: auto;
  }

  .block_btn_avis.none button:first-child {
    padding: 5px;
  }

  .block_btn_avis .logo_google {
    margin-right: 15px;
  }

  .block_btn_avis .stars {
    margin: 0 15px 0 10px;
  }

  .block_btn_avis button:last-child {
    width: 65px;
    height: 65px;
  }

  .list_avis .avis {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    margin: 0;
  }

  .address__left.sticky-fixed {
    position: fixed;
    top: 20px;
    width: calc(50% - 80px);
    z-index: 10;
  }

  .address__left.sticky-absolute {
    position: absolute;
    bottom: 0;
    width: calc(50% - 80px);
  }

  .list_avis .avis.hide_avis {
    display: flex;
  }

  .list_avis .letter_cercle {
    margin: 0;
  }

  .list_avis .letter_cercle {
    width: 60px;
    height: 60px;
  }

  .separator_empty_cities {
    margin: 100px 0;
  }

  .cities {
    width: calc(80vw - var(--gap-carousel));
    margin: 80px auto;
    border-radius: 90px;
    padding: 80px 0;
  }

  .list_cities {
    padding: 10px 19px;
  }

  .cities h2 {
    font-size: 50px;
    padding: 0 0 20px;
    margin: 0 0 10px;
  }

  .list_cities {
    gap: 20px;
    margin: 0 auto;
  }

  .list_cities button {
    box-shadow: 3px 3px 3px #16dedd;
    color: #16dedd;
    font-size: 20px;
    padding: 14px 24px;
    height: 62px;
  }

  .list_cities button a {
    font-size: 20px;
  }

  .list_cities button.see_more_city {
    background-color: #16dedd;
    border: 2px solid #fff;
  }

  .list_cities button.see_more_city img,
  .list_cities button.see_less_city img {
    width: 30px;
  }

  .questions_title {
    position: relative;
    width: calc(80vw - 3 * var(--gap-carousel));
    margin: 0 auto;
  }

  .questions_title h2 {
    color: #16dedd;
    font-size: 60px;
    padding: 0;
    /* margin: 0 50px 30px 0; */
  }

  .questions > div:first-child {
    width: 73%;
  }

  .questions_title > img {
    width: 200px;
    position: absolute;
    bottom: -100px;
    right: 100px;
    border-radius: 30px;
  }

  .questions div h3 span {
    top: 0;
  }

  .questions {
    width: calc(80vw - var(--gap-carousel));
    margin: 0 auto 60px;
    border-radius: 90px;
    padding: 45px;
  }

  .questions > div {
    height: 90px;
    width: fit-content;
    border: none;
    margin: 0;
  }

  .questions > div:not(:last-child) {
    margin: 0 0 40px;
  }

  .questions > div h3 {
    position: relative;
    font-size: 25px;
    padding: 30px 20px 30px 35px;
    margin-bottom: 20px;
  }

  .questions div.open h3 {
    margin-bottom: 0;
  }

  .questions div h3 svg {
    position: absolute;
    width: 40px;
    height: 40px;
    right: 35px;
    /* top: 45px; */
  }

  .questions > div.open {
    height: fit-content;
    padding-bottom: 15px;
  }

  .services_image {
    /* margin-left: calc(10vw + var(--gap-carousel) * 1.5); */
    overflow-x: auto;
    white-space: nowrap;
    padding: 20px 0 0 calc(10vw + var(--gap-carousel) * 1.5);
  }

  .box_services {
    position: relative;
    display: inline-block;
    width: 30.35%;
    /* width: calc(80vw - var(--gap-carousel)); */
    /* width: calc(80vw - 3 * var(--gap-carousel)); */
    /* width: calc((80vw - var(--gap-carousel)) * 0.3035);. */
    width: calc((80vw - 3 * var(--gap-carousel) - 2 * 63px) / 3);

    margin: 0 60px 0 0;
    height: auto;
    perspective: 1200px;
    /* clé pour l'effet 3D */
    transform-style: preserve-3d;
    overflow: visible;
  }

  .box_services_title {
    justify-content: space-between;
    height: 520px;
    border-radius: 90px;
    padding: 40px 30px;
    background-size: 900px;
    background-position: bottom right;
    backface-visibility: hidden;
    transition:
      transform 0.8s ease,
      opacity 0.8s ease;
    transform-style: preserve-3d;
    margin: 20px 0;
  }

  .box_services_title img {
    position: relative;
    top: -3px;
    left: 10px;
    width: 80px;
  }

  .box_services_content {
    margin: 20px 0;
    cursor: pointer;
    padding: 40px;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 520px;
    border-radius: 90px;
    backface-visibility: hidden;
    transition:
      transform 0.8s ease,
      opacity 0.8s ease;
    transform-style: preserve-3d;
    transform: rotateY(180deg);
    opacity: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .box_services.flipped .box_services_title {
    transform: rotateY(180deg);
    opacity: 0;
    z-index: 1;
  }

  .box_services.flipped .box_services_content {
    transform: rotateY(0deg);
    opacity: 1;
    z-index: 2;
  }

  .box_services_content > div:first-child {
    max-height: 300px;
    overflow-y: auto;
    padding: 10px 0 0;
  }

  .box_services_content p {
    width: 100%;
    color: #fff;
    white-space: normal;
    /* font-size: 18px; */
    line-height: 1.5em;
    padding: 0 10px 20px 10px;
  }

  .box_services_content_buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    top: -5px;
  }

  .box_services_content_buttons > button {
    cursor: pointer;
    background-color: #fff;
    font-size: 24px;
    padding: 0 30px;
    font-weight: bold;
    border-radius: 50px;
    position: relative;
    top: 0;
    right: 10px;
    margin: 0;
    height: 64px;
    line-height: 0px;
  }

  .box_services_content_buttons > button a {
    /* font-size: 30px; */
  }

  .box_services_content_buttons img {
    width: 80px;
    transform: rotate(45deg);
    top: 0;
  }

  .text {
    width: calc(80vw - 3 * var(--gap-carousel));
    margin: 20px auto;
    /* width: calc(80vw - var(--gap-carousel));
    margin: 20px auto; */
  }

  .text h2 {
    color: #16dedd;
    font-size: 60px;
    padding: 0;
  }

  .text p {
    max-width: 70%;
    font-size: 20px;
    padding: 0 0 20px;
  }

  .emploi {
    /* width: calc(80vw - var(--gap-carousel));
    margin: 50px auto; */
    /* margin: 50px 0 50px calc(10vw + var(--gap-carousel) / 2); */
    margin: 50px 0;
  }

  .content_bh {
    width: calc(80vw - 3 * var(--gap-carousel));
    margin: 30px auto;
  }

  .emploi h2 {
    padding: 0;
    font-size: 60px;
  }

  .emploi > p {
    padding: 0;
    margin-bottom: 20px;
  }

  .block_marketing:not(.franchise) {
    margin: 50px 0 0 calc(10vw + var(--gap-carousel) * 1.5);
  }

  .block_marketing.franchise {
    padding: 50px 0 0 calc(10vw + var(--gap-carousel) * 1.5);
  }

  .box_marketing.franchise:nth-child(4) {
    margin: 0 50px 0 0;
  }

  .box_marketing:not(.franchise) {
    width: calc((80vw - 3 * var(--gap-carousel) - 3 * 51px) / 4);
    min-height: 500px;
  }

  .box_marketing h3 {
    white-space: wrap;
  }

  .box_marketing.franchise {
    flex: 0 0 calc((100% - 3 * 50px) / 4);
    flex: 0 0 calc(((80vw - 3 * var(--gap-carousel)) - (3 * 50px)) / 4);
    margin-right: 50px;
  }

  .box_marketing.franchise:nth-child(1) {
    margin: 0 50px 0 0;
  }

  .box_marketing:nth-child(1) {
    margin: 0 50px 0 0;
  }

  .box_marketing:nth-child(2) {
    margin-right: 50px;
  }

  .box_marketing:nth-child(3) {
    margin-right: 50px;
  }

  .box_marketing.franchise:last-child {
    margin-right: 0;
  }

  .box_marketing hr {
    margin: 30px 0;
  }

  .box_marketing h2 {
    padding: 0;
    font-size: 40px;
  }

  .box_marketing p {
    /* font-size: 18px; */
  }

  .box_marketing h3 {
    font-size: 20px;
  }

  .box_marketing button,
  .box_marketing button a {
    font-size: 18px;
  }

  .box_marketing.link[data-numner-annonce="0"] {
    width: calc(80vw - 3 * var(--gap-carousel));
  }

  .box_marketing.link[data-numner-annonce="1"] {
    width: calc(((80vw - 3 * var(--gap-carousel) - 20px) / 4) * 3);
    /* margin: 0 20px; */
  }

  .box_marketing.link[data-numner-annonce="2"] {
    width: calc(((80vw - 3 * var(--gap-carousel) - 3 * 16px) / 4) * 2);
    min-height: 684px;
  }

  .box_marketing.link[data-numner-annonce="2"] h3 {
    font-size: 40px;
    margin-left: 4vw;
  }

  .box_marketing.link[data-numner-annonce="2"] button {
    margin-left: 4vw;
  }

  .block_4_icones.agence {
    background-color: #fff;
  }

  .block_4_icones.agence h2 {
    font-size: 60px;
    margin-bottom: 20px;
  }

  .block_4_icones.agence .icon_cercle {
    width: 150px;
    height: 150px;
  }

  .block_4_icones.agence .group_info > div h3,
  .group_info > div p {
    font-size: 18px;
  }

  /************** VILLE COUVERTE ***************************/
  .breadcrumb {
    padding: calc(var(--gap-carousel) + 80px) 0 0
      calc(10vw + 1.5 * var(--gap-carousel) + 90px);
    z-index: 1;
    position: relative;
  }

  .breadcrumb a {
    font-size: 18px;
  }

  .coordinate {
    width: 64.6%;
  }

  #map-coordinate {
    width: 100%;
    height: 180px;
  }

  .covered_city_title h1 {
    font-size: 66px;
  }

  .covered_city_average .stars {
    margin: 40px 0;
  }

  .covered_city_average .star {
    width: 25px;
  }

  .covered_city_average > div {
    font-size: 25px;
  }

  .content_average {
    margin: 0 20px;
  }

  .google_white {
    width: 45px;
  }

  .covered_city_car {
    margin: 20px 0 0 0;
  }

  .covered_city_car.animate_car {
    animation: move-car-cs 8s linear forwards;
  }

  .covered_city_car p {
    font-size: 20px;
  }

  .car_cs {
    width: 100px;
  }

  .intervene h2 {
    font-size: 60px;
  }

  .intervene_content p {
    margin: 0 0 20px;
    max-width: 70%;
    font-size: 20px;
  }

  .intervention_area {
    width: calc(80vw - var(--gap-carousel));
    margin: calc(var(--gap-carousel) * 2 + 5vw) auto 0;
    border-radius: 90px;
    padding: 150px 0;
  }

  .containerSectionPromoBandeau {
    margin: 0 auto 0;
    padding: 0;
    width: calc(80vw - var(--gap-carousel));
    margin-top: 98px;
  }

  .intervention_area_img {
    width: 150px;
    top: -75px;
    left: calc(50% - 75px);
  }

  .intervention_area h2 {
    font-size: 60px;
    padding: 0 0 40px;
  }

  .intervention_area_content {
    max-width: 85%;
    margin: 0 auto;
  }

  #toggleCitiesInterventionArea {
    padding: 14px 24px;
    height: 62px;
    margin: 40px auto 0;
  }

  #toggleCitiesInterventionArea img {
    width: 30px;
  }

  .actu h2 {
    font-size: 60px;
  }

  .actu_list {
    width: calc(80vw - var(--gap-carousel));
    padding: 50px;
    margin: 20px auto 100px;
    /* height: 450px; */
    gap: 50px;
    /* margin: 240px auto 10vw; */
  }

  .actu_list .abs {
    height: 68%;
  }

  .actu_list_item {
    width: calc(34% - 20px);
    /* bottom: 245px; */
  }

  .actu_list_item h3 {
    font-size: 20px;
  }

  .actu_list_item button {
    padding: 10px 20px;
    border-radius: 50px;
  }

  .actu_list_item button a {
    font-size: 16px;
  }

  .functioning h2 {
    text-align: center;
    font-size: 60px;
    padding: 0;
    margin: 0;
    margin: calc(var(--gap-carousel) * 2) 0;
  }

  .block_6_icones .line {
    width: calc(80vw - var(--gap-carousel)) !important;
    margin: 0 auto;
    left: calc(10vw + var(--gap-carousel));
    top: 135px;
  }

  .block_6_icones .group_info > div {
    width: 15%;
  }

  .block_6_icones .group_info .number {
    font-size: 40px;
  }

  .block_6_icones .icon_cercle {
    width: 150px;
    height: 150px;
  }

  .covered_city_car.animate_car {
    animation: move-car-cs 8s ease-in-out forwards;
  }

  @keyframes move-car-cs {
    0% {
      left: 0;
    }

    30% {
      left: 1000px;
      opacity: 1;
    }

    35% {
      left: 1050px;
      opacity: 0;
    }

    40% {
      left: -1600px;
      opacity: 0;
    }

    42% {
      left: -1550px;
      opacity: 1;
    }

    100% {
      left: 0px;
    }
  }

  /************** VILLE NON COUVERTE ***************************/
  .uncovered_city_hero h2 {
    margin: 40px 0 40px 200px;
    font-size: 60px;
  }

  #form_uncovered_city {
    margin: 50px 0 20px 200px;
  }

  #form_uncovered_city p {
    font-size: 30px;
  }

  .no-service-area h2 {
    width: 75%;
    font-size: 45px;
  }

  .no-service-area p {
    width: 65%;
    font-size: 25px;
  }

  .form_select > div {
    width: 350px;
  }

  .form_select select {
    width: 100%;
    font-size: 30px;
    padding: 5px 45px 5px 15px;
  }

  .form_select > div::after {
    background-repeat: no-repeat;
    background-size: cover;
    width: 30px;
    height: 30px;
    top: 10px;
  }

  .input_icone > div {
    width: 350px;
  }

  .input_icone input {
    font-size: 20px;
  }

  .search {
    width: 35px;
    right: 52px;
  }

  .input_marker {
    width: 47px;
  }

  .reseaux:not(.modal) {
    margin: 80px auto 0;
    width: calc(80vw - var(--gap-carousel));
  }

  .reseaux h2 {
    font-size: 60px;
  }

  .facebook,
  .instagram {
    width: 100px;
    height: 100px;
  }

  .facebook {
    margin: 0 60px 0 0;
  }

  .covered_city .block_4_icones.agence {
    margin-top: 8vw;
  }
}

@media screen and (min-width: 1700px) {
  header .nav_services {
    display: flex;
    flex: 1;
  }

  .box_marketing.link[data-numner-annonce="2"] {
    min-height: 640px;
  }
}

@media screen and (min-width: 1800px) {
  header .container_logo {
    margin-right: 10px;
  }

  header nav .nav_services li {
    margin: 0 10px;
  }
}

@media screen and (min-width: 1900px) {
  .box_services_title h2 {
    font-size: 60px;
    white-space: wrap;
  }
}

@keyframes slide-right-left {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-3%);
  }

  100% {
    transform: translateX(0);
  }
}

/* Francois */
iframe {
  border-radius: 20px;
}
.c-white {
  color: #fff;
}

.market_bloc.ecologie {
  background: url("https://centreservicesdev.fr/assets/img/respect-environnement.jpg")
    no-repeat right center/cover;
  min-height: 60dvh;
  display: flex;
  align-items: center;
}
.market_bloc.ecologie > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  color: #fff;
  width: clamp(320px, 40%, 600px);
  padding: 0 0 0 min(5vw, 72px);
}
.market_bloc.ecologie h3 {
  font-family: Agbalumo;
  font-size: 3vw;
  line-height: 0.9em;
}
.market_bloc.ecologie span {
  font-family: Agbalumo;
  color: #fff300;
}
.market_bloc.ecologie p {
  width: 80%;
}
@media (max-width: 768px) {
  .market_bloc.ecologie {
    background: url("https://centreservicesdev.fr/assets/img/respect-environnement.jpg")
      no-repeat center/cover;
  }
  .market_bloc.ecologie h3 {
    font-size: 28px;
    line-height: 1.1em;
  }
  .market_bloc.ecologie > div {
    width: 90%;
    padding: 0;
  }
}

#tools_home_cs {
  position: fixed;
  top: 50%;
  right: 36px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 101;
  transition: all 0.5s;
}
#tools_home_cs .hover,
#tools_home_cs > div {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer !important;
}
#tools_home_cs .call_to_action_icon,
#tools_home_cs .call_to_action_icon a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: #fff;
  border-radius: 120px;
  border: 0 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
#tools_home_cs .call_to_action_icon img {
  width: 48px;
  height: 48px;
  display: block;
  border: 0 !important;
  cursor: pointer !important;
  padding: 0;
}
#tools_home_cs .icon-text {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 50px;
  white-space: nowrap;
  position: absolute;
  right: 62px;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.3s ease;
  pointer-events: none;
}
#tools_home_cs .hover:hover .icon-text,
#tools_home_cs > div:hover .icon-text {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
#tools_home_cs #icon-comment {
  background: #00e4df;
}
@media (max-width: 768px) {
  #tools_home_cs {
    gap: 0;
    position: fixed;
    top: auto;
    right: auto;
    bottom: 5vw;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 90vw;
    height: 64px;
    padding: 10px !important;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 9999px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.28s ease,
      transform 0.28s ease,
      visibility 0s linear 0.28s;
    will-change: opacity, transform;
    z-index: 101;
  }
  #tools_home_cs.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity 0.28s ease,
      transform 0.28s ease,
      visibility 0s;
  }
  #tools_home_cs .hover,
  #tools_home_cs > div {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: static;
  }
  #tools_home_cs .call_to_action_icon,
  #tools_home_cs .call_to_action_icon a {
    width: 36px;
    height: 36px;
    background: transparent;
    border-radius: 120px;
    border: 0 !important;
    position: relative; /*! top:-3px; */
    box-shadow: 0 0 0;
  }
  #tools_home_cs .hover {
    width: 20%;
    min-width: 20%;
  }
  #tools_home_cs .call_to_action_icon img {
    width: 32px;
    height: 32px;
    position: relative;
    top: -4px;
  }
  #tools_home_cs .icon-text {
    position: static;
    background: none;
    color: #333;
    font-size: 9px;
    padding: 0;
    border-radius: 0;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    margin-top: -8px !important;
  }
  #tools_home_cs #icon-comment {
    background: none;
  }
}

#logo_bottom_footer {
  position: absolute;
  bottom: 16px;
  text-align: center;
  width: 100%;
}
#logo_bottom_footer img {
  width: 160px;
  text-align: center;
  display: inline;
}

.init {
  background: #37dfdf;
  width: 100vw;
  height: 100dvh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

#animation_05 .line-back {
  position: absolute;
  width: 100vw;
  height: 100dvh;
  top: 0;
  left: 0;
  background-image: url(https://centreservicesdev.fr/assets/img/services/line-back-fr.png);
  background-size: 100%;
  background-position: right top;
  background-repeat: no-repeat;
}
#white_background:after {
  content: "";
  position: absolute;
  width: 300vw;
  height: 200vh;
  background: #f5f5f5;
  border-radius: 0;
  bottom: 0;
  left: -100vw;
  opacity: 1 !important;
  display: block !important;
}
#white_background {
  position: relative;
  min-height: 0 !important;
  gap: 0 !important;
  padding: 0;
  padding-bottom: 5vw;
  margin: 0 0 5vw 0;
  z-index: 0;
}
@media (max-width: 768px) {
  #white_background {
    display: none;
  }
}
#facture_divisee_2 {
  background-color: #fff;
  background-image: url(https://centreservicesdev.fr/assets/img/famille_heureuse.jpg);
  background-repeat: no-repeat;
  background-position: center left;
  background-size: cover;
  color: #fff;
}
#ouvrir_agence {
  background-color: #fff;
  background-image: url(https://franchise.centreservices.fr/assets/img/flotaison-01.jpeg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #fff;
}
#reservation_en_ligne {
  background-color: #fff;
  background-image: url(https://centreservicesdev.fr/assets/img/reservation.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  color: #fff;
}

#animation_05 {
  z-index: 100;
  height: 110dvh;
  padding: 0 5vw;
  position: relative;
}
#animation_05 sup {
  font-size: 0.5em;
}
#animation_05 h2 {
  line-height: 1em;
  margin-bottom: 10px;
  color: #243da7;
}
#animation_05 p {
  width: 80%;
  margin: auto;
  color: #555;
}
#animation_05 a.plus {
  color: #00c2ff;
}
#links {
  margin-top: 24px;
  max-width: 500px;
  margin: 24px auto;
}
#links a {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  background: #fff;
  padding: 16px 24px;
  border-radius: 48px;
  gap: 24px;
  display: inline-block;
  margin: 8px;
  font-weight: bold;
  font-size: 18px;
  color: #000;
  cursor: pointer;
}
@media (max-width: 768px) {
  #animation_05 {
    height: inherit;
  }
}

#faqs {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: #fff;
}
#faqs .width_100 {
  display: block;
  padding: min(5vw, 72px);
  padding-bottom: 24px;
  width: 70%;
}
#faqs h2 {
  padding: 0 0 6px 0;
}
#faqs h3 {
  font-size: 0.5em;
  margin-bottom: 4px;
}
#faqs a {
  color: #00c2ff;
  margin-top: 6px;
  display: inline-block;
}
#faqs h2 sup {
  font-size: 0.5em;
  position: relative;
  top: -6px;
  margin-left: 2px;
}
#faqs > div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  padding: min(5vw, 72px);
  padding-top: 0;
}
#faqs > div > div {
  margin: 24px 0 0 0;
  border-radius: 8px;
}
@media (max-width: 768px) {
  #faqs > div {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }
  #faqs .width_100 {
    gap: 0;
    padding: 0;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 24px;
  }
}

#nous_rejoindre {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
#nous_rejoindre .width_100 {
  display: block;
  padding: min(5vw, 72px);
  padding-bottom: 24px;
}
#nous_rejoindre h2 {
  padding: 0 0 6px 0;
}
#nous_rejoindre h3 {
  font-size: 0.5em;
  margin-bottom: 4px;
}
#nous_rejoindre a {
  color: #0090ff;
}
#nous_rejoindre h2 sup {
  font-size: 0.5em;
  position: relative;
  top: -6px;
  margin-left: 2px;
}
#nous_rejoindre > div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  padding: min(5vw, 72px);
  padding-top: 0;
}
#nous_rejoindre > div > div {
  margin: 24px 0 0 0;
  border-radius: 8px;
}
@media (max-width: 768px) {
  #nous_rejoindre > div {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }
  #nous_rejoindre .width_100 {
    gap: 0;
    padding: 0;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    padding-bottom: 24px;
  }
}

.next-btn {
  position: absolute;
  bottom: 64px;
  left: 10vw;
  margin: 10px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0)
    url("https://centreservicesdev.fr/assets/img/icons/arrow_forward_24dp_FFF.svg")
    no-repeat center/24px;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 112;
  outline: none;
}
.next-btn svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
.next-btn circle {
  fill: none;
  stroke: #fff;
  stroke-width: 3px;
  stroke-dasharray: 314;
  stroke-dashoffset: 314;
  transition: none;
  will-change: stroke-dashoffset;
}
@keyframes ringNext {
  to {
    stroke-dashoffset: 0;
  }
}
.next-btn:hover {
  background-color: rgba(0, 0, 0, 0);
}
@media (max-width: 768px) {
  .next-btn {
    bottom: 24px;
    left: 24px;
    width: 52px;
    height: 52px;
  }
}

.box_marketing.franchise {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
}
.box_marketing.franchise h2 {
  font-family: Agbalumo;
  line-height: 36px;
  margin-bottom: 16px;
  font-size: 2em;
  line-height: 1em;
}
.box_marketing.franchise h3 {
  font-size: 12px;
  background: rgba(0, 0, 0, 0.7);
  width: auto;
  display: inline-block;
  float: left;
  padding: 3px 6px;
  border-radius: 5px;
}
.box_marketing.franchise button,
.box_marketing.youtube_link a:last-child {
  font-weight: bold;
  border-radius: 48px;
  display: block;
  position: absolute;
  bottom: clamp(96px, 3vh, 110px);
  height: auto;
  padding: 12px;
  top: inherit;
  margin: auto;
  transform: translateX(50%);
  width: 50%;
  left: 0;
  font-size: 15px;
  text-align: center;
  margin-top: 0 !important;
}
.block_marketing {
  padding-right: 0 !important;
  overflow-y: hidden;
}
.box_marketing.franchise button:hover {
  bottom: 102px;
}
.box_marketing.youtube_link .overlay {
  background: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.box_marketing.youtube_link {
  background: url("https://centreservicesdev.fr/assets/img/youtube-background.jpg")
    no-repeat center/cover;
}
.box_marketing.youtube_link a {
  background: #f00;
  color: #fff;
}

@media (max-width: 768px) {
  .box_marketing.franchise h2 {
    font-size: 1.7em;
    line-height: 1em;
    margin-bottom: 10px;
  }
  .box_marketing.franchise {
    padding: 30px;
  }
  .box_marketing.franchise button,
  .box_marketing.youtube_link a:last-child {
    font-size: 16px;
    bottom: 68px;
  }
  .box_marketing:first-child.franchise {
    margin-left: min(5vw, 36px);
  }
  .box_marketing:last-child.franchise {
    margin-right: min(5vw, 36px);
  }
  .block_marketing {
    padding-right: 5vw !important;
    scrollbar-gutter: stable both-edges;
  }
  .box_marketing.franchise button:hover {
    bottom: 68px;
  }
}

#search_agence {
  position: relative;
}
#input_search_agence {
  padding-right: 28px;
}
#clear_search {
  background: rgba(0, 0, 0, 0.4)
    url("https://centreservicesdev.fr/assets/img/icons/close_24dp_FFF.svg")
    no-repeat center/16px;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  color: #999;
  width: 24px;
  height: 24px;
  border-radius: 24px;
}
#clear_search:hover {
  color: #333;
}
#search_results {
  position: relative;
  top: 6px;
  left: 0;
  right: 0;
  z-index: 9999;
  max-height: 220px;
  overflow: auto;
  display: block;
  box-shadow: 0 25px 30px rgba(0, 0, 255, 0.1);
}
#search_results.open {
  scrollbar-width: none;
  border-radius: 30px;
  background: #fff;
  padding: 20px;
}
#search_results .search-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  cursor: pointer;
  border-radius: 12px;
}
#search_results .search-item:hover,
#search_results .search-item:focus {
  background: rgba(0, 0, 0, 0.05);
  outline: none;
}
#search_results .search-item .ville {
  font-weight: 600;
  color: #0f172a;
}
#search_results .search-item .cp {
  color: #475467;
}
#search_agence {
  background: #fff;
  height: 60px;
  width: 600px;
  max-width: 80%;
  margin: 12px auto 8px auto;
  border-radius: 80px;
}
#icon_search_agence {
  height: 100%;
  float: left;
  width: 60px;
}
#icon_search_agence span {
  height: 100%;
  float: left;
  width: 60px;
  background: url("https://centreservicesdev.fr/assets/img/icons/fmd_good.svg")
    no-repeat center center / 34px;
}
#input_search_agence {
  height: 100%;
  float: left;
  width: calc(100% - 60px);
  border: none;
  background: none;
  outline: none;
  font-size: 1.1em;
}

/* === GÉNÉRAL === */
.animation-block {
  position: relative;
  height: 300dvh;
  overflow: visible;
}
.scroll-text-container {
  position: sticky;
  top: 20dvh;
  padding: 10dvh 0;
  text-align: center;
  z-index: 2;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.scroll-text-container.visible {
  opacity: 1;
}
.scroll-title {
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1.4;
  max-width: 80%;
  margin: auto;
  padding: 0;
}
.scroll-bg-image {
  transition: transform 0.2s ease-out;
}
.scroll-text-container small,
#bottom_footer small {
  font-size: 12px;
  opacity: 0.65;
  font-style: italic;
}
.scroll-text-container small img,
#bottom_footer small img {
  display: inline;
  position: relative;
  top: 4px;
  height: 16px;
  width: 16px;
}
.scroll-text-container .btn,
#bottom_footer .btn {
  background: linear-gradient(90deg, #00bfff 10%, #0081ff 90%, #0081ff);
  color: #fff;
  padding: 18px 24px;
  border-radius: 36px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  margin: 16px 0 8px 0;
  display: inline-block;
}

/* === ANIMATION 01 === */
#animation_00 {
  background: #fcd995;
  z-index: 1;
  height: 110dvh;
}
#animation_00 .scroll-title {
  color: white;
  font-family: Agbalumo;
  font-size: 5vw;
  margin-bottom: 6px;
}
#animation_00 p,
#animation_00 a {
  color: #000;
  font-weight: bold;
}
#animation_00 a:hover {
  text-decoration: underline;
}
#animation_00 .group {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 36px;
  overflow-x: auto;
  padding: 24px 0 24px 0;
}
#animation_00 .group > div {
  flex: 0 0 auto;
  text-align: center;
}
#animation_00 .group > div img {
  width: 128px;
  margin: auto;
}

@media (max-width: 768px) {
  #animation_00 {
    height: inherit;
    padding: 10vw;
  }
  #animation_00 .scroll-text-container {
    padding: 0;
    height: inherit;
    padding: 36px 0;
  }
  #animation_00 .group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 14px;
    padding-top: 48px;
    overflow: visible;
    padding: 24px;
  }
  #animation_00 .group > div h3 {
    font-size: 14px;
    line-height: 1.25;
    margin-top: 8px;
  }
}

/* === ANIMATION 01 === */
#animation_01 {
  background: linear-gradient(135deg, #007bff, #00c3ff);
  z-index: 1;
  height: 110dvh;
  padding-bottom: 220px;
}
#animation_01 .scroll-title {
  color: white;
}
#animation_01 .scroll-bg-image {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100vw;
  height: 100vw;
  transform: translate(-100%, 0%);
  z-index: 1;
  pointer-events: none;
}
#animation_01 small {
  color: #fff !important;
  opacity: 1;
}
#animation_01 .group {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  overflow-x: auto;
  padding: 0 0 24px 0;
}
#animation_01 .group > div {
  flex: 0 0 auto;
  text-align: center;
}
#animation_01 .group > div img {
  width: 92px;
  margin: auto;
}

@media (max-width: 768px) {
  #animation_01 {
    height: inherit;
    padding: 0;
  }
  #animation_01 .scroll-text-container {
    padding: 0;
    height: inherit;
    padding: 200px 0 200px 0;
  }
  #animation_01 .group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 14px;
    padding-top: 48px;
    overflow: visible;
    padding: 24px;
  }
  #animation_01 .group > div {
    padding: 12px 8px;
  }
  #animation_01 .group > div h3 {
    font-size: 14px;
    line-height: 1.25;
    margin-top: 8px;
  }
}

/* === ANIMATION 03 === */
#animation_03 {
  position: relative;
  overflow: visible;
  z-index: 0;
  height: 400dvh;
}
#animation_03::before {
  content: "";
  position: fixed;
  inset: 0;
  background: #f3f0eb
    url("https://centreservicesdev.fr/assets/img/salon-range-03.jpg") no-repeat
    bottom / cover;
  z-index: 0;
  pointer-events: none;
}
#animation_03 .left-curtain {
  position: fixed;
  inset: 0;
  background: #d2cdc9
    url("https://centreservicesdev.fr/assets/img/salon-derange-04.jpg")
    no-repeat bottom / cover;
  z-index: 1;
  pointer-events: none;
  will-change: clip-path;
  clip-path: inset(0 0 0 0);
}
#animation_03 .scroll-text-container {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: center;
}
#animation_03 h2 {
  position: relative;
  z-index: 11;
  color: rgba(0, 0, 0, 0.6);
}

#animation_03::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: 120px;
  left: calc(var(--seam-x, 50vw) - 60px);
  pointer-events: none;
  z-index: 1;
  background: url("https://centreservicesdev.fr/assets/img/etincelles.png")
    center/120px repeat-y;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 20px rgba(255, 214, 133, 0.9));
  animation: sparksScroll 5s linear infinite;
  opacity: var(--sparks-visible, 0);
  animation-play-state: var(--sparks-play, paused);
  transition: opacity 0.35s ease; /* fade propre */
}

@keyframes sparksScroll {
  from {
    background-position-y: 0;
  }
  to {
    background-position-y: 120px;
  }
}

/* === ANIMATION 04 === */
#animation_04 {
  z-index: 11;
  min-height: 100%;
  height: 250dvh;
  background: url("https://centreservicesdev.fr/assets/img/ciel-01.jpg")
    no-repeat top left / cover;
  color: #fff;
  position: relative;
  overflow: visible;
}
#animation_04 .scroll-text-container {
  position: sticky;
  padding: 20dvh 0;
  top: 0;
  height: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
}
#animation_04 .scroll-title {
  margin: 0 0 24px 0;
  position: absolute;
  width: 100vw;
  color: rgba(255, 255, 255, 1);
}
#animation_04 .stars-row {
  position: absolute;
  top: 0;
  z-index: 3;
  height: 100dvh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: transform, filter;
  contain: layout paint;
}
#animation_04 .star {
  width: 84px;
  height: auto;
  transform-origin: center;
  will-change: transform, filter;
  pointer-events: none;
  transition: all linear 0.6s;
}
#animation_04 .star.yellow {
  transition: all ease 0.1s;
  filter: brightness(0) saturate(100%) invert(85%) sepia(31%) saturate(724%)
    hue-rotate(347deg) brightness(105%) contrast(103%) !important;
  transform: scale(1.1) !important;
}
#animation_04 .scroll-title br {
  display: none;
}

#logo_google {
  display: inline-block;
  height: 18px;
  position: relative;
  top: 5px;
  margin-left: 1px;
}

.commentaires-row {
  width: 800px;
  max-width: 90vw;
  display: grid;
  gap: 24px;
}
.commentaires-row .commentaire {
  display: flex;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.2);
  margin-bottom: 5vwpx;
  padding: 24px 0;
  border-radius: 30px;
}
.commentaires-row .commentaire .commentaire-photo {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2em;
}
.commentaires-row .commentaire .commentaire-text {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  padding: 16px;
  font-size: 1.5em;
}
.commentaires-row .commentaire .commentaire-text p {
  font-size: 0.85em;
}
.commentaires-row .commentaire .commentaire-nom {
  font-weight: bold;
  margin-bottom: 16px;
}

#animation_04 .star {
  margin-top: -50dvh;
}
#animation_04 .scroll-title {
  top: 100px;
}
.commentaires-row {
  margin: 150px auto 0;
}

@media (max-width: 768px) {
  #animation_04,
  #animation_05 {
    border-radius: 0 0 calc(5vw + 30px) calc(5vw + 30px);
  }
  #animation_04 .scroll-title {
    top: 60px;
  }
  .commentaires-row {
    margin: 120px auto 0;
  }
  #animation_04 .star {
    margin-top: -40dvh;
  }
  #animation_04 .scroll-title {
    line-height: 36px;
  }
  #animation_04 .scroll-text-container {
    padding: 20dvh 0 5vw 0;
  }
  .commentaires-row .commentaire .commentaire-photo {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    font-size: 2em;
  }
  .commentaires-row .commentaire .commentaire-text {
    font-size: 1em;
  }
}

#animation_05 {
  background: #f5f5f5;
}

#menu-mobile {
  z-index: 100 !important;
}
header {
  z-index: 100 !important;
  position: absolute;
}
footer {
  z-index: 1;
  position: relative;
}
footer::before {
  z-index: -1;
  content: "";
  width: 100vw;
  height: 100%;
  position: absolute;
  bottom: 0;
  transform: scale(3, 1);
  left: -50vw;
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  overflow: hidden;
}

.grid_parent {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - var(--gap-carousel) * 2);
  margin: auto;
  position: relative;
  padding: 2vw;
  gap: 1.99vw;
}
.grid_100 {
  width: 100%;
}
.grid_50 {
  display: flex;
  width: calc(50% - 1vw);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
@media (min-width: 768px) {
  .grid_parent {
    width: calc(100% - var(--gap-carousel) * 2 - 48px);
    padding: 0;
  }
}
@media screen and (min-width: 1600px) {
  .grid_parent {
    width: calc(80vw - 3 * var(--gap-carousel));
    padding: 0;
  }
}

.grid_parent > div {
  min-height: 400px;
  background: #fff;
  padding: 0;
  border-radius: 30px;
  font-size: 2em;
  box-sizing: border-box;
  z-index: 1;
}
.grid_50 a {
  background: linear-gradient(135deg, #00bfff 10%, #0081ff 90%, #0081ff);
  cursor: pointer;
  color: #fff;
  padding: 12px 16px;
  border-radius: 36px;
  margin-top: 12px;
  display: inline-block;
  z-index: 1;
  position: relative;
}
@media (max-width: 769px) {
  .grid_50 {
    box-shadow: 0 0 0;
  }
}

/* Ménage */
#bloc_service_8 {
  background: #37dfdf !important;
}
#bloc_service_8 .button_devis {
  background: #f43cb3;
}
#bloc_service_8 .clip-layout {
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(255, 255, 255, 0) 60%
  );
}
#bloc_service_8 .clip-line-back {
  background-image: url(https://centreservicesdev.fr/assets/img/services/line-back-8.png);
}
#bloc_service_8 .clip-line-front {
  background-image: url(https://centreservicesdev.fr/assets/img/services/line-front-8.png);
}
#service_8 {
  background-image: url(https://centreservicesdev.fr/assets/img/services/clip-8.png);
}

/* Jardinage */
#bloc_service_4 .button_devis {
  background: #ffdf83;
  color: #3db500;
}
#bloc_service_4 .clip-layout {
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(255, 255, 255, 0) 50%
  );
}
#bloc_service_4 .clip-line-back {
  background-image: url(https://centreservicesdev.fr/assets/img/services/line-back-4.png);
}
#bloc_service_4 .clip-line-front {
  background-image: url(https://centreservicesdev.fr/assets/img/services/line-front-4.png);
}
#service_4 {
  background-image: url(https://centreservicesdev.fr/assets/img/services/clip-4.png);
}

/* Garde d'enfant */
#bloc_service_2 .button_devis {
  background: #fdd34b;
}
#bloc_service_2 .clip-layout {
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(255, 255, 255, 0) 60%
  );
}
#bloc_service_2 .clip-line-back {
  background-image: url(https://centreservicesdev.fr/assets/img/services/line-back-2.png);
}
#bloc_service_2 .clip-line-front {
  background-image: url(https://centreservicesdev.fr/assets/img/services/line-front-2.png);
}
#service_2 {
  background-image: url(https://centreservicesdev.fr/assets/img/services/clip-2.png);
}

/* Aaide aux personnes âgées */
#bloc_service_1 .button_devis {
  background: #85ceff;
}
#bloc_service_1 .clip-layout {
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(255, 255, 255, 0) 50%
  );
}
#bloc_service_1 .clip-line-back {
  background-image: url(https://centreservicesdev.fr/assets/img/services/line-back-1.png);
}
#bloc_service_1 .clip-line-front {
  background-image: url(https://centreservicesdev.fr/assets/img/services/line-front-1.png);
}
#service_1 {
  background-image: url(https://centreservicesdev.fr/assets/img/services/clip-1.png);
}

/* Bricolage */
#bloc_service_3 .button_devis {
  background: #b2edff;
  color: #a39384;
}
#bloc_service_3 .clip-layout {
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(255, 255, 255, 0) 50%
  );
}
#bloc_service_3 .clip-line-back {
  background-image: url(https://centreservicesdev.fr/assets/img/services/line-back-3.png);
}
#bloc_service_3 .clip-line-front {
  background-image: url(https://centreservicesdev.fr/assets/img/services/line-front-3.png);
}
#service_3 {
  background-image: url(https://centreservicesdev.fr/assets/img/services/clip-3.png);
}

/* Crédit d'impôt */
#bloc_service_50 .button_devis {
  background: #e96c2a;
}
#bloc_service_50 .clip-layout {
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(255, 255, 255, 0) 50%
  );
}
#bloc_service_50 .clip-line-back {
  background-image: url(https://centreservicesdev.fr/assets/img/services/line-back-50.png);
}
#bloc_service_50 .clip-line-front {
  background-image: url(https://centreservicesdev.fr/assets/img/services/line-front-50.png);
}
#service_50 {
  background-image: url(https://centreservicesdev.fr/assets/img/services/clip-50.png);
}

.button_devis {
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  font-size: 24px;
  padding: 24px 48px;
  margin-top: 48px;
  border-radius: 100px;
  cursor: pointer;
  z-index: 6 !important;
}
.button_devis::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  animation: shine 3s infinite;
  pointer-events: none;
}

.clip-line {
  background-size: cover;
  position: absolute;
  top: 0;
  width: 110vw;
  height: 100dvh;
  background-repeat: no-repeat;
}
.clip-line-back {
  z-index: -1;
  background-position: left top;
  pointer-events: none;
  left: 40vw;
}
.clip-line-front {
  z-index: 3;
  background-position: left bottom;
  pointer-events: none;
  left: 60vw;
}

.clip-slide-left {
  width: 50%;
  display: flex;
  z-index: 50 !important;
  margin-top: 50px;
}
.clip-slide-left .service_title {
  font-family: Agbalumo;
  line-height: 1em;
  text-shadow: 0 5px 3px rgba(0, 0, 0, 0.01);
}
.clip-slide-right {
  display: flex;
  width: 50%;
  float: right;
  height: 100dvh;
}
.clip-slide-left,
.clip-slide-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.clip-slide-left,
.clip-slide-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.clip-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  color: white;
  font-size: 5vw;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: transparent;
  clip-path: circle(0% at 50% 50%);
}
.clip-slide.visible {
  z-index: 2;
}
.clip-slide.conceal {
  z-index: 2;
}
.clip-slide.behind {
  z-index: 0;
  clip-path: circle(0% at 50% 50%);
}

.clip-img {
  height: 100dvh;
  width: 2000%;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: top;
}
.clip-layout {
  width: 100vw;
  height: 100dvh;
  position: absolute;
  bottom: 0;
}
.clip-content {
  width: 80vw;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.clip-container {
  position: relative;
  width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
}

/* Quand la modale cookies est ouverte, force la pose "frame 0%" */
body.cookies-locked .clip-slide-left {
  transform: translateY(50px) !important; /* 0% de appear_to_bottom */
}

body.cookies-locked .clip-img {
  transform: translateX(70px) !important; /* 0% de appear_to_right */
}

/* lignes décor (valeurs 0% de tes keyframes) */
body.cookies-locked .clip-line-front {
  transform: translateX(0) !important; /* 0% de appear_front */
}

body.cookies-locked .clip-line-back {
  transform: translateX(-250px) !important; /* 0% de appear_back */
}

/* On neutralise toute "retenue" de fin d'anim pendant le lock */
body.cookies-locked .clip-slide-left,
body.cookies-locked .clip-img,
body.cookies-locked .clip-line-front,
body.cookies-locked .clip-line-back {
  animation-play-state: paused !important;
  animation-fill-mode: none !important; /* évite d’afficher la frame finale */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.no_shadow {
  box-shadow: 0 0 0 !important;
}
.uppercase {
  text-transform: uppercase;
}

#logo_back {
  position: absolute;
  top: 64px;
  left: 10vw;
  width: 84px;
  height: 84px;
  background: white;
  border-radius: 50%;
  z-index: 111;
}
#logo_img {
  top: 0;
  left: 0;
  width: 84px;
  height: 84px;
  padding: 13px;
  z-index: 111;
}
#logo_script {
  position: absolute;
  top: 72px;
  left: calc(10vw + 100px);
  z-index: 111;
}
#logo_script img {
  width: auto;
  height: 68px;
}

@media (min-width: 769px) {
  #bottom_footer {
    display: none;
  }
}

@media (max-width: 768px) {
  #animation_03::before,
  .left-curtain {
    background-position: right bottom !important;
    background-size: 220% !important;
  }

  #animation_03 {
    height: 300dvh;
  }

  #animation_04 {
    box-shadow: 0 10vw 0 10vw #f5f5f5;
  }
  #animation_04 .scroll-text-container {
    top: 0;
  }
  #animation_04 .star {
    width: 42px;
    transition: all ease 0s;
  }
  #animation_04 .scroll-title br {
    display: inherit;
  }

  footer.home {
    margin-bottom: 90dvh;
  }
  #bottom_footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 85dvh;
    text-align: center;
    z-index: 0;
    padding-top: 10vw;
  }
  #bottom_footer h2 {
    font-size: 24px;
    width: 80%;
    margin: auto;
  }
  #bottom_footer_container {
    position: relative;
  }

  .grid_parent {
    width: 100%;
    display: block;
    margin: 3vw 0 0 0;
  }
  .grid_100,
  .grid_50 {
    width: 100%;
  }
  .grid_parent > div {
    border-radius: 30px;
    padding: 30px;
    max-width: 90vw;
    margin: 0 auto 5vw auto;
  }

  .scroll-title {
    font-size: 1.6em;
  }
  .scroll-title br {
    display: none;
  }

  /* Jardinage */
  #bloc_service_4 .button_devis {
    background: #3db500;
    color: #fff;
  }

  /* Garde d'enfant */
  #bloc_service_2 .button_devis {
    background: #fcc000;
    color: #fff;
  }

  /* Bricolage */
  #bloc_service_3 .button_devis {
    background: #a39384;
    color: #fff;
  }

  .clip-layout {
    background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.15) 0%,
      rgba(255, 255, 255, 0) 60%
    );
  }

  .clip-line {
    width: 150vw;
  }
  .clip-slide,
  #animation_00 h2 {
    font-size: 10vw !important;
  }
  .clip-slide-right {
    min-width: 100%;
    position: absolute;
    z-index: 0;
    width: 100vw;
  }
  .clip-slide-left .button_devis {
    font-size: 20px;
    padding: 12px 28px;
    margin-top: 24px;
  }
  .clip-slide-left .service_title {
    padding: 0 24px;
  }
  .clip-slide-left {
    min-width: 100%;
    position: absolute;
    margin-top: 260px;
  }

  .clip-line-back {
    left: 50vw;
  }

  .clip-img {
    background-size: auto 100dvh;
    height: 110dvh;
    width: 200%;
    background-position: top;
    margin-top: 24px;
  }

  .clip-content {
    width: 100vw;
  }

  #logo_back {
    top: 10vw;
    left: 10vw;
    width: 72px;
    height: 72px;
  }
  #logo_img {
    width: 72px;
    height: 72px;
    padding: 10px;
  }
  #logo_script {
    position: absolute;
    top: 10vw;
    left: calc(10vw + 88px);
    z-index: 111;
    height: 56px;
    margin-top: 8px;
  }
  #logo_script img {
    width: auto;
    height: 100%;
  }

  @keyframes appear_back {
    0% {
      transform: translateX(200px);
    }
    100% {
      transform: translateX(0px);
    }
  }
}

@keyframes appear_back {
  0% {
    transform: translateX(-250px);
  }
  100% {
    transform: translateX(-150px);
  }
}

@keyframes appear_front {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-250px);
  }
}

@keyframes appear_to_bottom {
  0% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes appear_to_right {
  0% {
    transform: translateX(70px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes reveal {
  from {
    clip-path: circle(0% at var(--clip-x, 50%) var(--clip-y, 50%));
  }
  to {
    clip-path: circle(150% at var(--clip-x, 50%) var(--clip-y, 50%));
  }
}

@keyframes shine {
  0% {
    left: -75%;
  }
  50% {
    left: 125%;
  }
  100% {
    left: 125%;
  }
}

@keyframes spin {
  from {
    transform: scale(1.4) rotate(0deg);
  }
  to {
    transform: scale(2) rotate(360deg);
  }
}
/* base */

.landing #landing_credit_impot {
  padding: 0;
  position: relative;
  width: 100%;
  height: 100%;
}

.landing #landing_credit_impot img {
  border-radius: 64px;
  position: absolute;
  /* inset: 0; */
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  object-fit: cover !important;
  object-position: center;
}

.landing .content_size {
  width: calc(80vw - var(--gap-carousel));
  margin: auto;
}

.landing .grid_2x2 {
  width: 100%;
  margin-top: -30px;
  border-radius: 0 0 48px 48px;
  padding-bottom: 3vw;
  position: relative;
}

.landing .grid_2x2 .content_size {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  margin-bottom: 48px;
}

.landing .grid_2x2 .content_size > div {
  aspect-ratio: 4/3;
  min-height: 300px;
  background: #ddd;
  border-radius: 64px;
  padding: clamp(36px, 5vw, 999px);
  position: relative;
  overflow: hidden;
}

.landing .grid_2x2 .content_size > .grid_100 {
  grid-column: 1/-1;
  aspect-ratio: auto;
  min-height: unset;
}

.landing .slider-container {
  padding-bottom: 30px;
}

.landing .hero .block_radius_bottom {
  background-color: #ccf2f2;
  /* top: -24px; */
  box-shadow: 0 30px 30px #ccf2f2;
  border-radius: 0 0 60px 60px;
}

.landing .block_4_icones {
  background-color: #ccf2f2;
  margin-top: -48px;
}

.landing .info_intro {
  padding-bottom: 36px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.landing .block_btn_devis button:not(.slider-container button) {
  color: #fff;
  font-size: 15px;
  max-width: 80%;
  line-height: 1.1em;
  align-items: center;
  text-align: center;
  padding: 0 48px 0 16px;
}

.landing #landing_ville_photo {
  background-size: cover;
}

.landing #landing_ville_photo h3 {
  font-size: 200%;
  line-height: 32px;
  color: #fff;
  position: relative;
}

.landing #landing_ville_photo:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    106deg,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0) 80%
  );
}

.landing #agences_infos {
  padding: 0;
  color: #fff;
  width: auto;
  display: inline-block;
  position: relative;
  margin-top: 11px;
}

.landing #agences_infos p {
  font-size: 1.1em;
}

@media (max-width: 768px) {
  /* .landing .grid_2x2{background:linear-gradient(to bottom,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%)} */
  .landing .content_size {
    width: calc(90vw - var(--gap-carousel));
  }

  .landing .grid_2x2 .content_size {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 24px;
  }

  .landing .grid_2x2 .content_size > div {
    min-height: 200px;
    border-radius: 36px;
  }

  .landing #landing_credit_impot img {
    border-radius: 36px;
    border-bottom-right-radius: 36px !important;
    border-bottom-left-radius: 36px !important;
  }

  .landing .block_4_icones {
    box-shadow: 0 -120px 0 120px #ccf2f2;
    margin-top: 0;
  }

  .landing #landing_ville_photo h3 {
    font-size: 160%;
    line-height: 26px;
  }

  .landing #agences_infos p {
    font-size: 1em;
  }
}

@media (min-width: 1200px) {
  .landing .info_intro {
    margin-top: -56px;
  }
}

:root {
  --cs-radius: 28px;
  --cs-link-color: #008bff;
  --cs-border-color: #ddd;
}

@media (max-width: 991.98px) {
  :root {
    --cs-radius: 20px;
  }
}

#new_content {
  --cs-form-radius: 18px;
  --cs-form-radius-sm: 14px;
  --cs-form-border: rgba(0, 0, 0, 0.12);
  --cs-form-border-soft: rgba(0, 0, 0, 0.08);
  --cs-form-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
  --cs-form-accent: #008bff;
  --cs-form-text: #0b2b3a;
  --cs-form-muted: #666;
  --cs-form-bg: #fff;
}

#new_content .cs-sidebar .cs-sidebar-block--tall {
  background: var(--cs-form-bg);
  border: 1px solid var(--cs-form-border-soft);
  border-radius: var(--cs-form-radius);
}

#new_content .cs-sidebar .cs-sidebar-block-title {
  color: var(--cs-form-text);
  font-weight: 800;
}

#new_content #containerDevisForm {
  padding: 0 0 0;
}

#new_content #containerDevisForm form,
#new_content #containerDevisForm .form,
#new_content #containerDevisForm .formulaire {
  margin: 0;
}

#new_content #containerDevisForm * {
  box-sizing: border-box;
}

#new_content #containerDevisForm h2,
#new_content #containerDevisForm h3,
#new_content #containerDevisForm .title,
#new_content #containerDevisForm .form_title {
  color: var(--cs-form-text);
  text-align: left !important;
  margin: 1px 0 8px;
  font-weight: 800;
  line-height: 1.2;
  padding-top: 0;
}

#new_content #containerDevisForm p,
#new_content #containerDevisForm .help,
#new_content #containerDevisForm .small,
#new_content #containerDevisForm .hint {
  color: var(--cs-form-muted);
  margin: 8px 0 0;
}

#new_content #containerDevisForm .form_groupe,
#new_content #containerDevisForm .form-group,
#new_content #containerDevisForm .groupe,
#new_content #containerDevisForm .row {
  margin: 0 0 12px;
}

#new_content #containerDevisForm input[type="text"],
#new_content #containerDevisForm input[type="email"],
#new_content #containerDevisForm input[type="tel"],
#new_content #containerDevisForm input[type="number"],
#new_content #containerDevisForm input[type="date"],
#new_content #containerDevisForm input[type="file"],
#new_content #containerDevisForm select,
#new_content #containerDevisForm textarea {
  min-width: 100%;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: var(--cs-form-radius-sm);
  background: #fff;
  color: var(--cs-form-text);
  outline: none;
  line-height: 1 !important;
  font-size: 16px;
}

@media (max-width: 900px) {
  #new_content #containerDevisForm input[type="text"],
  #new_content #containerDevisForm input[type="email"],
  #new_content #containerDevisForm input[type="tel"],
  #new_content #containerDevisForm input[type="number"],
  #new_content #containerDevisForm input[type="date"],
  #new_content #containerDevisForm input[type="file"],
  #new_content #containerDevisForm select,
  #new_content #containerDevisForm textarea {
    margin-bottom: 12px;
  }

  #new_content #containerDevisForm .form_groupe,
  #new_content #containerDevisForm .form-group,
  #new_content #containerDevisForm .groupe,
  #new_content #containerDevisForm .row {
    margin: 0 0;
  }
}

#new_content #containerDevisForm textarea {
  min-height: 120px;
  resize: vertical;
}

#new_content #containerDevisForm input:focus,
#new_content #containerDevisForm select:focus,
#new_content #containerDevisForm textarea:focus {
  border-color: rgba(0, 139, 255, 0.55);
  box-shadow: 0 0 0 4px rgba(0, 139, 255, 0.12);
}

#new_content #containerDevisForm input::placeholder,
#new_content #containerDevisForm textarea::placeholder {
  color: rgba(11, 43, 58, 0.45);
}

#new_content #containerDevisForm .groupe_50,
#new_content #containerDevisForm .col-6,
#new_content #containerDevisForm .half {
  width: 100%;
}

@media (min-width: 900px) {
  #new_content #containerDevisForm .form_groupe,
  #new_content #containerDevisForm .row {
    display: flex;
    gap: 12px;
  }

  #new_content #containerDevisForm .groupe_50,
  #new_content #containerDevisForm .col-6,
  #new_content #containerDevisForm .half {
    flex: 1 1 calc(50% - 6px);
  }
}

#new_content #containerDevisForm label {
  display: block;
  margin: 0 0 6px;
  font-weight: 700;
  color: var(--cs-form-text);
}

#new_content #containerDevisForm .radio,
#new_content #containerDevisForm .checkbox,
#new_content #containerDevisForm .choice {
  margin: 8px 0;
}

#new_content #containerDevisForm input[type="radio"],
#new_content #containerDevisForm input[type="checkbox"] {
  accent-color: var(--cs-form-accent);
}

#new_content #containerDevisForm input[type="radio"] + label,
#new_content #containerDevisForm input[type="checkbox"] + label {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--cs-form-border);
  border-radius: var(--cs-form-radius-sm);
  background: #fff;
  cursor: pointer;
  user-select: none;
  line-height: 1.25;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

@media (hover: hover) {
  #new_content #containerDevisForm input[type="radio"] + label:hover,
  #new_content #containerDevisForm input[type="checkbox"] + label:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 0, 0, 0.18);
  }
}

#new_content #containerDevisForm input[type="radio"]:checked + label,
#new_content #containerDevisForm input[type="checkbox"]:checked + label {
  border-color: rgba(0, 139, 255, 0.45);
  background: rgba(0, 139, 255, 0.06);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

#new_content #containerDevisForm label > input[type="radio"],
#new_content #containerDevisForm label > input[type="checkbox"] {
  margin-right: 10px;
}

#new_content #containerDevisForm input[type="file"] {
  padding: 10px 12px;
}

#new_content #containerDevisForm button,
#new_content #containerDevisForm input[type="submit"] {
  width: 100%;
  margin-top: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-weight: 800;
  background: var(--cs-form-accent);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 139, 255, 0.25);
}

#new_content #containerDevisForm button:hover,
#new_content #containerDevisForm input[type="submit"]:hover {
  filter: brightness(0.95);
}

#new_content #containerDevisForm button:disabled,
#new_content #containerDevisForm input[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

#new_content #containerDevisForm .blockRGPD,
#new_content #containerDevisForm .rgpd,
#new_content #containerDevisForm .consent {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  text-align: left;
}

#new_content #containerDevisForm .blockRGPD p,
#new_content #containerDevisForm .rgpd p,
#new_content #containerDevisForm .consent p {
  font-size: 14px !important;
  line-height: 1.5;
  color: var(--cs-form-muted);
}

#new_content #containerDevisForm .blockRGPD a,
#new_content #containerDevisForm .rgpd a,
#new_content #containerDevisForm .consent a {
  color: var(--cs-form-accent);
}

#new_content .cs-sidebar .cs-sidebar-block {
  overflow: hidden;
}

@media (max-width: 991.98px) {
  #new_content .cs-sidebar .cs-sidebar-block--tall {
    padding: 16px;
  }

  #new_content #containerDevisForm input[type="text"],
  #new_content #containerDevisForm input[type="email"],
  #new_content #containerDevisForm input[type="tel"],
  #new_content #containerDevisForm select,
  #new_content #containerDevisForm textarea {
    font-size: 15px;
  }
}

#new_content #containerDevisForm .groupe_100 {
  width: 100% !important;
  flex: 0 0 100% !important;
  min-width: 0 !important;
}

#new_content #containerDevisForm #type_emploi {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#new_content #containerDevisForm select {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#new_content #merciEmploi {
  text-align: center;
}

#new_content .cs-page-layout--full {
  width: 100%;
}

#new_content .cs-main--full {
  flex: 0 0 100%;
  max-width: 100%;
  padding-right: 0;
}

#new_content .cs-page-layout.cs-page-layout--full {
  display: block !important;
}

#new_content .cs-page-layout.cs-page-layout--full > .cs-main {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-right: 0 !important;
}

#new_content .cs-page-layout.cs-page-layout--full > .cs-sidebar {
  display: none !important;
}

#new_content .cs-contact-hero {
  margin-top: 32px;
  padding-bottom: 16px;
}

#new_content .cs-contact-hero__top {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

#new_content .cs-contact-hero__intro {
  max-width: 680px;
  margin: 0 auto;
}

#new_content #audit_hub .findAgence {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 12px;
}

#new_content #audit_hub .recherche {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  padding: 0 14px 0 16px;
  border: 1px solid #ddd;
  border-radius: 14px;
  background: #fff;
  box-sizing: border-box;
  overflow: visible;
  margin-bottom: 72px;
}

#new_content #audit_hub .recherche input.search {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  outline: none;
  font-size: 16px !important;
  line-height: 1 !important;
  appearance: none;
  -webkit-appearance: none;
  cursor: text;
  position: relative;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
}

#new_content #audit_hub .recherche .action.drop_picto {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  pointer-events: none;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  background: transparent !important;
}

#new_content #audit_hub .recherche .action.drop_picto::before {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(0, 0, 0, 0.45);
  border-bottom: 2px solid rgba(0, 0, 0, 0.45);
  transform: rotate(45deg);
  display: block;
  margin-top: -2px;
}

#new_content #audit_hub .sites_agences {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 999;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12);
}

#new_content #audit_hub .sites_agences > div {
  max-height: 360px;
  overflow: auto;
}

#new_content #audit_hub .sites_agences a.liens {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  color: #0b2b3a;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

#new_content #audit_hub .sites_agences a.liens:hover {
  background: rgba(0, 139, 255, 0.08);
}

#new_content #audit_hub .sites_agences a.no_result {
  display: block;
  padding: 12px 16px;
  color: #777;
}

#new_content #audit_hub .sites_agences a.liens:last-of-type {
  border-bottom: 0;
}

@media (max-width: 520px) {
  #new_content .cs-contact-hero {
    margin-top: 24px;
    padding-bottom: 12px;
  }

  #new_content #audit_hub .recherche {
    height: 48px;
    padding: 0 12px 0 14px;
  }

  #new_content #audit_hub .recherche input.search {
    font-size: 15px !important;
  }

  #new_content #audit_hub .recherche .action.drop_picto {
    width: 34px;
    height: 34px;
  }
}

#new_content #AuditSection {
  padding: 0;
}

#new_content #AuditSection .cs-content {
  max-width: 980px;
  margin: 0 auto;
  text-align: left !important;
}

#new_content #form_devis {
  margin-top: 12px;
}

#new_content #audit-form {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  width: 100%;
}

#new_content #audit-form::after {
  content: "";
  display: block;
  clear: both;
}

#new_content #audit-form .text-center {
  text-align: left !important;
}

#new_content #audit-form h2,
#new_content #audit-form h3 {
  text-align: left !important;
  color: #0b2b3a;
}

#new_content #audit-form h2 {
  margin: 34px 0 12px;
  padding: 22px 0 0 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 22px !important;
  position: relative;
}

#new_content #audit-form h2:first-of-type {
  margin-top: 36px;
  padding-top: 0;
  border-top: 0;
}

#new_content #audit-form h2:first-of-type::before {
  top: 0.35em;
}

#new_content #audit-form h3 {
  margin: 0 0 12px;
  padding-left: 14px;
  font-size: 18px !important;
  line-height: 1.25em;
  position: relative;
}

#new_content #audit-form h3::before {
  content: "";
  position: absolute;
  left: 0;
  width: 6px;
  height: 1em;
  margin-top: 3px;
  border-radius: 999px;
  background: rgba(0, 139, 255, 0.75);
}

#new_content #audit-form .title_float {
  clear: both;
  width: 100%;
  margin-top: 28px;
  padding-top: 22px;
}

#new_content .cs-audit-page h1,
#new_content .cs-audit-page h2,
#new_content .cs-audit-page h3,
#new_content #audit-form h1,
#new_content #audit-form h2,
#new_content #audit-form h3,
#new_content #audit-form .align_center,
#new_content #audit-form .align_center h1,
#new_content #audit-form .align_center h2,
#new_content #audit-form .align_center h3 {
  text-align: left !important;
}

#new_content #audit-form .align_center {
  display: block !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

#new_content #audit-form .float_left,
#new_content #audit-form .float_right {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
  float: none;
  width: 100%;
  margin-top: 16px;
}

@media (min-width: 900px) {
  #new_content #audit-form .float_left {
    float: left;
    width: calc(50% - 12px);
    margin-top: 22px;
  }

  #new_content #audit-form .float_right {
    float: right;
    width: calc(50% - 12px);
    margin-top: 22px;
  }
}

#new_content #audit-form .form_groupe {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 12px;
}

#new_content #audit-form .groupe_50 {
  flex: 1 1 calc(50% - 6px);
  min-width: 220px;
}

#new_content #audit-form .pr_6px {
  padding-right: 0 !important;
}

#new_content #audit-form .pl_6px {
  padding-left: 0 !important;
}

#new_content #audit-form input.form-control,
#new_content #audit-form textarea.form-control {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 14px;
  background: #fff;
  box-sizing: border-box;
}

#new_content #audit-form textarea.form-control {
  resize: vertical;
  min-height: 110px;
}

#new_content #audit-form p {
  margin: 10px 0 0;
}

#new_content #audit-form ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 520px) {
  #new_content #audit-form ul {
    grid-template-columns: 1fr 1fr;
  }
}

#new_content #audit-form ul li {
  margin: 0;
  padding: 0;
  position: relative;
}

#new_content #audit-form input.custom-radio[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  left: 0;
  top: 0;
}

#new_content #audit-form input.custom-radio[type="radio"] + label {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px 12px 46px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 14px;
  background: #fff;
  color: #0b2b3a;
  cursor: pointer;
  user-select: none;
  line-height: 1.25;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

#new_content #audit-form input.custom-radio[type="radio"] + label::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.28);
  background: #fff;
  box-sizing: border-box;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

#new_content #audit-form input.custom-radio[type="radio"] + label::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #008bff;
  opacity: 0;
  transition: opacity 0.15s ease;
}

#new_content #audit-form input.custom-radio[type="radio"]:checked + label {
  border-color: rgba(0, 139, 255, 0.45);
  background: rgba(0, 139, 255, 0.06);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}

#new_content
  #audit-form
  input.custom-radio[type="radio"]:checked
  + label::before {
  border-color: #008bff;
  box-shadow: 0 0 0 4px rgba(0, 139, 255, 0.15);
}

#new_content
  #audit-form
  input.custom-radio[type="radio"]:checked
  + label::after {
  opacity: 1;
}

#new_content
  #audit-form
  input.custom-radio[type="radio"]:focus-visible
  + label {
  outline: 2px solid rgba(0, 139, 255, 0.45);
  outline-offset: 2px;
}

@media (hover: hover) {
  #new_content #audit-form input.custom-radio[type="radio"] + label:hover {
    border-color: rgba(0, 0, 0, 0.18);
    transform: translateY(-1px);
  }
}

@media (max-width: 768px) {
  #new_content #audit-form input.custom-radio[type="radio"] + label {
    padding: 14px 14px 14px 58px;
  }

  #new_content #audit-form input.custom-radio[type="radio"] + label::before {
    left: 18px;
  }

  #new_content #audit-form input.custom-radio[type="radio"] + label::after {
    left: 22px;
  }
}

#new_content #audit-form .avis_global {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
  margin-top: 16px;
  clear: both;
  width: 100%;
  text-align: center;
}

#new_content #audit-form .avis_global h3 {
  margin-bottom: 6px;
}

#new_content #audit-form .avis_global p {
  margin: 0 0 14px;
  color: #666;
  font-size: 14px !important;
  text-align: left;
}

#new_content #audit-form .avis_global ul {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin: 14px 0 0;
  padding: 0;
}

@media (max-width: 640px) {
  #new_content #audit-form .avis_global ul {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

#new_content #audit-form .avis_global input.custom-radio + label {
  padding: 12px 10px !important;
  justify-content: center;
  text-align: center;
}

#new_content #audit-form .avis_global input.custom-radio + label::before,
#new_content #audit-form .avis_global input.custom-radio + label::after {
  display: none !important;
  content: none !important;
}

#new_content #audit-form .avis_global input.custom-radio:checked + label {
  background: #008bff;
  border-color: #008bff;
  box-shadow: 0 10px 24px rgba(0, 139, 255, 0.25);
  color: #fff;
}

#new_content #audit-form .title_float.audit-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
  margin-top: 16px;
  clear: both;
  width: 100%;
}

#new_content #audit-form .title_float.audit-card .blockRGPD,
#new_content #audit-form .title_float.audit-card .avis_global {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin-top: 16px;
}

#new_content #audit-form .blockRGPD {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 14px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
  width: 100%;
  margin-top: 16px;
}

#new_content #audit-form .checkbox_container {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: #0b2b3a;
  justify-content: center;
}

#new_content #audit-form .checkbox_explain {
  max-width: 720px;
  margin: 0 auto;
  color: #666;
  font-size: 14px !important;
  line-height: 1.5em;
  text-align: center;
}

#new_content #audit-form .checkbox_explain a {
  color: #008bff;
}

#new_content #audit-form .mt-30 {
  margin-top: 18px;
  display: flex;
}

#new_content #audit-form #audit_submit {
  width: 100%;
  max-width: 320px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  background: #3db7ff;
  color: #fff;
}

#new_content #merci_message_block {
  max-width: 720px;
  margin: 26px auto 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  padding: 22px 18px;
  text-align: center;
}

#new_content #merci_message_block .icon_message img {
  width: 76px;
  height: auto;
}

#new_content #merci_message_block .back_audit a {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(0, 139, 255, 0.1);
  text-decoration: none;
}

@media (max-width: 899.98px) {
  #new_content #audit-form .float_left,
  #new_content #audit-form .float_right {
    float: none;
    width: 100%;
  }
}

#new_content #AuditSection .cs-content .audit-card div {
  padding: 0 !important;
}

#new_content #AuditSection .cs-content .audit-card p {
  padding: 12px 0;
}

#new_content #audit-form .float_left h3,
#new_content #audit-form .float_right h3 {
  margin: 0 0 12px;
}

#new_content #audit-form .float_left ul,
#new_content #audit-form .float_right ul {
  margin-top: 8px;
}

#new_content #audit-form .title_float.audit-card .mt-30 {
  justify-content: center;
}

#new_content #audit-form .title_float.audit-card .g-recaptcha {
  margin-top: 14px;
}

@media (max-width: 520px) {
  #new_content #audit-form {
    padding: 0 !important;
  }

  #new_content #audit_hub input.search,
  #new_content .recherche input.search {
    padding: 0 !important;
  }
}

#new_content #audit_hub .sites_agences {
  top: calc(100% + 8px);
  left: 0;
  right: 0;
}

#new_content .cs-audit-page #merci {
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#new_content .cs-audit-page #merci h2 {
  text-align: center !important;
}

#new_content .findAgence {
  max-width: 640px;
  margin: 0 auto;
}

#new_content .recherche {
  position: relative;
}

#new_content .recherche input.search {
  width: 100%;
}

#new_content .sites_agences {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 50;
}

#new_content .sites_agences > div {
  max-height: 320px;
  overflow: auto;
}

#new_content .cs-contact-hero {
  padding-bottom: 12px;
  margin-top: 32px;
}

#new_content .cs-contact-hero__top {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

#new_content .cs-contact-hero__icon {
  height: 75px;
  display: inline-block;
  margin: 0 auto 12px;
}

.cs-contact-hero__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#new_content .cs-contact-hero__intro {
  margin: 0 auto;
  max-width: 680px;
}

#new_content .cs-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  #new_content .cs-contact-grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
}

#new_content .cs-contact-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  padding: 18px 18px 38px;
  text-decoration: none;
  background: #fff;
}

#new_content .cs-contact-card--primary {
  border-color: rgba(0, 120, 255, 0.18);
}

#new_content .cs-contact-card__icon img {
  height: 48px;
  min-width: 48px;
  display: block;
  position: relative;
  top: 12px;
}

#new_content .cs-contact-card__content h2 {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.2;
}

#new_content .cs-contact-card__content p {
  margin: 0 0 10px;
}

#new_content .cs-contact-card__cta {
  display: inline-block;
  font-weight: 600;
  text-decoration: underline;
}

.cs-contact-card:hover {
  text-decoration: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

#new_content .article_blog .cs-media {
  margin: 32px 0;
}

#new_content .article_blog .cs-media .cs-stories {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}

#new_content .article_blog .cs-media .cs-stories-track {
  display: flex;
  transform: translate3d(0, 0, 0);
  transition: transform 0.35s ease;
  will-change: transform;
}

#new_content .article_blog .cs-media .cs-stories-slide {
  flex: 0 0 100%;
}

#new_content .article_blog .cs-media .cs-stories-slide img {
  display: block;
  width: 100%;
  height: auto;
}

#new_content .article_blog .cs-media .cs-stories-indicators {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  display: flex;
  gap: 6px;
  z-index: 2;
}

#new_content .article_blog .cs-media .cs-stories-indicators span {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  overflow: hidden;
}

#new_content .article_blog .cs-media .cs-stories-indicators span i {
  display: block;
  width: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
  transition: width 0.25s ease;
}

#new_content .article_blog .cs-media .cs-stories-indicators span.is-active i {
  width: 100%;
}

#new_content .article_blog .video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin: 32px 0;
  overflow: hidden;
  border-radius: 12px;
}

#new_content .article_blog .video-container iframe,
#new_content .article_blog .video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#new_content #search_articles h3 {
  margin: 0;
  padding-top: 12px;
}

#new_content #search_articles input {
  width: 100%;
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

#new_content #search_articles li {
  border-bottom: 1px solid #ccc;
  padding: 0px 0 5px 0;
}

#new_content #search_articles li:last-child {
  border-bottom: 0;
}

/* FIX : double trait sous “Actualités” (cumul margin + border-bottom + li+li margin) */
#new_content .cs-sidebar-articles.cs-sidebar-articles--tree li {
  border-bottom: 0;
  margin-top: 0;
}

#new_content .cs-sidebar-articles.cs-sidebar-articles--tree li + li {
  margin-top: 0;
}

#new_content .cs-sidebar-articles.cs-sidebar-articles--tree a {
  padding-bottom: 0;
}

#new_content .categorie {
  color: #007ce2;
}

#new_content .cs-count {
  color: #007ce2;
  background: #dbefff;
  width: 24px;
  display: inline-block;
  text-align: center;
  border-radius: 36px;
  font-size: 12px !important;
  margin-left: 4px;
}

/* On remet UNE séparation propre uniquement entre les niveaux 1 (catégories) */
#new_content .cs-sidebar-articles.cs-sidebar-articles--tree .cs-cat--lvl1 {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--cs-border-color);
}

#new_content
  .cs-sidebar-articles.cs-sidebar-articles--tree
  .cs-cat--lvl1:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Garder l’indentation */
#new_content .cs-sidebar-articles.cs-sidebar-articles--tree .cs-cat--lvl2 {
  padding-left: 12px;
  margin-top: 6px;
}

#new_content .cs-sidebar-articles.cs-sidebar-articles--tree .cs-cat--lvl3 {
  padding-left: 24px;
  margin-top: 6px;
}

/* Rendre les liens cliquables uniquement sur le texte */
#new_content .cs-sidebar-articles.cs-sidebar-articles--tree a {
  display: inline;
  padding: 0;
}

#new_content img {
  max-width: 100%;
}

#new_content .cs-question,
#new_content h3 {
  margin: 28px 0 8px;
  font-size: 20px !important;
  font-weight: 700;
  color: #0b2b3a;
}

#new_content .cs-sticky-group.is-sticky {
  position: fixed;
  top: 120px;
  z-index: 5;
}

#new_content .cs-sticky-group.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* À ajouter dans votre CSS scoped (ou dans un <style> placé sur la page), sous #new_content */
#new_content .cs-frise {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  background: #dbefff;
  border-radius: 16px;
  padding: 56px 24px 22px 24px;
  margin-top: 30px;
}

#new_content .cs-frise .titleDiv {
  position: absolute;
  top: -18px;
  left: 18px;
  background: #0aa5c9;
  color: #fff;
  border-radius: 18px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
}

#new_content .cs-frise .day {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 0 10px;
}

#new_content .cs-frise .day > div {
  min-width: 0;
}

#new_content .cs-frise .time {
  display: inline-block;
  align-items: center;
  justify-content: center;
  width: auto;
  border-radius: 999px;
  background: #fff;
  color: #0a8db1;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 10px;
  padding: 5px 10px;
}

#new_content .cs-frise .contentStep {
  margin: 0;
  color: #0a8db1;
  font-size: 16px;
  line-height: 1.35;
}

#new_content .cs-frise .contentStep span {
  display: block;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.15;
  margin-bottom: 6px;
}

#new_content .cs-frise .day img {
  width: 58px;
  height: auto;
  flex: 0 0 auto;
  margin-top: 6px;
}

#new_content .cs-frise .separatorStep {
  width: 1px;
  background: rgba(10, 141, 177, 0.25);
  align-self: stretch;
}

@media (max-width: 900px) {
  #new_content .cs-frise {
    grid-template-columns: 1fr;
    padding: 56px 18px 18px 18px;
  }
}

@media (max-width: 900px) {
  #new_content .cs-frise .separatorStep {
    display: none;
  }
}

@media (max-width: 900px) {
  #new_content .cs-frise .day {
    padding: 10px 0;
  }
}

/* À ajouter sous #new_content (réutilise la logique “badge flottant” de .cs-frise) */
#new_content .cs-note.cs-note--pill {
  position: relative;
  background: #dbefff;
  border-radius: 16px;
  padding: 32px 24px 24px 24px;
  margin-top: 30px;
  margin-bottom: 12px;
}

#new_content .cs-note.cs-note--pill .cs-note-title {
  position: absolute;
  top: -18px;
  left: 22px;
  background: #0aa5c9;
  color: #fff;
  border-radius: 18px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
}

#new_content .cs-note.cs-note--pill .cs-note-text {
  margin: 0;
  color: #0a8db1;
  font-size: 18px;
  line-height: 1.35;
  padding-left: 6px;
}

@media (max-width: 900px) {
  #new_content .cs-note.cs-note--pill {
    padding: 30px 18px 18px 18px;
  }
}

#new_content .listPictos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  text-align: center;
  margin: 24px auto;
  padding: 0;
}

#new_content .listPictos > div {
  width: 140px;
  padding: 16px 8px;
  box-sizing: border-box;
  font-size: 13px !important;
  line-height: 1.3;
  flex: 0 0 auto;
}

#new_content .listPictos img.imgPicto {
  display: block !important;
  margin: 0 auto 8px !important;
  float: none !important;
  position: static !important;
  transform: none !important;
  width: 100px !important;
  height: 100px !important;
  max-width: 100%;
  object-fit: contain !important;
}

#new_content .listPictos span {
  display: block;
  word-break: break-word;
}

@media (max-width: 480px) {
  #new_content .listPictos {
    gap: 12px;
  }

  #new_content .listPictos > div {
    width: 90px;
    padding: 12px 6px;
    font-size: 12px !important;
  }

  #new_content .listPictos img.imgPicto {
    width: 90px !important;
    height: 90px !important;
  }
}

#new_content * {
  font-size: 1em !important;
  line-height: 1.5em;
}

#new_content a {
  color: var(--cs-link-color);
}

#new_content a:hover {
  text-decoration: underline;
}

#new_content p,
#new_content ul,
#new_content ol,
#new_content table {
  color: #767676;
}

#new_content header {
  position: relative;
  display: block;
}

#new_content #intro {
  margin-top: 6px;
}

#new_content .breadcrumb {
  padding: 0;
}

#new_content .breadcrumb p {
  align-items: left;
  justify-content: left;
}

#new_content .breadcrumb a {
  padding: 0;
  color: var(--cs-link-color);
}

#new_content h1 {
  padding: 0;
  font-size: 2.2em !important;
  width: 95%;
  line-height: 1.2em;
  margin-bottom: 12px;
}

#new_content h2 {
  padding: 20px 0 6px 0;
  font-size: 2em !important;
  width: 90%;
  color: #0b2b3a;
  line-height: 1.2em;
}

#new_content h3 {
  padding: 20px 0 6px 0;
  width: 90%;
}

#new_content h3.h4 {
  padding: 0 0 0 0;
  width: 90%;
  margin: 1em 0 0.5em 0;
  line-height: 1.2em;
}

#new_content .article_blog .br-spacer {
  display: block;
  height: 12px;
}

/* #new_content .article_blog p .br-spacer {
	height: 12px
} */

#new_content .article_blog li .br-spacer {
  height: 8px;
}

#new_content h4 {
  padding: 20px 0 6px 0;
  font-size: 1.5em !important;
  width: 90%;
}

#new_content h5 {
  padding: 20px 0 6px 0;
  font-size: 1.3em !important;
  width: 90%;
}

#new_content h6 {
  padding: 20px 0 6px 0;
  font-size: 1.15em !important;
  width: 90%;
}

@media (max-width: 991.98px) {
  #new_content h1 {
    font-size: 1.7em !important;
  }

  #new_content h2 {
    font-size: 1.6em !important;
  }

  #new_content h3 {
    font-size: 1.5em !important;
  }

  #new_content h4 {
    font-size: 1.35em !important;
  }

  #new_content h5 {
    font-size: 1.2em !important;
  }

  #new_content h6 {
    font-size: 1.1em !important;
  }
}

#new_content .cs-page-elements {
  position: relative;
  padding: 21px;
  margin: 116px auto 0 auto;
  z-index: 0;
}

#new_content .cs-page-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

#new_content .cs-main {
  flex: 0 0 65%;
  max-width: 65%;
  padding-right: 24px;
}

#new_content .cs-sidebar {
  width: 33%;
}

#new_content .ancre {
  scroll-margin-top: 100px;
}

@media (min-width: 768px) {
  #new_content .cs-page-elements {
    width: calc(100% - var(--gap-carousel) * 2);
  }
}

@media screen and (min-width: 1600px) {
  #new_content .cs-page-elements {
    width: calc(80vw - 3 * var(--gap-carousel));
  }
}

@media (max-width: 991.98px) {
  #new_content .cs-page-elements {
    width: 90vw;
    margin-top: 106px;
    padding: 0;
  }

  #new_content header {
    padding: 0;
  }

  #new_content .cs-page-layout {
    flex-direction: column;
  }

  #new_content .cs-main,
  #new_content .cs-sidebar {
    flex: 0 0 100%;
    max-width: 100%;
    padding-right: 0;
  }

  #new_content .cs-grid-2x2 {
    gap: 16px !important;
  }
}

@media (max-width: 768px) {
  #new_content .cs-sidebar {
    width: 100%;
  }
}

#new_content .cs-main > * + * {
  margin-top: 1.5rem;
}

#new_content .cs-main p {
  line-height: 1.6;
  margin-bottom: 16px;
}

#new_content .cs-media-caption {
  text-align: right;
  font-style: italic;
  font-size: 13px !important;
  color: #555;
  opacity: 0.8;
  margin-top: 0.5rem;
}

#new_content .cs-media {
  margin: 2rem 0;
}

#new_content .cs-media-figure {
  width: 100%;
  border-radius: var(--cs-radius);
  overflow: hidden;
}

#new_content .cs-media-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--cs-radius);
  margin: 12px 0;
}

#new_content ul {
  margin-top: 12px;
  list-style-type: none;
  padding-left: 0;
}

#new_content ul li + li,
#new_content ol li + li {
  margin-top: 0.25rem;
  padding-left: 0;
}

.puceArticle {
  width: 18px;
  height: 18px;
  display: inline;
  position: relative;
  top: 3px;
  margin-right: 5px;
}

#new_content ol {
  list-style: none;
  counter-reset: item;
  padding-left: 0;
  margin-top: 16px;
}

#new_content ol li {
  counter-increment: item;
  position: relative;
  padding-left: 24px !important;
  margin-bottom: 0px;
}

#new_content ol li::before {
  content: counter(item);
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-size: 10px;
  color: #fff;
  background: #3cb7ff;
  border-radius: 50%;
}

#new_content .cs-step {
  margin-top: 24px;
}

#new_content .cs-step-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
  padding-bottom: 24px;
}

#new_content .cs-step-grid--reverse .cs-step-text {
  order: 2;
}

#new_content .cs-step-grid--reverse .cs-step-media {
  order: 1;
}

#new_content .cs-step-text {
  background: #fff;
  margin-top: 24px;
}

#new_content .cs-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  line-height: 34px;
  padding: 2px 0;
  border-radius: 999px;
  background: #3cb7ff;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  margin: 0 0 10px 0;
}

#new_content .cs-step h2 {
  margin: 0 0 10px 0;
}

#new_content .cs-step p {
  margin: 0;
}

#new_content .cs-step-media {
  display: flex;
}

#new_content .cs-step-img {
  width: 100%;
  min-height: 240px;
  border-radius: var(--cs-radius);
  background: var(--bg);
}

@media (max-width: 991px) {
  #new_content .cs-step-grid {
    grid-template-columns: 1fr;
  }

  #new_content .cs-step-grid--reverse .cs-step-text,
  #new_content .cs-step-grid--reverse .cs-step-media {
    order: initial;
  }

  #new_content .cs-step-img {
    min-height: 200px;
  }
}

#new_content blockquote {
  margin: 1em 0 0.2rem 0;
  padding: 1rem 1.25rem;
  font-style: italic;
  background: #dbefff;
  border-radius: 12px;
  color: #008cee;
  text-indent: 25px;
  position: relative;
}

#new_content blockquote:before {
  content: "";
  width: 24px;
  height: 24px;
  position: absolute;
  background: url(https://centreservicesdev.fr/assets/img/icons/info_outline_24dp_008CEE.svg)
    no-repeat center/cover;
  top: 16px;
  left: 17px;
}

#new_content .cs-table-wrapper {
  overflow-x: auto;
}

#new_content table {
  margin: 12px 0;
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--cs-radius);
  overflow: hidden;
}

#new_content th,
#new_content td {
  text-align: left;
  padding: 12px 0;
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #ddd;
  width: 50%;
}

#new_content tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.02);
}

#new_content td,
#new_content th {
  border-right: 1px solid #ddd;
  padding-right: 12px;
  padding-left: 12px;
}

#new_content td:last-child,
#new_content th:last-child {
  border-right: 0;
}

#new_content td:first-child,
#new_content th:first-child {
  padding-left: 0;
}

#new_content .cs-grid-2x2 {
  margin: 20px 0;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, 1fr);
}

#new_content .cs-grid-2x2 figure {
  margin: 0;
  border-radius: var(--cs-radius);
  overflow: hidden;
}

#new_content .cs-grid-2x2 img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--cs-radius);
}

#new_content .cs-share {
  margin-top: 40px;
}

#new_content .cs-share h2 {
  margin-bottom: 16px;
}

#new_content .cs-share-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

#new_content .cs-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: #fff;
  border-radius: 120px;
  border: 1px solid #ccc;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

#new_content .cs-share-btn img {
  width: 40px;
  height: 40px;
}

#new_content .cs-share-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

#new_content .cs-share-btn.facebook {
  background: #1877f2 !important;
  border: 1px solid #0f66d6;
}

#new_content .cs-share-btn.facebook img {
  filter: brightness(0) invert(1);
}

#new_content .cs-share-btn.facebook:hover {
  background: #0f66d6 !important;
}

@media (max-width: 991.98px) {
  #new_content .cs-share {
    text-align: center;
  }

  #new_content .cs-share-buttons {
    justify-content: center;
  }
}

#new_content .cs-sidebar-articles {
  list-style: none;
  padding: 0;
  margin: 0;
}

#new_content .cs-sidebar-articles li {
  border-bottom: 1px solid var(--cs-border-color);
}

#new_content .cs-sidebar-articles li:last-child {
  border-bottom: 0 !important;
}

#new_content .cs-sidebar-articles li + li {
  margin-top: 10px;
}

#new_content .cs-sidebar-articles a {
  text-decoration: none;
  color: var(--cs-link-color);
  font-size: 0.95em;
  line-height: 1.4;
  display: block;
  opacity: 0.85;
  transition: opacity 0.2s;
  padding-bottom: 6px;
}

#new_content .cs-sidebar-articles a:hover {
  text-decoration: underline;
  opacity: 1;
}

#new_content .cs-sidebar-block {
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--cs-radius);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

#new_content #search_articles h3 {
  padding-top: 0;
}

#new_content .cs-sidebar-block--tall {
  min-height: 100px;
  border: 1px solid var(--cs-border-color);
  background: #fff;
}

#new_content .cs-sidebar-block--medium {
  min-height: 150px;
  border: 1px solid var(--cs-border-color);
}

#new_content .cs-sidebar-block--small {
  min-height: 100px;
  border: 1px solid var(--cs-border-color);
}

#new_content .cs-sidebar-block-title {
  font-weight: 600;
  font-size: 1.2em !important;
  margin-bottom: 0.5rem;
}

#new_content .cs-sidebar-block-placeholder {
  font-size: 0.85rem;
}

#new_content .cs-quicklinks {
  margin: 16px 0 24px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

#new_content .cs-quicklinks a {
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--cs-radius);
  text-decoration: none;
  font-size: 0.9em !important;
  border: 1px solid var(--cs-border-color);
  color: var(--cs-link-color);
}

#new_content .cs-quicklinks a:hover {
  background: rgba(0, 0, 0, 0.1);
}

#new_content .cs-toc {
  margin: 10px 0 24px 0;
}

#new_content .cs-toc h3 {
  margin: 0 0 12px 0;
  font-size: 1.3em !important;
}

#new_content .cs-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#new_content .cs-toc li + li {
  margin-top: 6px;
}

#new_content .cs-toc a {
  text-decoration: none;
  color: var(--cs-link-color);
  opacity: 0.85;
  transition: opacity 0.2s;
}

#new_content .cs-toc a:hover {
  opacity: 1;
}

#new_content .cs-faq {
  margin-top: 40px;
}

#new_content .cs-faq-item {
  margin-bottom: 18px;
  margin-top: 10px !important;
  border-radius: var(--cs-radius);
  background: rgba(0, 0, 0, 0.03);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--cs-border-color);
}

#new_content .cs-faq-toggle {
  width: 100%;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

#new_content .cs-faq-toggle h4 {
  margin: 0;
  font-size: 1.2em !important;
  padding-top: 0;
  color: #000;
}

#new_content .cs-faq-icon {
  font-size: 1.4em;
  font-weight: bold;
  margin-left: 10px;
}

#new_content .cs-faq-content {
  max-height: 0;
  overflow: hidden;
  padding: 0 18px;
  transition:
    max-height 0.35s ease,
    padding 0.35s ease;
}

#new_content .cs-faq-content p {
  margin: 14px 0;
}

#new_content .cs-faq-item.open .cs-faq-content {
  max-height: 400px;
  padding: 0 18px 18px 18px;
}

#new_content .radius_defaut,
#new_content img,
#new_content .cs-media-figure,
#new_content .cs-sidebar-block,
#new_content .cs-grid-2x2 figure,
#new_content table,
#new_content pre {
  border-radius: var(--cs-radius) !important;
  overflow: hidden;
}

@media (min-width: 992px) {
  #new_content .cs-sticky-group {
    transition: opacity 0.35s ease;
  }

  #new_content .cs-sticky-group.is-sticky {
    position: fixed;
    top: 126px;
    z-index: 10;
  }

  #new_content .cs-sticky-group.is-hidden {
    opacity: 0;
    pointer-events: none;
  }
}

#new_content .cs-articles {
  margin-top: 40px;
}

#new_content .cs-articles h2 {
  margin-bottom: 18px;
}

#new_content .cs-articles-grid {
  display: grid;
  gap: 20px 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1199.98px) {
  #new_content .cs-articles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  #new_content .cs-articles-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* ======================
   CARD ARTICLE (DESKTOP)
====================== */

#new_content .cs-article-card {
  background: #fff;
  border-radius: var(--cs-radius);
  border: 1px solid var(--cs-border-color);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ======================
   THUMB – FIX iOS SAFARI
   (padding hack, fiable)
====================== */

#new_content .cs-article-thumb {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* ratio 4/3 */
#new_content .cs-article-thumb::before {
  content: "";
  display: block;
  padding-top: 75%;
}

#new_content .cs-article-thumb a {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
}

#new_content .cs-article-thumb img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
}

/* placeholder */
#new_content .cs-article-thumb--placeholder {
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.25);
  font-size: 3rem;
  font-weight: 300;
}

#new_content .cs-article-thumb--placeholder span {
  display: block;
  line-height: 1;
}

/* ======================
   CONTENU
====================== */

#new_content .cs-article-body {
  display: flex;
  flex-direction: column;
  padding: 0;
}

#new_content .cs-article-card h3 {
  margin: -8px 14px 4px 14px;
  font-size: 1.05em !important;
}

#new_content .cs-article-card h3 a {
  text-decoration: none;
  color: var(--cs-link-color);
}

#new_content .cs-article-card h3 a:hover {
  text-decoration: underline;
}

#new_content .cs-article-meta {
  margin: 0 14px 12px 14px;
  font-size: 13px !important;
  opacity: 0.7;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

#new_content .cs-article-sep {
  opacity: 0.8;
}

/* ======================
   MOBILE – STYLE YOUTUBE
====================== */

@media (max-width: 767.98px) {
  #new_content .cs-article-card {
    flex-direction: row;
    align-items: stretch;
    margin-bottom: 12px;
  }

  #new_content .cs-article-thumb {
    width: 42%;
    max-width: 160px;
    flex: 0 0 auto;
  }

  /* ratio 16/9 mobile */
  #new_content .cs-article-thumb::before {
    padding-top: 56.25%;
  }

  #new_content .cs-article-body {
    flex: 1 1 auto;
    padding: 10px 16px;
    min-width: 0;
  }

  #new_content .cs-article-card h3 {
    margin: -12px 0 0 0;
    font-size: 1em !important;
    width: 100%;
    padding: 12px 0 6px 0;
  }

  #new_content .cs-article-card h3 a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #new_content .cs-article-meta {
    margin: 0;
    padding: 0;
    font-size: 13px !important;
    opacity: 0.75;
  }
}

@media (max-width: 420px) {
  #new_content .cs-article-thumb {
    width: 44%;
    max-width: 140px;
  }

  #new_content .cs-article-body {
    padding: 10px;
  }
}

#new_content #sidebar_avis {
  background: url("https://centreservicesdev.fr/assets/img/ciel-01.jpg")
    no-repeat top left/cover;
  color: #fff;
}

#new_content #sidebar_avis p {
  color: #fff !important;
}

#new_content #sidebar_avis .cs-sidebar-block-title {
  color: #fff !important;
}

#new_content #sidebar_avis #etoiles {
  position: relative;
  top: 0;
}

#new_content #sidebar_avis #etoiles img {
  display: inline;
  width: 22px;
  height: 22px;
  transition: all ease 0.1s;
  filter: brightness(0) saturate(100%) invert(85%) sepia(31%) saturate(724%)
    hue-rotate(347deg) brightness(105%) contrast(103%) !important;
  transform: scale(1.1) !important;
}

#new_content #sidebar_avis .cs-sidebar-block-placeholder img {
  display: inline;
  width: 55px;
  position: relative;
  top: 4.3px;
  left: 2px;
}

#new_content .btn {
  background: #fff;
  padding: 5px 18px;
  display: inline-block;
  border-radius: 50px;
  color: #00a2ff;
}

#new_content #etoiles .star {
  position: relative;
  top: 0;
  animation: star-wave-top 2.5s ease-in-out infinite;
}

#new_content #etoiles .star:nth-of-type(1) {
  animation-delay: 0s;
}

#new_content #etoiles .star:nth-of-type(2) {
  animation-delay: 0.15s;
}

#new_content #etoiles .star:nth-of-type(3) {
  animation-delay: 0.3s;
}

#new_content #etoiles .star:nth-of-type(4) {
  animation-delay: 0.45s;
}

#new_content #etoiles .star:nth-of-type(5) {
  animation-delay: 0.6s;
}

@keyframes star-wave-top {
  0%,
  70%,
  100% {
    top: 0;
  }

  40% {
    top: -6px;
  }
}

#new_content .cs-img-animation {
  position: relative;
  width: 100%;
}

#new_content .cs-img-animation img {
  display: block;
  width: 100%;
}

#new_content .cs-img-animation img:first-of-type {
  position: relative;
  z-index: 1;
}

#new_content .cs-img-animation img:nth-of-type(2),
#new_content .cs-img-animation img:nth-of-type(3) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}

.cs-img-animation img:nth-of-type(2) {
  animation: slide-right-left 10s ease-in-out infinite;
  will-change: transform;
}

footer {
  padding: 21px;
}

#new_content #sidebar_qualite {
  background: url("https://centreservicesdev.fr/assets/img/carnet_liaison_01.jpg")
    no-repeat bottom left/cover;
  color: #fff;
}

#new_content #sidebar_qualite p {
  color: #fff;
}

#new_content .cs-sidebar-block .btn {
  line-height: 18px;
  height: 32px;
}

#new_content .cs-page-layout.cs-page-layout--full {
  display: block !important;
}

#new_content .cs-page-layout.cs-page-layout--full > .cs-main {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-right: 0 !important;
}

#new_content .cs-page-layout.cs-page-layout--full > .cs-sidebar {
  display: none !important;
}