@import url("https://fonts.googleapis.com/css2?family=Raleway&display=swap");
html {
	font-family: "Raleway", sans-serif;
	background-color: white;
}
@media all and (min-width: 1200px) /*pc*/ {
	/* conteneur pour toute la page sauf footer*/
	.document {
		margin-left: auto;
		margin-right: auto;
		width: 1200px;
	}
	header {
		display: inline-flex;
		gap: 800px;
	}
	header img {
		margin-top: 20px;
		margin-left: 10px;
		width: auto;
		height: 40px;
	}
	/* css et placement des ancre en haut de la page*/
	.ancre {
		display: flex;
		align-content: flex-end;
		padding-top: 0px;
		gap: 10px;
	}
	.ancre1 {
		display: flex;
		align-content: flex-end;
		padding-top: 0px;
	}
	.ancre1 a:hover {
		border-top: 3px solid #0065fc;
		padding-top: 20px;
		color: #0065fc;
	}
	.ancre1 a {
		border-top: 3px solid transparent;
		padding-top: 20px;
		color: black;
		padding-left: 20px;
		width: 120px;
	}
	.ancre2 {
		display: flex;
		align-content: flex-end;
		padding-top: 0px;
	}
	.ancre2 a {
		border-top: 3px solid transparent;
		padding-top: 20px;
		color: black;
		padding-left: 30px;
		width: 80px;
	}
	.ancre2 a:hover {
		border-top: 3px solid #0065fc;
		padding-top: 20px;
		color: #0065fc;
	}
	/* affichage des etoile sur la meme ligne */
	.note {
		white-space: nowrap;
	}
	/* gestion de la couleur des etoile*/
	.checked {
		color: #0065fc;
	}
	.empty {
		color: #f2f2f2;
	}
	/* gestion du text "En plein centre ville ou en pleine nature"*/
	.text-nav {
		margin-top: -10px;
	}
	/* gestion de la zone de recherche*/
	#bare-recherche {
		display: flex;
		margin-bottom: 15px;
	}
	.icon-recherche {
		border: 1px solid #dedede;
		background-color: #dedede;
		height: auto;
		width: 35px;
		padding-top: 7px;
		text-align: center;
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
		cursor: pointer;
	}
	input[type="text"] {
		height: 35px;
		width: 180px;
		padding-left: 10px;
		font-weight: bold;
		outline: none;
		border: 1px solid #dedede;
	}
	/* gestion du bouton recherche */
	.mobileShow {
		display: none;
	}
	#btn-rechercher {
		color: white;
		background-color: #0065fc;
		height: auto;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
		margin-left: -9px;
		text-align: center;
		border: none;
		cursor: pointer;
	}
	#btn-rechercher2 {
		display: none;
	}
	/* gestion des bouton filtre */
	.Filter {
		display: inline-flex;
		gap: 20px;
	}
	.btn-filtre button:hover {
		color: white;
		background-color: #0065fc;
		cursor: pointer;
	}
	.btn-Économique {
		margin-top: 10px;
		font-weight: bold;
		background-color: transparent;
		border-radius: 30px;
		width: 150px;
		height: 35px;
		border: 2px solid #d9d9d9;
		text-align: right;
		padding-right: 10px;
		display: inline-block;
		z-index: 1;
	}
	.btn-Familial {
		margin-top: 10px;
		font-weight: bold;
		background-color: transparent;
		border-radius: 30px;
		width: 115px;
		height: 35px;
		border: 2px solid #d9d9d9;
		text-align: right;
		padding-right: 10px;
		display: inline-block;
		z-index: 1;
	}
	.btn-Romantique {
		margin-top: 10px;
		font-weight: bold;
		background-color: transparent;
		border-radius: 30px;
		width: 150px;
		height: 35px;
		border: 2px solid #d9d9d9;
		text-align: right;
		padding-right: 10px;
		display: inline-block;
		z-index: 1;
	}
	.btn-Animaux {
		margin-top: 10px;
		text-align: center;
		font-weight: bold;
		background-color: transparent;
		border-radius: 30px;
		width: 200px;
		height: 35px;
		border: 2px solid #d9d9d9;
		text-align: right;
		padding-right: 10px;
		display: inline-block;
		z-index: 1;
	}
	.btn-border {
		width: 100%;
		height: 100%;
	}

	/*icon boutton filtre*/
	.icon {
		text-align: center;
		color: #0065fc;
		border: 2px solid #deebff;
		background-color: #deebff;
		border-radius: 50%;
		box-sizing: border-box;
		width: 40px;
		height: 37px;
		margin-right: -43px;
		padding: 8px;
		position: relative;
		z-index: 2;
	}
	.text-info {
		display: flex;
	}
	.icon2 {
		text-align: center;
		color: #0065fc;
		border: 1px solid #d9d9d9;
		border-radius: 50%;
		box-sizing: border-box;
		margin-top: 11px;
		margin-right: 10px;
		padding: 3px;
		width: 25px;
		height: 25px;
	}
	/* conteneur flex pour hébergement et populaire*/
	.flexbox {
		display: flex;
		gap: 20px;
	}
	/* gestion des lien*/
	a {
		outline: none;
		text-decoration: none;
		color: black;
	}

	a:hover {
		cursor: pointer;
	}
	/* partie des hébergement */
	.hébergement {
		display: flex;
		flex-flow: row wrap;
		border: solid;
		border-style: none;
		padding: 0% 50px;
		gap: 20px 20px;
		width: auto;
		height: 700px;
		background-color: #f2f2f2;
		border-radius: 20px;
	}
	/* texte "hébergement à Marseille" */
	.hébergement-text1 {
		margin-top: 10px;
		margin-right: 5px;
		margin-bottom: -80px;
		margin-left: 5px;
	}
	/* texte "Afficher plus" */
	.hébergement-text2 {
		margin: -50px 5px;
	}
	/* pour sauter une ligne*/
	.line-break {
		width: 100%;
	}
	/* affichage des hotel pour les hébergement */
	.hébergement-cadre {
		border: solid;
		border-style: none;
		box-shadow: 5px 5px 10px #d9d9d9;
		width: 220px;
		height: 220px;
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		background-color: white;
		border-radius: 20px;
		justify-content: center;
		box-sizing: border-box;
	}
	.hébergement-cadre img {
		width: 210px;
		margin: -5px 0px;
		margin-left: -5px;
		margin-right: 5px;
		border-top-right-radius: 15px;
		border-top-left-radius: 15px;
		height: 100px;

		object-fit: cover;
	}
	/* partie les plus populaire */
	.populaire {
		border: solid;
		border-style: none;
		background-color: #f2f2f2;
		border-radius: 20px;
		width: 400px;
		height: auto;
		display: flex;
		flex-flow: column wrap;
		margin: 0;
		list-style: none;
	}
	/* texte + icone */
	.populaire-text {
		margin: 0px 15px;
		display: inline-flex;
		align-items: baseline;
		gap: 100px;
	}
	.populaire-flex {
		border: solid;
		border-style: none;
		background-color: #f2f2f2;
		border-radius: 20px;
		width: 380px;
		height: auto;
		display: flex;
		flex-flow: column wrap;
		margin: 0;
		list-style: none;
	}
	/* affichage des hotel pour les plus populaire */
	.populaire-cadre {
		border: solid;
		border-style: none;
		box-shadow: 5px 5px 10px #d9d9d9;
		box-sizing: border-box;
		width: 350px;
		height: auto;
		padding-top: 0px;
		padding-bottom: 5px;
		padding-left: 0px;
		padding-right: 10px;
		margin: 15px 15px;
		background-color: white;
		border-radius: 20px;
		text-align: left;
	}
	.populaire-cadre img {
		float: left;
		padding-top: 5px;
		padding-left: 5px;
		padding-right: 10px;
		width: 150px;
		height: 170px;
		object-fit: cover;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
	}
	.Activités {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		border: solid;
		border-style: none;
		margin-top: 10px;
		width: auto;
		height: 600px;
	}
	/* texte "Activités à Marseille" */
	.Activités-text {
		margin-top: 10px;
		margin-right: 5px;
		margin-bottom: -50px;
		margin-left: 5px;
	}
	/*boite flex pour les Activités */
	.Activités-flex {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		border: solid;
		border-style: none;
		gap: 20px 20px;
		margin-top: -40px;
		width: 100%;
		height: auto;
	}
	/* Activités Grandes */
	.Activités-cadre-L {
		border: solid;
		border-style: none;
		box-shadow: 0px 5px 10px #d9d9d9;
		width: 275px;
		height: 440px;
		border-radius: 20px;
		overflow: hidden;
	}
	.Activités-cadre-L p {
		padding-left: 10px;
	}
	/* Activités Moyennes */
	.Activités-cadre-M {
		border: solid;
		border-style: none;
		box-shadow: 0px 5px 10px #d9d9d9;
		width: 275px;
		height: 220px;
		border-radius: 20px;
		overflow: hidden;
	}
	.Activités-cadre-M p {
		padding-left: 10px;
	}
	/* Activités petites */
	.Activités-cadre-S {
		border: solid;
		border-style: none;
		box-shadow: 5px 5px 10px #d9d9d9;
		width: 275px;
		height: 180px;
		background-color: white;
		border-radius: 20px;
		overflow: hidden;
	}
	.Activités-cadre-S p {
		padding-left: 10px;
	}
	/* Activités Grandes image */
	.Activités-cadre-L img {
		width: auto;
		border-top-right-radius: 15px;
		border-top-left-radius: 15px;
		height: 390px;
		margin-left: -240px;
		object-fit: cover;
	}
	/* Activités Moyennes image */
	.Activités-cadre-M img {
		width: 100%;
		border-top-right-radius: 15px;
		border-top-left-radius: 15px;
		height: 170px;
		object-fit: cover;
	}
	/* Activités petites image */
	.Activités-cadre-S img {
		width: 100%;
		border-top-right-radius: 15px;
		border-top-left-radius: 15px;
		height: 130px;
		object-fit: cover;
	}
	#L1 {
		order: 1;
	}
	/*colonne Fort et frioul*/
	.colonne1 {
		order: 2;
		display: flex;
		flex-direction: column;
		gap: 40px;
	}
	#L2 {
		order: 3;
	}
	/*colonne notre-dame et parc longchamp*/
	.colonne2 {
		order: 4;
		display: flex;
		flex-direction: column;
		gap: 40px;
	}

	/* footer */
	footer {
		background-color: #f2f2f2;
		display: flex;
		justify-content: space-evenly;
		height: 200px;
		min-width: 1200px;
		max-width: 100%;
	}
	.A-propos {
		display: flex;
		flex-flow: column;
		gap: 10px;
	}
	.Nos-hébergements {
		display: flex;
		flex-flow: column;
		gap: 10px;
	}
	.Assistance {
		display: flex;
		flex-flow: column;
		gap: 10px;
	}
}
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
@media all and (min-width: 992px) and (max-width: 1199px) /*pc*/ {
	/* conteneur pour toute la page sauf footer*/
	.document {
		margin-left: auto;
		margin-right: auto;
		width: 990px;
		box-sizing: border-box;
	}
	header {
		display: inline-flex;
		gap: 600px;
	}
	header img {
		margin-top: 20px;
		margin-left: 10px;
		width: auto;
		height: 40px;
	}
	/* css et placement des ancre en haut de la page*/
	.ancre {
		display: flex;
		align-content: flex-end;
		padding-top: 0px;
		gap: 10px;
	}
	.ancre1 {
		display: flex;
		align-content: flex-end;
		padding-top: 0px;
	}
	.ancre1 a:hover {
		border-top: 3px solid #0065fc;
		padding-top: 20px;
		color: #0065fc;
	}
	.ancre1 a {
		border-top: 3px solid transparent;
		padding-top: 20px;
		color: black;
		padding-left: 20px;
		width: 120px;
	}
	.ancre2 {
		display: flex;
		align-content: flex-end;
		padding-top: 0px;
	}
	.ancre2 a {
		border-top: 3px solid transparent;
		padding-top: 20px;
		color: black;
		padding-left: 30px;
		width: 80px;
	}
	.ancre2 a:hover {
		border-top: 3px solid #0065fc;
		padding-top: 20px;
		color: #0065fc;
	}
	/* affichage des etoile sur la meme ligne */
	.note {
		white-space: nowrap;
	}
	/* gestion de la couleur des etoile*/
	.checked {
		color: #0065fc;
	}
	.empty {
		color: #f2f2f2;
	}
	/* gestion du text "En plein centre ville ou en pleine nature"*/
	.text-nav {
		margin-top: -10px;
	}
	/* gestion de la zone de recherche*/
	#bare-recherche {
		display: flex;
		margin-bottom: 15px;
	}
	.icon-recherche {
		border: 1px solid #dedede;
		background-color: #dedede;
		height: auto;
		width: 35px;
		padding-top: 7px;
		text-align: center;
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
		cursor: pointer;
	}
	input[type="text"] {
		height: 35px;
		width: 180px;
		padding-left: 10px;
		font-weight: bold;
		outline: none;
		border: 1px solid #dedede;
	}
	/* gestion du bouton recherche */
	.mobileShow {
		display: none;
	}
	#btn-rechercher {
		color: white;
		background-color: #0065fc;
		height: auto;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
		margin-left: -9px;
		text-align: center;
		border: none;
		cursor: pointer;
	}
	#btn-rechercher2 {
		display: none;
	}
	/* gestion des bouton filtre */
	.Filter {
		display: inline-flex;
		gap: 20px;
	}
	.btn-filtre button:hover {
		color: white;
		background-color: #0065fc;
		cursor: pointer;
	}
	.btn-Économique {
		margin-top: 10px;
		font-weight: bold;
		background-color: transparent;
		border-radius: 30px;
		width: 150px;
		height: 35px;
		border: 2px solid #d9d9d9;
		text-align: right;
		padding-right: 10px;
		display: inline-block;
		z-index: 1;
	}
	.btn-Familial {
		margin-top: 10px;
		font-weight: bold;
		background-color: transparent;
		border-radius: 30px;
		width: 115px;
		height: 35px;
		border: 2px solid #d9d9d9;
		text-align: right;
		padding-right: 10px;
		display: inline-block;
		z-index: 1;
	}
	.btn-Romantique {
		margin-top: 10px;
		font-weight: bold;
		background-color: transparent;
		border-radius: 30px;
		width: 150px;
		height: 35px;
		border: 2px solid #d9d9d9;
		text-align: right;
		padding-right: 10px;
		display: inline-block;
		z-index: 1;
	}
	.btn-Animaux {
		margin-top: 10px;
		text-align: center;
		font-weight: bold;
		background-color: transparent;
		border-radius: 30px;
		width: 200px;
		height: 35px;
		border: 2px solid #d9d9d9;
		text-align: right;
		padding-right: 10px;
		display: inline-block;
		z-index: 1;
	}
	.btn-border {
		width: 100%;
		height: 100%;
	}

	/*icon boutton filtre*/
	.icon {
		text-align: center;
		color: #0065fc;
		border: 2px solid #deebff;
		background-color: #deebff;
		border-radius: 50%;
		box-sizing: border-box;
		width: 40px;
		height: 37px;
		margin-right: -43px;
		padding: 8px;
		position: relative;
		z-index: 2;
	}
	.text-info {
		display: flex;
	}
	.icon2 {
		text-align: center;
		color: #0065fc;
		border: 1px solid #d9d9d9;
		border-radius: 50%;
		box-sizing: border-box;
		margin-top: 11px;
		margin-right: 10px;
		padding: 3px;
		width: 25px;
		height: 25px;
	}
	/* conteneur flex pour hébergement et populaire*/
	.flexbox {
		display: flex;
		gap: 20px;
		width: 990px;
	}
	/* gestion des lien*/
	a {
		outline: none;
		text-decoration: none;
		color: black;
	}

	a:hover {
		cursor: pointer;
	}
	/* partie des hébergement */
	.hébergement {
		display: flex;
		flex-flow: row wrap;
		border: solid;
		border-style: none;
		padding: 0% 20px;
		gap: 20px 20px;
		width: 550px;
		height: 700px;
		background-color: #f2f2f2;
		border-radius: 20px;
	}
	/* texte "hébergement à Marseille" */
	.hébergement-text1 {
		margin-top: 10px;
		margin-right: 5px;
		margin-bottom: -80px;
		margin-left: 5px;
	}
	/* texte "Afficher plus" */
	.hébergement-text2 {
		margin: -50px 5px;
	}
	/* pour sauter une ligne*/
	.line-break {
		width: 100%;
	}
	/* affichage des hotel pour les hébergement */
	.hébergement-cadre {
		border: solid;
		border-style: none;
		box-shadow: 5px 5px 10px #d9d9d9;
		width: 170px;
		height: 220px;
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		background-color: white;
		border-radius: 20px;
		justify-content: center;
		box-sizing: border-box;
	}
	.hébergement-cadre img {
		width: 160px;
		margin: -5px 0px;
		margin-left: -5px;
		margin-right: 5px;
		border-top-right-radius: 15px;
		border-top-left-radius: 15px;
		height: 90px;

		object-fit: cover;
	}
	/* partie les plus populaire */
	.populaire {
		border: solid;
		border-style: none;
		background-color: #f2f2f2;
		border-radius: 20px;
		width: 350px;
		height: auto;
		display: flex;
		flex-flow: column wrap;
		margin: 0;
		list-style: none;
	}
	/* texte + icone */
	.populaire-text {
		margin: 0px 15px;
		display: inline-flex;
		align-items: baseline;
		gap: 100px;
	}
	.populaire-flex {
		border: solid;
		border-style: none;
		background-color: #f2f2f2;
		border-radius: 20px;
		width: 350px;
		height: auto;
		display: flex;
		flex-flow: column wrap;
		margin: 0;
		list-style: none;
	}
	/* affichage des hotel pour les plus populaire */
	.populaire-cadre {
		border: solid;
		border-style: none;
		box-shadow: 5px 5px 10px #d9d9d9;
		box-sizing: border-box;
		width: 300px;
		height: auto;
		padding-top: 0px;
		padding-bottom: 5px;
		padding-left: 0px;
		padding-right: 10px;
		margin: 15px 15px;
		background-color: white;
		border-radius: 20px;
		text-align: left;
	}
	.populaire-cadre img {
		float: left;
		padding-top: 5px;
		padding-left: 5px;
		padding-right: 10px;
		width: 130px;
		height: 150px;
		object-fit: cover;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
	}
	.Activités {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		border: solid;
		border-style: none;
		margin-top: 10px;
		width: auto;
		height: 600px;
	}
	/* texte "Activités à Marseille" */
	.Activités-text {
		margin-top: 10px;
		margin-right: 5px;
		margin-bottom: -50px;
		margin-left: 5px;
	}
	/*boite flex pour les Activités */
	.Activités-flex {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		border: solid;
		border-style: none;
		gap: 20px 20px;
		margin-top: -40px;
		width: 100%;
		height: auto;
	}
	/* Activités Grandes */
	.Activités-cadre-L {
		border: solid;
		border-style: none;
		box-shadow: 0px 5px 10px #d9d9d9;
		width: 210px;
		height: 440px;
		border-radius: 20px;
		overflow: hidden;
	}
	.Activités-cadre-L p {
		padding-left: 10px;
	}
	/* Activités Moyennes */
	.Activités-cadre-M {
		border: solid;
		border-style: none;
		box-shadow: 0px 5px 10px #d9d9d9;
		width: 210px;
		height: 220px;
		border-radius: 20px;
		overflow: hidden;
	}
	.Activités-cadre-M p {
		padding-left: 10px;
	}
	/* Activités petites */
	.Activités-cadre-S {
		border: solid;
		border-style: none;
		box-shadow: 5px 5px 10px #d9d9d9;
		width: 210px;
		height: 180px;
		background-color: white;
		border-radius: 20px;
		overflow: hidden;
	}
	.Activités-cadre-S p {
		padding-left: 10px;
	}
	/* Activités Grandes image */
	.Activités-cadre-L img {
		width: auto;
		border-top-right-radius: 15px;
		border-top-left-radius: 15px;
		height: 380px;
		margin-left: -240px;
		object-fit: cover;
	}
	/* Activités Moyennes image */
	.Activités-cadre-M img {
		width: 100%;
		border-top-right-radius: 15px;
		border-top-left-radius: 15px;
		height: 160px;
		object-fit: cover;
	}
	/* Activités petites image */
	.Activités-cadre-S img {
		width: 100%;
		border-top-right-radius: 15px;
		border-top-left-radius: 15px;
		height: 120px;
		object-fit: cover;
	}
	#L1 {
		order: 1;
	}
	/*colonne Fort et frioul*/
	.colonne1 {
		order: 2;
		display: flex;
		flex-direction: column;
		gap: 40px;
	}
	#L2 {
		order: 3;
	}
	/*colonne notre-dame et parc longchamp*/
	.colonne2 {
		order: 4;
		display: flex;
		flex-direction: column;
		gap: 40px;
	}

	/* footer */
	footer {
		background-color: #f2f2f2;
		display: flex;
		justify-content: space-evenly;
		height: 200px;
		min-width: 990px;
		max-width: 100%;
	}
	.A-propos {
		display: flex;
		flex-flow: column;
		gap: 10px;
	}
	.Nos-hébergements {
		display: flex;
		flex-flow: column;
		gap: 10px;
	}
	.Assistance {
		display: flex;
		flex-flow: column;
		gap: 10px;
	}
}
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/

@media all and (min-width: 768px) and (max-width: 991px) /*tablettes*/ {
	/* conteneur pour toute la page sauf footer*/
	.document {
		margin-left: auto;
		margin-right: auto;
		width: 768px;
	}
	header {
		display: inline-flex;
		gap: 400px;
	}
	header img {
		margin-top: 20px;
		margin-left: 10px;
		width: auto;
		height: 40px;
	}
	/* css et placement des ancre en haut de la page*/
	.ancre {
		display: flex;
		align-content: flex-end;
		padding-top: 0px;
		gap: 10px;
	}
	.ancre1 {
		display: flex;
		align-content: flex-end;
		padding-top: 0px;
	}
	.ancre1 a:hover {
		border-top: 3px solid #0065fc;
		padding-top: 20px;
		color: #0065fc;
	}
	.ancre1 a {
		border-top: 3px solid transparent;
		padding-top: 20px;
		color: black;
		padding-left: 20px;
		width: 120px;
	}
	.ancre2 {
		display: flex;
		align-content: flex-end;
		padding-top: 0px;
	}
	.ancre2 a {
		border-top: 3px solid transparent;
		padding-top: 20px;
		color: black;
		padding-left: 30px;
		width: 80px;
	}
	.ancre2 a:hover {
		border-top: 3px solid #0065fc;
		padding-top: 20px;
		color: #0065fc;
	}
	/* affichage des etoile sur la meme ligne */
	.note {
		white-space: nowrap;
	}
	/* gestion de la couleur des etoile*/
	.checked {
		color: #0065fc;
	}
	.empty {
		color: #f2f2f2;
	}
	/* gestion du text "En plein centre ville ou en pleine nature"*/
	.text-nav {
		margin-top: -10px;
	}
	/* gestion de la zone de recherche*/
	#bare-recherche {
		display: flex;
		margin-bottom: 15px;
	}
	.icon-recherche {
		border: 1px solid #dedede;
		background-color: #dedede;
		height: auto;
		width: 35px;
		padding-top: 7px;
		text-align: center;
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
		cursor: pointer;
	}
	input[type="text"] {
		height: 35px;
		width: 180px;
		padding-left: 10px;
		font-weight: bold;
		outline: none;
		border: 1px solid #dedede;
	}
	/* gestion du bouton recherche */
	#btn-rechercher {
		color: white;
		background-color: #0065fc;
		height: auto;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
		margin-left: -9px;
		text-align: center;
		border: none;
		cursor: pointer;
	}
	#btn-rechercher2 {
		display: none;
	}
	/* gestion des bouton filtre */
	.Filter {
		display: inline-flex;
		gap: 20px;
	}
	.btn-filtre button:hover {
		color: white;
		background-color: #0065fc;
		cursor: pointer;
	}
	.btn-Économique {
		margin-top: 10px;
		font-weight: bold;
		background-color: transparent;
		border-radius: 30px;
		width: 150px;
		height: 35px;
		border: 2px solid #d9d9d9;
		text-align: right;
		padding-right: 10px;
		display: inline-block;
		z-index: 1;
	}
	.btn-Familial {
		margin-top: 10px;
		font-weight: bold;
		background-color: transparent;
		border-radius: 30px;
		width: 115px;
		height: 35px;
		border: 2px solid #d9d9d9;
		text-align: right;
		padding-right: 10px;
		display: inline-block;
		z-index: 1;
	}
	.btn-Romantique {
		margin-top: 10px;
		font-weight: bold;
		background-color: transparent;
		border-radius: 30px;
		width: 150px;
		height: 35px;
		border: 2px solid #d9d9d9;
		text-align: right;
		padding-right: 10px;
		display: inline-block;
		z-index: 1;
	}
	.btn-Animaux {
		margin-top: 10px;
		text-align: center;
		font-weight: bold;
		background-color: transparent;
		border-radius: 30px;
		width: 200px;
		height: 35px;
		border: 2px solid #d9d9d9;
		text-align: right;
		padding-right: 10px;
		display: inline-block;
		z-index: 1;
	}
	/*contien les bouton et les icone*/
	.btn-border {
		width: 100%;
		height: 100%;
	}

	/*icon boutton filtre*/
	.icon {
		text-align: center;
		color: #0065fc;
		border: 2px solid #deebff;
		background-color: #deebff;
		border-radius: 50%;
		box-sizing: border-box;
		width: 40px;
		height: 37px;
		margin-right: -43px;
		padding: 8px;
		position: relative;
		z-index: 2;
	}
	.text-info {
		display: flex;
	}
	.icon2 {
		text-align: center;
		color: #0065fc;
		border: 1px solid #d9d9d9;
		border-radius: 50%;
		box-sizing: border-box;
		margin-top: 11px;
		margin-right: 10px;
		padding: 3px;
		width: 25px;
		height: 25px;
	}
	/* gestion des lien*/
	a {
		outline: none;
		text-decoration: none;
		color: black;
	}

	a:hover {
		cursor: pointer;
	}

	/* conteneur flex pour hébergement et populaire*/
	.flexbox {
		display: flex;
		flex-flow: column wrap;
		gap: 20px;
	}
	/* partie des hébergement */
	.hébergement {
		display: flex;
		flex-flow: row wrap;
		border: solid;
		border-style: none;
		padding: 0px 50px;
		gap: 20px 20px;
		width: auto;
		height: 1000px;
		background-color: #f2f2f2;
		border-radius: 20px;
		justify-content: center;
	}
	/* texte "hébergement à Marseille" */
	.hébergement-text1 {
		margin-top: 10px;
		margin-right: 5px;
		margin-bottom: -80px;
		margin-left: 5px;
	}
	/* texte "Afficher plus" */
	.hébergement-text2 {
		margin: -50px 5px;
	}
	/* pour sauter une ligne*/
	.line-break {
		width: 100%;
	}
	/* affichage des hotel pour les hébergement */
	.hébergement-cadre {
		border: solid;
		border-style: none;
		box-shadow: 5px 5px 10px #d9d9d9;
		width: 220px;
		height: 220px;
		padding-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
		background-color: white;
		border-radius: 20px;
		justify-content: center;
		box-sizing: border-box;
	}
	.hébergement-cadre img {
		width: 210px;
		margin: -5px 0px;
		margin-left: -5px;
		margin-right: 5px;
		border-top-right-radius: 15px;
		border-top-left-radius: 15px;
		height: 100px;

		object-fit: cover;
	}
	/* partie les plus populaire */
	.populaire {
		border: solid;
		border-style: none;
		background-color: #f2f2f2;
		border-radius: 20px;
		width: auto;
		height: auto;
		margin: 0;
		list-style: none;
	}
	/* texte + icone */
	.populaire-text {
		margin: 0px 15px;
		display: inline-flex;
		align-items: baseline;
		gap: 400px;
	}
	/*cadre flex pour les populaire*/
	.populaire-flex {
		border: solid;
		border-style: none;
		background-color: #f2f2f2;
		border-radius: 20px;
		width: auto;
		height: auto;
		display: flex;
		flex-flow: column wrap;
		align-items: center;
		margin-bottom: 20px;
		list-style: none;
	}
	/* affichage des hotel pour les plus populaire */
	.populaire-cadre {
		border: solid;
		border-style: none;
		box-shadow: 5px 5px 10px #d9d9d9;
		box-sizing: border-box;
		width: 350px;
		height: auto;
		padding-top: 0px;
		padding-bottom: 5px;
		padding-left: 0px;
		padding-right: 10px;
		margin: 15px 15px;
		background-color: white;
		border-radius: 20px;
		text-align: center;
	}
	.populaire-cadre img {
		float: left;
		padding-top: 5px;
		padding-left: 5px;
		padding-right: 10px;
		width: 150px;
		height: 170px;
		object-fit: cover;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
	}
	/*Section Activités en general */
	.Activités {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		border: solid;
		border-style: none;
		margin-top: 10px;
		margin-left: auto;
		margin-right: auto;
		width: 750px;
		height: auto;
		justify-content: center;
	}
	/* texte "Activités à Marseille" */
	.Activités-text {
		margin-top: 10px;
		margin-right: 5px;
		margin-bottom: -50px;
		margin-left: 5px;
	}
	/*boite flex pour les Activités */
	.Activités-flex {
		display: flex;
		flex-direction: column;
		border: solid;
		border-style: none;
		margin-top: 50px;
		width: 100%;
		gap: 20px 20px;
		height: auto;
	}
	/* Activités Grandes */
	.Activités-cadre-L {
		border: solid;
		border-style: none;
		box-shadow: 0px 5px 10px #d9d9d9;
		width: 700px;
		height: 250px;
		border-radius: 20px;
		overflow: hidden;
		margin-left: 20px;
	}
	.Activités-cadre-L p {
		padding-left: 10px;
	}
	/* Activités Moyennes */
	.Activités-cadre-M {
		border: solid;
		border-style: none;
		box-shadow: 0px 5px 10px #d9d9d9;
		width: 700px;
		height: 250px;
		border-radius: 20px;
		overflow: hidden;
		margin-left: 20px;
	}
	.Activités-cadre-M p {
		padding-left: 10px;
	}
	/* Activités petites */
	.Activités-cadre-S {
		border: solid;
		border-style: none;
		box-shadow: 0px 5px 10px #d9d9d9;
		width: 700px;
		height: 250px;
		border-radius: 20px;
		overflow: hidden;
		margin-left: 20px;
	}
	.Activités-cadre-S p {
		padding-left: 10px;
	}
	/* Activités Grandes image */
	.Activités-cadre-L img {
		width: 100%;
		border-top-right-radius: 15px;
		border-top-left-radius: 15px;
		height: 80%;
		object-fit: cover;
	}
	/* Activités Moyennes image */
	.Activités-cadre-M img {
		width: 100%;
		border-top-right-radius: 15px;
		border-top-left-radius: 15px;
		height: 80%;
		object-fit: cover;
	}
	/* Activités petites image */
	.Activités-cadre-S img {
		width: 100%;
		border-top-right-radius: 15px;
		border-top-left-radius: 15px;
		height: 80%;
		object-fit: cover;
	}
	/*colonne Fort et frioul*/
	.colonne1 {
		display: flex;
		flex-direction: column;
		gap: 20px 20px;
	}
	/*colonne notre-dame et parc longchamp*/
	.colonne2 {
		display: flex;
		flex-direction: column;
		gap: 20px 20px;
	}
	/* footer */
	footer {
		background-color: #f2f2f2;
		display: flex;
		justify-content: space-evenly;
		width: auto;
		height: 200px;
		margin-top: 20px;
	}
	.A-propos {
		display: flex;
		flex-flow: column;
		gap: 10px;
	}
	.Nos-hébergements {
		display: flex;
		flex-flow: column;
		gap: 10px;
	}
	.Assistance {
		display: flex;
		flex-flow: column;
		gap: 10px;
	}
}
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/

@media all and (min-width: 320px) and (max-width: 767px) /*portable*/ {
	/* conteneur pour toute la page sauf footer*/
	.document {
		margin-left: auto;
		margin-right: auto;
		width: 310px;
	}
	header {
		display: flex;
		flex-flow: column wrap;
	}
	header img {
		margin-top: 20px;
		margin-right: auto;
		margin-left: auto;
		width: 20%;
		height: auto;
	}
	/* css et placement des ancre en haut de la page*/
	.ancre {
		display: inline-flex;
		flex-flow: nowrap;
		margin-top: 20px;
	}
	.ancre1 {
		padding-bottom: 0px;
		align-self: flex-start;
	}
	.ancre1 a:hover {
		border-bottom: 3px solid #0065fc;
		padding-bottom: 10px;
		color: #0065fc;
	}
	.ancre1 a {
		border-bottom: 3px solid #f2f2f2;
		padding-bottom: 10px;
		color: black;
		padding-left: 50px;
		padding-right: 40px;
	}
	.ancre2 {
		padding-bottom: 0px;
		align-self: flex-start;
	}
	.ancre2 a {
		border-bottom: 3px solid #f2f2f2;
		padding-bottom: 10px;
		color: black;
		padding-left: 50%;
		padding-right: 40%;
	}
	.ancre2 a:hover {
		border-bottom: 3px solid #0065fc;
		padding-bottom: 10px;
		color: #0065fc;
	}
	/* affichage des etoile sur la meme ligne */
	.note {
		white-space: nowrap;
	}
	/* gestion de la couleur des etoile*/
	.checked {
		color: #0065fc;
	}
	.empty {
		color: #f2f2f2;
	}
	nav {
		margin-top: 40px;
		text-align: center;
		margin-left: 10px;
	}
	/* gestion du text "En plein centre ville ou en pleine nature"*/
	.text-nav {
		margin-top: -10px;
	}
	/* gestion de la zone de recherche*/
	#bare-recherche {
		display: flex;
		justify-content: center;
		margin-bottom: 15px;
	}
	.icon-recherche {
		border: 1px solid #dedede;
		background-color: #dedede;
		height: auto;
		width: 35px;
		padding-top: 7px;
		text-align: center;
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
		cursor: pointer;
	}
	input[type="text"] {
		height: 35px;
		width: 180px;
		padding-left: 10px;
		font-weight: bold;
		outline: none;
		border: 1px solid #dedede;
	}
	/* gestion du bouton recherche */
	#btn-rechercher {
		display: none;
	}
	#btn-rechercher2 {
		color: white;
		background-color: #0065fc;
		height: auto;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
		margin-left: -9px;
		text-align: center;
		border: none;
		cursor: pointer;
	}
	/* gestion des bouton filtre */
	.Filter {
		display: inline-flex;
		flex-wrap: wrap;
		gap: 20px;
	}
	.Filter p {
		width: 100%;
		margin-bottom: -10px;
		text-align: start;
	}
	.btn-filtre button:hover {
		color: white;
		background-color: #0065fc;
		cursor: pointer;
	}
	.btn-Économique {
		margin-top: 10px;
		font-weight: bold;
		background-color: transparent;
		border-radius: 30px;
		width: 150px;
		height: 35px;
		border: 2px solid #d9d9d9;
		text-align: right;
		padding-right: 10px;
		display: inline-block;
		z-index: 1;
	}
	.btn-Familial {
		margin-top: 10px;
		font-weight: bold;
		background-color: transparent;
		border-radius: 30px;
		width: 115px;
		height: 35px;
		border: 2px solid #d9d9d9;
		text-align: right;
		padding-right: 10px;
		display: inline-block;
		z-index: 1;
	}
	.btn-Romantique {
		margin-top: 10px;
		font-weight: bold;
		background-color: transparent;
		border-radius: 30px;
		width: 150px;
		height: 35px;
		border: 2px solid #d9d9d9;
		text-align: right;
		padding-right: 10px;
		display: inline-block;
		z-index: 1;
	}
	.btn-Animaux {
		margin-top: 10px;
		text-align: center;
		font-weight: bold;
		background-color: transparent;
		border-radius: 30px;
		width: 200px;
		height: 35px;
		border: 2px solid #d9d9d9;
		text-align: right;
		padding-right: 10px;
		display: inline-block;
		z-index: 1;
	}
	/*contien les bouton et les icone*/
	.btn-border {
		width: 100%;
		height: 100%;
	}

	/*icon boutton filtre*/
	.icon {
		text-align: center;
		color: #0065fc;
		border: 2px solid #deebff;
		background-color: #deebff;
		border-radius: 50%;
		box-sizing: border-box;
		width: 40px;
		height: 37px;
		margin-right: -43px;
		padding: 8px;
		position: relative;
		z-index: 2;
	}
	.text-info {
		display: flex;
		margin-left: 10px;
		margin-top: 20px;
	}
	.icon2 {
		text-align: center;
		color: #0065fc;
		border: 1px solid #d9d9d9;
		border-radius: 50%;
		box-sizing: border-box;
		margin-top: 11px;
		margin-right: 10px;
		padding: 3px;
		width: 25px;
		height: 25px;
	}
	/* gestion des lien*/
	a {
		outline: none;
		text-decoration: none;
		color: black;
	}

	a:hover {
		cursor: pointer;
	}

	/* conteneur flex pour hébergement et populaire*/
	.flexbox {
		display: flex;
		flex-flow: column wrap;
		gap: 20px;
	}
	/* partie les plus populaire */
	.populaire {
		border: solid;
		border-style: none;
		background-color: #f2f2f2;
		width: 100%;
		padding: 0px 5px;
		height: auto;
		margin: 0;
		list-style: none;
		order: 1;
	}
	/* texte + icone */
	.populaire-text {
		margin: 0px 15px;
		display: inline-flex;
		align-items: baseline;
		gap: 100px;
	}
	/*cadre flex pour les populaire*/
	.populaire-flex {
		border: solid;
		border-style: none;
		background-color: #f2f2f2;
		width: auto;
		height: auto;
		display: flex;
		flex-flow: column;
		align-items: center;
		margin-bottom: 20px;
		list-style: none;
	}
	/* affichage des hotel pour les plus populaire */
	.populaire-cadre {
		border: solid;
		border-style: none;
		box-shadow: 5px 5px 10px #d9d9d9;
		box-sizing: border-box;
		width: 90%;
		height: auto;
		padding-top: 0px;
		padding-bottom: 5px;
		padding-left: 0px;
		padding-right: 10px;
		margin: 15px 15px;
		background-color: white;
		border-radius: 20px;
		text-align: center;
	}
	.populaire-cadre img {
		float: left;
		padding-top: 5px;
		padding-left: 5px;
		padding-right: 10px;
		width: 150px;
		height: 170px;
		object-fit: cover;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
	}
	/* partie des hébergement */
	.hébergement {
		display: flex;
		flex-flow: column wrap;
		border: solid;
		border-style: none;
		padding: 0px 20px;
		gap: 20px 20px;
		width: 80%;
		height: auto;
		justify-content: center;
		order: 2;
	}
	/* texte "hébergement à Marseille" */
	.hébergement-text1 {
		margin-top: 10px;
		margin-right: 5px;
		margin-left: 5px;
	}
	/* affichage des hotel pour les hébergement */
	.hébergement-cadre {
		border: solid;
		border-style: none;
		box-shadow: 5px 5px 10px 5px #d9d9d9;
		width: auto;
		height: 240px;
		background-color: white;
		border-radius: 20px;
		text-align: center;
		box-sizing: border-box;
	}
	.hébergement-cadre img {
		width: 290px;
		padding-top: 5px;
		border-top-right-radius: 20px;
		border-top-left-radius: 20px;
		height: 110px;
		object-fit: cover;
	}
	/*Section Activités en general */
	.Activités {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		border: solid;
		border-style: none;
		margin-top: 10px;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		height: auto;
		justify-content: center;
	}
	/* texte "Activités à Marseille" */
	.Activités-text {
		margin-top: 10px;
		margin-right: 5px;
		margin-bottom: -50px;
		margin-left: 5px;
	}
	/*boite flex pour les Activités */
	.Activités-flex {
		display: flex;
		flex-direction: column;
		border: solid;
		border-style: none;
		margin-top: 50px;
		width: 100%;
		gap: 20px 20px;
		height: auto;
		margin-bottom: 20px;
	}
	/* Activités Grandes */
	.Activités-cadre-L {
		border: solid;
		border-style: none;
		box-shadow: 0px 5px 10px #d9d9d9;
		width: 90%;
		height: 200px;
		border-radius: 20px;
		overflow: hidden;
		margin-left: 20px;
	}
	.Activités-cadre-L p {
		padding-left: 10px;
	}
	/* Activités Moyennes */
	.Activités-cadre-M {
		border: solid;
		border-style: none;
		box-shadow: 0px 5px 10px #d9d9d9;
		width: 90%;
		height: 200px;
		border-radius: 20px;
		overflow: hidden;
		margin-left: 20px;
	}
	.Activités-cadre-M p {
		padding-left: 10px;
	}
	/* Activités petites */
	.Activités-cadre-S {
		border: solid;
		border-style: none;
		box-shadow: 0px 5px 10px #d9d9d9;
		width: 90%;
		height: 200px;
		border-radius: 20px;
		overflow: hidden;
		margin-left: 20px;
	}
	.Activités-cadre-S p {
		padding-left: 10px;
	}
	/* Activités Grandes image */
	.Activités-cadre-L img {
		width: 100%;
		border-top-right-radius: 15px;
		border-top-left-radius: 15px;
		height: 150px;
		object-fit: cover;
	}
	/* Activités Moyennes image */
	.Activités-cadre-M img {
		width: 100%;
		border-top-right-radius: 15px;
		border-top-left-radius: 15px;
		height: 150px;
		object-fit: cover;
	}
	/* Activités petites image */
	.Activités-cadre-S img {
		width: 100%;
		border-top-right-radius: 15px;
		border-top-left-radius: 15px;
		height: 150px;
		object-fit: cover;
	}
	/*colonne Fort et frioul*/
	.colonne1 {
		display: flex;
		flex-direction: column;
		gap: 20px 20px;
	}
	/*colonne notre-dame et parc longchamp*/
	.colonne2 {
		display: flex;
		flex-direction: column;
		gap: 20px 20px;
	}
	/* footer */
	footer {
		background-color: #f2f2f2;
		display: flex;
		flex-flow: column;
		justify-content: space-evenly;
		text-align: center;
		min-width: 320px;
		max-width: 767px;
		height: 100%;
		padding-bottom: 20px;
	}
	.A-propos {
		display: flex;
		flex-flow: column;
		gap: 10px;
		margin-left: 20px;
	}
	.Nos-hébergements {
		display: flex;
		flex-flow: column;
		gap: 10px;
		margin-left: 20px;
	}
	.Assistance {
		display: flex;
		flex-flow: column;
		gap: 10px;
		margin-left: 20px;
	}
}
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
@media all and (max-width: 319px) /*portable en dessous de 319px*/ {
	body {
		font-size: 100%;
		overflow: auto;
		width: 300px;
		height: 2000px;
		margin-left: auto;
		margin-right: auto;
	}
	/* conteneur pour toute la page sauf footer*/
	.document {
		margin-left: auto;
		margin-right: auto;
	}
	header {
		display: flex;
		flex-flow: column wrap;
	}
	header img {
		margin-top: 20px;
		margin-right: auto;
		margin-left: auto;
		width: 20%;
		height: auto;
	}
	/* css et placement des ancre en haut de la page*/
	.ancre {
		display: inline-flex;
		flex-flow: nowrap;
		margin-top: 20px;
	}
	.ancre1 {
		padding-bottom: 0px;
		align-self: flex-start;
	}
	.ancre1 a:hover {
		border-bottom: 3px solid #0065fc;
		padding-bottom: 10px;
		color: #0065fc;
	}
	.ancre1 a {
		border-bottom: 3px solid #f2f2f2;
		padding-bottom: 10px;
		color: black;
		padding-left: 50px;
		padding-right: 40px;
	}
	.ancre2 {
		padding-bottom: 0px;
	}
	.ancre2 a {
		border-bottom: 3px solid #f2f2f2;
		padding-bottom: 10px;
		color: black;
		padding-left: 30%;
		padding-right: 0px;
	}
	.ancre2 a:hover {
		border-bottom: 3px solid #0065fc;
		padding-bottom: 10px;
		color: #0065fc;
	}
	/* affichage des etoile sur la meme ligne */
	.note {
		white-space: nowrap;
	}
	/* gestion de la couleur des etoile*/
	.checked {
		color: #0065fc;
	}
	.empty {
		color: #f2f2f2;
	}
	nav {
		margin-top: 40px;
		text-align: center;
		margin-left: 10px;
	}
	/* gestion du text "En plein centre ville ou en pleine nature"*/
	.text-nav {
		margin-top: -10px;
		font-size: 120%;
	}
	/* gestion de la zone de recherche*/
	#bare-recherche {
		display: flex;
		justify-content: center;
		margin-bottom: 15px;
	}
	.icon-recherche {
		border: 1px solid #dedede;
		background-color: #dedede;
		height: auto;
		width: 35px;
		padding-top: 7px;
		text-align: center;
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
		cursor: pointer;
	}
	input[type="text"] {
		height: 35px;
		width: 180px;
		padding-left: 10px;
		font-weight: bold;
		outline: none;
		border: 1px solid #dedede;
	}
	/* gestion du bouton recherche */
	#btn-rechercher {
		display: none;
	}
	#btn-rechercher2 {
		color: white;
		background-color: #0065fc;
		height: auto;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
		margin-left: -9px;
		text-align: center;
		border: none;
		cursor: pointer;
	}
	/* gestion des bouton filtre */
	.Filter {
		display: inline-flex;
		flex-wrap: wrap;
		gap: 20px;
	}
	.Filter p {
		width: 100%;
		margin-bottom: -10px;
		text-align: start;
	}
	.btn-filtre button:hover {
		color: white;
		background-color: #0065fc;
		cursor: pointer;
	}
	.btn-Économique {
		margin-top: 10px;
		font-weight: bold;
		background-color: transparent;
		border-radius: 30px;
		width: 170px;
		height: 35px;
		border: 2px solid #d9d9d9;
		text-align: right;
		padding-right: 10px;
		display: inline-block;
		z-index: 1;
	}
	.btn-Familial {
		margin-top: 10px;
		font-weight: bold;
		background-color: transparent;
		border-radius: 30px;
		width: 120px;
		height: 35px;
		border: 2px solid #d9d9d9;
		text-align: right;
		padding-right: 10px;
		display: inline-block;
		z-index: 1;
	}
	.btn-Romantique {
		margin-top: 10px;
		font-weight: bold;
		background-color: transparent;
		border-radius: 30px;
		width: 160px;
		height: 35px;
		border: 2px solid #d9d9d9;
		text-align: right;
		padding-right: 10px;
		display: inline-block;
		z-index: 1;
	}
	.btn-Animaux {
		margin-top: 10px;
		text-align: center;
		font-weight: bold;
		background-color: transparent;
		border-radius: 30px;
		width: 210px;
		height: 35px;
		border: 2px solid #d9d9d9;
		text-align: right;
		padding-right: 10px;
		display: inline-block;
		z-index: 1;
	}
	/*contien les bouton et les icone*/
	.btn-border {
		width: 100%;
		height: 100%;
	}

	/*icon boutton filtre*/
	.icon {
		text-align: center;
		color: #0065fc;
		border: 2px solid #deebff;
		background-color: #deebff;
		border-radius: 50%;
		box-sizing: border-box;
		width: 40px;
		height: 37px;
		margin-right: -43px;
		padding: 8px;
		position: relative;
		z-index: 2;
	}
	.text-info {
		display: flex;
		margin-left: 10px;
		margin-top: 20px;
		font-size: 120%;
	}
	.icon2 {
		text-align: center;
		color: #0065fc;
		border: 1px solid #d9d9d9;
		border-radius: 50%;
		box-sizing: border-box;
		margin-top: 11px;
		margin-right: 10px;
		padding: 3px;
		width: 25px;
		height: 25px;
	}
	/* gestion des lien*/
	a {
		outline: none;
		text-decoration: none;
		color: black;
	}

	a:hover {
		cursor: pointer;
	}

	/* conteneur flex pour hébergement et populaire*/
	.flexbox {
		display: flex;
		flex-flow: column wrap;
		gap: 20px;
	}
	/* partie les plus populaire */
	.populaire {
		border: solid;
		border-style: none;
		background-color: #f2f2f2;
		width: 90%;
		padding: 0px 0px;
		height: auto;
		margin: 0;
		list-style: none;
		order: 1;
	}
	/* texte + icone */
	.populaire-text {
		margin: 0px 15px;
		display: inline-flex;
		align-items: baseline;
		gap: 100px;
	}
	/*cadre flex pour les populaire*/
	.populaire-flex {
		border: solid;
		border-style: none;
		background-color: #f2f2f2;
		width: auto;
		height: auto;
		display: flex;
		flex-flow: column;
		align-items: center;
		margin-bottom: 20px;
		list-style: none;
	}
	/* affichage des hotel pour les plus populaire */
	.populaire-cadre {
		border: solid;
		border-style: none;
		box-shadow: 5px 5px 10px #d9d9d9;
		box-sizing: border-box;
		width: 90%;
		height: auto;
		padding-top: 0px;
		padding-bottom: 5px;
		padding-left: 0px;
		padding-right: 10px;
		margin: 15px 15px;
		background-color: white;
		border-radius: 20px;
		text-align: center;
	}
	.populaire-cadre p {
		font-size: 120%;
	}
	.populaire-cadre img {
		float: left;
		padding-top: 5px;
		padding-left: 5px;
		padding-right: 10px;
		width: 110px;
		height: 230px;
		object-fit: cover;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
	}
	/* partie des hébergement */
	.hébergement {
		display: flex;
		flex-flow: column wrap;
		border: solid;
		border-style: none;
		padding: 0px 20px;
		gap: 20px 20px;
		width: 80%;
		height: auto;
		justify-content: center;
		order: 2;
	}
	/* texte "hébergement à Marseille" */
	.hébergement-text1 {
		margin-top: 10px;
		margin-right: 5px;
		margin-left: 5px;
	}
	/* affichage des hotel pour les hébergement */
	.hébergement-cadre {
		border: solid;
		border-style: none;
		box-shadow: 5px 5px 10px 5px #d9d9d9;
		width: 100%;
		height: 280px;
		background-color: white;
		border-radius: 20px;
		text-align: center;
		justify-content: center;
		box-sizing: border-box;
	}
	.hébergement-cadre p {
		font-size: 120%;
	}
	.hébergement-cadre img {
		width: 97%;
		padding-top: 5px;
		border-top-right-radius: 20px;
		border-top-left-radius: 20px;
		height: 130px;
		object-fit: cover;
	}
	/*Section Activités en general */
	.Activités {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		border: solid;
		border-style: none;
		margin-top: 10px;
		margin-left: 10px;
		margin-right: auto;
		width: 80%;
		height: auto;
	}
	/* texte "Activités à Marseille" */
	.Activités-text {
		margin-top: 10px;
		margin-right: 5px;
		margin-bottom: -50px;
		margin-left: 5px;
	}
	/*boite flex pour les Activités */
	.Activités-flex {
		display: flex;
		flex-direction: column;
		border: solid;
		border-style: none;
		margin-top: 50px;
		width: 100%;
		gap: 20px 20px;
		height: auto;
		margin-bottom: 20px;
	}
	/* Activités Grandes */
	.Activités-cadre-L {
		border: solid;
		border-style: none;
		box-shadow: 0px 5px 10px #d9d9d9;
		width: 90%;
		height: 200px;
		border-radius: 20px;
		overflow: hidden;
		margin-left: 20px;
	}
	.Activités-cadre-L p {
		padding-left: 10px;
	}
	/* Activités Moyennes */
	.Activités-cadre-M {
		border: solid;
		border-style: none;
		box-shadow: 0px 5px 10px #d9d9d9;
		width: 90%;
		height: 200px;
		border-radius: 20px;
		overflow: hidden;
		margin-left: 20px;
	}
	.Activités-cadre-M p {
		padding-left: 10px;
	}
	/* Activités petites */
	.Activités-cadre-S {
		border: solid;
		border-style: none;
		box-shadow: 0px 5px 10px #d9d9d9;
		width: 90%;
		height: 200px;
		border-radius: 20px;
		overflow: hidden;
		margin-left: 20px;
	}
	.Activités-cadre-S p {
		padding-left: 10px;
	}
	/* Activités Grandes image */
	.Activités-cadre-L img {
		width: 100%;
		border-top-right-radius: 15px;
		border-top-left-radius: 15px;
		height: 150px;
		object-fit: cover;
	}
	/* Activités Moyennes image */
	.Activités-cadre-M img {
		width: 100%;
		border-top-right-radius: 15px;
		border-top-left-radius: 15px;
		height: 150px;
		object-fit: cover;
	}
	/* Activités petites image */
	.Activités-cadre-S img {
		width: 100%;
		border-top-right-radius: 15px;
		border-top-left-radius: 15px;
		height: 150px;
		object-fit: cover;
	}
	/*colonne Fort et frioul*/
	.colonne1 {
		display: flex;
		flex-direction: column;
		gap: 20px 20px;
	}
	/*colonne notre-dame et parc longchamp*/
	.colonne2 {
		display: flex;
		flex-direction: column;
		gap: 20px 20px;
	}
	/* footer */
	footer {
		background-color: #f2f2f2;
		display: flex;
		flex-flow: column;
		justify-content: space-evenly;
		text-align: center;
		min-width: 150px;
		max-width: 320px;
		padding-right: 50px;
		height: 500px;
		padding-bottom: 20px;
	}
	.A-propos {
		display: flex;
		flex-flow: column;
		gap: 10px;
		margin-left: 20px;
	}
	.Nos-hébergements {
		display: flex;
		flex-flow: column;
		gap: 10px;
		margin-left: 20px;
	}
	.Assistance {
		display: flex;
		flex-flow: column;
		gap: 10px;
		margin-left: 20px;
	}
}