figure,
											ul {
												margin: 0
											}

											address {
												font-style: unset;
											}

											html {
												scroll-behavior: smooth;
											}

											body {
												width: 100%;
												margin: auto;
												background-color: #f2f2f2;
												font-family: sans-serif;
											}

											h3 {
												padding: 0 0;
												margin-bottom: 0px;
												line-height: 0.1;
											}

											.lignesep {
												display: inline-block;
												POSITION: RELATIVE;
												width: 100px;
												height: 1px;
												z-index: -1;
												border-bottom: 1px solid rgba(0, 0, 0, 0.3);
											}

											.lignesep2 {
												display: inline-block;
												width: 88%;
												height: 1px;
												z-index: -1;
												margin-top: 9px;
												border-bottom: 1px solid rgba(0, 0, 0, 0.3);
											}

											/*--------------------------- regroupe le log et les boutons de navigation --------------*/

											header {
												width: 100%;
												height: 80px;
												position: fixed;
												top: 0;
												margin-bottom: 100px;
												z-index: 1000;
												display: flex;
												background-color: #f5f5f5db;
												justify-content: space-between;
												box-shadow: 0px -15px 48px;
											}

											#logo {
												margin-left: 12%;
												height: 80px;
												line-height: 80px;
											}

											#logo img {
												width: 148px;
												height: 70px;
												vertical-align: middle;
											}

											/*----------------------------------------Le style des boutons-----------------------*/

											#boutons1 {
												display: inline-flex;
												margin-right: 14%;
												margin-top: 0;
												width: 15%;
												min-width: 260px;
												font-size: small;
											}

											#boutons2 {
												display: none;
												list-style: none;
												width: 45%;
												justify-content: space-around;
												z-index: 150;
												margin: auto;
												font-size: 30px;
												height: 21px;
											}

											#boutons2 a {
												text-decoration: none;
											}

											#boutons2 i {
												color: #666667;
												display: inline-flex;
												align-items: center;
												justify-content: center;
												position: relative;
												border-radius: 50%;
												transition: 0.5s ease;
												background-color: rgba(242, 242, 242, 0.98);
												width: 0;
												height: 0;
												padding: 1px;
												cursor: pointer;
											}

											#boutons2 i:hover {
												color: #51a4cd;
												-webkit-box-shadow: 0px 0px 19px rgba(81, 164, 205, 0.55);
												box-shadow: 0px 0px 19px rgba(81, 164, 205, 0.55);
											}

											ul {
												padding: 0;
											}

											.service_description ul {
												margin-top: -9px;
												list-style: circle inside;
											}

											#boutons1 li {
												border-top: 2px solid transparent;
												height: 80px;
												width: 60px;
												list-style: none;
												font-family: sans-serif;
												color: #666666;
												padding-right: 5px;
												display: inline-flex;
												align-items: center;
												justify-content: center;
												position: relative;
												transition: 0.5s cubic-bezier(0.57, -0.38, 0.34, 1.64);
											}

											#boutons1 li:hover {
												border-top: 2px #51a4cd solid;
											}

											li a {
												color: #666666;
												text-decoration: none;
											}

											li a:hover {
												color: black;
											}

											/* -------------------------------------------bannière photo -----------------------------*/

											#noslidetext a {
												text-decoration: none;
												color: #51a4cd;
											}

											#noslidetext {
												display: none;
												transition: 0.1s linear;
												width: 100%;
												text-align: center;
												margin-top: -19px;
												background-color: #66666700;
												padding-bottom: 15px;
												border-bottom: 2px #80808045 solid;
												border-top: 2px grey;
											}

											#noslidetext strong {
												font-weight: bolder;
												color: #51a4cd
											}

											#noslidetext p {
												color: black;
												font-weight: bold;
												font-size: smaller;
												margin: auto;
												width: 45%;
												background-color: #f2f2f2;
											}

											/**---------------------------------------------Slider ------------------------------*/

											.slide {
												width: 100%;
												max-height: 91.8vh;
												overflow: hidden;
												margin-top: 81px;
											}

											.slide ul {
												overflow: hidden;
												display: flex;
												padding: 0;
												margin: 0;
												width: 300%;
												animation: slider 30s linear infinite;
												border: none;
											}

											/* ---------------------------------------------Boutons slider------------------- */

											.slide label {
												position: absolute;
												top: 50%;
												margin: 0 9px;
												color: #fbfbfb;
												background-color: rgba(0, 0, 0, 0.46);
												border-radius: 50%;
												transition: .5s linear;
												font-size: x-large;
											}

											.slide label:hover {
												background-color: rgba(0, 0, 0, 0.65);
											}

											.prev {
												left: -43px;
												padding-right: 13px;
												padding-left: 40px;
												padding-top: 15px;
												padding-bottom: 15px;
											}

											.next {
												right: -43px;
												padding-right: 40px;
												padding-left: 13px;
												padding-top: 15px;
												padding-bottom: 15px;
											}

											.slide input {
												display: none;
											}

											.slide input.slider2:checked~.slide label {
												display: none;
											}

											label:hover {
												cursor: pointer;
											}

											/* ----------------------------------Gestion de l'animation----------------------------------- */

											/* @keyframes slider {
												0% {
													margin-left: 0%;
												}

												49% {
													margin-left: 0%;
												}

												50% {
													margin-left: -100%;
												}

												99% {
													margin-left: -100%
												}

												100% {
													margin-left: -0%;
												}
											} */

											.slide li {
												overflow: hidden;
												height: inherit;
												padding: 0;
												margin: 0;
												width: 100%;
												list-style: none;
												border: none;
												position: relative;
											}

											.slide img {
												overflow: hidden;
												width: 100%;
											}

											/* ______________=============---------- Animation et style de la jauje -------=============____________*/

											.jauge {
												position: absolute;
												height: 3px;
												width: 100%;
												background: rgba(0, 0, 0, 0.27);
												margin: auto;
												margin-top: -7px;
												z-index: 100;
											}

											@-webkit-keyframes jauge {
												from {
													width: 0;
													opacity: 1
												}

												to {
													width: 100%;
													opacity: 1
												}
											}

											.liquide {
												height: 3px;
												width: 100%;
												border-radius: 10px;
												animation: jauge 15s infinite linear;
												background: rgba(108, 202, 239, 0.68);
											}

											/*   ---------------------------------------------fin slider --------------------------------- */

											.conteneurtext {
												max-width: 45%;
												width: fit-content;
												/* min-width: 40%; */
												box-shadow: 0px 0px 91px #00000069;
												padding: 25px;
												border-radius: 2%;
												color: white;
												position: absolute;
												margin-top: 8.5%;
												margin-left: 14%;
												line-height: 1;
												text-align: center;
												z-index: 500;
												background-color: #ffffffc2;
											}

											.conteneurtext strong {
												color: #51a4cd;
											}

											.conteneurtext h1 {
												font-size: 2em;
												color: white;
												font-weight: bold;
												margin: 0;
											}

											.info {
												background-color: #51a4cd;
												border-bottom: 3px solid #3b89b3;
												border-radius: 3px;
												color: #fff;
												padding: 7px;
												margin: auto;
												margin-top: 20px;
												cursor: pointer;
												width: 76PX;
												font-size: small;
												transition: 0.5s ease;
												text-align: center;
											}

											.info a {
												color: beige;
												text-decoration: none;
											}

											.info:hover {
												background-color: #279ac3;
											}

											.textimg2 {
												font-size: 0.8em !important;
												color: black;
											}

											/*---------------------------------------------section service --------------------------*/
											/*--------------------------------------------/////decription\\\\\\------------------------------*/

											#service {
												height: 55px;
											}

											#macecran img {
												/* width: 4vw; */
												margin-bottom: 20px;
												max-height: 350px;
												max-width: 350px;
												height: 60vh;
												box-shadow: 0px 0px 20px black;
											}

											#macecran .fa-4x {
												font-size: 3em;
												background-color: #51a4cd;
												color: white;
												margin-bottom: 12px;
												border: 1px grey solid;
												/* border-radius: 50%; */
											}

											#conteneurservice h1 {
												font-size: 50px;
												text-align: center;
											}

											.descripservice {
												text-align: center;
												width: 70%;
												margin-left: auto;
												margin-right: auto;
												position: relative;
											}

											.rond {
												height: 13px;
												width: 13px;
												border-radius: 50%;
												border-right: 1px #f2f2f2 solid;
												border-left: 1px #f2f2f2 solid;
												background-color: #51a4cd;
												left: calc(49% - 9px);
												POSITION: absolute;
												top: -5px;
											}

											/******---------------------------------------Conteneur services -------------------------*****/

											.conteneurservice {
												width: 85%;
												display: flex;
												flex-wrap: wrap;
												justify-content: space-around;
												margin: auto;
												height: auto;
											}

											.service_description div {
												display: flex;
												flex-direction: column;
												/* align-items: center; */
												/* align-self: center; */
											}

											#service_et_img {
												color: black;
												display: flex;
												align-items: flex-start;
												margin-top: -10px;
											}

											.service_description {
												display: flex;
												flex-direction: row;
												height: auto;
												margin-bottom: 15px;
											}

											p.textdescription {
												text-align: justify;
											}

											#macecran {
												transition: 0.5s ease-in-out;
												height: fit-content;
												padding: 3em;
												display: flex;
												flex-direction: column;
												align-items: center;
												background-color: #ffffff4d;
												margin-top: 45px;
												box-shadow: 0px 0px 6px #0000004a;
											}

											.icop {
												border: 1px grey solid;
												height: 49px;
												width: 49px;
												border-radius: 50%;
												border-right: transparent;
												margin-right: 20px;
												margin-top: 20px;
											}

											.fa-2x {
												font-size: 1.5em !important;
											}

											#flexdroit {
												padding: 36px 0;
												margin: auto;
											}

											/* -------------------------_______________Service intro description__________________--------**/

											.fa {
												color: #51a4cd;
												padding: 10px;
											}

											.rondbleu {
												height: 10px;
												width: 10px;
												background-color: #51a4cd;
												border-radius: 50%;
												margin-top: -51%;
												margin-left: 89%;
											}

											/* ------- On corrige les paramètres automatique de fontawsome ----- */

											.fa-bed {
												padding-left: 10px;
											}

											.fa-star {
												padding-left: 13px;
											}

											.fa-eur {
												padding-top: 25% !important;
												padding-left: 27%;
											}

											.fa-eur:before {
												padding-left: 11% !important;
												padding-right: 11% !important;
											}

											/* //*********************----------------//////// Portfolio \\\\\\\\------------************\\ */

											#folio {
												height: 60px;
												border-top: 1px solid #a9a9a938;
											}

											.folio-container {
												width: 85%;
												margin: auto;
												height: auto;
											}

											/*------------------------------------ la barre de bouton -------------------------*/

											#barboutonsfolio {
												background-color: #e3e6e8;
												width: 50%;
												display: flex;
												margin: auto;
												margin-bottom: 25px;
											}

											/*-------------------------------------- Les boutons ------------------------------*/

											.boutonsfolio {
												margin: auto;
												position: relative;
												color: #7d7c7c;
												font-family: sans-serif;
												font-weight: bold;
												width: 100%;
												text-align: center;
												border-bottom: 4px solid transparent;
												margin-bottom: 23px;
											}

											.boutonsfolio label {
												display: inline-flex;
												cursor: pointer;
												line-height: 34px;
												position: relative;
												background-color: #e3e6e8;
												width: 6%;
												min-width: 75px;
												height: 30px;
												border-bottom: 7px solid transparent;
												justify-content: center;
												margin: -3px;
												font-size: small;
												flex-wrap: nowrap;
												transition: 0.1s linear;
											}

											.boutonsfolio label:hover {
												background-color: #468cad;
												color: white;
											}

											/* -------------------------on enlève le style des box --------------------------*/

											.folio-container input {
												display: none;
											}

											/* --------------------------------------- quand selectionné ------------------------------------------*/

											.folio-container input.folio-selector-type-all:checked~.boutonsfolio label.folio-label-type-all,
											.folio-container input.folio-selector-type-1:checked~.boutonsfolio label.folio-label-type-1,
											.folio-container input.folio-selector-type-2:checked~.boutonsfolio label.folio-label-type-2,
											.folio-container input.folio-selector-type-3:checked~.boutonsfolio label.folio-label-type-3 {
												color: white;
												background-color: #51a4cd;
												border-bottom: 3px #468cad solid;
												opacity: 1;
												height: inherit;
											}

											/* --------------------------------------- la petite fleche en after-------------------------------- */

											.folio-container input.folio-selector-type-all:checked~.boutonsfolio label.folio-label-type-all::after,
											.folio-container input.folio-selector-type-1:checked~.boutonsfolio label.folio-label-type-1::after,
											.folio-container input.folio-selector-type-2:checked~.boutonsfolio label.folio-label-type-2::after,
											.folio-container input.folio-selector-type-3:checked~.boutonsfolio label.folio-label-type-3::after {
												content: " ";
												position: absolute;
												bottom: -24px;
												right: 42%;
												width: 1px;
												height: 15px;
												border-left: 7px solid transparent;
												border-right: 7px solid transparent;
												border-top: 7px solid #468cad;
											}

											.boutonsfolio label:first-child {
												border-radius: 5px 0 0 5px;
											}

											.boutonsfolio label:last-child {
												border-radius: 0 5px 5px 0;
											}

											/* //*********************----------------//////// les photos \\\\\\\\------------************\\ */
											/*----------------------------------- on les cible par défaut en visible------------------------- */

											.folio-container input.folio-selector-type-all:checked~.folio-items li,
											.folio-container input.folio-selector-type-1:checked~.folio-items .folio-item-type-1,
											.folio-container input.folio-selector-type-2:checked~.folio-items .folio-item-type-2,
											.folio-container input.folio-selector-type-3:checked~.folio-items .folio-item-type-3 {
												opacity: 1;
											}

											/*--------------------------------- le style quand l'élement n'est pas ciblé --------------------*/

											.folio-container input.folio-selector-type-1:checked~.folio-items li:not(.folio-item-type-1),
											.folio-container input.folio-selector-type-2:checked~.folio-items li:not(.folio-item-type-2),
											.folio-container input.folio-selector-type-3:checked~.folio-items li:not(.folio-item-type-3) {
												opacity: 0.1;
											}

											/* -------------------------------- on gère la visibilité des span -----------------------*/

											.folio-container input.folio-selector-type-1:checked~.folio-items li:not(.folio-item-type-1) .span,
											.folio-container input.folio-selector-type-2:checked~.folio-items li:not(.folio-item-type-2) .span,
											.folio-container input.folio-selector-type-3:checked~.folio-items li:not(.folio-item-type-3) .span {
												display: none;
											}

											/*---------------------------- du flex pour gérer le placement des items du folio --------------------*/

											.folio-items {
												display: flex;
												flex-wrap: wrap;
												margin: auto;
												justify-content: center;
												align-items: center;
											}

											/* --------------------------------------le libellé -----------------------------------*/

											.folio-items li .span {
												position: absolute;
												background: rgba(24, 26, 33, 0.28);
												font-style: italic;
												color: #fff;
												font-weight: bold;
												height: auto;
												overflow: visible;
												opacity: 0;
												text-align: left;
												text-shadow: 1px 1px 1px #303857;
												transition: all 0.3s ease-in-out;
												bottom: 0;
												left: 0;
												line-height: 1px;
												width: 100%;
											}

											.spantext {}

											.spantext h4 {
												padding-left: 10px;
											}

											.folio-items li:hover .span {
												opacity: 1
											}

											/*------------------------------------ les images-------------------------------------- */

											.folio-items li img {
												width: 100%;
												height: 100%;
												box-shadow: 0px 0px 20px;
												transition: 0.3s linear;
											}

											/* -------------------------on attaque le style des photos -------------------------------*/

											.folio-items li {
												width: 23%;
												height: 13vw;
												transition: opacity 0.6s ease-in-out;
												list-style: none;
												position: relative;
												padding: 0;
												margin: 2px;
											}

											.folio-items li .span p {
												padding-left: 10px;
											}

											/* -----------------------************ La carte + Formulaire *********----------------------*/

											#contact {
												position: relative;
												margin: auto;
												margin-bottom: 100px;
											}

											#bleu {
												background-color: #00c7ff;
												width: 99.9%;
												height: 40em;
												position: absolute;
											}

											#lacarte {
												width: 100%;
												margin: auto;
											}

											#lacarte iframe {
												width: 100%;
												height: 40em;
												z-index: 1;
												border: 0;
												opacity: 0.89;
											}

											#formulaire {
												position: absolute;
												height: 27em;
												top: 10%;
												right: 10%;
												background-color: rgba(251, 251, 251, 0.69);
												margin-left: -2%;
												margin-top: -1em;
												width: 340px;
												padding: 20px;
												z-index: 5;
											}

											#formulaire input {
												width: 100%;
												line-height: 25px;
												border-radius: 3px;
												margin: 8px 0;
												border: 1px solid #cccccc;
											}

											form strong {
												font-size: small;
											}

											form p {
												font-size: small;
											}

											#formulaire button {
												background-color: #51a4cd;
												border: none;
												border-bottom: 4px solid #3b89b3;
												border-radius: 3px;
												color: #fff;
												padding: 9px;
												margin-top: 10px;
												cursor: pointer;
												width: auto;
											}

											#formulaire button:hover {
												background-color: #3b89b3;
											}

											#msg {
												width: 100%;
												height: 30%;
											}

											#contacte {
												height: 90px;
											}

											#noustrouver {
												display: none;
												margin: auto;
											}

											/* -------------------------- Footer -------------------------*/

											footer {
												width: 100%;
												position: fixed;
												justify-content: center;
												bottom: 0;
												padding: 10px;
												background-color: #ffffff;
												text-align: center;
												font-weight: bold;
											}

											/* ---------------------------- Media Quieries -------------------------------*/

											@media screen and (max-width: 1126px) {
												.conteneurtext p {
													font-size: 1.5em;
												}

												/* ********** Ici on gère le comportement du contenu de la section service **/
												#service_et_img {
													width: 80%;
												}

												#macecran {
													margin: auto;
													margin-top: 45px;
													margin-bottom: 20px;
												}

												#flexgauche {
													visibility: hidden;
													width: 0px;
												}

												.service_description {
													flex-direction: column;
													/* text-align: center; */
													align-items: center;
												}

												.service_description .icop {
													visibility: visible;
													border: 1px grey solid;
													height: 49px;
													width: 49px;
													border-radius: 50%;
													margin: auto;
													position: relative;
													border-bottom: transparent;
												}

												.service_description .rondbleu {
													margin-top: 0%;
													margin-left: 41%;
													position: absolute;
													bottom: -5px;
												}

												.service_description h3 {
													margin: auto;
													margin-top: 30px;
													text-align: center;
												}

												p.textdescription {
													margin-bottom: 14px;
												}

												/* ---------------folio---------------------*/
												.folio-items {
													margin-top: 10px;
													margin-bottom: 10px;
												}

												.folio-container {}

												.folio-items li .span {
													bottom: 4px;
												}

												.folio-items li {
													width: 30%;
													height: 50%;
													margin-bottom: 4px;
												}

												/*------------------------la fenêtre à partir de 780px---------------------*/
												@media screen and (max-width: 780px) {
													.folio-items {
														margin-top: 10px;
													}

													.folio-items li {
														width: 40%;
														height: 50%;
														margin-bottom: 1px;
													}

													/*----------------------on change le slide vers une image-------------------*/
													.conteneurtext {
														display: none;
													}

													#noslidetext {
														display: block;
													}

													.slide {
														margin-bottom: 0;
													}

													/* on supprime le logo et les boutons de base */
													#logo {
														display: none;
													}

													#boutons1 {
														display: none;
													}

													/*on affiche les 2em boutons */
													#boutons2 {
														display: inline-flex;
													}

													/* on réduit la taille du mac */
													#macecran img {
														display: block;
														width: 100%;
														margin: auto;
													}

													#service_et_img {
														width: 100%;
													}

													.conteneurservice {
														width: 96%;
													}

													/*folio*/
													.folio-items {
														margin-top: 10px;
														margin-bottom: 10px;
													}

													.folio-items li .span {
														bottom: 4px;
													}

													.folio-items li {
														width: 47%;
														height: 50%;
														margin-bottom: 4px;
													}

													/*la carte et le formulaire*/
													iframe {
														display: block;
													}

													#noustrouver {
														display: block;
														text-align: center;
														margin-bottom: 10px;
													}

													#noustrouver p {
														background-color: #f2f2f2;
														width: 25%;
														margin: 12px auto;
													}

													#formulaire {
														width: 100%;
														position: initial;
														margin: auto;
														-webkit-box-shadow: 1px 1px 10px 2px #656565;
														-o-box-shadow: 1px 1px 10px 2px #656565;
														box-shadow: 1px 1px 10px 2px #656565;
														padding: 1px;
														height: 26em;
													}

													form p,
													h2 {
														padding-left: 10px;
													}

													#formulaire input {
														width: 95%;
														display: block;
														line-height: 25px;
														border-radius: 3px;
														margin: 8px auto;
														border: 1px solid #cccccc;
													}

													#msg {
														width: 95%;
														margin: auto;
														display: block;
														height: 120px;
													}

													#formulaire button {
														margin-left: 10px;
													}

													#lacarte {
														width: 100%;
														margin: auto;
														height: 25em;
														position: relative;
													}

													#lacarte iframe {
														width: 100%;
														height: inherit;
													}

													#bleu {
														height: inherit;
													}
												}