* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height:1em;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,select:focus		{	outline: none;	}


a > input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.lienInput
		{	background-color:#fff; border:1px solid #dfdfdf;	
			-moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;
			padding:2px 5px;
			font-size: 13px;
			/*-webkit-appearance: none;
			margin: 10px 0;*/
		}


.lien					{ 	text-decoration: none; color: #4f78fa; cursor: pointer; }
a						{ 	text-decoration: none; color: #4f78fa; }
a:visited				{	text-decoration: none;						}
img						{ 	margin: 0;padding: 0;border-width: 0px;		}

.piege	{	display:none;	}



.alert					{	width: 100%; margin-bottom: 15px; padding: 25px; text-align: center; font-size: 14px; font-weight: 400; color: #000;	}
	.alert.success		{	background-color: #dff0d8;  }
	.alert.error		{	background-color: #f2dede;	}
	.alert.infos		{	background-color: #d7edf6;	}






html *					{	position: relative;
							font-family: "Open Sans",system-ui,-apple-system,Arial;	/*  */
							font-style: normal;
							
						}



b,.bold			{	font-weight: 600;	}





body 					{	background-color:#fcfcfc;
							color: #111;
							font-size: 14px;
							line-height: 20px;
						}	

#content				{	display: flex;
							flex-direction: column;
							align-items: center;
							width:100vw;
							max-width: 100%;
						}

       
#bandeau		{	display:block;
					height:40vh;
					width:100vw;
					/*background-image:url('https://www.desq.fr/images/emeraude/coworking.jpg');*/
					background-repeat:no-repeat;
					background-position: center center;
					background-size: cover;
					max-width: 100%;			
				}        
 


#header			{	/*position:sticky;	top:0px;
					background:#fcfcfc;
					z-index:100;*/
					text-align:center;
				}

				#header > .logo,
				#header > a > .logo		{	width:220px; 	margin:40px 0 0 0;		}
				#header > .titre1		{	font-size:32px;	margin:30px 0 0 0;		}
				#header > .titre2		{	font-size:22px;	margin:10px 0 10px 0;		}
				#header > .titreLien	{	font-size:18px;	margin:30px 0 10px 0;		}


#adminLink 		{	position:absolute; top:10px; right:10px; 
					color:#000; z-index:101; background-color: rgba(255, 255, 255, 0.5); 
					padding:4px 8px;
					border-radius:4px;
				}
#adminLink:hover 		{	background-color: rgba(255, 255, 255, 0.9);	}


nav		{	width:100vw;
				position:sticky;
				top:0px;
				border-bottom: 1px solid #ccc;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;	/*center space-between*/
				padding:25px;
				margin:10px 0 20px 0;
				z-index: 99;
				background: #fcfcfc;
				max-width: 100%;			
}

nav > a		{	color:#444;
					margin:0 40px;
					text-align: center;
					line-height: 1.3em;
				}

nav  > .selected	{	color:#000;	font-weight: 600;	}
nav  > a:hover		{	color:#000;		}




.actions		{	padding:3px 5px;
					font-size: 13px;
					-webkit-appearance: none;
				} 
.actions:hover	{	color:#0429a4;
				} 


.ajax	{	cursor: pointer;
			display: inline-block;
			color: #4f78fa;
		}



.titrepage	{	margin: 40px 0 10px 0;
				font-size:20px;
				line-height: 1.2em;
				text-align:center;
				color:#888;
			}






.ligne		{	display: flex;
				flex-direction: row;
				justify-content: space-between;	/*center space-between*/
				align-items: center;
				width:1100px;
				flex-wrap:wrap;
				margin:60px 0 20px 0;	/*margin-top:80px;*/
				z-index:50;
			}


			.ligne > .photo		{	/*height:330px;*/
									width:500px;
									aspect-ratio: 3 / 2;
									background-repeat:no-repeat;
									background-position: center center;
									background-size: cover;
									/*border:10px solid #fff;*/
									box-shadow: 2px 2px 15px #aaa;
									z-index : 10;
									border-radius:10px;
									/*filter: grayscale(50%);*/
								}
			
			.ligne > .texte		{	width:540px;
									color: #555;
									text-align:left;
									z-index : 1;
									line-height: 1.4em;
									padding:20px;
								}

								.ligne > .texte	> .titre	{	font-size: 1.6em;
																margin-bottom:16px;
																color : #444;
															}









#annonces				{	display: flex;
							flex-direction: row;
							align-items: flex-start;
							justify-content: center;	/*center space-between space-around*/
							flex-wrap:wrap;
							width:100vw;
							max-width: 100%;			
						}

						#annonces > .titre_autres	{	text-align:center;
														font-size:20px;
														color: #999;
														width:100%;
														margin-bottom:20px;
													}





.annonceListe{	display: flex;
				flex-direction: row;
				justify-content: space-between;	/*center space-between*/
				align-items: flex-start;
				width:450px;
				flex-wrap:wrap;
				margin:50px;
				z-index:50;
				box-shadow: 2px 2px 15px #aaa;
				/*border:10px solid #fff;*/
				border-radius:10px;
			}

/*.annonceListe:hover { box-shadow: 0px 0px 10px #aaa;	}*/
	
			.annonceListe > .photo	{	/*height:360px;*/
										width:100%;
										aspect-ratio: 3 / 1.8;
										background-repeat:no-repeat;
										background-position: center center;
										background-size: cover;
										z-index : 10;
										border-radius:10px 10px 0 0;
									}
									
			.annonceListe > .photoIMG	{	/*height:360px;*/
											width:360px;
											border:10px solid #fff;
											box-shadow: 2px 2px 15px #aaa;
											z-index : 10;
										}
									
			.annonceListe > .dispo 		{	position:absolute; top:10px; left:10px; 
											color:#000; z-index:101; background-color: rgba(255, 255, 255, 0.7); 
											padding:6px 10px;
											border-radius:6px;
											z-index : 20;
										}
			
			.annonceListe > .texte	{	width:540px;
										color: #222;
										text-align:left;
										z-index : 1;
										line-height: 1.7em;
										padding:15px 10px 15px 22px;
										background: #fff;
										border-radius:0 0 10px 10px;
									}

								.annonceListe > .texte	> .titre	{	font-size: 20px;
																		line-height: 1.2em;
																		margin-bottom:8px;
																		font-weight: 600;
																		color : #444;
																	}
								.annonceListe > .texte	> .bureau	{	position:absolute;
																		top:17px;
																		right:15px;
																		font-size:30px;
																		color : #ddd;
																		font-weight: 700;
																	}
								.annonceListe > .texte	> .prix		{	position:absolute;
																		line-height: 1.2em;
																		top:15px;
																		right:20px;
																		text-align:right;
																	}
																	
								.annonceListe > .texte	> .prix	> .mensuel	{	font-size:20px;
																				color : #000;
																				font-weight: 600;
																				margin-bottom:2px;
																			}
								.annonceListe > .texte	> .prix	> .complement	{	font-size:12px;
																				color : #000;
																				font-weight: 300;
																			}
																	
																	
																	
																	
								.annonceListe > .texte	> .elec		{	position:absolute;
																		bottom:28px;
																		right:0px;
																		padding:4px 9px;
																		font-size:11px;
																		color : #fff;
																		background: rgb(39, 147, 255);
																		border-radius: 10px 0 0 10px;
																		/*width:150px;*/
																		white-space: nowrap;
																		text-align: right;
																	}
								.annonceListe > .texte	> .zfu		{	position:absolute;
																		bottom:0px;
																		right:0px;
																		padding:4px 9px;
																		font-size:11px;
																		color : #fff;
																		background: orange;
																		border-radius: 10px 0 10px 0;
																		/*width:100px;*/
																		white-space: nowrap;
																		text-align: right;
																	}
								.annonceListe > .texte	> i			{	margin-right:8px;	}





.annonceListeXS{	display: flex;
					flex-direction: row;
					justify-content: space-between;	/*center space-between*/
					align-items: flex-start;
					width:300px;
					flex-wrap:wrap;
					margin:30px;
					z-index:50;
					box-shadow: 2px 2px 15px #aaa;
					/*border:10px solid #fff;*/
					border-radius:10px;
				}

				/*.annonceListe:hover { box-shadow: 0px 0px 10px #aaa;	}*/
	
			.annonceListeXS > .photo	{	/*height:360px;*/
										width:100%;
										aspect-ratio: 3 / 1.8;
										background-repeat:no-repeat;
										background-position: center center;
										background-size: cover;
										z-index : 10;
										border-radius:10px 10px 0 0;
									}
									
			.annonceListeXS > .dispo 	{	position:absolute; top:10px; left:10px; 
											color:#000; z-index:101; background-color: rgba(255, 255, 255, 0.7); 
											padding:6px 10px;
											border-radius:6px;
											z-index : 20;
										}
			.annonceListeXS > .texte	{	width:540px;
										color: #222;
										text-align:left;
										z-index : 1;
										line-height: 1.7em;
										padding:12px 8px 10px 15px;
										background: #fff;
										border-radius:0 0 10px 10px;
									}

								.annonceListeXS > .texte	> .titre	{	font-size: 1.6em;
																		line-height: 1.2em;
																		margin-bottom:12px;
																		color : #444;
																	}
								.annonceListeXS > .texte	> .bureau	{	position:absolute;
																		top:15px;
																		right:15px;
																		font-size:30px;
																		color : #ddd;
																		font-weight: 700;
																	}
								.annonceListeXS > .texte	> .zfu		{	position:absolute;
																		bottom:0px;
																		right:0px;
																		padding:4px 8px;
																		font-size:11px;
																		color : #fff;
																		background: orange;
																		border-radius: 10px 0 10px 0;
																		width:100px;
																	}
								.annonceListeXS > .texte	> i			{	margin-right:12px;	}














#annonce	{	display: flex;
				flex-direction: row;
				align-items: flex-start;
				justify-content: space-between;	/*center space-between space-around*/
				flex-wrap:wrap;
				width:1100px;
				margin:50px 0;
				max-width: 100%;
			}


			#annonce > .photoIMG	{	/*height:360px;*/
										width:600px;
										margin-top:5px;
										box-shadow: 2px 2px 15px #aaa;
										z-index : 10;
										border-radius:10px;
									}
									
			
			#annonce > .texte	{	width:450px;
									color: #222;
									text-align:justify;
									z-index : 1;
									line-height: 1.5em;
								}

								#annonce > .texte	> .titre		{	font-size: 1.6em;
																		line-height: 1.2em;
																		margin-bottom:12px;
																		color : #444;
																	}



								#annonce > .texte	> .titre	> .ref	{	margin-left:40px;
																			font-size:12px;
																			color:#888;
																		}
								#annonce > .texte	> .legende		{	font-size: 12px;
																		line-height: 1.3em;
																		/*margin-top:2px;*/
																		color:#888;
																	}
								#annonce > .texte	> .zfu			{	position:absolute;
																		bottom:0px;
																		right:0px;
																		padding:4px 8px;
																		font-size:11px;
																		color : #fff;
																		background: orange;
																		border-radius: 10px 0 10px 0;
																		width:100px;
																	}
								#annonce > .texte	> i				{	width:20px;	text-align:center; margin-right:8px;	}
								
								#annonce > .texte	> .ref			{	margin-top:15px;
																		font-size:12px;
																		color:#888;
																	}

								#annonce > .texte	> .section		{	margin:30px 0 10px 0;
																		font-size:15px;
																		font-weight: 600;
																		/*color: #777;*/
																	}
								#annonce > .texte	> .section	> i	{	margin-right:8px;	}
								#annonce > .texte	> .section > .legende	{	font-size: 12px;
																				color:#888;
																				font-weight: normal;
																				margin-left:5px;
																			}


								#annonce > .texte	> .options		{	display:flex;
																		flex-direction: row;
																		flex-wrap:wrap;
																		justify-content: flex-start;
																		width:100%;
																		margin-top:5px;
																	}
								#annonce > .texte	> .options > .option	{	min-width:50%;
																				padding: 5px 8px 5px 0;
																				text-align: left;
																			}
								#annonce > .texte	> .options > .option > i	{	width:20px;	text-align:center; margin-right:8px;	}
								

								#annonce > .texte	> .cadreGris	{	margin:20px 0px;
																		padding : 10px;
																		border-radius:6px;
																		background:#f0f0f0;	/*#ececec*/
																		border:1px solid #ececec;	
																		color : #444;
																		display: flex;
																		flex-direction: row;
																		justify-content:flex-start;
																		align-items:center;
																		overflow: hidden;
																	}
								#annonce > .texte	> .cadreGris > i	{	font-size:50px; 
																			margin: -8px 20px -18px -25px;
																			color : #d6d6d6;	/*#ccc*/
																		}

								#annonce > .texte	> .bouton		{	margin:20px 0px;
																		padding : 10px 10px 10px 20px;
																		border-radius:6px;
																		background:#f0f0f0;	/*#ececec*/
																		border:1px solid #ececec;	
																		color : #444;
																		display: flex;
																		flex-direction: row;
																		justify-content:flex-start;
																		align-items:center;
																		overflow: hidden;
																		min-width:50%;
																		transition-duration: 1s;
																	}
								#annonce > .texte	> .bouton:hover	{	background:#444;	/*#ececec*/
																		/*border:1px solid #ececec;	/*#f0f0f0*/
																		color : #f0f0f0;
																		transition-duration: 0.2s;
																	}
								#annonce > .texte	> .bouton > i	{	margin-right:20px;
																	}




#photosAnnonce	{	display: flex;
					flex-direction: row;
					justify-content: center;	/*center space-between*/
					align-items: flex-start;
					width:100vw;
					flex-wrap:wrap;
					z-index:50;
					background-color:#dcdcdc;
					padding:20px;
					box-shadow: 2px 2px 15px #aaa inset;
					max-width: 100%;			
				}

				#photosAnnonce > img	{	display: flex;
											flex-direction: row;
											align-items: flex-start;
											height:600px;
											flex-wrap:wrap;
											margin:25px;
											box-shadow: 2px 2px 15px #aaa;
											border-radius:10px;
										}





















.footer		{	display: flex;
				flex-direction: row;
				justify-content:space-around;
				align-items:flex-start;
				flex-wrap:wrap;
				background:#dcdcdc; 	/* #f0f0f0 #dcdcdc #ececec */
				width:100vw;
				z-index:50;
				margin-top:20px;
				padding:30px 20px;
				max-width: 100%;
			}

			.footer > .texte	{	width:30%;
									color: #333;
									text-align:left;
									line-height: 1.5em;
									/*border:1px solid #eee;
									padding:10px;*/
									font-size:12px;
									min-width:200px;
								}
			
			.footer > .texte > a		{	color: #333;	}	
			.footer > .texte > a:hover	{	color: #000;	}	
			.footer > .texte > a > i 	{	margin-right:8px; width:15px; text-align:center;	}	
								
			.footer >.contact	{	font-size:1.2em;
									line-height: 1.2em;
									color:#444;
									text-align:center;
									/*padding:50px 20px;
									width:100%;*/
								}














.formulaire_ligne	{	display: flex;
						flex-direction: row;
						justify-content: flex-start;
						/*width:100%; height:100%;*/
						align-content:center;
						align-items:stretch;
						margin-bottom:10px;
						width:450px;
					}	

.formulaire_ligne > .nom	{	display: flex;
								flex-direction: column;
								justify-content:flex-start;
								
								text-align:left;
								padding:10px;
								width:150px;
							}

.formulaire_ligne > .champ	{	display: flex;
								flex-direction: column;
								justify-content: center;
								width:300px;
							}



#contact		{	display:flex;
					flex-direction: row;
					width:1100px;
					padding:40px 0;
				}



#contact_infos	{	width:40%;	
					line-height: 21px;
					padding:20px;
				}
#contact_form	{	width:60%;		}

.contact_ligne	{		display: flex;
						flex-direction: row;
						justify-content: stretch;
						/*width:100%; height:100%;*/
						align-content:center;
						align-items:stretch;
						margin-bottom:15px;
					}	

.contact_ligne > .nom		{	display: flex;
								flex-direction: column;
								justify-content:flex-start;
								
								text-align:left;
								padding:10px;
								width:150px;
							}

.contact_ligne > .champ		{	display: flex;
								flex-direction: row;
								justify-content: initial;
							}






	

/* Fenêtre */
#modal-cache			{	display: flex;
							width:100%; height:100%;
							align-items: center;
							justify-content: center;
							align-content: center;
							position: fixed;
							top: 0; left: 0;
							background: rgba(0,0,0,0.5);
							z-index:1000;
							display:none;
						}
#modal					{	background:#FAFBFD;
							min-height: 20%;
							max-height: 95%;
							min-width: 30%;
							max-width: 98%;
							overflow: scroll;
							z-index:1001;
							padding:30px;
							border-radius:4px;
							-moz-box-shadow: 	0px 3px 6px -2px rgba(0, 0, 0, 0.5);
							-webkit-box-shadow: 0px 3px 6px -2px rgba(0, 0, 0, 0.5);
							-o-box-shadow: 		0px 3px 6px -2px rgba(0, 0, 0, 0.5);
							box-shadow: 		0px 3px 6px -2px rgba(0, 0, 0, 0.5);
							position:relative;
						}
#modal-close			{	color:#888;
							position:absolute;
							top:-3px;
							right:0px;
							padding:5px;
							font-size:12px;
							cursor: pointer;
						}











@media screen and (max-width: 1100px) 	{		.ligne	{	width:100vw;
														}

												.ligne > .photo	{	width:40vw; 	}
												.ligne > .texte	{	width:55vw;		}
												
												#nav > a		{	margin:0 20px;	}
												
												.annonceListe	{	margin : 30px;	}	


												#annonce	{	width:100vw;
																padding:20px;
															}	
															#annonce > .photoIMG	{	width:45vw;
																					}												
												
															#annonce > .texte	{	width:45vw;
																				}
												
												#contact		{	width:100vw;
																}					
										}
										
										
										

@media screen and (max-width: 800px) 	{	
												nav		{	position : relative;
																border-bottom: 1px solid #ccc;
																display: flex;
																flex-direction: column;
																padding:10px;
																margin:0px 0 20px 0;
												}
												nav > a		{	width:100vw;
																	padding:10px;
																	margin:0 10px;
																}

												.ligne	{	flex-direction: column;
															width:100vw;
															margin-top:50px;
														}

												.ligne > .photo	{	width:100vw; order: 1; 
																	aspect-ratio: 6 / 3;
																	margin-bottom:10px; 
																	transform: none;
																	-webkit-transform: none;
																	box-shadow: none;
																	border:none;
																	border-radius:0px;
																}
												.ligne > .texte	{	width:90vw;	order: 2;	}
												
												
												
												
												.annonceListe	{	margin : 30px 0px;
																	width:100vw;
																	transform: none;
																	-webkit-transform: none;
																	box-shadow: none;
																}
												.annonceListe > .photo	{	border-radius:0px;	
																			width:100vw;
																		}
												.annonceListe > .texte	{	border-radius:none;
																			width:100vw;
																			padding:15px 10px 0px 25px;
																		}
												.annonceListe > .texte	> .zfu	{	bottom:5px;
																					right:0px;
																					padding:4px 8px;
																					border-radius: 8px  0 0 8px;
																				}
												
												#annonce	{	flex-direction: row;
																align-items: center;
																justify-content:flex-start ;	/*center space-between space-around*/
																width:100vw;
																margin:0;
																padding:0;
															}	
															#annonce > .photoIMG	{	width:100vw;
																						margin-bottom:20px;
																						box-shadow: none;
																						border-radius:0px;
																					}												
												
															#annonce > .texte	{	width:100vw;
																					padding:0 20px 20px 20px;
																				}
												#photosAnnonce	{	flex-direction: column;
																	width:100vw;
																	padding:0px;
																}
												
																#photosAnnonce > img	{	display: flex;
																							flex-direction: column;
																							align-items: flex-start;
																							width:100vw;
																							height:auto;
																							box-shadow: none;
																							border-radius:0px;
																							margin: 0 0 4px 0;
																						}


												.footer > .texte	{	width:100%; padding:10px;	}
												.footer > .liensDESQ	{	order: 3;	}
												.footer > .liensPages	{	order: 1;	}
												.footer > .liensReseaux	{	order: 2;	}



												#contact		{	flex-direction: column;
																	padding:20px;
																	width:100vw;
																}					
												
												.formulaire_ligne	{	flex-direction: column !important;	
																	}
																	.formulaire_ligne > .nom	{	justify-content:center;
																								}
																	
																	.formulaire_ligne > .champ	{	padding: 5px 10px;
																								}
												
												.contact_ligne	{	flex-direction: column !important;	
																	}
																	.contact_ligne > .nom	{	justify-content:center;
																								}
																	
																	.contact_ligne > .champ	{	padding: 5px 10px;
																								}


										}