:root {
	--couleur1: #756E5B; /* Bleu foncé #005683 */
	--couleur2: black; /* Bleu foncé #005683 */
	--couleurImportant: #cc2f53; /* Rouge */
	--couleurZoneSaisie: #cdc6a0; /* Gris bleu */
	--couleurTexteSombre: black;
	--couleurTexteClair: white;
	--couleurTexteGris: #626262;
	--couleurPlaceholder: #4F5050;
	--couleurPied: #F3F3F3;
}

@font-face {
	font-family: "Segoe UI Symbol";
	src: url("../Fontes/seguisym.ttf");
	font-display: auto;
	font-style: normal;
	font-weight: 400;
	font-stretch: normal;
}

body {
	margin: 0;
	padding: 0;
	font-family: itc-avant-garde-gothic-pro, sans-serif;
	font-weight: 500;
	font-size: 16px;
}

h1, h2, h3, h4 {
	margin: 0;
	font-size: inherit;
	line-height: initial;
	display: inline-block;
}

a {
	text-decoration: unset;
	color: var(--couleur2);
}

input, textarea {
	font-family: itc-avant-garde-gothic-pro, sans-serif;
}

	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		/* Pas de flèche haut/bas surles input number */
		display: none;
	}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: var(--couleurPlaceholder);
	opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: var(--couleurPlaceholder);
}

::-ms-input-placeholder { /* Microsoft Edge */
	color: var(--couleurPlaceholder);
}

.center {
	text-align: center;
}

.pointer {
	cursor: pointer;
}

.entete {
	position: sticky;
	top: 0;
	left: 0;
	z-index: 2;
	background-color: var(--couleur2);
	text-transform: uppercase;
	color: var(--couleurTexteClair);
	background: linear-gradient(to right, black, rgba(0,0,0,1), rgba(0,0,0,1), rgba(100,100,100,0.8), rgba(169,169,169,0.5), rgba(169,169,169,0.9) );
}

	/* Sous téléphone, le menu */
	.entete > div {
		position: relative;
		height: 90px;
	}

		.entete > div img {
			/* Logo */
			height: 62px;
		}

		.entete > div > span:first-child {
			color: var(--couleurTexteClair);
			position: absolute;
			left: 15px;
		}

	.entete #entete-options {
		display: inline-block;
		font-size: 1.1em;
		text-align: center;
		margin-left: 260px;
		width: calc(100% - 335px);
		vertical-align: middle;

	}

		.entete #entete-options > span {
			/* Le contenu des liens, celui qui se souligne (bordure basse) */
			display: inline-flex;
			align-items: center;
			vertical-align: middle;
			padding: 25px 10px 0 10px;
			border-bottom: 2px solid var(--couleur2);
			height: 50px;
		}

			.entete #entete-options > span:hover {
				border-bottom: 2px solid white;
			}

			.entete #entete-options > span > a {
				display: inline-block;
				line-height: 1em;
				color: var(--couleurTexteClair);
				font-size: 0.8em;
				vertical-align: middle;
			}


	.entete .panier.si-pas-mobile {
		position: relative;
		width: 35px;
	}

		.entete .panier.si-pas-mobile > a {
			position: absolute;
			top: 0;
			left: 0;
			cursor: pointer;
		}

			.entete .panier.si-pas-mobile > a > img {
				height: 30px;
				width: 40px;
				padding: 32px 10px 7px 15px;
				padding-left: 5px;
			}

		.entete .panier.si-pas-mobile .panierNb {
			position: absolute;
			left: 22px;
			font-size: 0.5em;
			bottom: 23px;
			line-height: normal;
		}

.rubrique {
	/* Titre en deux blocs suivis de texte */
	text-align: center;
	margin-top: 15px;
}

	.rubrique > div:first-child {
		/* Première ligne du titre */
		text-transform: uppercase;
		font-weight: bold;
		font-size: 1.6em;
		color: var(--couleur1);
		margin-bottom: 10px;
	}

		.rubrique > div:first-child > div:not(:first-child) {
			/* La première ligne de rubrique peut avoir des sous div plus petites */
			font-size: 0.6em;
			text-transform: none;
			margin-top: 10px;
			line-height: 1.2em;
		}

	.rubrique > div:nth-child(2) {
		/* Seconde ligne du titre */
		font-weight: bold;
		font-size: 1.4em;
		padding-bottom: 20px;
	}

		.rubrique > div:nth-child(2):empty {
			padding-bottom: 10px;
		}

	.rubrique > div:nth-child(3) {
		/* Texte de la rubrique */
		line-height: 1.2em;
	}

.zone-largeur-std {
	max-width: 1280px;
	margin: auto;
	padding: 0 10px;
	box-sizing: border-box;
}

.saisies-texte > div > label:not(.bouton-rechercher) {
	display: inline-block;
	background-color: var(--couleurTexteClair);
	margin-top: 8px;
	vertical-align: top;
	border-radius: 10px;
	border: 3px solid var(--couleurPlaceholder);
	padding: 7px;
}

	.saisies-texte > div > label:not(.bouton-rechercher) > input {
		background-color: var(--couleurTexteClair);
		border: 0 !important;
		outline: none !important;
		font-size: 0.825em;
		font-weight: 300;
		line-height: 1em;
	}

.saisies-texte > div > label > input {
	width: 110px;
}

.saisies-texte > div > label:first-child > input {
	width: 200px;
}

.saisies-texte > div > label:last-child > input {
	width: 0;
	height: 0;
}

.bouton-rechercher {
	cursor: pointer;
	vertical-align: top;
}

	.bouton-rechercher > input {
		display: none;
	}

	.bouton-rechercher > img {
		height: 35px;
		vertical-align: bottom;
		margin-top: 10px;
	}

.criteres {
	width: 100%;
	border: 1px solid white;
	border-top-color: transparent;
	box-sizing: border-box;
	background-color: rgba(255, 255, 255, .6);
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	padding: 15px;
}

.critere-nature > div {
	display: inline-block;
}

.critere-type > label {
	display: inline-block;
	width: 50%;
	box-sizing: border-box;
	border: 1px solid white;
	border-bottom-width: 0;
	cursor: pointer;
	font-size: 0.9em;
	font-weight: bold;
}

	.critere-type > label:hover {
		border-color: var(--couleur1) !important;
	}

		.critere-type > label:hover > span {
			opacity: 1 !important;
			background-color: var(--couleur1) !important;
			color: var(--couleurTexteClair) !important;
		}

	.critere-type > label:first-child {
		border-top-left-radius: 20px;
		border-right-width: 0;
	}

	.critere-type > label:last-child {
		border-top-right-radius: 20px;
		border-left-width: 1px;
		border-left-color: white !important;
	}

	.critere-type > label > input[type=checkbox] {
		display: none;
	}

	.critere-type > label > span {
		border-radius: inherit !important;
		box-sizing: border-box;
		display: inline-block;
		width: 100%;
		padding: 15px;
		opacity: 1;
	}

	.critere-type > label.selectionne {
		border-color: var(--couleur1);
	}

		.critere-type > label.selectionne > span {
			background-color: var(--couleur1);
			color: var(--couleurTexteClair);
		}

	.critere-type > label:not(.selectionne) > span {
		background-color: white;
		opacity: 0.6;
	}

.bouton-nature {
	display: inline-block;
	width: 120px;
	height: 120px;
	margin: 7px;
	background-color: white;
	border-radius: 20px;
	border: 4px solid transparent;
	cursor: pointer;
}

	.bouton-nature:hover {
		border-color: var(--couleur1);
	}

	.bouton-nature.selectionne {
		border-color: var(--couleur1);
	}

	.bouton-nature > img {
		filter: invert(95%) sepia(6%) saturate(63%) hue-rotate(182deg) brightness(30%) contrast(89%);
		padding: 10px;
	}

		.bouton-nature > img:hover, bouton-nature > img:focus, .bouton-nature.selectionne > img {
			filter: invert(43%) sepia(18%) saturate(396%) hue-rotate(6deg) brightness(95%) contrast(89%);
			border-color: var(--couleur1);
		}

	.bouton-nature > input[type=checkbox] {
		display: none;
	}


.vignette-offre {
	display: inline-block;
	width: 250px;
	height: 365px;
	position: relative;
	text-align: left;
	background-color: #F3F3F3;
	margin-bottom: 50px;
	margin-left: 25px;
	margin-right: 25px;
}

	.vignette-offre > div:first-child {
		/* Type de l'offre */
		display: block;
		font-size: 0.85em;
		font-weight: bold;
		background-color: var(--couleur1);
		color: var(--couleurTexteClair);
		text-transform: uppercase;
		text-align: center;
		padding: 6px 0 2px 0;
	}

	.vignette-offre > a {
		/* La photo */
		display: inline-block;
		width: 100%;
		height: 175px;
		background-position: center;
		background-size: cover;
		position: relative;
		box-sizing: border-box;
		padding: 0;
	}


	.vignette-offre > .resume-offre {
		font-size: 0.85em;
		height: 175px;
		overflow: hidden;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 5px;
	}

.resume-offre > div:first-child {
	/*Nature*/
	font-size: 1.25em;
	text-transform: uppercase;
	font-weight: bold;
}

.resume-offre > div:nth-child(2) {
	/*surface*/
	font-size: 0.95em;
	line-height: 1.5em;
	font-weight: 300;
}

.resume-offre > div:nth-child(3) {
	/*cp ville*/
	font-size: 0.9em;
	line-height: 1.5em;
	font-weight: bold;
}

.resume-offre > div:nth-child(4) {
	/*accroche*/
	font-size: 0.85em;
	font-weight: 300;
	line-height: 1.2em;
	padding-top: 10px;
}

.resume-offre * {
	vertical-align: middle;
}

.vignette-offre > div.ligne-ouvrir-offre {
	position: relative;
	padding-top: 50px;
	margin-top: -50px;
	border-bottom: 1px solid grey;
	width: 100%;
	height: 1px;
	text-align: right;
	background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 55%, rgba(255,255,255,1) 100%);
}


	.vignette-offre > div.ligne-ouvrir-offre > div {
		/*ref*/
		font-size: 0.75em;
		font-weight: bold;
		color: var(--couleur1);
		position: absolute;
		bottom: -8px;
		background-color: white;
		padding-right: 5px;
	}

	.vignette-offre > div.ligne-ouvrir-offre > a.bouton {
		width: 20px;
		margin: auto;
		padding: 1px 0 0 1px;
		line-height: 20px;
		text-align: center;
		border-radius: 20px;
		top: -9px;
		position: relative;
	}

		.vignette-offre > div.ligne-ouvrir-offre > a.bouton > img {
			position: relative;
			top: 1px;
		}

.vignette-offre .retirer-panier {
	position: absolute;
	top: 5px;
	right: 5px;
	border-radius: 33px;
	padding: 0px 0px 0px 0px;
	cursor: pointer;
	color: white;
	background-color: black;
	padding: 0 5px 5px 5px;
	top: -12px;
	right: -12px;
	font-size: 1em;
	font-family: Segoe UI Symbol;
}

.actualite {
	border: 1px solid white;
	max-width: 1120px;
	min-height: 50px;
	margin: 0 auto 30px auto;
	padding: 10px 10px;
	position: relative;
	color: black;
	-webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.03);
	box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.03);
}

	.actualite:hover {
		border-color: var(--couleur1);
	}

	.actualite > div {
		vertical-align: middle;
	}

	.actualite a {
		color: var(--couleur1);
	}

	.actualite > div:first-child {
		/* La catégorie de l'actualité */
		display: inline-block;
		text-transform: uppercase;
		width: 160px;
		text-align: center;
	}

	.actualite > div:nth-child(2) {
		/* Le titre de l'actualité */
		display: inline-block;
		font-size: 1.4em;
		/* La largeur s'adapte, laissant la place du titre et de l'image */
		width: calc(100% - 400px);
		color: var(--couleur1);
	}

	.actualite > div:nth-child(3) {
		/* L'image */
		display: inline-block;
		background-position: center;
		background-color: white;
		background-size: cover;
		background-repeat: no-repeat;
		width: 160px;
		height: 120px;
	}

	.actualite > div:not(:last-child) {
		cursor: pointer;
	}

	.actualite > div:nth-child(4) {
		/* Le bouton d'affichage du texte */
		position: absolute;
		top: 50px;
		right: 10px;
		width: 34px;
		text-align: center;
		font-weight: bold;
		font-size: 2em;
		background-color: var(--couleur1);
		color: var(--couleurTexteClair);
	}

	.actualite > div:nth-child(5) {
		/* Le texte sera affiché seulement à la demande, invisible par défaut */
		display: none;
		white-space: pre-wrap;
		font-size: 0.9em;
		line-height: 1.2em;
	}

	.actualite h3 {
		font-weight: 500;
		padding-right: 20px;
	}

.bouton {
	background-color: var(--couleur1);
	color: var(--couleurTexteClair);
	text-transform: uppercase;
	display: inline-block;
	padding: 9px 16px;
	cursor: pointer;
	border-width: 0;
	font-size: 1em;
	margin-bottom: 10px;
}


.zone-formulaire-contact {
	/* La zone qui contiendra le formulaire de contact classique sur la page de contact */
	min-width: 558px;
	margin: 50px auto;
	max-width: 900px;
}

	.zone-formulaire-contact .zone-saisie {
	}



.formulaire-contact .zone-saisie {
	text-align: left;
	width: calc(50% - 5px);
	display: inline-block;
}

	.formulaire-contact .zone-saisie > label {
		display: block;
		font-size: 0.9em;
		margin: 12px 0;
	}

	.formulaire-contact .zone-saisie > input, .formulaire-contact .zone-saisie > textarea {
		display: block;
		width: calc(100% - 20px);
		background-color: var(--couleurZoneSaisie);
		padding: 10px;
		font-size: 0.9em;
		border-width: 0;
		border-radius: 5px;
		margin: 5px 0;
	}

.formulaire-contact .zone-saisie-2col {
	width: 100%;
}

	.formulaire-contact .zone-saisie-2col > input, .formulaire-contact .zone-saisie-2col > textarea {
		width: calc(100% - 25px);
	}

	.formulaire-contact .zone-saisie-2col > textarea {
		height: 100px;
	}

.formulaire-contact .bouton {
	width: calc(100% - 5px);
	border-radius: 5px;
}

.pied {
	box-sizing: border-box;
	margin-top: 25px;
	padding: 15px;
	display: table;
	width: 100%;
	color: var(--couleurTexteGris);
	background-color: var(--couleurPied);
}

	.pied * {
		vertical-align: middle;
	}


	.pied > div:first-child {
		/* Les info site */
		display: table-row;
	}

		.pied > div:first-child > div {
			display: table-cell;
			padding-bottom: 10px;
		}

			.pied > div:first-child > div:first-child {
				/* logo */
				width: 324px;
			}

				.pied > div:first-child > div:first-child > img {
					height: 60px;
				}

	.pied > div > div:nth-child(2) {
		/* Texte info site & liens */
		text-align: center;
		width: calc(100% - 524px);
	}

		.pied > div > div:nth-child(2) p {
			/* Le texte d'info */
			font-size: 0.75em;
			margin-block: 3px;
			font-family: futura-pt;
			line-height: 1em;
		}

		.pied > div > div:nth-child(2) a {
			/* les liens identiques de style menu */
			display: inline-block;
		}

		.pied > div > div:nth-child(2) > div:first-child > a:not(:last-child), .pied > div > div:nth-child(2) > div:first-child > span {
			/* les premiers liens identiques de style menu, séparés entre eux, pas de marge après le dernier */
			margin-right: 15px;
		}

		.pied > div > div:nth-child(2) > div:last-child {
			/* la ligne des liens du bas, pour référencement web */
			margin-top: 10px;
			font-size: 0.75em;
		}

	.pied > div:first-child > div:nth-child(3) {
		/* Téléphone */
		text-align: center;
		width: 324px;
		font-size: 1.5em;
		font-weight: bold;
	}

		.pied > div:first-child > div:nth-child(3) a {
			font-weight: 100;
			font-size: 1.04em;
			line-height: 1.5em;
		}

/* Les villes proposées lorsque l'utilisateur tape des caractères dans le filtre */
.proposition-ville {
	cursor: pointer;
	padding: 7px 0 3px 0;
	border: 1px solid grey;
}

	.proposition-ville:hover {
		color: white;
	}

#villes {
	/* Les villes choisies */
	text-align: left;
	display: block;
	background-color: white;
	max-width: 200px;
	font-size: 0.9em;
}

	#villes .badge-ville {
		background-color: var(--couleur1);
		color: white;
		border-radius: 10px;
		position: relative;
		padding: 5px 25px 2px 10px;
		margin-top: 5px;
		display: inline-block;
	}

		#villes .badge-ville > :last-child {
			/* Le bouton de suppression */
			font-family: "Segoe UI Symbol";
			position: absolute;
			top: -2px;
			right: 3px;
			margin-left: 5px;
			font-size: 0.8em;
			cursor: pointer;
		}

#propositionsVilles {
	/* Les propositions qui s'affichent lorsque l'utilisateur commence la saisie d'une ville dans le filtre */
	display: inline-block;
	width: 150px;
	position: absolute;
	z-index: 1;
	background-color: var(--couleur1);
	color: var(--couleurZoneSaisie);
	left: 0;
	top: 27px;
	width: 100%;
}

.titreModal {
	padding-bottom: 10px;
	white-space: normal !important;
	font-weight: bold;
	font-size: 1.2em;
}

.invisible {
	display: none !important;
}

.cache {
	visibility: hidden !important;
}

/* Contient une image pleine largeur avec un titre qui sera centré sur l'image */
.image-et-titre {
	position: relative;
	min-height: 400px;
	background-size: cover;
	background-position: center;
}

	.image-et-titre > form {
		position: absolute;
		top: calc(50%);
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		color: var(--couleurTexteSombre);
		text-align: center;
		max-width: 666px;
		width: 100%;
		margin: auto;
		box-sizing: border-box;
	}

.input-validation-error {
	background-color: #FFD7D1 !important;
}


.vignette-transaction {
	display: inline-block;
	width: 250px;
	height: 300px;
	position: relative;
	text-align: left;
	background-color: #F3F3F3;
	margin-bottom: 50px;
	margin-left: 25px;
	margin-right: 25px;
	vertical-align: top;
}

	.vignette-transaction > div:first-child {
		/* Info 2 de l'offre */
		display: flex;
		text-align: center;
		align-items: center;
		font-size: 0.75em;
		font-weight: bold;
		color: white;
		background-color: var(--couleur1);
		padding: 6px 5px 2px 5px;
		height: 60px;
		line-height: 1em;
	}

	.vignette-transaction > div:nth-child(2) {
		/* La photo */
		display: inline-block;
		width: 100%;
		height: 175px;
		background-position: center;
		background-size: cover;
		position: relative;
		box-sizing: border-box;
		padding: 0;
	}

	.vignette-transaction > .resume-transaction {
		/* Résumé transaction, le conteneur des 2 lignes */
		font-weight: bold;
		overflow: hidden;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 5px;
		line-height: 1em;
	}

		.vignette-transaction > .resume-transaction > div:first-child {
			font-size: 0.9em;
			text-transform: uppercase;
		}

		.vignette-transaction > .resume-transaction > div:nth-child(2) {
			font-size: 0.7em;
		}