﻿@media screen and (max-width: 1430px) and (min-width: 1160px) {
	.si-ecran-large {
		/* Si on a une petite largeur, on n'affiche pas ce qui est à afficher "si écran large" */
		display: none !important;
	}
}

@media screen and (min-width: 1160px) {
	.si-mobile {
		display: none !important;
	}
}

@media screen and (max-width: 1159px) {
	.si-pas-mobile {
		display: none !important;
	}

	#entete-burger {
		position: absolute;
		right: 30px;
		top: 10px;
		color: var(--couleurTexteClair);
		font-size: 2.9em;
		cursor: pointer;
		font-family: Segoe UI Symbol;
		width: initial;
	}

	.entete #entete-options {
		height: 0;
		overflow: hidden;
		position: absolute;
		right: 0px;
		top: 72px;
		width: 300px;
		background-color: var(--couleur2);
	}

		.entete #entete-options.ouvert {
			transition: height 1s;
			height: unset;
		}

		.entete #entete-options:not(.ouvert) {
			transition: height 1s;
			height: 0;
		}

		.entete #entete-options > span {
			display: flex;
			text-align: left;
			padding: 0;
			border-bottom: 2px solid white;
			font-size: 1.2em;
			height: unset;
			max-width: none;
		}

			.entete #entete-options > span > a {
				padding: 13px 15px;
				display: block;
				width: 100%;
			}

			.entete #entete-options > span#LienRecherche > a {
				padding: 3px 15px;
			}

	.entete .panier.si-mobile {
		position: absolute;
		right: 83px;
		top: -13px;
		width: initial;
	}

		.entete .panier.si-mobile .panierNb {
			position: absolute;
			left: 20px;
			bottom: 27px;
			font-size: 0.7em;
			color: var(--couleurTexteClair);
		}

		.entete .panier.si-mobile > a > img {
			width: 46px;
			margin-top: 25px;
		}


	.bouton-rechercher {
		display: block;
		padding-top: 15px;
	}

	.image-et-titre > form {
		position: unset;
		top: 25px;
		-webkit-transform: unset;
		transform: unset;
		padding: 25px;
	}

	.critere-type > label:not(.selectionne):hover {
		border-color: white !important;
	}

		.critere-type > label:not(.selectionne):hover > span {
			opacity: 0.6 !important;
			background-color: white !important;
			color: black !important;
		}

	.saisies-texte > div > label:first-child {
		display: block;
	}

	.saisies-texte > div > label:nth-child(2), .saisies-texte > div > label:nth-child(3) {
		width: calc(50% - 23px);
	}

	.saisies-texte > div > label > input {
		width: 100% !important;
		box-sizing: border-box;
	}


	.rubrique {
		width: calc(100% - 20px) !important;
		margin: 15px auto 0 auto;
	}

	.zone-formulaire-contact {
		min-width: unset;
		padding: 0 15px;
		box-sizing: border-box;
	}

	.formulaire-contact .zone-saisie {
		display: block !important;
		width: 100% !important;
		padding: 0 !important;
		margin-left: 0 !important;
	}

	.formulaire-contact .zone-saisie-2col > input, .formulaire-contact .zone-saisie-2col > textarea {
		width: calc(100% - 20px) !important;
	}

	.formulaire-contact .bouton {
		width: 100% !important;
	}

	#villes {
		max-width: 100%;
	}

	.pied, .pied div, .pied div div, .pied div div div {
		display: block !important;
		width: 100% !important;
		text-align: center;
	}

		.pied p:last-child {
			margin-block-end: 15px !important;
		}
}

@media screen and (max-width: 622px) {
	.entete {
		background: linear-gradient(to right, black, rgba(0,0,0,1), rgba(169,169,169,0.9) );
	}
	
	.actualite > div:first-child {
		display: block;
		text-align: left;
	}

	.actualite > div:nth-child(2) {
		display: block;
		width: 100%;
	}

	.actualite > div:nth-child(3) {
		background-size: cover;
		width: 100%;
		height: 200px;
	}

	.actualite > div:nth-child(4) {
		position: unset;
	}

	.vignette-offre {
		display: block;
		width: unset;
		border-radius: 10px;
		/*display: inline-block;
		width: 250px;
		height: 390px;
		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 */
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			/*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: 200px;
			overflow: hidden;
			box-sizing: border-box;
			width: 100%;
			padding: 10px 5px;
		}


		.vignette-offre > div.ligne-ouvrir-offre {
			position: relative;
			padding-top: 25px;
			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;
		}






	.vignette-transaction {
		display: block;
		padding: 3px;
		width: unset;
		border-radius: 10px;
		height: unset;
		/*		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;
*/
			border-top-right-radius: 10px;
			border-top-left-radius: 10px;
		}

		.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;*/
		}

			.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;*/
			}
}
