/****************/
/* CSS THEME 8 */
/****************/

/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Kalam&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Helvetica+Neue:300&display=swap');

@font-face {
    font-family: 'Calibri Light';
    src: url('/font/th8/calibril.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* DEBUT VAR COULEURS */
:root
{
    /* COLOR PERSONNALISE */
    --color-main: #84c427;
    --color-main-p: white;    --color-second: #84c427;
    --color-second-p: white;}

.th8 .rubformulaire select:focus,
.th8 .rubformulaire select::placeholder
    {
        color: black!important;
    }


/****************/
/* CSS Variable */
/****************/


@import "multitheme.css";

/* DEBUT VAR COULEURS */
:root {
  /* COLOR FIXE */
  --btn-black-color: #00000044;
  --bg-black: linear-gradient(to top, #152226, #101a1d) !important;
  --bg-cream: linear-gradient(to top, #faf4e9, #fff9ee);
}
/* FIN VAR COULEURS */

#reopen-customization {
  left: 20px !important;
  right: initial !important;
}

/* DEBUT AI */
#econeto-ai {
  order: 2;
}

#econeto-ai p,
#econeto-ai span {
  font-size: 20px !important;
}

body:has(#econeto-ai) #contentlogo .logo {
  display: none;
}

.page_prestation:has(#econeto-ai) #contentlogo {
  display: none;
  margin: 0px !important;
}

.page_prestation:has(#econeto-ai) #carousel .content {
  margin: auto 0px 10% 0px !important;
}

.th8:has(#econeto-ai) #carousel {
  height: 100vh;
}

.page_prestation:has(#econeto-ai) #carousel {
  height: initial !important;
}

.th8:has(#econeto-ai) #carousel .filtre {
  flex-direction: column;
}

.body:has(#econeto-ai) #carousel .content {
  max-width: initial !important;
}

/* FIN AI */
/*scroll-snap-type: y mandatory;*/
body {
  font-family: Calibri light, Helvetica Neue Light;
  color: #393939;
  position: relative;
  background-color: #152226;
}
/* DEBUT BODY BARRE */
.body-barre {
  scroll-snap-align: start;
}
.body-barre .msgokdlpdf {
  color: white;
}
/* FIN BODY BARRE */

.thlog-espace-piece.th8 .body {
  padding: var(--padding-full);
}
.thlog-espace-piece.th8 #carousel {
  max-height: 600px;
}
.thlog-espace-piece.th8 .detailpiece,
.thlog-espace-piece.th8 .detailpiece a {
  color: white;
}

.th8 #divafficherphoto .detailpiece .listevent,
.th8 #divafficherphoto .detailpiece .listevent a,
.th8 #divafficherphoto .containerphotos {
  color: black;
}
/* Chrome, Safari, Edge, Opera, delete arrows on input */
.th8 input::-webkit-outer-spin-button,
.th8 input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox, delete arrows on input */
.th8 input[type="search"] {
  cursor: text !important;
  text-align: left !important;
}

.th8 input[type="number"] {
  -moz-appearance: textfield;
}

.th8 input[type="tel"] {
  cursor: text;
}

.th8 input[type="text"],
.th8 input[type="number"] {
  cursor: text !important;
  text-align: left !important;
}

.th8 input[type="text"]::-webkit-input-placeholder {
  /* Edge */
  color: #888888;
}

.th8 input[type="text"]:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #888888;
}

.th8 input[type="text"]::placeholder {
  color: #888888;
}

.th8 input:focus,
.th8 select:focus {
  outline: transparent;
  border: none;
}

.th8 input,
.th8 select {
  width: 100%;
  box-sizing: border-box;
  color: #393939;
  outline: none;
  resize: none;
  height: 31.33px;
  border: 0.5px solid #eeeeee;
  border-radius: 3px;
  outline: none;
  user-select: none;
  padding: 5px 10px;
  display: flex;
  background-color: #f7f7f7;
}

.th8 select {
  cursor: pointer;
}

.th8 input:active {
  outline: none;
}

.th8 textarea {
  box-sizing: border-box;
  overflow: auto;
  padding: 10px;
  border-radius: 3px;
  border: none;
}

.th8 p {
  margin: 0px;
  font-size: 16px;
  text-align: justify;
}

.th8 h1 {
  margin: auto 0px;
  font-size: 60px;
  font-weight: bold;
  font-family: Open Sans;
  user-select: none;
  color: white;
  text-shadow: 0px 4px 14px #111921;
  text-transform: uppercase;
  word-break: break-word;
}

.th8 h2 {
  font-size: 30px;
  font-weight: lighter;
  margin: 0px 0px 40px 0px;
  font-family: Open Sans;
}

.th8 h3 {
  font-size: 23px;
  font-weight: lighter;
  margin: 0px 0px 15px 0px;
}

.th8 a {
  text-decoration: none;
  color: #393939;
  cursor: pointer;
}

.th8 hr {
  border: 1px solid #cecece;
}

/* DEBUT VAR PADDING */
:root {
  --padding-full: 70px 15%;
}

@media (max-width: 1700px) {
  :root {
    --padding-full: 70px 10%;
  }
}

@media (max-width: 1300px) {
  :root {
    --padding-full: 70px 5%;
  }
}

@media (max-height: 900px) {
}

@media (max-width: 600px) {
  :root {
    --padding-full: 30px 3%;
  }
}

/* FIN VAR PADDING */

/* START SCROLLBAR */
::-webkit-scrollbar {
  width: 15px;
  background-color: white;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-second);
}
/* FIN SCROLLBAR */

.popupdevisgratuit {
  text-align: center;
}

body .gradient {
  height: 100%;
  width: 50%;
  padding: 20px 0px 20px 15%;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
}

.th8 .flex {
  display: flex;
}

.th8 .flex p {
  margin-top: auto;
  margin-bottom: auto;
}

.th8 p,
.th8 form {
  font-size: 20px;
  margin: 0px;
  color: #353535;
  font-weight: lighter;
}

.th8 .btn {
  display: flex;
  width: fit-content;
  border-radius: 5px;
  padding: 15px 30px;
  font-weight: bold;
  transition: 0.5s;
  cursor: pointer;
  background-color: #00000020;
}

.th8 .btn:hover {
  transition: 0.5s;
  transform: scale(1.05);
}

.th8 .btn a,
.th8 .btn p {
  margin: 0px !important;
  text-align: center;
}

.th8 .btncalltoac img {
  border-right: 1px solid white;
}

.th8 .btncalltoac {
  display: flex;
  width: fit-content;
  border-radius: 5px;
  padding: 15px 30px;
  transition: 0.5s;
  background-color: var(--color-second);
  transition: 0.5s;
  height: fit-content;
  cursor: pointer;
  color: white;
}

.th8 .btncalltoac:hover {
  transition: 0.5s;
  transform: scale(1.05);
}

.th8 .btn img,
.th8 .btncalltoac img {
  height: 15px;
  padding-right: 15px;
  margin: auto 15px auto 0px;
  border-right: 1px solid white;
}

.th8 .btn img:nth-child(2),
.th8 .btncalltoac img:nth-child(2) {
  border: none;
  padding: 0px;
}

.th8 .btncalltoac p {
  color: white;
  font-size: 30px;
  text-align: center;
  margin: auto;
}

.th8 .menugeneral {
  position: fixed;
  z-index: 200;
  transition-delay: 2s;
  transition: all 2s ease-in-out;
}

.th8 .invisible {
  left: 5%;
  top: 20px;
  transition: all 0s ease-in-out;
}

.th8 .menugeneral .content {
  transition: visibility 0.5s ease-in-out;
}

.th8 .invisible .content {
  transition: visibility 0s ease-in-out;
  visibility: hidden;
  width: 0px;
}

.th8 .menuvisible {
  background-color: #00000075 !important;
  position: fixed;
  width: 360px;
  padding: 30px;
  box-sizing: border-box;
  z-index: 500;
  transition: none;
}

.th8 .menuvisible .content {
  width: 100%;
  visibility: visible;
  display: flex;
  flex-direction: column;
}

.th8 .menugeneral img {
  height: 10px;
}

.th8 .menugeneral .menu-btn {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  margin: auto;
  user-select: none;
}

.th8 .menugeneral .btn-line {
  width: 40px;
  height: 4px;
  background-color: white;
  margin: 3px 0;
  border-radius: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Ajout de l'ombre */
}

.th8 .menugeneral a,
.th8 .menugeneral .content div {
  width: 100%;
  cursor: pointer;
  margin: 5px auto;
  user-select: none;
  box-sizing: border-box;
  display: flex;
  font-size: 20px;
  padding: 10px 20px;
  font-family: Open Sans;
  color: #484848;
  border-radius: 3px;
}

.th8 .menugeneral .content div 
{

}

.th8 .menugeneral a:hover,
.th8 .menugeneral .content div:hover {
  background-color: #00000045 !important;
  transition: 0.5s;
}

.th8 .menugeneral p {
  margin: auto;
  font-size: 20px;
  font-family: Open Sans;
  color: white;
}

.th8 .menugeneral img {
  border-right: 1px solid white;
}

.th8 .menugeneral img,
.th8 .menugeneral img {
  height: 15px;
  padding-right: 15px;
  margin: auto 15px auto 0px;
}

.th8 .menugeneral .btn {
  background-color: white;
}

.th8 .menugeneral a div {
  height: 3px;
  background-color: #000000;
  width: 0%;
  transition: 0.5s;
  margin-top: 5px;
  border-radius: 50px;
}

.th8 .menuvisible .menu-btn {
  margin: 0px 0px 0px auto;
  width: fit-content;
}

.th8 #carousel {
  display: flex;
  position: relative;
  min-height: calc(100vh - 350px);
  width: 100%;
  box-sizing: border-box;
  scroll-snap-align: start;
  flex-direction: column;
}

.th8:has(#econeto-ai) #carousel h1 {
  margin: auto 0px 0px 0px;
}

.page_mentions #carousel {
  height: 600px;
}

.th8 #carousel .carousel-image {
  /*filter: grayscale(80%);*/
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  flex: 1;
  opacity: 0; /* Définir l'opacité initiale de toutes les images à 0 */
  position: absolute;
  transition: opacity 1s; /* Ajouter une transition pour un effet de fondu enchaîné */
  width: 100%;
}

.th8.safari #carousel .carousel-image {
  background-attachment: scroll !important;
}

.th8 #carousel .carousel-image:first-child {
  opacity: 1; /* Afficher la première image avec une opacité de 1 */
}

.th8 #carousel .filtre {
  width: 100%;
  height: 65%;
  display: flex;
  padding: 0px 15%;
  box-sizing: border-box;
  justify-content: space-between;
  min-height: 50vh;
  position: absolute;
  z-index: 2;
  background-image: linear-gradient(to top, #111921, #00000000);
  bottom: 0;
}

.th8 #carousel .content {
  padding: var(--padding-full);
  max-width: 750px;
  z-index: 10;
  order: 4;
}

.th8 .rubrique .filtre {
  width: 100%;
  height: 100%;
}

.th8 #carousel .btncalltoac {
  padding: 15px 30px;
  background-color: #00000044 !important;
}

.th8 #carousel .btncalltoac {
  color: white;
  font-size: 25px;
  font-weight: lighter;
  letter-spacing: 0.1rem;
  text-shadow: 0px 4px 4px black;
}

.th8 #carousel .presuiv .btncalltoac:first-child {
  margin: 0px 15px 15px 0px;
}

.th8 #carousel #contentlogo {
  z-index: 3;
  padding: var(--padding-full);
  order: 3;
  margin-top: auto;
}

.th8 #carousel .reseaux {
  z-index: 3;
  display: flex;
  margin: 15px 15px 0px auto;
  max-height: 55px;
  display: flex;
  border-radius: 3px;
  transition: all 1s;
  order: 1;
}

.th8 #carousel:hover .reseaux {
  background-color: #00000010;
}

.th8 #carousel .reseaux .icoshop
{
  padding-right: 10px;
  margin-right: 10px;
  border-right: 1px solid white;
}

.th8 #carousel .reseaux a
{
  padding: var(--small-padding);
}

.th8 #carousel .reseaux a:hover {
  background-color: #00000040;
  transition: all 1s;
  border-radius: var(--small-bradius);
}

.th8 #carousel .reseaux a:hover img {
  transition: 0.5s;
  transform: scale(1.5);
}

.th8 #carousel .reseaux img {
  height: 40px;
  transition: 0.5s;
}

.th8.page_prestation #carousel h1 {
  font-weight: bold;
  font-family: Open Sans;
  user-select: none;
  color: white;
}

.th8:not(.page_prestation, .page_mentions) #carousel h1 {
  color: white;
  font-size: 25px;
  margin: 20px 0px 60px 0px;
}
.th8:not(.page_prestation, .page_mentions) #carousel h1 span {
  display: none;
}

.th8 #carousel #contentlogo .logo {
  height: 150px;
  margin-bottom: 30px;
  user-select: none;
  border-radius: 50px 20px 50px 0px;
}

.th8 #carousel .content hr {
  height: 2px;
  background-color: white;
  border-radius: 50px;
  width: 200px;
  margin-left: inherit;
}

.landing #carousel {
  height: 100vh;
}

.th8 #carousel .presuiv {
  display: flex;
  flex-wrap: wrap;
}

/* Début rubrique rubmentions */
.page_mentions .rubmentions {
  padding: var(--padding-full);
  background: var(--bg-cream);
}

.page_mentions .rubmentionscontent {
  background-color: white;
  padding: 30px;
  border-radius: 3px;
  box-sizing: border-box;
}

.page_mentions .rubmentions p {
  margin-bottom: 15px;
}
/* Fin rubrique rubmentions */

/* Début rubrique présentation presta */
.th8 .rubprespresta {
  padding: var(--padding-full);
  display: flex;
  background: var(--bg-black);
  position: relative;
  scroll-snap-align: start;
}

.th8 .rubprespresta .content {
  width: 100%;
  display: flex;
  margin: auto;
  justify-content: space-between;
  z-index: 25;
  overflow: hidden;
  position: relative;
}

.th8:has(#econeto-ai) .rubprespresta .content {
  margin-top: 0px;
}

.th8 .rubprespresta .content meta {
  display: none;
}
.th8 .rubprespresta .filterleft,
.th8 .rubprespresta .filterright {
  height: 350px;
  position: absolute;
  width: 200px;
  z-index: 100;
  transition: background 0.5s;
  margin-top: -200px;
}

.th8 .rubprespresta .filterleft {
  left: 15%;
  background: linear-gradient(
    to right,
    rgba(17, 25, 33, 1),
    rgba(0, 0, 0, 0)
  ); /* Gradient on the left */
}

.th8 .rubprespresta .filterright {
  right: 15%;
  background: linear-gradient(
    to left,
    rgba(17, 25, 33, 1),
    rgba(0, 0, 0, 0)
  ); /* Gradient on the left */
}

.th8 .scroll-arrow {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 200;
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  transform: translateY(-50%);
  top: 50%;
}

.th8:has(#econeto-ai) .scroll-arrow {
  top: 50%;
}

.th8 .left-arrow {
  left: 10%;
}

.th8 .right-arrow {
  right: 10%;
}

.th8 .scroll-arrow img {
  height: 100%;
  margin: auto;
}

.th8 .rubprespresta .containerpresta {
  width: 20%;
  min-width: 250px;
  max-width: 250px;
  display: flex;
  flex-direction: column;
  transition: 0.5s;
  padding: 7.5px 15px;
  display: inline-block;
  box-sizing: border-box;
}

.th8 .rubprespresta .containerpresta .thumbnailcont {
  width: 100%;
  height: 350px;
  overflow: hidden;
}

.th8 .rubprespresta .thumbnail {
  background-size: cover;
  height: 350px;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 5px solid beige;
  transition: 0.5s;
}

.th8 .rubprespresta .containerpresta:hover .thumbnail {
  transition: 0.5s;
  transform: scale(1.05);
}

.th8 .rubprespresta p {
  font-family: Open Sans;
  font-weight: bold;
  text-align: left;
  color: white;
  margin-top: 15px;
  font-size: 19px;
  text-transform: uppercase;
}
/* Fin rubrique présentation presta */

/* DEBUT RUBRIQUE RUBRIQUE */
.th8 .rubrique p,
.th8 .rubrique h2,
.th8 .rubrique hr,
.th8 .rubriquepresta p,
.th8 .rubriquepresta h2,
.th8 .rubriquepresta hr,
.th8 .rubsatisfaits .pub p,
.th8 .rubsatisfaits h1,
.th8 .rubformulaire h2,
.th8 .rubformulaire p,
.th8 .rubformulaire select,
.th8 .rubformulaire input,
.th8 .rubformulaire textarea,
.th8 .rubformulaire .smallp a {
  color: var(--color-main-p) !important;
}
.th8 .action3f p {
  color: var(--color-second-p) !important;
}
.th8 .rubrique {
  position: relative;
  padding: var(--padding-full);
  display: flex;
  background-color: var(--color-main);
  scroll-snap-align: start;
}

.th8 .rubriquepresta {
  position: relative;
  padding: var(--padding-full);
  display: flex;
  background-color: var(--color-main);
  flex-wrap: wrap;
  gap: 30px;
}

/* CONDITION SI PAS DE DEUXIEME PARAGRAPHE */

/* FIN CONDITION SI PAS DE DEUXIEME PARAGRAPHE */

.th8 .rubriqueodd {
  flex-direction: row-reverse;
}

.th8 .rubriqueodd .halfleft {
  margin: 0px auto 0px 0px !important;
}

.th8 .rubriqueodd .halfleft .pic {
  border-radius: 0px 5px 5px 0px !important;
}

.th8 .rubriqueodd .halfright {
  margin: 0px 0px 0px auto !important;
  border-radius: 5px 0px 0px 5px !important;
}

.th8 .rubrique::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background-image: url('image/th8-losangesblack.svg');*/
  background-repeat: repeat;
  background-position: center;
  background-size: 110px;
  opacity: 0.04;
  pointer-events: none;
}

.th8 .losangebg .monsvg {
  fill: #00ff00;
}

.th8 .rubrique .halfleft *:not(.filtre) {
  z-index: 3;
}

.th8 .rubrique hr,
.th8 .rubriquepresta hr {
  height: 2px;
  background-color: rgba(
    255,
    255,
    255,
    0.2
  ); /* Utilisation de rgba pour plus de clarté */
  border: none;
  border-radius: 50px;
  width: 200px;
  margin: 20px 0; /* Ajout d'espace autour de l'hr */
  flex-shrink: 0; /* Empêche le rétrécissement */
  align-self: flex-start; /* Aligne le hr à gauche */
}
.th8 .oddrubprestation h2 {
  text-align: right;
}

.th8 .rubrique h2,
.th8 .rubriquepresta h2 {
  font-size: 40px;
  font-weight: bold;
  color: white;
  word-break: break-word;
  text-transform: uppercase;
  margin: 0px;
}

.th8 .rubprestation h2 {
  margin: auto 0px;
  font-size: 60px;
  font-weight: bold;
  user-select: none;
  color: white;
  text-shadow: 0px 4px 14px #111921;
  text-transform: uppercase;
}

.th8 .rubrique p {
  font-size: 20px;
  font-weight: lighter;
  color: white;
}
.th8 .rubrique h2,
.th8 .rubriquepresta h2 {
  text-shadow: none;
}

.th8 .rubrique .halfleft {
  margin-left: auto;
  width: 45%;
  max-width: 500px;
  display: flex;
}

.th8 .rubrique .halfright {
  margin-right: auto;
  background-color: #00000040;
  padding: 50px;
  width: 45%;
  max-width: 500px;
  box-sizing: border-box;
  border-radius: 0px 3px 3px 0px;
  z-index: 3;
  overflow: auto;
  max-height: 450px;
}
.th8 .rubrique .halfright::-webkit-scrollbar,
.th8 .rubrique .halfright::-webkit-scrollbar-thumb,
.th8 .rubriquepresta .prestadescr::-webkit-scrollbar,
.th8 .rubriquepresta .prestadescr::-webkit-scrollbar-thumb {
  border-radius: 0px 5px 5px 0px;
}

.th8 .rubrique .halfleft .pic {
  background-size: cover;
  height: 100%;
  width: 100%;
  max-width: 500px;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  border-radius: 5px 0px 0px 5px;
  margin: auto;
  display: flex;
  padding: 20px;
  /*filter: grayscale(80%);*/
  box-sizing: border-box;
}

.th8 .rubriquepresta .prestadescr {
  background-color: #00000040;
  padding: 50px;
  width: calc(50% - 30px);
  max-width: 650px;
  box-sizing: border-box;
  border-radius: 3px;
  z-index: 3;
  flex: 1;
  overflow: auto;
  max-height: 500px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.th8 .rubriquepresta .prestadescr p {
  color: white;
}

.th8 .rubriquepresta .prestadescr .btncalltoac {
  background-color: var(--btn-black-color);
  margin: 15px 0px 0px auto;
}

.th8 .rubriquepresta .prestadescr:has(.shortlink) p {
  width: 100%;
}

.th8 .rubriquepresta .prestadescr:has(.shortlink:nth-child(3)),
.th8 .rubriquepresta .prestadescr:has(iframe:nth-child(4)) {
  min-width: 100%;
  max-width: initial;
  flex-direction: row;
  flex-wrap: wrap;
  max-height: initial;
}

.th8 .rubriquepresta .prestadescr .shortlink {
  width: calc(50% - 10px);
}

.th8 .rubriquepresta .prestadescr iframe {
  width: 100%;
  max-width: initial;
}

.th8 .rubriquepresta .prestadescr:has(iframe:nth-child(4)) iframe {
  width: calc(50% - 20px);
}

.th8 .rubrique .halfleft .title {
  max-width: calc(100% - 80px);
  font-size: 45px;
  position: absolute;
  top: 40px;
  left: 40px;
}

.th8 .rubrique .halfleft .pic .btn {
  background-color: white;
  width: fit-content;
  margin: auto auto 0px auto;
}

.th8 .rubrique .btn p {
  color: black !important;
}
/* FIN RUBRIQUE RUBRIQUE */

/* DEBUT RUBRIQUE ENGAGEMENT */

.th8 .rubengagements {
  display: flex;
  height: 400px;
  background: var(--bg-black);
  flex-wrap: wrap;
  padding: var(--padding-full);
}

.th8 .engagement {
  display: flex;
  position: relative;
  width: 25%;
  margin: auto;
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 2s, transform 2s;
}

.th8 .engagement hr {
  height: 1.5px;
  background-color: white;
  border-radius: 50px;
  width: 100px;
  margin: 30px auto;
}

.th8 .engagement .engagementcontent {
  display: flex;
  flex-direction: column;
  margin: auto;
}

.th8 .engagement .engagementcontent img {
  height: 70px;
  margin: auto;
}

.th8 .engagement .engagementcontent .icoengagement {
  font-size: 70px;
  height: 70px;
  overflow: hidden;
  display: inline-block;
  opacity: 1;
  transition: opacity 0.5s, transform 0.5s;
}

.th8 .engagement .engagementcontent .icoengagement.active {
  opacity: 1;
  transform: translateY(0);
}

.th8 .engagement p {
  color: white;
  text-align: center;
  font-weight: lighter;
}
/* FIN RUBRIQUE ENGAGEMENT */

/* DEBUT RUB WHATSAPP */
.th8 .blocwhatsapp_ferme {
  width: 60px;
  height: 60px;
  position: fixed;
  z-index: 2000;
  right: 15px;
  bottom: 15px;
  cursor: pointer;
  background-color: #185c51;
  border-radius: 50px;
  padding: 10px;
  box-sizing: border-box;
}

.th8 .blocwhatsapp_ouvert {
  width: 300px;
  position: fixed;
  right: 15px;
  bottom: 15px;
  z-index: 200;
  box-sizing: border-box;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 2000;
}
.th8 .blocwhatsapp_ouvert .nomsociete {
  margin-right: 25px !important;
}

.th8 .blocwhatsapp_ouvert .closetchat {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 3px;
  background-color: #0000001c;
  border-radius: 50px;
  display: flex;
  box-sizing: border-box;
  cursor: pointer;
}

.th8 .blocwhatsapp_ouvert .closetchat::after {
  content: "x";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  color: white;
  line-height: 1;
}

.th8 .blocwhatsapp_ouvert .whatsappcontent {
  padding: 20px;
  background-color: white;
}

.th8 .blocwhatsapp_ouvert .whatsapphead {
  background-color: #185c51;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
}

.th8 .blocwhatsapp_ouvert .whatsapphead p:last-of-type {
  font-size: 13px;
}

.th8 .blocwhatsapp_ouvert .whatsapphead div {
  display: flex;
  flex-direction: column;
  margin: auto 0px;
}

.th8 .blocwhatsapp_ouvert .whatsapphead img {
  height: 50px;
}

.th8 .blocwhatsapp_ouvert .btncalltoac {
  margin: 15px auto 0px auto;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.th8 .blocwhatsapp_ouvert p {
  color: white;
  font-size: 15px;
}

.th8 .blocwhatsapp_ouvert .message {
  background-color: #f2f2f2;
  color: black;
  padding: 10px;
  border-radius: 3px;
  width: 70%;
  position: relative;
  margin-left: 10px;
}

.th8 .blocwhatsapp_ouvert .message::before {
  content: "";
  position: absolute;
  top: 20px;
  left: -20px; /* Ajuste la position du pic, utilise "right" au lieu de "left" */
  border-width: 10px;
  border-style: solid;
  border-color: transparent #f2f2f2 transparent transparent; /* Ajuste l'ordre des couleurs */
  transform: translateY(-50%);
}

/* FIN RUB WHATSAPP */

/* DEBUT RUB 3F */
.th8 .rubrique3f {
  display: flex;
  flex-wrap: wrap;
  padding: var(--padding-full);
  background: var(--bg-black);
  position: relative;
  scroll-snap-align: start;
}

.th8 .rubrique3f h2 {
  color: white;
}

.th8 .rubrique3f .rubrique3fcontent {
  width: 100%;
}

.th8 .rubrique3f .container {
  min-width: 33.33%;
  height: 400px;
  position: relative;
  overflow: hidden;
  transition: background 0.5s, opacity 0.5s;
  cursor: default;
  flex: 1;
}

.th8 .rubrique3f .container .background::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  transition: transform 0.5s;
  transform: scale(1);
}

.th8 .rubrique3f .container:hover {
  background: rgba(17, 25, 33, 0.7); /* Changez la couleur de fond au survol */
  opacity: 1; /* Faites apparaître l'opacité au survol */
}

.th8 .rubrique3f .container:hover .background::before {
  transform: scale(
    1.1
  ); /* Appliquez la transformation scale sur l'élément ::before en cas de survol */
}

.th8 .rubrique3f .container .background {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
/*
.th8 .rubrique3f .container .bg1::before 
{
    background-image: url('image/IMG3.jpeg');
}

.th8 .rubrique3f .container .bg2::before 
{
    background-image: url('image/IMG4.jpeg');
}

.th8 .rubrique3f .container .bg3::before 
{
    background-image: url('image/IMG5.jpeg');
}*/
.th8 .rubrique3f .container .content {
  position: absolute;
  z-index: 300;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.th8 .rubrique3f .container .content p {
  opacity: 1;
  color: white;
  text-shadow: 0px 5px 5px #494949;
  transition: opacity 0.5s ease;
}

.th8 .rubrique3f .container:hover .content p {
  opacity: 0;
}

.th8 .rubrique3f .container .content .ville {
  font-weight: lighter;
  text-align: center;
}

.th8 .rubrique3f .container .content .titlepresta {
  font-family: Open Sans;
  font-weight: bold;
  text-align: center;
}

.th8 .rubrique3f .container .filter {
  opacity: 1;
  transition: opacity 0.5s, background 0.5s;
  z-index: 200;
  bottom: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  background: rgb(17 25 33 / 70%) none repeat scroll 0 0;
}

.th8 .rubrique3f .container:hover .filter {
  opacity: 0;
}

/* FIN RUB 3F */

/* Début Rubrique Prestations */
.th8 .rubprestation {
  display: flex;
  scroll-snap-align: start;
}

.th8 .rubprestation .colphotos {
  width: 20%;
  box-sizing: border-box;
}

.th8 .rubprestation .colphotos .photo {
  width: 100%;
  height: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.th8 .rubprestation .colprestation {
  display: flex;
  position: relative;
  background-size: cover;
  height: 50vh;
  min-height: 600px;
  width: 80%;
  background-position: center;
  background-repeat: no-repeat;
}

.th8 .rubprestation .btncalltoac {
  background-color: var(--btn-black-color);
}

.th8 .oddrubprestation {
  flex-direction: row-reverse;
}

.th8 .oddrubprestation .gradient {
  background-image: linear-gradient(
    to left,
    rgba(17, 25, 33, 1),
    rgba(0, 0, 0, 0)
  ) !important;
  margin: 0px 0px 0px auto !important;
}

.th8 .rubprestation .gradient {
  background-image: linear-gradient(
    to right,
    rgba(17, 25, 33, 1),
    rgba(0, 0, 0, 0)
  );
}

.th8 .rubprestation .content {
  left: 15%;
}

.th8 .oddrubprestation .content {
  right: 15% !important;
  left: initial !important;
}

.th8 .rubprestation .btncalltoac {
  margin-right: auto;
}

.th8 .oddrubprestation .btncalltoac {
  margin-left: auto !important;
  margin-right: 0px !important;
}

.th8 .rubprestation .content {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  max-width: 750px;
}

.th8 .rubprestation .content a {
  font-size: 30px;
  color: white;
  font-weight: lighter;
}

.th8 .lightbox,
.th8 #fullScreen {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 200;
}

.th8 #lightbox-img,
.th8 #fullScreenImage {
  max-width: 80%;
  max-height: 80%;
}

.th8 .close-btn,
.th8 #closeButton {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
  background-color: #ff000044;
  padding: 10px 15px;
  border-radius: 3px;
}
/* Fin Rubrique Prestations */

/* Début Rubrique Call to action */
.th8 .rubaction {
  height: 250px;
  padding: 0px 15%;
  display: flex;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.th8 .rubaction .filter {
  background: var(--bg-black);
  opacity: 0.9;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
}

.th8 .rubaction .content {
  z-index: 3;
  margin: auto;
}

.th8 .rubaction .btncalltoac {
  background-color: var(--btn-black-color);
  padding: 20px 40px;
  color: white;
  font-size: 25px;
  text-align: center;
}

.th8 .containerdrappel {
  display: flex;
}

.th8 .drappel {
  background-color: white;
  display: flex;
  flex-direction: row !important;
  padding: 3px;
  height: fit-content;
  flex: 1;
  max-width: 270px;
  border-radius: 3px;
}

.th8 .rubaction .drappel {
  margin-right: 15px;
  height: auto;
}

.th8 .rubaction .drappel input {
  height: 100%;
}
/* Fin Rubrique Call to action */

/* Début Rubrique Satisfaits */
.th8 .rubsatisfaits {
  padding: var(--padding-full);
  background: var(--bg-cream);
}

.th8 .rubsatisfaits h1 {
  font-size: 40px;
  margin-bottom: 30px;
}

.th8 .rubsatisfaits .content {
  columns: 3;
  column-gap: 30px;
}

.th8 .rubsatisfaits .temoignage {
  min-height: 170px;
  display: inline-flex;
  margin-bottom: 30px;
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
}

.th8 .rubsatisfaits .bloccom {
  width: 60%;
  padding: 30px;
  position: relative;
  box-sizing: border-box;
  user-select: none;
  max-height: 260px;
  overflow: auto;
  margin-bottom: 30px;
}

.th8 .rubsatisfaits .bloccom::after {
  width: 15%;
  content: url(image/quote.svg);
  position: absolute;
  opacity: 0.04;
  bottom: 4%;
  right: 10%;
  pointer-events: none;
}

.th8 .rubsatisfaits .bloccom::-webkit-scrollbar {
  width: 10px;
  background-color: white;
}

.th8 .rubsatisfaits .bloccom::-webkit-scrollbar-thumb {
  background-color: #f2f2f2;
}

.th8 .rubsatisfaits .bloccom .nom {
  display: flex;
}

.th8 .rubsatisfaits .bloccom .blocnomright {
  margin: auto 0px auto 20px;
}

.th8 .rubsatisfaits .bloccom .blocnomright div {
  margin-top: -5px;
}

.th8 .rubsatisfaits .bloccom .nom p {
  font-size: 25px;
  font-family: "Kalam", cursive;
  flex: 1;
}

.th8 .rubsatisfaits .bloccom .blocnomright img {
  height: 15px;
}

.th8 .rubsatisfaits .commentaire {
  font-size: 20px;
  margin-top: 15px;
}

.th8 .rubsatisfaits .profilepic {
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 50%;
  margin: auto 0px;
}

.th8 .rubsatisfaits .profilepic img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ajuste l'image sans la déformer pour qu'elle couvre complètement le conteneur */
}

.th8 .rubsatisfaits .blocphoto {
  width: 40%;
  height: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  display: flex;
  position: relative;
}

.th8 .rubsatisfaits .pub .blocphoto {
  cursor: initial;
}

.th8 .rubsatisfaits .pub .blocphoto::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("image/ICO_SATISFIED.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40%;
  opacity: 0.06;
  pointer-events: none;
}

.th8 .rubsatisfaits .pub {
  width: 100%;
  background-color: var(--color-main);
}

.th8 .rubsatisfaits .pub .bloccom {
  display: flex;
  margin-bottom: 0px;
}

.th8 .rubsatisfaits .pub .btn {
  margin: auto 15px auto 0px;
  text-align: center;
}

.th8 .rubsatisfaits .pub p {
  max-width: 270px;
  font-weight: bold;
  font-size: 25px;
  margin: auto;
  color: #00000059;
}

.th8 .rubsatisfaits .pub img {
  opacity: 0.05;
  height: 50%;
  margin: auto;
}

.th8 .action3f {
  height: 250px;
  width: 100%;
  background-color: var(--color-second);
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  display: flex;
  margin-top: 20px;
}

.th8 .action3f .right {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 30px;
  box-sizing: border-box;
}

.th8 .action3f .btncalltoac {
  margin: auto;
  background: var(--btn-black-color);
}

.th8 .action3f p {
  font-size: 30px;
  color: white;
  margin: auto;
}

.th8 .action3f .gradient {
  top: 0;
  right: 50%;
  position: absolute;
  background-image: linear-gradient(
    to left,
    var(--color-second),
    rgba(0, 0, 0, 0)
  );
}

.th8 .action3f .background {
  background-size: cover;
  height: 100%;
  width: 50%;
  background-position: center;
  background-repeat: no-repeat;
}

/* Fin Rubrique Satisfaits */

/* Début Rubrique partenaire */
.th8 .rubpartenaires {
  padding: var(--padding-full);
  background: var(--bg-cream);
}

.th8 .rubpartenaires h1 {
  font-size: 40px;
  margin-bottom: 30px;
}

.th8 .rubpartenaires .containerpartenaires {
  background-color: white;
  box-sizing: border-box;
  display: flex;
  border-radius: 3px;
  flex-wrap: wrap;
}

.th8 .rubpartenaires .containerpartenaires img {
  width: 25%;
  padding: 30px;
  margin: auto;
  box-sizing: border-box;
  user-select: none;
}
/* Fin Rubrique partenaire */

/* Début Rubrique équipe */
.th8 .rubequipe {
  padding: var(--padding-full);
  min-height: 400px;
  scroll-snap-align: start;
}

.th8 .rubequipe .rubequipecontent {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: auto;
}

.th8 .rubequipe,
.th8 .rubequipe .identite {
  background: var(--bg-black);
}

.th8 .rubequipe .btn {
  margin-bottom: 15px;
}

.th8 .rubequipe h2 {
  width: 100%;
  margin-bottom: 30px;
  color: white;
}

.th8 .rubequipe .rubequipecontent.plusdequatre {
  flex-direction: column-reverse;
  max-width: initial;
}
.th8 .rubequipe .btncalltoac {
  margin: 30px 0px 0px 0px;
}

.th8 .rubequipe .containerequipe {
  column-gap: 15px;
  display: flex;
  flex-wrap: wrap;
}
.th8 .rubequipe .plusdequatre .containerequipe {
  columns: 4;
}
.th8 .rubequipe .descequipe {
  display: flex;
  flex-direction: column;
  margin: auto 20px auto 0px;
  color: white;
  max-width: 400px;
}
.th8 .rubequipe .plusdequatre .descequipe {
  margin: auto;
}

.th8 .rubequipe .containercollab:first-child {
  margin-top: 40px;
}
.th8 .rubequipe .plusdequatre .containercollab:first-child {
  margin-top: 0px;
}

.th8 .rubequipe .descequipe p {
  color: white;
}

.th8 .rubequipe .equipe {
  break-inside: avoid;
  flex: 1;
}
.th8 .rubequipe .plusdequatre .equipe {
  max-width: initial;
}

.th8 .rubequipe .containercollab {
  margin: 0px auto 50px auto;
  break-inside: avoid;
  background-color: #00000035;
  box-sizing: border-box;
  border-radius: 3px;
  position: relative;
  width: calc(50% - 15px);
  max-width: 350px;
  height: fit-content;
}
.th8 .rubequipe .plusdequatre .containercollab {
  width: calc(25% - 15px);
}

.th8 .rubequipe .collaborateur {
  width: 60%;
  padding-bottom: 60%;
  box-sizing: border-box;
  background-color: white;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 3px 0px 0px 0px;
}

.th8 .rubequipe .profiledeco {
  width: 40%;
  height: auto;
  background-color: var(--color-second);
  position: relative;
  border-radius: 0px 3px 0px 0px;
}

.th8 .rubequipe .profiledeco::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("image/th8-losangesblack2.svg");
  background-repeat: repeat;
  background-position: center;
  background-size: 335px;
  opacity: 0.15;
  pointer-events: none;
}

.th8 .rubequipe .flex {
  position: relative;
  margin-bottom: 15px;
}

.th8 .rubequipe .identite {
  display: flex;
  padding: 10px 15px;
  box-sizing: border-box;
  height: min-content;
  margin-top: auto;
  position: absolute;
  bottom: -22px;
  border-radius: 3px;
  left: 50%;
  z-index: 10;
  transform: translateX(-50%);
}

.th8 .rubequipe .nom p {
  display: flex;
  flex-direction: column;
  font-family: Open Sans;
  margin-bottom: 10px;
  margin: auto;
}

.th8 .rubequipe .descr {
  padding: 25px 15px 15px 15px;
  box-sizing: border-box;
  border-radius: 0px 0px 3px 3px;
  flex: 1;
}

.th8 .rubequipe .trbdesc {
  color:grey;
  padding: 5px;
  text-align: justify;
}

.th8 .rubequipe p {
  color: #ffffff80;
}

.th8 .rubequipe .collaborateur img {
  height: 200px;
}
/* Fin Rubrique équipe */

/* DEBUT RUBRIQUE PRESTA PHOTOS */
.th8 .rubprestaphotos {
  position: relative;
  min-height: 600px;
  padding: var(--padding-full);
  background: var(--bg-black);
  display: flex;
  flex-direction: column;
}

.th8 .rubprestaphotos h2 {
  color: white;
}

.th8 .rubprestaphotos .pelemele {
  display: flex;
  flex-wrap: wrap;
  min-height: 600px;
  width: 100%;
  padding-left: 200px;
  box-sizing: border-box;
}

.th8 .rubprestaphotos .photopelemele {
  width: 20%;
  padding-bottom: 20%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.th8 .rubprestaphotos .pelemelemenu {
  min-width: 400px;
  background-color: #000000ab;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 30px;
  box-sizing: border-box;
  border-radius: 3px;
}

.th8 .rubprestaphotos .pelemelemenu a {
  color: white;
  font-size: 25px;
  font-weight: lighter;
  background-color: #ffffff1c;
  margin: 7px 0px;
  width: 100%;
  box-sizing: border-box;
}

.th8 .rubprestaphotos .pelemelemenu a:first-child {
  margin: 0px 0px 7px 0px;
}

.th8 .rubprestaphotos .pelemelemenu a:last-child {
  margin: 7px 0px 0px 0px;
}
/* FIN RUBRIQUE PRESTA PHOTOS */

/* DEBUT FOOTER */
.th8 footer {
  background: var(--bg-black);
  position: relative;
  scroll-snap-align: start;
}

.th8 footer img {
  opacity: 0.3;
}

.th8 footer a,
.th8 footer p,
.th8 footer h1,
.th8 footer h2,
.th8 footer h3 {
  color: white;
}

.th8 footer .btn {
  background-color: #00000020;
  margin: 7.5px 0px;
}

.th8 footer .btnneutre {
  margin-left: 10px !important;
}

.th8 footer .btnneutre img {
  padding: 0px;
  border: none;
  margin: auto;
}

.th8 footer .btn p {
  font-size: 20px;
  font-weight: lighter;
}

.th8 footer .footercontainer {
  padding: var(--padding-full);
}

.th8 footer .content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.th8 footer .content:last-of-type {
  width: fit-content;
}

.th8 footer .label {
  margin-right: 15px;
  user-select: none;
}

.th8 footer .tel p,
.th8 footer .mail p {
  margin: auto 0px;
}

.th8 footer .mail a {
  display: flex;
}

.th8 footer .mail img:last-of-type {
  height: 20px;
  margin: auto;
  opacity: 1;
}

.th8 footer .mail img {
  margin-right: 0px !important;
}

.th8 footer .containerdrappel {
  display: flex;
}

.th8 footer .containerdrappel .btnpage {
  height: 37.32px;
  box-sizing: border-box;
}

.th8 footer .containerdrappel .btnpage p {
  font-size: 14px;
  margin: auto;
}

.th8 footer .drappel {
  margin: auto 15px auto 0px;
}

.th8 .drappel img {
  height: 15px;
  margin: auto;
  padding-right: 10px;
  padding-left: 5px;
  margin-right: 10px;
  border-right: 1px solid #353535;
}

.th8 footer .conditionsg .copyright {
  margin: auto 0px auto auto;
  font-size: 14px;
  flex: 1;
  text-align: right;
  color: #ffffff40;
}

.th8 footer .conditionsg .copyright a {
  font-size: 14px;
  font-weight: bold;
  color: #ffffff60;
}

.th8 footer .hrbas {
  margin: 15px auto 0px auto;
}

.th8 footer .conditionsg .btnpage p {
  font-size: 15px;
}

.th8 footer .conditionsg .btnpage img {
  height: 15px;
  margin: auto 10px auto 0px;
  padding-right: 10px;
  border-right: 1px solid white;
}

.th8 footer #footerrappel {
  padding: 0px 30px;
  min-width: 270px;
}

.th8 footer #footercoordonnees,
.th8 footer #footerrappel,
.th8 footer #footerrs {
  flex: 1;
  box-sizing: border-box;
}

.th8 footer #footerrs {
  width: fit-content;
  margin: auto;
}

.th8 footer #footerrs .content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.th8 footer .containerdrappel .btnpage {
  margin: 0px 0px 15px 0px;
}

.th8 footer .footerreseaux {
  background-color: #ffffff10;
  padding: 30px 15%;
  scroll-snap-align: start;
}

.th8 footer #footerrs .content img {
  height: 45px;
  padding: 5px;
  box-sizing: border-box;
  margin: 2.5px 7px;
  border-radius: 50px;
  background-color: #00000030;
  transition: 0.5s;
}

.th8 footer #footerrs .content img:hover {
  background-color: #586c73;
  transition: 0.5s;
  opacity: 1;
}

.th8 footer .conditionsg .btn {
  width: auto;
  margin-right: 15px;
}
/* FIN FOOTER */

/* DEBUT RUB LOCAUX */
.th8 .rubformulaire {
  padding: var(--padding-full);
  background-color: var(--color-main);
  scroll-snap-align: start;
}

.th8 .rubformulaire input,
.th8 .rubformulaire textarea,
.th8 .rubformulaire select,
.th8 .rubformulaire input[type="checkbox"] {
  background-color: #ffffff1a;
  border: none;
}

.th8 .rubformulaire h2,
.th8 .rubformulaire p,
.th8 .rubformulaire input,
.th8 .rubformulaire select,
.th8 .rubformulaire textarea {
  color: black;
}

.th8 .rubformulaire select:hover {
  color: black;
}

.th8 .rubformulaire p {
  margin: 15px 0px 5px 0px;
}

.th8 .rubformulaire a {
  color: white;
  text-decoration: underline;
}

.th8 .rubformulaire .content {
  display: flex;
}

.th8 .rubformulaire form {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.th8 .rubformulaire .fifty {
  width: 48%;
  box-sizing: border-box;
}

.th8 .rubformulaire .deuxchamps {
  display: flex;
  justify-content: space-between;
  margin: 15px auto;
}

.th8 .rubformulaire .everytimecharform {
  display: flex;
}

.th8 .rubformulaire .everytimecharform select {
  flex: 1;
}

.th8 .rubformulaire .everytimecharform p {
  width: 170px;
  margin: 0px;
}

.th8 .rubformulaire .deuxchamps label {
  width: calc(50% - 7.5px);
  display: flex !important;
}

.th8 .rubformulaire .deuxchamps input {
  flex: 1;
}

.th8 .rubformulaire .deuxchamps label p {
  width: 170px;
  margin: 0px;
}

.th8 .rubformulaire .fifty textarea {
  width: 100%;
  height: 150px;
  flex: 1;
}

.th8 .rubformulaire .divacceptrgpd {
  display: flex;
}

.th8 .rubformulaire .divacceptrgpd p {
  margin: auto 0px;
}

.th8 .rubformulaire .divacceptrgpd input {
  margin: auto 15px auto 0px;
}

.th8 .rubformulaire .smallp {
  font-size: var(--small-p);
}
.th8 .rubformulaire .smallinfosms {
  margin: auto 10px auto 0px;
}

.th8 .rubformulaire .mailsms {
  margin: 15px 0px 0px 0px;
}

.th8 .rubformulaire .btn {
  height: fit-content;
  background-color: var(--btn-black-color);
  margin-left: auto;
  margin-top: auto;
}

.th8 .rubformulaire .btn p {
  margin: 0px;
  color: white;
}

.th8 .rubformulaire .flex {
  margin: 15px 0px 0px 170px;
}

.th8 .rubformulaire .smallcontainer {
  width: 50%;
}
/* FIN RUB LOCAUX */

/* DEBUT RUB GALERIE */
.th8 .galerie {
  padding: var(--padding-full);
  background: var(--bg-black);
  scroll-snap-align: start;
}

.th8 .galerie h2 {
  color: white;
}

.th8 .galerie .album {
  column-width: 100px;
  column-count: 4;
  column-gap: 20px;
}

.th8 .galerie .album img {
  width: calc(100% - 4px);
  margin: 10px 0px;
  border-radius: 5px;
}

.page_prestation .rubrique3f h2 {
  color: white;
}
/* FIN RUB GALERIE */
@media (max-width: 2100px) {
  .th8 .rubsatisfaits .content {
    columns: 2;
  }

  .th8 .rubprestaphotos .mele1,
  .th8 .rubprestaphotos .mele6 {
    display: none;
  }

  .th8 .rubprestaphotos .photopelemele {
    width: 25%;
    padding-bottom: 25%;
  }
}

@media (max-width: 1700px) {
  .th8 .left-arrow {
    left: 5%;
  }

  .th8 .right-arrow {
    right: 5%;
  }

  .th8 #carousel .filtre {
    padding: 0px 10%;
  }

  .th8 footer .footercontainer {
    padding: 50px 10%;
  }

  .th8 .rubprestaphotos .mele2,
  .th8 .rubprestaphotos .mele7 {
    display: none;
  }

  .th8 .rubprestaphotos .photopelemele {
    width: 33.33%;
    padding-bottom: 33.33%;
  }
}

@media (max-width: 1500px) {
  .th8 .rubrique h2,
  .th8 .rubriquepresta h2,
  .th8 .rubprestation h2 {
    font-size: 50px;
  }

  .th8 #carousel .content {
    max-width: 600px;
  }

  .th8 .rubformulaire form {
    flex-direction: column;
  }

  .th8 .rubformulaire .fifty {
    width: 100%;
  }

  .th8 .rubprestation {
    flex-direction: column-reverse;
  }

  .th8 .oddrubprestation {
    flex-direction: column-reverse;
  }

  .th8 .rubprestation:nth-child(odd) {
    flex-direction: column-reverse;
  }

  .th8 .rubprestation .colprestation {
    width: 100%;
  }

  .th8 .rubprestation .colphotos {
    width: 100%;
    display: flex;
  }

  .th8 .rubprestation .colphotos .photo {
    width: 50%;
    height: 300px;
  }

  .th8 .rubprestaphotos .pelemelemenu {
    width: 100% !important;
    position: initial;
    transform: initial;
    width: fit-content;
    order: 2;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .th8 .rubprestaphotos .pelemelemenu a:first-child {
    margin: 7px 0px !important;
  }

  .th8 .rubprestaphotos .pelemelemenu a {
    width: 49%;
  }

  .th8 .rubprestaphotos h2 {
    order: 1;
  }

  .th8 .rubprestaphotos .pelemele {
    padding-left: 0px;
    order: 3;
  }
  .th8 .rubequipe .plusdequatre .containerequipe {
    columns: 3;
  }
}

@media (max-width: 1300px) {
  .thlog-espace-piece.th8 #carousel #contentlogo {
    margin: auto 30px auto 0px;
  }
  .thlog-espace-piece.th8 #carousel .content {
    margin: auto;
  }
  .th8 .rubrique h2,
  .th8 .rubriquepresta h2,
  .th8 .rubprestation h2 {
    font-size: 40px;
  }

  .th8 .scroll-arrow {
    display: none;
  }

  .th8 #carousel .content {
    flex: initial;
    margin: 0px;
  }

  .th8.page_prestation #carousel h1 {
    font-size: 50px;
    text-shadow: 0px 3px 10px #111921;
  }

  .th8 .rubriquepresta {
    justify-content: space-between;
  }

  .th8 .rubprespresta .content {
    flex-wrap: wrap;
  }

  .th8 .rubprespresta .containerpresta {
    width: 28%;
    max-width: none;
  }

  .th8 footer .footerreseaux {
    padding: 30px 5%;
  }

  .th8 .rubaction {
    padding: 0px 5%;
  }

  .th8 footer .footercontainer {
    padding: 50px 5%;
  }

  .th8 .galerie .album {
    columns: 3;
  }
}

@media (max-width: 1100px) {
  .th8 #carousel .filtre {
    flex-direction: column;
    justify-content: center;
  }

  .th8 #carousel .content {
    margin-top: 30px;
  }

  .th8 .rubsatisfaits .temoignage {
    flex-direction: column;
  }

  .th8 .rubsatisfaits .pub {
    flex-direction: row;
  }

  .th8 .rubsatisfaits .bloccom,
  .th8 .rubsatisfaits .blocphoto {
    width: 100%;
    height: 250px;
  }

  .th8 .rubsatisfaits .pub .blocphoto {
    padding: 0px 15px 0px 0px;
  }

  .th8 .rubequipe .rubequipecontent {
    flex-direction: column;
  }

  .th8 .rubequipe .descequipe {
    margin: 0px auto 20px auto;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 3px;
  }

  .th8 .rubequipe .descequipe .btn {
    margin: auto;
  }

  .th8 .rubequipe .plusdequatre .containercollab {
    width: calc(33% - 15px);
  }
  .th8 .rubequipe .descequipe {
    flex-direction: row;
    max-width: 100%;
  }

  .th8 .rubequipe .descequipe div,
  .th8 .rubequipe .equipedesc {
    width: 50%;
    display: flex;
  }

  .th8 .rubequipe .plusdequatre .containerequipe {
    columns: 2;
  }
  .th8 footer #footercoordonnees,
  .th8 footer #footerrappel {
    width: 50%;
  }

  .th8 footer .conditionsg {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
  }

  .th8 footer .conditionsg h3 {
    width: 100%;
  }
}

@media (max-width: 900px) {
  #econeto-ai p,
  #econeto-ai span {
    font-size: 16px !important;
  }

  .th8 .btncalltoac p,
  .th8 .btncalltoac {
    font-size: 16px !important;
  }

  body #econeto-ai {
    margin: 0px auto auto auto;
  }

  .body:has(#econeto-ai) #carousel {
    height: initial;
    min-height: 900px;
  }

  .body:has(.rubprespresta) #carousel {
    min-height: auto !important;
    height: auto !important;
  }

  .th8.page_prestation #carousel h1 {
    font-size: 30px;
  }
  .th8 p,
  .th8 form,
  .th8 .rubrique p {
    font-size: 16px !important;
  }
  .th8 .rubrique h2,
  .th8 .rubriquepresta h2,
  .th8 .rubprestation h2 {
    font-size: 30px;
  }

  .th8 .menuvisible {
    width: 100%;
    max-width: initial;
  }

  .th8 .rubequipe .plusdequatre .containercollab {
    width: calc(50% - 15px);
  }
  .th8 .rubprespresta .containerpresta {
    width: 48%;
    min-width: auto;
  }

  .th8 .rubriquepresta .prestadescr .shortlink {
    width: 100%;
  }

  .th8 .rubprestation .colphotos .photo {
    height: 200px;
  }

  .th8 #lightbox-img,
  .th8 #fullScreenImage {
    max-width: 90%;
    max-height: 90%;
  }

  .th8 .engagement .engagementcontent img,
  .th8 .engagement .engagementcontent .icoengagement {
    height: 50px;
    font-size: 50px;
  }

  .th8 .rubaction {
    height: 200px;
  }

  .th8 .rubriquepresta {
    flex-wrap: wrap;
  }

  .th8 .rubriquepresta .prestadescr {
    width: 100% !important;
    max-width: initial !important;
    flex: initial;
  }

  .th8 .rubrique {
    flex-direction: column;
  }

  .th8 .rubrique .halfleft {
    height: 200px;
  }

  .th8 .rubrique .halfleft,
  .th8 .rubrique .halfright,
  .th8 .rubrique .halfleft .pic {
    width: 100%;
    max-width: 100%;
  }

  .th8 .rubsatisfaits .pub {
    flex-direction: column;
  }
  .th8 .rubsatisfaits .pub .btn {
    margin: auto;
  }

  .th8 .rubsatisfaits .pub .bloccom {
    height: fit-content;
    margin: 0px;
  }

  .th8 .rubsatisfaits .pub .blocphoto {
    padding: 0px;
    height: 160px;
  }

  .th8 .action3f {
    height: auto;
    flex-direction: column;
  }
  .th8 .action3f .btncalltoac {
    margin-top: 15px;
  }

  .th8 .action3f .gradient {
    width: 100%;
    bottom: 200px !important;
    right: 0;
    padding: 0;
    background-image: linear-gradient(
      to top,
      rgba(17, 25, 33, 1),
      rgba(0, 0, 0, 0)
    );
  }

  .th8 .action3f .background,
  .th8 .action3f .right {
    width: 100%;
  }

  .th8 .action3f .right {
    z-index: 20;
  }

  .th8 .action3f .background {
    height: 200px;
  }

  .th8 .rubformulaire .deuxchamps label {
    flex-direction: column;
  }

  .th8 .rubformulaire .deuxchamps input {
    height: 31px;
  }

  .th8 .rubformulaire .everytimecharform p,
  .th8 .rubformulaire .deuxchamps label p {
    margin-bottom: 15px;
  }

  .th8 .rubformulaire .flex {
    margin: 15px 0px 0px 0px;
  }

  .th8 .rubformulaire .fifty textarea {
    flex: auto;
  }

  .th8 .rubrique3f .container {
    width: 100%;
    flex: initial;
  }

  .th8 .rubrique3f .container {
    width: 100%;
  }

  .th8 .rubrique .halfleft .pic .btn {
    margin: auto;
  }

  .th8 .engagement {
    width: 50%;
  }

  .th8 footer .footercontainer .content,
  .th8 .rubformulaire .everytimecharform {
    flex-direction: column;
  }

  .th8 footer #footercoordonnees,
  .th8 footer #footerrappel,
  .th8 footer #footercoordonnees h3,
  .th8 footer #footercoordonnees .adresse {
    width: 100%;
    padding: 0px;
  }

  .th8 footer #footerrappel {
    margin-top: 15px;
  }

  .th8 footer #footercoordonnees {
    display: flex;
    flex-wrap: wrap;
  }

  .th8 footer #footercoordonnees .btn {
    margin-right: 15px;
  }

  .th8 footer .content .btn:last-of-type {
    margin-right: 0px;
  }

  .th8 .rubprestaphotos .photopelemele {
    width: 50%;
    padding-bottom: 50%;
  }
}

@media (max-width: 700px) {
  .th8 .rubequipe .containercollab {
    width: calc(100% - 15px);
  }

  .th8 .galerie .album {
    columns: 2;
  }

  .th8 .rubprestaphotos .pelemelemenu a:first-child {
    margin: 0px 0px 7px 0px !important;
  }

  .th8 .rubprestaphotos .pelemelemenu a {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .th8 .menuvisible {
    height: 100%;
  }

  .th8 #carousel #contentlogo .logo {
    margin: 0px auto 30px auto;
    height: auto;
    width: 100%;
  }
  .th8 #carousel #contentlogo a {
    display: flex;
  }

  .th8 #carousel .filtre {
    height: 100%;
  }

  .th8 .rubprestation .content {
    padding: var(--padding-full);
    left: 5%;
  }
  .th8 .oddrubprestation .content {
    right: 5%;
  }
  .th8 .rubprespresta .containerpresta .thumbnailcont,
  .th8 .rubprespresta .thumbnail {
    display: none;
  }

  .th8 .rubprespresta p {
    margin: 0px !important;
    background-color: black;
    padding: 10px;
    text-transform: initial;
    font-size: 15px;
    border-radius: 5px;
  }

  .th8 .rubprespresta p:hover {
    background-color: #191919;
  }

  .th8 .rubprespresta .containerpresta {
    width: 100%;
  }
  .th8 .rubaction {
    height: 100px;
  }
  .th8 .rubaction .btncalltoac {
    font-size: 17px;
    padding: 15px 30px;
  }

  .th8 .rubsatisfaits .content {
    columns: 1;
  }

  .th8 .container {
    width: 100%;
  }

  .th8 .rubrique .halfright {
    padding: 20px;
    border-radius: 0px 0px 5px 5px !important;
  }
  .th8 .rubrique .halfright,
  .th8 .rubriquepresta .prestadescr {
    padding: 20px;
    overflow: initial;
    max-height: initial;
  }

  .th8 .rubprestation .colprestation {
    height: 400px;
    min-height: auto;
    max-height: 60vh;
    width: 100%;
  }
  .th8 .rubriqueodd .halfleft .pic {
    border-radius: 5px 5px 0px 0px !important;
  }

  .th8 .rubequipe .descequipe {
    flex-direction: column;
  }

  .th8 .rubsatisfaits .bloccom {
    height: auto;
    max-height: none;
    margin: 0px;
  }

  .th8 .action3f p {
    font-size: 25px;
  }

  .th8 .rubequipe .descequipe div,
  .th8 .rubequipe .equipedesc {
    width: 100%;
  }

  .th8 .rubequipe .descequipe div {
    margin-bottom: 15px;
  }

  .th8 .rubpartenaires .containerpartenaires img {
    width: 50%;
  }
  .th8 footer .mail img:last-of-type {
    width: 100%;
    height: auto;
    max-height: 20px;
  }
}

@media (max-width: 400px) {
  .th8 .galerie .album {
    columns: 1;
  }

  .th8 .blocwhatsapp_ouvert {
    width: calc(100% - 20px);
    right: 10px;
    margin: auto;
  }
}

/****************/
/* Multi-themes */
/****************/

html {
  height: 100%;
}

body {
  margin: 0px;
  padding: 0px;
}

:root {
  --color-main-p: white;
  --color-second: #79477a;
  --color-second-p: white;
  --bg-black: #00000005;

  --padding-full: 90px 15vw;
  --padding-halfl: 90px 5vw 90px 15vw;
  --padding-halfr: 90px 15vw 90px 5vw;
  --padding-page: 3%;
  --big-padding: 30px;
  --normal-padding: 20px;
  --small-padding: 10px;

  --enormous-gap: 5%;
  --big-gap: 35px;
  --normal-gap: 15px;
  --small-gap: 5px;

  --big-bradius : 10px;
  --small-bradius : 3px;

  --rub-box-shadow: inset 0px 30px 200px white;

  --items-box-shadow: 9px 15px 40px #0000000d;
  --rub-border: 1.5px solid #ffffff61;

  --h1: 1.8rem;
  --h2: 1.5rem;
  --h3: 1.3rem;
  --big-p: 1.2rem;
  --normal-p: 1.025rem;
  --small-p: 0.8rem;
}

@media all and (max-width: 2160px) 
{
  :root 
  {
    --padding-full: 90px 10vw;
    --padding-halfl: 90px 5vw 90px 10vw;
    --padding-halfr: 90px 10vw 90px 5vw;
  }   
}


@media all and (max-width: 1980px) 
{
  :root 
  {
    --big-padding: 20px;
    --normal-padding: 10px;
    --small-padding: 5px;

    --big-gap: 25px;
    --normal-gap: 10px;
    --small-gap: 5px;
  }   
}


@media all and (max-width: 1400px) 
{
  :root 
  {
    --padding-full: 70px 5vw;
    --padding-halfl: 70px 2.5vw 70px 5vw;
    --padding-halfr: 70px 5vw 70px 2.5vw;
    --big-gap: 15px;
  } 
}

@media all and (max-width: 900px) 
{
  :root 
  {
    --padding-full: 50px 2.5vw;
    --padding-halfl: 0px 0vw;
    --padding-halfr: 0px 0vw;
  }

  .halfrub:has(.parthalfpic)
  {
    --padding-halfl: 35px 2.5vw;
    --padding-halfr: 35px 2.5vw;
  }
}

.error
{
  display: flex;
  width: 100%;
  background-color: #d13636;
  box-shadow: inset 0em -1em 2em 0px #a22020;
  border-radius: var(--small-bradius);
}

.error .part_a
{
  width: 100px;
  background-color: #d13636;
  box-shadow: inset 0em -1em 2em 0px #a22020;
  border-radius: 10px 0px 0px 10px;
  display: flex;
  padding: var(--normal-padding);
}

.error .part_b
{
  padding: 10px 15px;
  color: white;
}

.error img
{
  height: 25px;
  margin: auto;
  user-select: none;
}

.error p 
{
  padding: 0px !important;
  margin: auto 0px !important;
}

.bubble_help
{
  width: 100%;
  display: flex;
  background-color: #36d16f;
  box-shadow: inset 0em -1em 2em 0px #20a250;
  border-radius: var(--small-bradius);
}


.content_bubble_help
{
  margin: 15px;
}

.bubble_help img
{
  height: 25px;
  margin: auto;
  user-select: none;
}

.bubble_help .part_a, .bubble_help .part_b
{
  color: white;
  display: flex;
}

.bubble_help .part_b
{
  padding: 10px 15px;  
}

.bubble_help .part_a
{
  width: 100px;
  background-color: #36d16f;
  box-shadow: inset 0em -1em 2em 0px #20a250;
  border-radius: 10px 0px 0px 10px;
  display: flex;
  padding: var(--normal-padding);
}

.bubble_help p
{
  margin: auto 0px;
  font-size: var(--small-p);
  text-align: left;
}

.btns 
{
  width: fit-content;
  display: flex;
  margin-left: auto;
  flex-wrap: wrap;
  gap: var(--normal-gap);
}

.btns .btn
{
  border-radius: var(--small-bradius);
  cursor: pointer;
  user-select: none;
  display: flex;
  transition: background-image 0.5s ease;
  outline: none;
  background-image: linear-gradient(#eee, #e2e2e2);
  border: 0.5px solid #cdcdcd;
  padding: var(--normal-padding);
  height: fit-content;
}

.btn:has(img) p 
{
  margin: auto 0px !important;
}
.btn:has(img) img
{
  height: 25px;
  padding-right: 10px;
  margin: auto 10px auto 0px;
  border-right: 0.5px solid #C3C3C3;
}

#bloc_contact .big_btns, #bloc_contact .btn, #bloc_contact .btns_link a, #bloc_contact .icofavorite
{
  border-radius: var(--small-bradius);
  cursor: pointer;
  user-select: none;
  display: grid;
  transition: background-image 0.5s ease;
  outline: none;
  background-image: linear-gradient(#eee, #e2e2e2);
  border: 0.5px solid #cdcdcd;
  padding: var(--normal-padding);
}

#bloc_contact .big_btns:hover, .btns .btn:hover, #bloc_contact .btn:hover, #bloc_contact .btns_link a:hover, #bloc_contact .big_btns:active, #bloc_contact .btn:active, #bloc_contact .btns_link a:active
{
  background-image: linear-gradient(0deg, #d4d4d4 0%, #e5e5e5 100%);
  background-color: #f3f3f3;
  transition: background-image 0.5s ease;
}

#bloc_contact .btnnext
{
  background-image: none !important;
  background-color: #53a653;
  border: 0.5px solid #449c44;
  transition: background-image 0.5s ease;
}

#bloc_contact .btn, #bloc_contact .btns_link a
{
  padding: 5px 10px;
  font-size: var(--normal-p);
}

 .btn p, .big_btns p, .btn span, .big_btns span
{
  margin: auto;
  user-select: none;
  color: #393939;
}

input,
textarea {
  outline: none;
}

input[type="checkbox"] {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px;
  min-height: 30px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
}

input[type="checkbox"]:checked {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  -ms-appearance: auto;
}

textarea {
  resize: vertical;
  min-height: 100px;
}

/* DEBUT BODY BARRE */
/* Masquer par défaut */
.divraccourciagenda {
  position: fixed;
  background-color: white;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 10px;
  margin-top: 10px !important;
  max-width: 300px;
  z-index: 500;
}

.divraccourciagenda a {
  margin: auto;
}

.body-barre {
  display: none;
}

.body-barre:has(.btnnav) {
  display: flex;
}

/* Appliquer des styles flex aux divs enfants */
.body-barre div {
  display: flex;
  margin: auto;
  gap: 10px;
  padding: 20px !important;
  flex-wrap: wrap;
}

.body-barre div:has(.msgokdlpdf) {
  flex-direction: column;
}
.body-barre .btnnav {
  padding: 10px 15px;
  cursor: pointer;
  background-color: #f3f3f3;
  border-radius: 3px;
  background-image: linear-gradient(#eee, #e2e2e2);
  border: 0.5px solid #cdcdcd;
  display: flex;
  user-select: none;
  font-size: 13px;
  width: fit-content;
  font-family: arial;
}


.body-barre .msgokdlpdf {
  margin: auto;
}

.body-barre button {
  border: none;
  background: none;
  cursor: pointer;
}

/* FIN BODY BARRE */

/* BLOC CONTACT */
#widget_moncompte
{
  display: grid;
  gap: var(--small-gap);
}

#widget_moncompte div 
{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

#widget_moncompte .btn 
{
  width: fit-content;
  margin-left: auto;
}
/* FIN BLOC CONTACT */

/* DEBUT POP UP */
#fromm {
  color: grey;
  background-color: #fff;
  padding: 15px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  max-width: 300px;
  text-align: left;
  z-index: 501;
  border-radius: 5px;
  box-shadow: 1px 1px 5px #888888;
  box-sizing: border-box;
  overflow: auto;
}

#frommrel {
  color: grey;
  background-color: #fff;
  padding: 5px 10px;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 75px;
  text-align: center;
  display: none;
  z-index: 500;
  border-radius: 5px;
  box-shadow: 1px 1px 5px #888888;
  box-sizing: border-box;
}

#fromm a {
  font-size: 10px;
}
#frommrel a {
  font-size: 10px;
  margin: auto;
  text-align: center;
}

/* FIN POP UP*/

.page_mentions .rubmentionscontent .flex {
  gap: 20px;
  flex-wrap: wrap;
}

/* DEBUT AI */
#econeto-ai {
  z-index: 499;
  width: 80%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  margin: auto;
  gap: 20px;
  padding: 20px 0px;
}

#econeto-ai::before {
  background-color: black;
  filter: blur(70px);
}

#econeto-ai * {
  margin: 0px;
  box-sizing: border-box;
  font-family: open Sans, Calibri light, Helvetica Neue Light;
  font-size: 17px;
  word-break: normal;
}

#econeto-ai span,
#econeto-ai p {
  font-size: 16px;
}

#econeto-ai .reponse {
  width: 100%;
  margin: auto;
  display: flex;
  gap: 10px;
  border-radius: 15px;
}

#econeto-ai .reponse img {
  height: 75px;
}

#econeto-ai #formulaire {
  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 15px;
  padding: 20px;
}

#econeto-ai form p {
  color: white;
  text-align: left;
  margin: auto 5px auto 0px;
}

#econeto-ai textarea {
  width: 100%;
  margin: 0px auto;
  border-radius: 15px;
  padding: 10px;
  display: flex;
  height: 110px;
  overflow: auto;
  border: none;
}

#econeto-ai label {
  display: flex;
}

#econeto-ai p {
  white-space: normal;
}

#econeto-ai .smallp {
  font-size: 13px !important;
}

#econeto-ai .uploadimage2024 .futuristicbtn {
  width: 250px;
}

#econeto-ai .share_networks {
  margin: auto;
  display: flex;
  gap: 10px;
}

#econeto-ai .share_networks a:first-of-type {
  margin-left: auto;
}

#econeto-ai .share_networks img {
  height: 40px;
}

#econeto-ai .divacceptrgpd {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#econeto-ai .divacceptrgpd a {
  margin: auto !important;
  text-decoration: none;
  background: #0e153669;
  padding: 6px;
  border-radius: 5px;
  font-size: 10px !important;
}

#econeto-ai .divacceptrgpd span {
  margin: auto;
}

#econeto-ai .divacceptrgpd .labelp {
  flex-wrap: wrap;
  background: #0e153633;
  padding: 10px 5px;
  border-radius: 15px;
}

#econeto-ai .divacceptrgpd .smallp {
  width: calc(100% - 75px);
}

#econeto-ai .divacceptrgpd .privacylinks {
  margin-left: 75px;
  display: flex;
  gap: 5px;
  margin-top: 5px;
}

#econeto-ai .divacceptrgpd input {
  max-width: 75px;
}

#econeto-ai .divacceptrgpd input[type="checkbox"] {
  cursor: pointer;
}

#econeto-ai .futuristicbtn {
  position: relative;
  width: 180px;
  height: 55px;
  display: inline-block;
  background: white;
  border-radius: 5px;
  cursor: pointer;
  margin-left: auto;
}

#econeto-ai .futuristicbtn i {
  position: absolute;
  inset: -2px;
  display: block;
  border-radius: 5px;
  background-image: linear-gradient(45deg, #1d43ad, #0e1538, #0e1538, #4866f3);
  transition: background-image 2.5s ease;
}

#econeto-ai .futuristicbtn:hover i {
  background-image: linear-gradient(45deg, #4866f3, #0e1538, #0e1538, #1d43ad);
}

#econeto-ai .futuristicbtn span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  text-transform: uppercase;
  align-items: center;
  color: white;
  border-radius: 3px;
  background-color: #0e1538a6;
  display: flex;
  letter-spacing: 2px;
  transition: all 2.5s ease;
}

#econeto-ai .futuristicbtn:hover span {
  background-color: #090e26a6;
  transition: all 2.5s ease;
}

#econeto-ai #presentation {
  color: white;
  border-radius: 15px;
  gap: 20px;
  display: flex;
  flex-direction: column;
}

#econeto-ai #presentation .logo {
  max-width: 100%;
  width: 400px;
}

#econeto-ai #presentation p {
  color: white;
}

#econeto-ai #presentation .deuxblocs {
  display: flex;
  gap: 20px;
}

#econeto-ai #presentation .deuxblocs div {
  width: 50%;
  background-color: #0e1536c7;
  padding: 20px;
  border-radius: 15px;
  list-style-type: none;
  margin: 0;
  display: flex;
  gap: 20px;
  flex: 1;
}

#econeto-ai #presentation .deuxblocs span {
  margin: auto;
}

#econeto-ai #presentation .deuxblocs div img {
  max-height: 100px;
  margin: auto;
}

#econeto-ai #formulaire .fifty {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#econeto-ai #formulaire .fifty .deuxchamps {
  display: flex;
  gap: 10px;
}

#econeto-ai #formulaire .fifty .deuxchamps label {
  width: 50%;
  gap: 5px;
}

#econeto-ai #formulaire {
  background-color: #0e1536c7;
}

#econeto-ai #formulaire input,
#econeto-ai #formulaire select {
  max-width: calc(100% - 150px);
}

#econeto-ai #formulaire p {
  width: 150px;
}

#econeto-ai #discussion {
  margin: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#econeto-ai .reponse {
  display: flex;
}

#econeto-ai .reponse:has(pre[style*="display: none"]) {
  display: none;
}

#econeto-ai .reponse p {
  color: white;
}

#econeto-ai .reponse pre {
  width: 100%;
  border-radius: 15px;
  height: fit-content;
  padding: 20px;
  margin: auto auto 0px auto;
  background-color: #0e1536c7;
  color: white;
  white-space: normal;
  position: relative;
}

#econeto-ai select {
  cursor: pointer;
}

#econeto-ai .btn {
  cursor: pointer;
  border-radius: 15px;
  background-color: #00000030;
}

#econeto-ai #divformupload {
  width: 100%;
  margin: auto;
  border: 4px dashed #0e1536c7;
  padding: 50px 20px;
  margin-bottom: 20px;
  background: #0e15361f;
  border-radius: 15px;
}

@media all and (max-width: 2100px) {
  #econeto-ai p,
  #econeto-ai span 
  {
    font-size: 16px !important;
  }
}

@media (max-width: 1500px) {
  #cookie-customization ul {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) 
{

  #econeto-ai {
    width: 90%;
  }

  #econeto-ai * {
    font-size: 16px;
  }

  #econeto-ai #bigforminchat {
    padding: 0px !important;
  }

  #econeto-ai .smallp,
  #econeto-ai .divacceptrgpd a {
    font-size: 10px !important;
  }

  #econeto-ai:has(#presentation) {
    margin: 0px auto auto auto;
  }

  #econeto-ai #presentation .deuxblocs div img {
    max-height: 50px;
  }

  #econeto-ai #presentation .logo {
    max-width: 80%;
  }

  #econeto-ai .reponse img {
    height: 45px;
  }

  #econeto-ai .reponse pre {
    padding: 10px;
  }

  #econeto-ai .divacceptrgpd .labelp {
    flex-direction: column;
  }
  #econeto-ai .divacceptrgpd .smallp {
    width: 100%;
  }

  #econeto-ai .divacceptrgpd .privacylinks {
    margin-left: initial;
  }
}

@media (max-width: 700px) {
  #econeto-ai #bigforminchat {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
}

@media (max-width: 600px) {
  #fromm {
    width: 90%;
  }

  #econeto-ai {
    width: calc(100% - 10px);
  }

  #econeto-ai * {
    font-size: 14px;
  }

  #econeto-ai textarea,
  #econeto-ai label {
    flex-direction: column;
  }

  #econeto-ai #formulaire input,
  #econeto-ai #formulaire select {
    max-width: initial;
  }

  #econeto-ai #presentation .logo {
    margin: auto;
  }

  #econeto-ai #formulaire .fifty .deuxchamps {
    flex-direction: column;
  }

  #econeto-ai #formulaire .fifty .deuxchamps label {
    width: 100%;
  }

  #econeto-ai #presentation .deuxblocs {
    flex-direction: column;
  }

  #econeto-ai #presentation .deuxblocs div {
    width: 100%;
    max-width: initial;
  }
}

@media (max-width: 300px) {
  #econeto-ai #formulaire .fifty .deuxchamps {
    flex-direction: column;
  }
}

/* VIGNETTES */

#econeto-ai #bigforminchat {
  display: grid;
  gap: 20px;
  margin: auto;
  padding: 0px 10px;
  grid-template-columns: repeat(4, 1fr);
}

#econeto-ai #bigforminchat .vignette_chat {
  max-width: 300px;
  background-color: white;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.5s;
}

#econeto-ai #bigforminchat .vignette_chat:hover {
  transform: scale(1.1);
  transition: all 0.5s;
}

#econeto-ai #bigforminchat .vignette_chat img {
  max-height: 200px;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

#econeto-ai #bigforminchat .cpcommune {
  display: flex;
  flex-wrap: wrap;
}

#econeto-ai #bigforminchat .vignette_chat .cpcommune img {
  height: 13px;
  margin: auto 10px auto 0px;
}

#econeto-ai #bigforminchat .cpcommune span:last-of-type {
  width: 100%;
}
/* FIN AI */
.shortlink {
  position: relative;
  display: flex;
  flex-direction: column;
}

.iframe-container {
  aspect-ratio: 16 / 9;
  overflow: hidden; /* Masquer les parties de l'iframe qui dépassent */
  position: relative; /* Assurer que les enfants sont positionnés correctement */
  width: 100%;
}

.shortlink div:not(.iframe-container) iframe {
  background-color: grey;
}

.shortlink iframe {
  position: absolute;
  top: 0;
  left: 0;
  max-width: initial;
  width: 100%;
  height: 100%;
  border: none; /* Pas de bordure */
  pointer-events: none; /* Désactiver les interactions */
  transform-origin: 0 0;
}

iframe {
  aspect-ratio: 16 / 9;
  height: auto;
  max-width: 50%;
}

/* Style spécifique pour les PDF */
.shortlink iframe[src$=".pdf"] {
  height: 600px; /* Ajuster la hauteur selon vos besoins */
  transform: none; /* Pas de mise à l'échelle pour les PDF */
  width: 100%; /* Largeur complète du conteneur */
}



/****************/
/* Cookies */
/****************/

.alertcookie {
  text-align: center;
  padding: 2px;
}

#cookie-customization button,
#open-cookie-settings {
  padding: 10px 15px;
  cursor: pointer;
  background-color: #f3f3f3;
  border-radius: 3px;
  background-image: linear-gradient(#eee, #e2e2e2);
  border: 0.5px solid #cdcdcd;
  display: flex;
  user-select: none;
  font-size: 13px;
  width: fit-content;
  font-family: arial;
}


#cookie-customization #save-preferences {
  margin-left: auto;
}

#open-cookie-settings p {
  margin: auto;
}

/* DEBUT COOKIES */
#cookie-consent-banner,
#cookie-customization {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  text-align: left;
  padding: 15px;
  z-index: 1000;
  box-sizing: border-box;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#cookie-consent-banner h3,
#cookie-customization h3 {
  text-align: left;
  width: 100%;
  font-size: 23px;
  margin: 0px !important;
}

.cookie-consent-container p,
#cookie-customization p,
#cookie-customization span {
  padding: 0;
  color: white;
  text-align: left;
}

#reopen-customization {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 500 !important;
}

#cookie-customization .cookie-customization-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 1100px;
  margin: auto;
}

#cookie-customization .cookie-customization-container h3,
#cookie-customization .cookie-customization-container p {
  width: 100%;
  color: white;
}

#cookie-customization ul {
  width: fit-content;
  margin: 0px auto;
  list-style-type: none;
  gap: 10px;
  padding: 0px;
  display: grid;
  flex-wrap: wrap;
  grid-template-columns: repeat(4, 1fr);
}

#cookie-customization ul li {
  max-width: 350px;
  background-color: #00000070;
  padding: 10px 15px;
}

#cookie-customization label {
  display: flex;
  gap: 10px;
  cursor: pointer;
}

#cookie-customization label p {
  margin: auto;
  color: white;
}

#cookie-customization button p {
  margin: auto;
  color: black !important;
}

#cookie-customization a {
  color: white;
  text-decoration: underline;
}

.cookie-consent-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.cookie-consent-container div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cookie-consent-container a {
  color: #fff;
  text-decoration: underline;
}

.cookie-consent-container button {
  background-color: #007bff;
  border: none;
  color: #fff;
  padding: 10px 20px;
  cursor: pointer;
}

.cookie-consent-container button:hover {
  background-color: #0056b3;
}

.cookie-consent-container button p {
  margin: auto;
}

.forcustomcookie {
  cursor: pointer;
}
/* FIN COOKIES */


@media all and (max-width: 2100px) 
{
    #cookie-customization a {
    font-size: 17px !important;
  }
}

@media (max-width: 900px)
{
    .cookie-consent-container p,
  #cookie-customization p,
  #cookie-customization span {
    font-size: 14px !important;
  }

  #cookie-customization .detailstypecookie {
    display: none;
  }

  #cookie-customization ul {
    grid-template-columns: repeat(2, 1fr);
  }

  #open-cookie-settings {
    display: none;
  }

  .cookie-consent-container pre {
    font-size: 12px;
  }
}

@media (max-width: 600px)
{
    #cookie-customization ul {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* Début widget devis */


@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

.a4 *, .a4before * {
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  text-align: left;
  font-size: 18px !important;
  transition: all 1s ease;
}

.a4before {
  width: 50%;
  max-width: 850px;
  margin: 45px auto 15px auto;
}

.a4before .slogandoc {
    color: #A6B9C6;
    margin: 5px 0px 15px 0px;
}

.a4 {
  width: 50%;
  max-width: 850px;
  margin: 30px auto 30px auto;
  background-color: white;
  border-radius: 16px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.a4 .a4ctn {
  padding: 0px 20px 20px 20px;
}

.a4 .bandeau {
  width: 100%;
  padding: 15px;
  background-color: #fbfbfb;
  border-radius: 3px;
  
}

.a4before h1 {
  margin: 0px;
  margin-left: auto;
  font-size: 24px !important;;
  font-weight: bold;
  font-family: 'Roboto', sans-serif;
  user-select: none;
  color: #1a73e8;
  text-shadow: none;
  text-transform: none;
  text-align: left;
  word-break: break-word;
}

.a4 input[type=number]::-webkit-inner-spin-button,
.a4 input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.a4 input[type=number] {
  -moz-appearance: textfield;
}

.a4 input::placeholder,
.a4 textarea::placeholder {
  color: #E6E6E6 !important;
  opacity: 1;
}

.a4 input, .a4 textarea {
  border-radius: 3px;
  border: #dee2e6 1px solid;
  font-size: 16px;
  color: #222;
  outline: none;
  font-family: 'Roboto', sans-serif;
  background-color: white;
}

.a4 input {
  height: 30px;
}
.a4 input[type=date] {
    width: fit-content!important;
}
.a4 textarea {
  resize: none;
}

.a4 input:hover, .a4 textarea:hover {
  border: #1a73e8 1px solid;
}

.a4 button {
  cursor: pointer;
  background-color: #1a73e8;
  color: white;
  font-weight: 500;
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.2s ease-in-out;
}

.a4 button:hover {
  background-color: #1669c1;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  transform: translateY(-1px);
}
.a4 .divcheckaddrfact {
    margin-top: 15px;
}
.a4 .divcheckaddrfact input[type="checkbox"] {
  display: none; /* On cache l'input natif */
}

.a4 .divcheckaddrfact .custom-checkbox {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: white;
  position: relative;
  cursor: pointer;
  margin-right: 10px;
  vertical-align: middle;
  transition: all 0.2s ease-in-out;
}

.a4 .divcheckaddrfact input[type="checkbox"]:checked + .custom-checkbox {
  background-color: #1a73e8;
  border-color: #1a73e8;
}

.a4 .divcheckaddrfact input[type="checkbox"]:checked + .custom-checkbox::after {
  content: '✔';
  color: white;
  font-size: 21px;
  position: absolute;
  top: 0px;
  left: 6px;
}




.a4 body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background: #f2f2f2;
}

.a4 .a4 {
  width: 21cm;
  min-height: 29.7cm;
  margin: auto;
  background: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.a4 .top-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.a4 .top-section label {
  width: 50%;
  margin: auto;
  opacity: 0.1;
}
.a4 .top-section:hover label {
  opacity: 1;
}
.a4 .top-section label p {
  text-align: center;
}
.a4 .top-section label .colonne input {
  margin:auto;
  font-size: 14px!important;
}

.a4 .top-section:not(:has(.logo, .logos)) .client-info {
  width: 100%;
}

.a4 .colonne {
  display: flex;
  gap: 5px;
}

.a4 .colonne input {
  width: 50%;
}

.a4 .logo {
  width: 50%;
}

.a4 .logo img {
  width: 100%;
}

.a4 .logos {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  max-width: 50%;
}

.a4 .logos img {
  height: 50px;
  cursor: pointer;
  border: 2px solid transparent;
}

.a4 .logos img.selected {
  border-color: blue;
}

.a4 .step-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  margin: 0px 0 0px;
}

.a4 .step-title .number {
  background-color: #1a73e8;
  color: white;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  font-size: 14px;
}

.a4 .titrerub {
  display: flex;
  margin: 30px 0px 20px 0px;
}
.a4 .titrerub:first-of-type {
  margin: 15px 0px 20px 0px;
}

.a4 .titrerub p {
  margin: auto 0px;
}

.a4 label p {
  font-weight: normal;
  color: #004079;
  font-family: sans-serif;
  user-select: none;
}

.a4 .divcheckaddrfact label {
  display: flex;
  cursor: pointer;
}

.a4 .divcheckaddrfact label p {
  margin: auto 0px auto 0px;
  font-weight: 100;
  color: grey;
}

.a4 .divaddrfact {
  display: none;
}

.a4 .client-info textarea {
  margin-top: 5px;
  width: 100%;
  height: 40px;
}

.a4:has(.prestation) .startsuggestprestas {
    display: none;
}

.a4:not(:has(.prestation)) #btnaddpresta {
    display: none;
}

.a4:not(:has(.prestation)) .suitesimulateur {
    display: none;
}

.a4 .prestations {
  margin-top: 20px;
  min-height: inherit;
  width: 100%;
}

.a4 .prestation {
  border: 1px solid #f9f9f9;
  border-radius: 3px;
  padding: 10px;
  margin-bottom: 25px;
  background-color: #fbfbfb;
  transition: all 0.8s ease-in-out;
}
.a4 .divprestabtndel {
  text-align: right;
}
.a4 .divprestabtndel button,
#popup-photo-choice .divaddphoto button {
  background:none;
  border:none;
  color:#888;
  font-size:16px!important;
  cursor:pointer;
}
.a4 .prestation p, .a4 label p {
  margin: 20px 0px 7px 0px;
}

.a4 .prestation.dragged {
  opacity: 0.5;
  background-color: #eaf1fb;
  border: 2px dashed #1a73e8;
}

.a4 .prestation.drag-over {
  outline: 2px dashed #1a73e8;
  outline-offset: -4px;
  background-color: #f0f8ff;
}
.a4 .prestation.drag-over .dropzone {
  border: 2px dashed green;
}

.a4 .prestation .colonne {
  width: 100%;
  gap: 10px;
}

.a4 .prestation .colonne .half {
  width: 50%;
}

.a4 .prestation input, .a4 .prestation textarea {
  width: 100%;
}

.a4 .prestation textarea {
  height: 150px;
}

.a4 .dropzone {
  border: 2px dashed #efefef;
  padding: 10px;
  margin-top: 15px;
}
.a4 .dropzone p {
  text-align: center;
}

.a4 .dropzone:has(img) p {
  display: none;
}

.a4 .dropzone img {
  max-width: 200px;
  margin: 5px;
}

.a4 .photo-wrapper {
  position: relative;
  display: inline-block;
  margin: 5px;
}

.a4 .photo-wrapper img {
  max-width: 200px;
  max-height: 100px;
  display: block;
  border-radius: 4px;
}

.a4 .close-photo {
  position: absolute;
  top: -8px;
  right: -8px;
  background: red;
  color: white;
  font-size: 14px;
  font-weight: bold;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  cursor: pointer;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.a4 .btnajouterpresta {
  margin: 0px 15px 15px auto;
}

.a4 .divmail {
  margin-top: 15px;
}

.a4 .divmail label {
  display: block;
  margin-bottom: 10px;
}

.a4 .divmail input[type="email"] {
  width: 300px;
  max-width: 90%;
  text-align: center;
}

.a4 .email-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.a4 .email-row input[type="email"] {
  width: 300px;
  max-width: 90%;
  padding: 8px;
  border-radius: 8px;
  font-size: 16px;
}

.a4 .email-row button {
  background-color: #28a745;
  font-size: 16px;
  padding: 14px 28px;
  border-radius: 8px;
  border: none;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.a4 .email-row button:hover {
  background-color: #218838;
}

.a4 .footer {
  display: flex;
}

.a4 .footer button {
  background-color: #28a745;
  font-size: 16px;
  padding: 14px 32px;
  border-radius: 8px;
  margin-right: 0px;
}

.a4 .footer button:hover {
  background-color: #218838;
}
.a4 .whodev {
  display: flex;
  margin: 35px auto 0px auto;
}
.a4 .whodev img {
  max-height: 15px;
}
.a4 .whodev p{
    display: flex;
    margin: auto;
  border: 1px solid #fbfbfb ;
  background-color: #fbfbfb;
  border-radius: 3px;
  padding: 5px;
}
.a4 .whodev a {
    display: flex;
    margin: auto 5px;
  text-decoration: underline;
  font-weight: bold;
  color: #1a73e8;
}
#popup-photo-choice {
display:none;
position:fixed;
top:0; left:0;
width:100vw;
height:100vh;
background:rgba(0,0,0,0.5);
z-index:9999;
justify-content:center;
align-items:center;
}
#popup-photo-choice .divactphoto button:first-of-type {
margin-bottom:15px;
}
#popup-photo-choice .divaddphoto {
background:#fff;
padding:20px;
border-radius:10px;
text-align:center;
width:300px;
}
#popup-photo-choice .divaddphoto p {
margin-bottom: 20px;
}
/* Fin widget devis */


@media all and (max-width: 2100px) 
{
    .a4, .a4before {
        width: 80%;
    }
}

@media all and (max-width: 1300px) 
{
    .a4, .a4before {
        width: 100%;
    }
}
@media (max-width: 900px)
{
    .a4 .logo {
        width: 100%;
    }
    .a4before .bandeau {
        margin: 0px 15px;
    }
    .a4before .slogandoc {
        margin-top: 15px;
        text-align: center;
    }
    .a4 {
        margin: 0px auto 30px auto;
    }
    .a4, .a4before {
        max-width: calc(100% - 10px);
    }
    .a4before h1 {
        font-size: 20px !important;
    }
    .a4 .top-section {
          display: block;
    }
    .a4 .client-info {
          width: 100%;
    }
    .a4 .a4ctn {
          padding: 0px 10px 20px 10px;
    }
    .a4 .divprestabtndel {
          margin-bottom: 30px;
    }
    .a4 .prestation {
          margin-bottom: 50px;
    }
    .a4 .prestations .prestation .colonne {
          display:block;
    }
    .a4 .prestations .prestation .colonne .half {
          width:100%;
    }
    .a4 input[type=date] {
          width: 100% !important;
    }
    #popup-photo-choice .divaddphoto {
        width: calc( 100% - 20px );
    }
}

@media (max-width: 600px)
{
}

.a4before h1 {
color: #84c427;
}
.a4 .step-title .number,
.a4 button {
background-color: #84c427;
}