﻿.rubrique {
	/* TODO */
}

	.rubrique > div:nth-child(3) {
		text-align: left;
	}

.cms-image-entete {
	width: 100%;
	height: 300px;
	background-position: center;
	background-size: cover
}

.zone-articles-alternes {
	position: relative;
	margin-top: 50px;
}

	.zone-articles-alternes > div:first-child {
		/* Le rectangle "séparateur" */
		position: absolute;
		width: 50%;
		height: 270px;
		/* TODO : la position 1x sur 2 */
		background-color: yellow;
		background-color: var(--couleur1);
		top: -40px;
	}

.article-alterne {
	/* Les articles */
	position: relative;
	height: 300px;
	width: 100%;
	margin-bottom: 50px;
}

	.article-alterne > div {
		display: inline-block;
		width: 50%;
		position: absolute;
	}

	.article-alterne .info-cms {
		/* Les textes */
		padding-top: 80px;
	}

		.article-alterne .info-cms > :first-child {
			/* 1er texte : titre1 */
			font-size: 1.6em;
			font-weight: bold;
		}

		.article-alterne .info-cms > :nth-child(2) {
			/* 2nd texte : titre2 */
			font-size: 1.2em;
			line-height: 1.5em;
			font-weight: 300;
		}

		.article-alterne .info-cms > :nth-child(3) {
			/* 2nd texte : titre2 */
			font-size: 1em;
			font-weight: 300;
			line-height: 1.2em;
			padding-top: 10px;
			white-space: pre-wrap;
		}

	.article-alterne > div:first-child > div {
		/* la zone avec la photo en arrière plan */
		background-size: cover;
		width: 400px;
		height: 300px;
		display: inline-block;
	}

	.article-alterne .complements-info-cms {
		margin: 15px 0;
	}

		.article-alterne .complements-info-cms > div {
			margin-bottom: 5px;
		}

		.article-alterne .complements-info-cms .bouton {
			width: 230px;
			text-align: center;
		}

.zone-articles-alternes:nth-child(2n + 1) > div:first-child {
	/* une fois sur 2, la barre de "séparation" sera déplacée sur la droite */
	right: 0;
}

.zone-articles-alternes:nth-child(2n + 1) > .article-alterne > div:first-child {
	/* une fois sur 2, l'image sera déplacée sur la droite */
	right: 0;
	text-align: right;
}

.zone-articles-alternes:nth-child(2n) > .article-alterne > div:last-child {
	right: 0;
	text-align: right;
}
