.rubrique * {
	text-align: left;
}

.rubrique > div:nth-child(3) {
	/* Texte de la rubrique */
	white-space: pre-wrap;
}

.rubrique > div:first-child > span {
	display: inline-block;
	padding-bottom: 5px;
	/*border-bottom: 2px solid var(--couleur1);*/
}

hr {
	border: 0;
	border-bottom: thin solid var(--couleur1);
	margin-top: 40px;
	max-width: 1280px;
}

.fiche {
	max-width: 1200px;
	margin: auto;
	padding: 15px;
}

.carrousel {
}

	.carrousel > div:first-child {
		/* La zone qui définit le ratio pour la grande image en fond */
		display: inline-block;
		position: relative;
		width: 80%;
		padding-top: 50%;
	}

.grande-image {
	/* La div de la grande image */
	background-size: contain;
	background-color: var(--couleurZoneSaisie);
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.navigation {
	position: absolute;
	opacity: 0.5;
	vertical-align: middle;
	z-index: 1;
	text-align: center;
	background-color: lightgray;
	display: none;
	font-family: Segoe UI Symbol;
}

	.navigation span {
		background-color: black;
		color: white;
		font-weight: 700;
		display: inline-block;
		width: 30px;
		height: 30px;
		border-radius: 10px;
		top: calc(50% + 5px);
		position: absolute;
		left: calc(50% - 15px);
		font-size: 0.95em;
		font-family: Segoe UI Symbol;
		cursor: pointer;
	}

.grande-image:hover .navigation {
	display: block;
	width: 40px;
}

.grande-image .navigation.gauche {
	top: 0;
	bottom: 0;
	left: 0;
}

.grande-image .navigation.droite {
	top: 0;
	bottom: 0;
	right: 0;
}

.carrousel > div:nth-child(2) {
	/* La zone qui définit le ratio de la div verticale avec plein d'images */
	display: inline-block;
	position: relative;
	width: 18%;
	padding-top: 50%;
	float: right;
}

	.carrousel > div:nth-child(2) > .navigation {
		/* Les conteneurs des barres de navigation haut et bas ne tiennent pas de place */
		position: absolute;
		left: 0;
		right: 0;
		height: 0;
		/* Mais la div contenue dedans sera visible par dessus les images : */
		overflow: visible;
		display: none;
	}

	.carrousel > div:nth-child(2):hover > .navigation {
		display: block;
	}

	.carrousel > div:nth-child(2) > .navigation.haut {
		/* La barre de navigation du haut est ... en haut */
		top: 0;
	}

	.carrousel > div:nth-child(2) > .navigation.bas {
		/* La barre de navigation du bas est ... en bas */
		bottom: 40px;
	}

	.carrousel > div:nth-child(2) > .navigation > div {
		/* Les barres de navigation haut et bas qui débordent de leur conteneur */
		background-color: lightgray;
		height: 40px;
	}

.carrousel .petites-images {
	/* Le conteneur des images de droite : prend toute la place dans la zone de droite */
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow: hidden;
}

	.carrousel .petites-images > img {
		/* Les petites images empilées à droite */
		width: 100%;
		box-sizing: border-box;
	}

		.carrousel .petites-images > img.courante {
			border: 2px solid red;
		}

		.carrousel .petites-images > img:not(:last-child) {
			margin-bottom: 5px;
		}

.disponibilite {
	background-color: var(--couleurImportant);
	color: var(--couleurTexteClair);
	display: inline-block;
	padding: 8px 16px 5px 15px;
	text-transform: uppercase;
	font-size: 0.7em;
	border-radius: 10px 10px 0 0;
}

.acces {
	line-height: 1em;
}

	.acces img {
		/* Les logos des accès */
		height: 1em;
		top: 3px;
		position: relative;
		margin-right: 10px;
	}

.similaires {
	text-align: center;
	margin: 25px 0;
}

#alerte .alerte div {
	/* La confirmation que le message "Nous contacter" a été envoyé */
	max-width: 310px;
}

#conteneurPleinEcran {
	display: none;
	background-color: white;
}

	#conteneurPleinEcran > div:first-child {
		position: absolute;
		width: 100%;
		z-index: 3;
		text-align: center;
	}

		#conteneurPleinEcran > div:first-child > span {
			background-color: var(--couleur1);
			color: var(--couleurTexteClair);
			padding: 5px 20px;
			cursor: pointer;
		}

.en2col > div {
	display: inline-block;
	vertical-align: top;
}

	.en2col > div:first-child {
		width: 65%;
	}

	.en2col > div:last-child {
		width: calc(35% - 6px);
	}

		.en2col > div:last-child > div {
			width: calc(100% - 50px);
			float: right;
			margin-top: 50px;
		}

.bouton-action {
	display: block;
	border-bottom: 1px solid var(--couleurPlaceholder);
	text-align: left;
	margin: 10px 0;
	cursor: pointer;
}

	.bouton-action > div {
		padding: 10px 0;
		display: inline-block;
	}

	.bouton-action img {
		height: 50px;
		float: right;
		margin-top: -7px;
	}

	.bouton-action, .bouton-action a {
		color: black !important;
	}
		.bouton-action:hover, .bouton-action a:hover {
			color: var(--couleur1) !important;
		}

.dpe {
	width: 100%;
	max-width: 250px;
	padding-top: 50px;
}

.interlocuteur {
	text-transform: uppercase;
	position: relative;
	width: 80%;
	padding: 50px 0;
}

	.interlocuteur > div:first-child {
		/* intitulé */
		border-bottom: 1px solid var(--couleur1);
		padding-bottom: 5px;
		font-weight: bold;
		font-size: 1.1em;
		color: var(--couleur1);
	}

	.interlocuteur > div:nth-child(2) {
		/* prenom + nom */
		margin-top: 15px;
	}

	.interlocuteur > div:nth-child(3) {
		/* mobile */
		font-weight: bold;
		font-size: 1.3em;
		margin-top: 10px;
	}

	.interlocuteur > div:nth-child(4) {
		/* photo */
		position: absolute;
		width: 100px;
		height: 100px;
		border-radius: 50px;
		background-color: var(--couleurZoneSaisie);
		top: 50px;
		right: -65px;
		border: 2px solid var(--couleur1);
	}