/** html { scroll-behavior: smooth; } */

html, body {
	/* overflow-x: hidden; */
}

*:focus, *:active {
    border-color: inherit;
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: none !important;
}
.container {
	padding: 0;
}

p {
	color: #57585A;
}

#fnooffre {
	position:absolute;
	bottom:20px;
	right:20px;
}

.commentary {
	visibility: hidden;
}

#quartier-1 ul li {
    list-style: disc;
    
    margin: 0.5vw;
}

.error {
	/* color: red !important; */
	border: 1px solid red !important;
}

.button {
	border-radius: 20px;
	border: 1px solid transparent;
	background-color: #F16A4D;
	padding: 10px 20px;
	font-size: 15px;
	width: 300px;
	text-decoration:none !important;
	color:#fff !important;
	transition: all 0.2s ease;
	cursor: pointer;
}

#main section {
	display: flex;
	flex-direction: column;
}

#service .button:after {
	content: "→";
    padding-left: 5px;
}

a .button {
	list-style: none;
	font-style: none;
	color: white;
}

li {
	list-style: none;
}

body {
	background-color: #fff;
}

#main #district div:last-child {
	padding-right: 2vw;
	padding-left: 2vw;
}
#main #residence div:last-child {
	padding-right: 2vw;
	padding-left: 2vw;
}

#test {
	color: red;
	background-color: yellow;
}


/* Main ------------------------------------------ */

#main {
	background-color: #fff;
	margin: -2vw 0vw 0vw 0vw;
	width: 100%;
	padding: 0vw 0vw 0vw 0vw;
	font-size: 14px;
}

h2 {
	font-size: 40px;
	font-style: 'Roboto';
	font-weight: 300;
}

h2 strong {
	font-weight: 800;
}



section section {
	color: #57585A;
	overflow: auto;
	margin-left: 0px !important;
	margin-bottom: 60px;
}

/* Form  */

main {
	/* width: 100vw; */
	display: flex;
}

#main {
	width: 75%;
}

#my_form {
	background-color: #fff;
	color: #57585A	;
	position: -webkit-sticky;
	position: sticky;
	top: 80px;
	width: 25%; height: 100%;
	display: block;
	overflow: hidden;
}

#form_ml, #optins { text-align: center; }
#form_ml {
	font-size: 85%;
}

#optin { width: 20px; height: 20px; float: left; }

#my_form #logo_form {
	text-align: center;
	padding-top: 2vw;
}

#my_form #logo_form img {
	width: 30%;
}

#my_form h3,
#confirmation {
	text-align: center;
	font-size: 130%;
	padding: 0vw 1vw 0vw 1vw;
}

#civ {
	padding-right: 2vw;
	margin-left: -0.5vw;
}

#form_ml {
	padding: 1vw 1vw 0 1vw;
}

.form_button {
	background-color: #f2f2f2;
	border-radius: 20px;
	width: 80px;
	padding: 0.4vmax 0;
}

.fb {
	width: 40%;
}

.form_button:hover {
	background-color: #0C426F;
	color: #fff;
}

.btn.active, .btn:active {
	background-color: #0C426F;
	color: #fff;
	box-shadow: unset; -webkit-box-shadow: unset;
}

.form_input {
	width: 80%;
	border-radius: 20px;
	background-color: #f2f2f2;
	border: none;
	margin-right: auto;
	margin-left: auto;
	color: #333;
	height: 34px;
}

#optins {
	margin-left: 0;
	width: 100%;
	padding: 1vw;
}

#form_validate button {
	width: 60%;
	margin-bottom: 2vw;
}

#form_phone_number {
	text-align: center;
	padding-bottom: 6vw;
	margin-top: -2vw;
}

#form_phone_number img {
	width: 50%;
}

#form_phone_number div:first-child {
	width: 60%;
	margin-right: auto;
	margin-left: auto;
}

#form_phone_number div:first-child hr {
	border: 1px solid #1F3340;
}


#form_validate,
#civility .btn-group-toggle,
#project div:first-child {
	text-align: center;
}

/* Visuel */
#main #visual {
    height: 1000px;
}

#main #visual #visual_img img {
	display: none;
}

#main #visual #visual_offer {
	width: 60%;
}

#visual_offer span {
	border: 1px solid #0C426F;
	padding: 6px 10px;
	margin-left: 0px;
	display:inline-block;
	margin-bottom:15px;
}

#main #visual #visual_img {
	background: url('../img/visu2025-bobourg-dunkerque.jpg') no-repeat;
	background-size: cover;
	background-position: top center;
	width: 100%; height: 100%;
}

#main #visual #visual_offer {
	background: linear-gradient(to right, #fff 60%, transparent);
	width: 570px; max-width:100%;
	padding: 1vw 1vw 1vw 2vw;
	/* margin: -35vw 0vw 0vw 0vw; */
	font-size: 16px;
	position:absolute; left:0px; top:16vh;
}

#main #visual #visual_offer p {
	/* width: 50%; */
}

#main #visual #visual_offer p.mentions { font-size:14px; }

/* District */
#main #district #district_img {
	background: url('../img/district-min.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	height: 100%;
}

#main #district div:last-child {
	padding-right: 2vw;
}

/* Residence */
#main #residence #residence_img {
	background: url('../img/residence-min.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	height: 100%;
}

#main #residence div:first-child,
#main #residence div:last-child {
	height: 100%;
}

#main #residence div:first-child {
	float: right;
}

#main #residence div:last-child {
	float: left;
	padding-right: 2vw;
}

/* Description */
#main #description {
	background-color: #1F3340;
}

#main #description #description_img img {
	width: 40%;
	margin: 7vw 0vw 0vw 14vw;
	border-radius: 20%;
}

#main #description div:first-child {
	height: 100%;
}

#main #description div:last-child {
	width: 45%;
	height: 100%;
	padding-top: 6vw;
}

/* Service */
#main #service {
	background-color: #1D2B34;
	padding-bottom: 30px;
	height: auto !important;
}

#inscription {
    background-color: #2b8fce;
    color: #FFFFFF;
    font-size: 140%;
    font-weight: 600;
    padding: 30px;
    border-radius: 25px;
    text-align: center;
}

#main #gdp_price {
	font-weight: 300;
	font-size: 90%;
}

#main #gdp_price strong {
	font-size: 110%;
	font-weight: 700;
}

#main #service #service_gdp h2 {
	text-align: center;
}

/* #main #service #service_gdp ul li:last-child {
	text-align: left;
	margin-top: 15px;
	font-size: 60%;
	font-weight: 300;
} */

#main #service div:last-child {
	text-align: center;
}

#main #service #gdp_left { float: left; font-size: 115%; font-weight: 500; width: 10%; }
#main #service #gdp_center { float: left; font-size: 110%; font-weight: 400; width: 30%;}
#main #service #gdp_right { float: left; font-size: 110%; font-weight: 400; width: 30%; }
#main #service #gdp_tva55 { float: left; font-size: 110%; font-weight: 400; width: 30%; }

#gdp_left,
#gdp_center,
#gdp_right,
#gdp_tva55 {
	background-color: #f2f2f2;
	padding: 10px;
	text-align: center;
}

#main #service #gdp_right {
	background-color: #57585A;
	color: #fff !important;
}

#main #service li {
	margin-bottom: 0.2vw;
	width: 100%;
	/* width: 90%;
	margin-right: auto;
	margin-left: auto; */
}

#ppp img { width: 60px; margin-bottom: 10px; }
#ppp li { list-style: none !important; margin: 0 0.5vw 1.5vw !important; }
#main #residence div:last-child { padding-top: 0; } 
#ppp {
	padding-inline-start: 0;
	display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;
	padding-right: 0vw;
}
#ppp li {
	width: max(14.5vw, 172px); height: max(14.5vw, 172px);
	max-width: 172px; max-height: 172px;
	padding: 5px;
	padding-top: 1.5vw;
	text-align: center;
	font-size: 0.9vw; line-height: 1.2em;
	color: #17213C; background-color: #f2f2f2;
	display: flex; justify-content: flex-start; align-items: center; flex-direction: column;
}
#ppp li > b { font-weight: normal !important; } 

@media (max-width: 900px) {
	#main #service #gdp_left,
	#main #service #gdp_center,
	#main #service #gdp_right,
	#main #service #gdp_tva55 {
		/* width: 48%; */
		width: 100%;
		margin: 1px;
		float: none;
		display: inline-block;
	}
	#ppp li { margin: 4vw !important; max-width: 33vw; max-height: 33vw; padding-top: 15px; font-size: 11px; }
}

/* Map */

#main #map {
	height: auto !important;
}

#main #map_google {
	height: 570px !important;
	width: 100%;
}
#main #map #map_footer {
	height: 60px !important;
}

#main #map #map_footer {
	margin-top: 2vw;
}

#main #map {
	background-color: #fff;
	height: 730px;
	padding-left: 15px;
	padding-right: 15px;
}

#main #map #map_footer img {
	width: 10%;
	margin-top: -1vw;
}

#main #map span {
	text-align: left;
	height: 20%;
	font-size: 110%;
}

#residence h2 {
	font-size: 38px;
}

.sec_flex {
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
/* Footer */
#footer {
	background-color: #f2f2f2;
	color: white;
	height: auto;
	margin-bottom: 0px;
	padding: 2vw 1vw 0vw 0vw;
}

#footer #footer_lleft {
	text-align: left;
}

#footer #footer_lright {
	text-align: right;
	width: 40%;
	float: right;
}

#footer #footer_ML {
	padding-top: 1vw;
	padding-bottom: 1vw;
}

#footer #footer_lleft img,
#footer #footer_lright img {
	width: 18%;
}

#footer #phone_number {
	display: none;
}

/* ------------------------------------------ */

/* Header ------------------------------------------ */

#header #navicon { display: none; }

#header #form_button {
	display: none;
}

#header #header_logo {
	z-index: 999;
	position: fixed;
	left: 1vw;
	top: 0;
}

#header #header_logo img {
	width: 17%;
	margin: 0vw 0vw 0vw 0vw;
}

#header #header_logo img:last-child { width: 19%; margin-top: 0.65vw; }

/* Navbar */
#header #header_navbar ul {
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	background-color: #17213C;
	list-style: none;
	text-decoration: none;
	overflow: auto;
	z-index: 99;
}


#nav_menu {
	height: 55%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 950;
	background-color: #17213C;
	transition: all 0.4s ease;
	transform: translateX(100%);
}

#nav_menu a {
	padding: 13vw;
	border-top: 1px solid #1F3340;
	display: block;
	color: white;
	font-size: 120%;
}

#header #header_navbar li {
	float: right;
	border-left: 1px solid #1F3340;
}

#header #header_navbar li a {
	display: block;
	text-align: center;
	padding: 1.2vw 2vw 1.2vw 2vw;
	color: white;
}

#header #header_navbar li a:hover,
#nav_menu a:hover {
	background-color: #1F3340;
	text-decoration: none;
}

/* ------------------------------------------ */

#visual_offer span { font-size: 1em !important; }
#visual_offer span strong { font-size: 1.2em !important; }

#footer_ML { padding: 0 60px; font-weight: 300; } 
#footer_ML div a { text-decoration: none; color: #fff; } 
#footer_ML div { display: flex; justify-content: center; }

@media (max-width: 1800px) {
	section #district,
	section #residence {
		height: auto;
	}



	#main #visual {
		height: 700px;
		position: relative;
	}
	#main #visual #visual_offer {
		/* margin: -35vw 0vw 0vw 0vw; */
		padding-left: 2vw;
	}
	#main #visual #visual_offer p {
		width: 70%;
	}
	#main #description div:last-child {
		padding-left: 3vw;
	}
	#main #description #description_img img {
		width: 60%;
		margin: 8vw 0vw 0vw 12vw;
	}
	#my_form h3 {
		font-size: 110%;
	}

	#my_form #logo_form img {
		width: 25%;
	}

	#main #map #map_footer img {
	    width: 12%;
	}
}

.form_tel {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 200px;
}

.form_tel a {
	color: #fff;
	font-size: 2em;
	text-decoration: none;
	padding: 10px 30px;
	background-color: #57585A;
	border: 1px solid transparent;
	transition: all 0.2s ease;
} 

.form_tel a:hover {
	background: #fff !important;
	color: #0C426F !important;
	border: 1px solid #0C426F !important;
}


@media (max-width: 1100px) {
	h2 {
		font-size: 25px;
	}
	#main #description #description_img img {
		width: 60%;
	}
	#main #residence #residence_img {
		width: 100%;
	}
	#main #description #description_img img {
		width: 30%;
		margin: 10vw 0vw 0vw 0vw;
	}
	#main #description div:last-child {
		text-align: left;
		margin-right: auto;
		margin-left: auto;
		width: 100%;
	}
	#main #residence #residence_img {
		float: right;
		width: 50%;
	}
}

@media (max-width: 1500px) {
	#my_form .logo-programme {
		max-width: 34% !important;
	}
}
#nav_menu { display: none; }

#baseline_offer {
	width: fit-content;
	width: intrinsic;           /* Safari/WebKit uses a non-standard name */
	width: -moz-max-content;    /* Firefox/Gecko */
	padding: 5px;
	line-height: 32px;
	border: 1px solid red;
	text-transform: uppercase;
	margin: 10px 0;
	font-size: 25px;
}

@media (max-width: 900px) {

	section section {
		margin-bottom: 30px;
	}

	#baseline_offer {
		margin: auto;
		padding: 15px 15px 10px;
		font-size: 1.4em;
	}
	#footer div:last-child {
		text-align: center !important;
	}

	.form_button { padding: 1vmax 0; } 

	#form_mobile { display: block !important; }

	#nav_menu { display: block; }
	
	.img_padding {
		padding-bottom: 80% !important;
	}
	.mabcarousel {  height: 420px !important; }
	#quartier .columns .column:first-child {
		order: 2;
	}
	#quartier .columns .column:last-child {
		order: 1;
	}

	#district { margin-top: 30px; }
	#visual_offer span { margin-left: 0; }
	section section {
		height: 1000px;
	}

	h2 {
		font-size: 25px;
		text-align: center;
	}

	.container {
		width: 100% !important;
	}

	.button {
		text-align: center;
		width: 100%;
	}

	/* Main ------------------------------------------ */
	#main #district div:first-child,
	#main #district div:last-child,
	#main #residence div:first-child,
	#main #residence div:last-child,
	#main #description div:first-child,
	#main #description div:last-child,
	#main #map #map_footer {
		float: none !important;
		width: 100% !important;
		height: 50% !important;
	}

	#main #district #district_img,
	#main #residence #residence_img {
		height: 40% !important;
	}

	#main #district,
	#main #residence {
		height: 850px;
	}

	#main #visual {
		margin-bottom: -42vw;
		height: 760px;
	}

	#main #visual #visual_img img {
		display: block;
		position: absolute;
		top: -4px;
		/* left: 15px; */
		left: 50%;
		transform: translateX(-50%);
		width: 125px;
	}

	#main #visual #visual_img {
		background: linear-gradient(to top, rgba(0, 0, 0, 0), #f2f2f2 99%), url('../img/head.jpg');
		background-size: cover;
		background-repeat: no-repeat;
		background-position: 50% 100%;
		height:0px; padding-bottom:96%;
		position: relative;
	}

	#main #visual #visual_offer {
		width: 100%;
		margin: 0vw 0vw 0vw 0vw;
		padding: 8vw 2vw 0vw 2vw;
		height: 260px;
		line-height: 6vw;
		font-weight: 400;
		text-align: center;
	}

	#main #visual #visual_offer p {
		width: 100%;
		margin-left: 0 !important;
	}

	/* Form */

	#logo_form {
		text-align: center;
		padding: 6vw 1vw 1vw 1vw;
	}

	#form_mobile h3 {
		text-align: center;
		font-size: 20px;
	}

	#form_mobile {
		padding: 3vw 3vw 6vw 3vw;
	}

	/* Description */
	#description {
		height: 600px;
		width: 100%;
	}

	#ul_prest li {
		margin: 15px auto !important;
		width: 95% !important;
		height: 140px !important;
		padding-top: 25px !important;
	}

	#main #map span {
		align-self: center !important;
	}
	#adresses .column {
		display: flex;
	}

	#description_img {
		text-align: center;
		padding: 15vw 1vw 1vw 1vw !important;
	}

	#main #description #description_img img {
		margin: 8vw auto 0vw auto;
		width: 60%;
	}

	/* Service */

	#main #service li {
		width: 100%;
		font-size: 75%;
		margin: 0;
		padding-top: 1vw;
		padding-bottom: 1vw;
	}

	ul {
		list-style: none;
		padding-inline-start: 0px;
	}

	#main #service #service_gdp h2 {
		text-align: center;
	}


	/* Map */
	#main #map #map_footer {
		padding-top: 8vw;
		padding-top: 4vw;
		margin-top: 3vw;
		float: left;
		font-size: 80%;
	}

	#map_addr,
	#map_bdv {
		text-align: center;
		padding: 0;
	}

	#map #map_footer img {
		width: 30% !important;
		margin-top: -1vw;
		float: left;
	}

	#main #map {
		height: 560px !important;
		padding-top: 6vw;
	}
	#main #map_google {
		height: 400px !important;
	}
	#main #map #map_footer {
		height: 80px !important;
	}

	/* Form */
	#my_form {
		display: none;
	}

	#form_mobile_body {
		background: #fff;
		padding: 40px 15px;
	}

	#form_mobile {
		/* background: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0),
			#ffffff 10%
		); */
		padding: 0;
		padding-top: 80px;
		background: transparent;
		color: #17213C;
		position: fixed;
		top: 0vw;
		height: 95%;
		width: 100%;
		z-index: 59900;
		overflow-x: hidden;
		overflow-y: auto;

		transform: translateY(100%);
		transition: all 0.4s ease;
	}

	.form_tel {
		margin-bottom: 30px;
		margin-top: 15px;
	}

	/* Footer */
	#footer {
		height: 330px;
	}

	#footer div:first-child {
		padding-top: 5vw;
		padding-bottom: 4vw;
	}

	#footer #footer_lleft img,
	#footer #footer_lright img {
		width: 30%;
	}

	#footer #footer_lleft,
	#footer #footer_lright,
	#footer #footer_ML {
		text-align: center;
	}
	#footer #footer_lright {
		width: 100%;
		float: none;
	}

	#footer #phone_number  {
		display: block;
		width: 100%;
	}

	#footer #phone_number img {
		width: 50%;
		margin: 0 0 0 20vw;
	}

	/* ------------------------------------------ */

	#visual { /* margin-top: -4vw; */ }
	/* Header ------------------------------------------ */
	#header #header_navbar {
		display: none;
	}

	#header #header_logo {
		position: relative;
		z-index: 99;
		height: 120px;
	}

	#header #header_logo img {
		padding-top: 20vw;
	}

	#header #navicon {
		display: block;
		position: fixed;
		top: 3vw;
		right: 3vw;
		z-index: 999;
		width: 100px;
		height: 50px;
		background-color: #1F3340;
		border-radius: 30px 0 30px 30px;
	}

	#header #navicon div:first-child img {
		margin: 3vw 0vw 0vw 4vw;
	}
	#header #navicon div:last-child img {
		margin: -15vw 0vw 0vw 15vw;
	}

	#header #form_button {
		display: block;
		width: 100%;
		height: 110px;
		position: fixed;
		bottom: -40px;
		z-index: 699;
		color: white;
		font-size: 140%;
		border-radius: 50px 50px 0 0;
		padding-bottom: 40px;
		min-height: 95px;
	}
	#header #form_button2 {
		display: block;
		width: 100%;
		height: 80px;
		position: fixed;
		top: 0;
		z-index: 699;
		color: white;
		font-size: 140%;
		border-radius: 50px 50px 0 0;
		left: 0;
	}
	
	#header #header_logo img {
		width: 30%;
	}
	
	#header #header_logo {
		margin-left: -1vw;
		padding: 2vw 1vw 2vw 10vw;
		width: 100%;
	}

	#footer { 
		height: auto;
	}
	#footer #footer_ML {
		padding: 0 20px;
		height: auto;
		margin-bottom: 80px;
	}
	
	/* ------------------------------------------ */
}

@media (min-width: 900px) {
	#form_mobile { display: none; }
	#deluxe + #residence {
		margin-top: 0px;
	}
	.button:hover {
		color: #0C426F !important;
		border: 1px solid #0C426F !important;
		background: #fff !important;
	}
	#service_gdp h2 {
		width: 80%;
		text-align: left !important;
		margin: 25px auto 15px;
		margin-left: 2vw;
	}
	/* #service_gdp ul {
		padding: 0;
	} */
}
@media (min-width: 374px) and (max-width: 450px) {
	#main #visual {
		height: 900px;
	}

	#main #visual #visual_img {
		/* height: 60%; */
	} 

}

@media (min-height: 1350px) and (max-height: 1400px) {
	#main #description {
		height: 450px;
	}
	#main #description div {
		width: 40% !important;
		height: 45% !important;
		float: left;
	}
	#main #description div:first-child {
		margin-left: 5vw;
	}
	#main #description div:last-child {
		margin-right: 5vw;
	}
}

.columns { display:flex; width: 100%; min-width: 75%; }
.columns > .column { flex:1; min-width: 50%; }

section { width: 100%; min-width: 75%; }

body { padding-top:80px; }
.navbar { height:80px;     background: #f2f2f2;
    background-repeat: round; color:#17213C; padding:0px 20px; margin-bottom:0px; position:fixed; left:0px; top:0px; right:0px; z-index:11; border-radius:0px; border:none; }
.navbar .columns { flex-direction:row; }
.navbar .columns > .column { height:80px; line-height:80px; }
.navbar .columns > .column:first-child { text-align:left; }
.navbar .columns > .column:last-child { text-align:right; }

ul.menu-desktop { list-style-type:none; }
ul.menu-desktop > li { display:inline-block; }
.menu-desktop li a:hover {
	border-bottom: 2px solid #fff;
}
ul.menu-desktop > li a { border-bottom: 1px solid transparent; transition: all 0.2s ease; height:80px; line-height:80px; padding:0px 20px 10px; font-size:18px; color:#17213C ; text-decoration:none !important; font-weight:normal; } 

section .columns { padding-left:0px !important; padding-right:0px !important; }
section .columns > .column { padding:2vw 3vw 4vw 3vw; }
section .columns > .column.illustration { min-height: 450px; background-position:center !important; background-size:cover !important; background-repeat:no-repeat !important; }
section .columns > .column h2 { margin-bottom:30px; }
section .columns > .column .button { margin-top:30px; }

section#quartier { height:auto !important; }

#main #service { background:#fff; }

#main #map { overflow-x:hidden !important; }
.columns#adresses { background:#f2f2f2; }
.columns#adresses > .column { height:134px; line-height:134px; vertical-align:middle; padding:0px !important; }
.columns#adresses > .column img { display:inline; }
.columns#adresses > .column span { display:inline-block; height:auto !important; line-height:1.4em; vertical-align:middle; font-size:100% !important; }

#footer { color:#17213C !important; }
#footer .columns > .column { text-align:center; }
#footer .columns > .column:first-child { text-align:left; }
#footer .columns > .column:last-child { text-align:right; max-width:30%; }
#footer img.logo { margin-bottom:0px !important; }
/* #footer a { color:#17213C; }
#footer a { color:#17213C; font-weight:bold; text-decoration:underline; } */
#footer p.mentions { padding:0 3vw 30px; margin: 0; }

ul.links-footer { list-style-type:none; }
ul.links-footer > li { display:inline-block; }

ul.social { list-style-type:none; }
ul.social > li { display:inline-block; }
ul.social > li > a { display:block; width:48px; height:48px; line-height:48px; text-align:center; text-decoration:none !important; background-repeat:no-repeat !important; background-size:cover !important; background-position:center !important; }
ul.social > li > a.linkedin { background-image:url('../img/icon-linkedin.png'); }
ul.social > li > a.facebook { background-image:url('../img/icon-facebook.png'); }

#my_form { }
#my_form .logo-programme { margin: 25px auto; display:block; max-width:34%;  }
#my_form .telephone { width:90%; margin:0px auto 2vw auto; padding:20px 0px; background:#f2f2f2; text-align:center; }
#my_form .telephone img { display:block; margin:auto; }


#form_mobile .logo-programme { display:block; max-width:30%; margin-left:auto; margin-right:auto; }

.navbar { padding:0px 20px; }

#ul_prest  {
	display: flex;
	flex-wrap: wrap;
	padding-inline-start: 0;
}

#ul_prest img {
	width: 42px; height: 42px;
	align-self: center;
}
#ul_prest li {
	display: flex;
	flex-direction: column;
	font-size: 1em;
	width: 200px; height: 200px;
	background: #f2f2f2;
	padding: 45px 10px 10px;
	margin: 15px 15px 15px 0;
}
#ul_prest li span {
	padding-top: 10px;
	text-align: center;
	color: #57585A;
}



section.prest .columns > .column {
	padding: 15px;
}
.prest {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 15px;
}

.mobile {
	display: none;
}
.desktop { display: block; }

.myShow {
	transform:  translateX(20%) !important;
	transition: all 0.4s ease;
}

.form_show {
	transform: translate(0, 0) !important;
	transition: all 0.4s ease;
}

@media (max-width: 900px) {

	#quartier-1 ul li {
		list-style: disc;
		margin: 4vw;
	}
	
	#form_mobile .logo-programme {
		margin: 0px  auto;
	}

		.mobile {
			display: block;
		}
		.desktop {
			display: none;
		}

		#visuel-offer p {
			margin-left: 0 !important;
		}

		header .columns .column:first-child {
			display: flex;
		}
		header .columns .column:first-child img:first-child,
		header .columns .column:first-child img:nth-child(2) {
			width: 90px;
		}

	
		.columns { display:flex; flex-direction:column; }
		.columns > .column {  }
		
		body { padding-top:85px; }
		.navbar { height:85px; color:#fff; padding:0px 20px; margin-bottom:0px; position:fixed; left:0px; top:0px; right:0px; z-index:11;    }
		.navbar .columns > .column { height:85px; line-height:85px; }
		header ul.nav-menu { list-style-type:none; }
		header ul.nav-menu > li { display:inline-block; }
		header ul.nav-menu > li a { display:block; width:40px; height:40px; line-height:40px; text-align:center; background:#253150; border-radius:3px; color:#17213C; }
		#header { border:none; }
		#header #form_button { left:0px; }
		#nav_menu { top:85px; height:auto; }
		#nav_menu a { height:85px; line-height:85px; font-size:5vw; padding:0px 20px; }
		#nav_menu .form_tel a {
			font-size: 1.6em;
		}
		#form_mobile { left:0px; right:0px; height:100%; }
		
		#main { margin-top:0px !important; }
		#main #visual { height:auto; margin-bottom:0px; }
		#main #visual #visual_offer { position:relative; left:auto; top:auto; height:auto; padding-bottom:2vw; }
		
		section { height:auto !important; overflow:hidden !important; }
		section .columns > .column.illustration { height:0px; padding-bottom:70%; }
		
		section#quartier #quartier-1 { flex-direction:column-reverse; }
		section#quartier #quartier-2 { display:none; }
		
		section#residence .columns { flex-direction:column-reverse; }
		
		#main #map { height:auto !important; }
		
		#footer { padding-bottom:80px; text-align:center; }
		#footer .columns > .column { text-align:center !important; max-width:100% !important; padding:4vw !important; }
		#footer img.logo { margin-bottom:20px !important; }
		#footer img.telephone { display:block; margin:0px auto 20px auto; }
	
}

@media (min-width: 1500px) {

	#ul_prest li {
		
		font-size: 1.1vw;
		width: 15vw; height: 15vw;
		
		padding: 3vw 1vw 1vw;
		margin: 15px 15px 15px 0;
	}

}

#visuel_offres {
    font-size: 16px;
    position: absolute;
    left: 0;
    top: 37vh;
    padding: 1% 2vw;
	padding-right: 5vw;
    background: linear-gradient(to right, #fff 83%, transparent);
}

#visuel_offres p {
	padding-left: 15px;
}

@media (max-width: 800px) {
	#visuel_offres {
		top: 50.3vh;	
	}
}

@media (max-width: 800px) {
	#visuel_offres {
		position: unset;
		margin: auto;
		margin-bottom: auto;
		margin-bottom: 2em;
		background: #0C426F;
		color: #fff;
		padding: 5vw 2vw;
		padding-right: 5vw;
		text-align: center;
	}
}
/* 
ul.patchs {
	position: absolute;
	top: 120px;
	right: 26vw;
	display: flex;
	align-content: center;
}

ul.patchs > li {
	border-radius: 50%;
	border: solid 1px red;
	color: #fff;
	background-color: #0C426F;
	margin-right: 1vw;
	text-align: center;
	width: 80px;
	height: 80px;
	line-height: 80px;
}

ul.patchs > li > p.patch_multiline {
	line-height: 17px;	
}

ul.patchs > li > p {
	margin: 0;
} */

img.pictos {
	width: 7.5%;
	position: absolute;
	bottom: 20px;
	left: 1%;
}



@media (max-width:800px){
	#main #service #gdp_right { width: 100%; }
	img.pictos {
		width: 12.5%;
		position: absolute;
		left: 50%;
		transform: translate(-50%, 0);
		bottom: 30px;
	}

	.linear {
		height: 10vh;
		position: absolute;
		width: 100%;
		/*background: linear-gradient(to top, rgba(0, 0, 0, 0), #17213C 100%);*/
	}

	/* ul.patchs {
		top: 45vh;
		right: 0vw;
	}

	ul.patchs > li {
		width: 50px;
		height: 50px;
		margin-right: 4vw;
		font-size: 10px;	
		text-transform: uppercase;
		display: flex;
		justify-content: center;
		align-items: center;
	} */
}

.list-gdp {
	text-align: initial;
	margin-bottom: 1%;
	padding-left: 2vw;
}

.item-gdp {
	padding: 2% 1%;
	background: #f2f2f2;
	margin: 1% 0 !important;
	font-size: 14px !important;
}

.item-gdp p {
	margin: 0;
}

@media (min-width:1275px) and (max-width:1500px){
	.item-gdp {
		width: 842px !important;
	}
}

@media (max-height:800px){
	#visuel_offres {
		top: 50vh;
	}
}

.newin {
	height: 55px; width: auto;
	margin-left: 10px;
}

#pcontainer {
	position: absolute;
	bottom: 30px;
	left: 0;
	display: flex; justify-content: flex-start; align-items: center;
	gap: 15px;
}

#pcontainer img {
	width: 70px;
}

.hpicto {
	text-transform: uppercase;
	background-color: white;
	color: #17213C;
	text-align: center;
	font-size: 11px; line-height: 11px;
	font-weight: bold;
	width: 60px; height: 60px;
	border-radius: 50%;
	display: flex; flex-direction: column;
	justify-content: center; align-items: center;
}

@media (max-width: 800px) {
	#header .newin {     margin-top: 4vw; }
	footer .newin { width: 50vw; }
	#fnooffre {
		display:none;
	}
	
} 

/* UPDATE POPUP 14/11/22 */
@-webkit-keyframes rotate_popup {
	100% { transform: rotate(360deg); }
}
@keyframes rotate_popup {
	100% { transform: rotate(360deg); }
}
.popup {
	position: absolute; top: 0; right: 0;
	transform: translate(33.3%, 50%);
	width: 7vw; height: 7vw;
	display: flex; justify-content: center; align-items: center;
	color: white;
	font-size: max(1vw, 14px); line-height: 1em;
}
.popup strong, .popup b { font-weight: normal; }
.popup b { font-size: 66.6%; display: block; margin-top: -0.2em; }
.popup img { width: 2.5vw; }
.popup > div:first-child {
	width: 100%; height: 100%;
	position:relative; background-color:white;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='133.504' height='133.584' viewBox='0 0 133.504 133.584'%3E%3Cg transform='translate(1 1)'%3E%3Cpath id='Tracé_3894' data-name='Tracé 3894' d='M65.747,131.584A65.69,65.69,0,0,1,0,65.945,112.2,112.2,0,0,1,2.371,46.077L14.639,0H65.627a65.792,65.792,0,1,1,.12,131.584' fill='%2351788c'/%3E%3Cpath id='Tracé_3894_-_Contour' data-name='Tracé 3894 - Contour' d='M65.747,132.584A66.509,66.509,0,0,1,28.426,121.2,66.841,66.841,0,0,1,4.245,91.885,66.136,66.136,0,0,1-1,65.945,112.177,112.177,0,0,1,1.389,45.888L1.4,45.82,13.871-1H65.627A66.086,66.086,0,0,1,91.632,4.286a67.011,67.011,0,0,1,11.359,6.194,67.454,67.454,0,0,1,24.247,29.478A66.464,66.464,0,0,1,121.1,103.2a66.937,66.937,0,0,1-29.371,24.142A66.44,66.44,0,0,1,65.747,132.584ZM3.347,46.3A110.172,110.172,0,0,0,1,65.945a64.265,64.265,0,0,0,11.055,36.139A64.918,64.918,0,0,0,40.542,125.5a64.758,64.758,0,0,0,61.411-5.96A64.848,64.848,0,0,0,125.416,91.1a64.751,64.751,0,0,0-.019-50.366A65.391,65.391,0,0,0,90.849,6.126,64.1,64.1,0,0,0,65.627,1H15.408Z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center/contain;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='133.504' height='133.584' viewBox='0 0 133.504 133.584'%3E%3Cg transform='translate(1 1)'%3E%3Cpath id='Tracé_3894' data-name='Tracé 3894' d='M65.747,131.584A65.69,65.69,0,0,1,0,65.945,112.2,112.2,0,0,1,2.371,46.077L14.639,0H65.627a65.792,65.792,0,1,1,.12,131.584' fill='%2351788c'/%3E%3Cpath id='Tracé_3894_-_Contour' data-name='Tracé 3894 - Contour' d='M65.747,132.584A66.509,66.509,0,0,1,28.426,121.2,66.841,66.841,0,0,1,4.245,91.885,66.136,66.136,0,0,1-1,65.945,112.177,112.177,0,0,1,1.389,45.888L1.4,45.82,13.871-1H65.627A66.086,66.086,0,0,1,91.632,4.286a67.011,67.011,0,0,1,11.359,6.194,67.454,67.454,0,0,1,24.247,29.478A66.464,66.464,0,0,1,121.1,103.2a66.937,66.937,0,0,1-29.371,24.142A66.44,66.44,0,0,1,65.747,132.584ZM3.347,46.3A110.172,110.172,0,0,0,1,65.945a64.265,64.265,0,0,0,11.055,36.139A64.918,64.918,0,0,0,40.542,125.5a64.758,64.758,0,0,0,61.411-5.96A64.848,64.848,0,0,0,125.416,91.1a64.751,64.751,0,0,0-.019-50.366A65.391,65.391,0,0,0,90.849,6.126,64.1,64.1,0,0,0,65.627,1H15.408Z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center/contain;
	-webkit-animation: rotate_popup 15s linear infinite;
	        animation: rotate_popup 15s linear infinite;
	will-change: transform;
}
.popup > div:first-child::after {
	content: " ";
	position: absolute; left: 2px; top: 2px;
	width: calc(100% - 4px); height: calc(100% - 4px);
	background-color: #51788c;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='133.504' height='133.584' viewBox='0 0 133.504 133.584'%3E%3Cg transform='translate(1 1)'%3E%3Cpath id='Tracé_3894' data-name='Tracé 3894' d='M65.747,131.584A65.69,65.69,0,0,1,0,65.945,112.2,112.2,0,0,1,2.371,46.077L14.639,0H65.627a65.792,65.792,0,1,1,.12,131.584' fill='%2351788c'/%3E%3Cpath id='Tracé_3894_-_Contour' data-name='Tracé 3894 - Contour' d='M65.747,132.584A66.509,66.509,0,0,1,28.426,121.2,66.841,66.841,0,0,1,4.245,91.885,66.136,66.136,0,0,1-1,65.945,112.177,112.177,0,0,1,1.389,45.888L1.4,45.82,13.871-1H65.627A66.086,66.086,0,0,1,91.632,4.286a67.011,67.011,0,0,1,11.359,6.194,67.454,67.454,0,0,1,24.247,29.478A66.464,66.464,0,0,1,121.1,103.2a66.937,66.937,0,0,1-29.371,24.142A66.44,66.44,0,0,1,65.747,132.584ZM3.347,46.3A110.172,110.172,0,0,0,1,65.945a64.265,64.265,0,0,0,11.055,36.139A64.918,64.918,0,0,0,40.542,125.5a64.758,64.758,0,0,0,61.411-5.96A64.848,64.848,0,0,0,125.416,91.1a64.751,64.751,0,0,0-.019-50.366A65.391,65.391,0,0,0,90.849,6.126,64.1,64.1,0,0,0,65.627,1H15.408Z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center/contain;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='133.504' height='133.584' viewBox='0 0 133.504 133.584'%3E%3Cg transform='translate(1 1)'%3E%3Cpath id='Tracé_3894' data-name='Tracé 3894' d='M65.747,131.584A65.69,65.69,0,0,1,0,65.945,112.2,112.2,0,0,1,2.371,46.077L14.639,0H65.627a65.792,65.792,0,1,1,.12,131.584' fill='%2351788c'/%3E%3Cpath id='Tracé_3894_-_Contour' data-name='Tracé 3894 - Contour' d='M65.747,132.584A66.509,66.509,0,0,1,28.426,121.2,66.841,66.841,0,0,1,4.245,91.885,66.136,66.136,0,0,1-1,65.945,112.177,112.177,0,0,1,1.389,45.888L1.4,45.82,13.871-1H65.627A66.086,66.086,0,0,1,91.632,4.286a67.011,67.011,0,0,1,11.359,6.194,67.454,67.454,0,0,1,24.247,29.478A66.464,66.464,0,0,1,121.1,103.2a66.937,66.937,0,0,1-29.371,24.142A66.44,66.44,0,0,1,65.747,132.584ZM3.347,46.3A110.172,110.172,0,0,0,1,65.945a64.265,64.265,0,0,0,11.055,36.139A64.918,64.918,0,0,0,40.542,125.5a64.758,64.758,0,0,0,61.411-5.96A64.848,64.848,0,0,0,125.416,91.1a64.751,64.751,0,0,0-.019-50.366A65.391,65.391,0,0,0,90.849,6.126,64.1,64.1,0,0,0,65.627,1H15.408Z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center/contain;
	will-change: transform;
}
.popup > div:last-child {
	width: 100%; height: 100%;
	position: absolute; top: 0; left: 0;
	display: flex; flex-direction: column;
	justify-content: center; align-items: center;
	text-align: center;
}
@media (max-width: 1024px) {
	.popup {
		z-index: 1;
		top: -30vw; right: 3vw;
		width: 35vw; height: 35vw;
		transform: translate(calc(var(--padd) * 0.75), 66.6%);
	}
	.popup img { width: 11vw; }
}

/* UPDATE POPUP 08/09/25 */
.popup2 {
	position: absolute; top: 0; right: 0;
	transform: translate(128%, 50%);
	width: 7vw; height: 7vw;
	display: flex; justify-content: center; align-items: center;
	color: white;
	font-size: max(1vw, 14px); line-height: 1em;
}
.popup2 strong, .popup2 b { font-weight: normal; }
.popup2 b { font-size: 66.6%; display: block; margin-top: -0.2em; }
.popup2 img { width: 2.5vw; }
.popup2 > div:first-child {
	width: 100%; height: 100%;
	position:relative; background-color:white;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='133.504' height='133.584' viewBox='0 0 133.504 133.584'%3E%3Cg transform='translate(1 1)'%3E%3Cpath id='Tracé_3894' data-name='Tracé 3894' d='M65.747,131.584A65.69,65.69,0,0,1,0,65.945,112.2,112.2,0,0,1,2.371,46.077L14.639,0H65.627a65.792,65.792,0,1,1,.12,131.584' fill='%2351788c'/%3E%3Cpath id='Tracé_3894_-_Contour' data-name='Tracé 3894 - Contour' d='M65.747,132.584A66.509,66.509,0,0,1,28.426,121.2,66.841,66.841,0,0,1,4.245,91.885,66.136,66.136,0,0,1-1,65.945,112.177,112.177,0,0,1,1.389,45.888L1.4,45.82,13.871-1H65.627A66.086,66.086,0,0,1,91.632,4.286a67.011,67.011,0,0,1,11.359,6.194,67.454,67.454,0,0,1,24.247,29.478A66.464,66.464,0,0,1,121.1,103.2a66.937,66.937,0,0,1-29.371,24.142A66.44,66.44,0,0,1,65.747,132.584ZM3.347,46.3A110.172,110.172,0,0,0,1,65.945a64.265,64.265,0,0,0,11.055,36.139A64.918,64.918,0,0,0,40.542,125.5a64.758,64.758,0,0,0,61.411-5.96A64.848,64.848,0,0,0,125.416,91.1a64.751,64.751,0,0,0-.019-50.366A65.391,65.391,0,0,0,90.849,6.126,64.1,64.1,0,0,0,65.627,1H15.408Z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center/contain;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='133.504' height='133.584' viewBox='0 0 133.504 133.584'%3E%3Cg transform='translate(1 1)'%3E%3Cpath id='Tracé_3894' data-name='Tracé 3894' d='M65.747,131.584A65.69,65.69,0,0,1,0,65.945,112.2,112.2,0,0,1,2.371,46.077L14.639,0H65.627a65.792,65.792,0,1,1,.12,131.584' fill='%2351788c'/%3E%3Cpath id='Tracé_3894_-_Contour' data-name='Tracé 3894 - Contour' d='M65.747,132.584A66.509,66.509,0,0,1,28.426,121.2,66.841,66.841,0,0,1,4.245,91.885,66.136,66.136,0,0,1-1,65.945,112.177,112.177,0,0,1,1.389,45.888L1.4,45.82,13.871-1H65.627A66.086,66.086,0,0,1,91.632,4.286a67.011,67.011,0,0,1,11.359,6.194,67.454,67.454,0,0,1,24.247,29.478A66.464,66.464,0,0,1,121.1,103.2a66.937,66.937,0,0,1-29.371,24.142A66.44,66.44,0,0,1,65.747,132.584ZM3.347,46.3A110.172,110.172,0,0,0,1,65.945a64.265,64.265,0,0,0,11.055,36.139A64.918,64.918,0,0,0,40.542,125.5a64.758,64.758,0,0,0,61.411-5.96A64.848,64.848,0,0,0,125.416,91.1a64.751,64.751,0,0,0-.019-50.366A65.391,65.391,0,0,0,90.849,6.126,64.1,64.1,0,0,0,65.627,1H15.408Z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center/contain;
	-webkit-animation: rotate_popup 15s linear infinite;
	        animation: rotate_popup 15s linear infinite;
	will-change: transform;
}
.popup2 > div:first-child::after {
	content: " ";
	position: absolute; left: 2px; top: 2px;
	width: calc(100% - 4px); height: calc(100% - 4px);
	background-color: #D9B197;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='133.504' height='133.584' viewBox='0 0 133.504 133.584'%3E%3Cg transform='translate(1 1)'%3E%3Cpath id='Tracé_3894' data-name='Tracé 3894' d='M65.747,131.584A65.69,65.69,0,0,1,0,65.945,112.2,112.2,0,0,1,2.371,46.077L14.639,0H65.627a65.792,65.792,0,1,1,.12,131.584' fill='%2351788c'/%3E%3Cpath id='Tracé_3894_-_Contour' data-name='Tracé 3894 - Contour' d='M65.747,132.584A66.509,66.509,0,0,1,28.426,121.2,66.841,66.841,0,0,1,4.245,91.885,66.136,66.136,0,0,1-1,65.945,112.177,112.177,0,0,1,1.389,45.888L1.4,45.82,13.871-1H65.627A66.086,66.086,0,0,1,91.632,4.286a67.011,67.011,0,0,1,11.359,6.194,67.454,67.454,0,0,1,24.247,29.478A66.464,66.464,0,0,1,121.1,103.2a66.937,66.937,0,0,1-29.371,24.142A66.44,66.44,0,0,1,65.747,132.584ZM3.347,46.3A110.172,110.172,0,0,0,1,65.945a64.265,64.265,0,0,0,11.055,36.139A64.918,64.918,0,0,0,40.542,125.5a64.758,64.758,0,0,0,61.411-5.96A64.848,64.848,0,0,0,125.416,91.1a64.751,64.751,0,0,0-.019-50.366A65.391,65.391,0,0,0,90.849,6.126,64.1,64.1,0,0,0,65.627,1H15.408Z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center/contain;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='133.504' height='133.584' viewBox='0 0 133.504 133.584'%3E%3Cg transform='translate(1 1)'%3E%3Cpath id='Tracé_3894' data-name='Tracé 3894' d='M65.747,131.584A65.69,65.69,0,0,1,0,65.945,112.2,112.2,0,0,1,2.371,46.077L14.639,0H65.627a65.792,65.792,0,1,1,.12,131.584' fill='%2351788c'/%3E%3Cpath id='Tracé_3894_-_Contour' data-name='Tracé 3894 - Contour' d='M65.747,132.584A66.509,66.509,0,0,1,28.426,121.2,66.841,66.841,0,0,1,4.245,91.885,66.136,66.136,0,0,1-1,65.945,112.177,112.177,0,0,1,1.389,45.888L1.4,45.82,13.871-1H65.627A66.086,66.086,0,0,1,91.632,4.286a67.011,67.011,0,0,1,11.359,6.194,67.454,67.454,0,0,1,24.247,29.478A66.464,66.464,0,0,1,121.1,103.2a66.937,66.937,0,0,1-29.371,24.142A66.44,66.44,0,0,1,65.747,132.584ZM3.347,46.3A110.172,110.172,0,0,0,1,65.945a64.265,64.265,0,0,0,11.055,36.139A64.918,64.918,0,0,0,40.542,125.5a64.758,64.758,0,0,0,61.411-5.96A64.848,64.848,0,0,0,125.416,91.1a64.751,64.751,0,0,0-.019-50.366A65.391,65.391,0,0,0,90.849,6.126,64.1,64.1,0,0,0,65.627,1H15.408Z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center/contain;
	will-change: transform;
}
.popup2 > div:last-child {
	width: 100%; height: 100%;
	position: absolute; top: 0; left: 0;
	display: flex; flex-direction: column;
	justify-content: center; align-items: center;
	text-align: center;
}
@media (max-width: 1024px) {
	.popup2 {
		z-index: 1;
		top: -30vw; right: 3vw;
		width: 35vw; height: 35vw;
		transform: translate(calc(var(--padd) * 0.75), 66.6%);
	}
	.popup2 img { width: 11vw; }
}