/*
 * SJ Régie — réservation de hauteur des emplacements.
 *
 * Chaque emplacement réserve la hauteur de sa plus grande annonce probable sur
 * l'écran courant : l'annonce arrive après le texte, et sans réservation elle
 * le pousserait vers le bas (CLS). Un emplacement que la régie n'a pas rempli
 * reçoit `is-vide` et rend sa place.
 *
 * La mention « Publicité » distingue l'annonce du contenu éditorial : la loi
 * (LCEN, art. 20) exige qu'une publicité soit identifiable comme telle.
 */

.sj-regie {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 1.5rem auto;
	max-width: 100%;
	overflow: hidden;
	text-align: center;
}

.sj-regie::before {
	content: "Publicité";
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.6875rem;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.55;
}

.sj-regie__slot {
	max-width: 100%;
}

.sj-regie__slot iframe {
	display: block;
	margin: 0 auto;
	max-width: 100%;
}

/* Hauteurs réservées : celle de l'annonce + 1rem pour la mention. */
.sj-regie--haut,
.sj-regie--haut-accueil {
	min-height: calc(100px + 1rem);
}

.sj-regie--article {
	min-height: calc(250px + 1rem);
}

.sj-regie--fin_article {
	min-height: calc(250px + 1rem);
}

.sj-regie--liste-large,
.sj-regie--liste-mobile {
	grid-column: 1 / -1;
}

.sj-regie--liste-large {
	display: none;
}

.sj-regie--liste-mobile {
	min-height: calc(250px + 1rem);
}

@media (min-width: 768px) {
	.sj-regie--haut,
	.sj-regie--haut-accueil {
		min-height: calc(90px + 1rem);
	}

	.sj-regie--article {
		min-height: calc(280px + 1rem);
	}

	.sj-regie--liste-large {
		display: flex;
		min-height: calc(90px + 1rem);
	}

	.sj-regie--liste-mobile {
		display: none;
	}
}

@media (min-width: 1024px) {
	.sj-regie--haut-accueil {
		min-height: calc(250px + 1rem);
	}
}

/* Rien de servi : l'emplacement disparaît, mention comprise. */
.sj-regie.is-vide {
	display: none;
}

/* Filet : une image de créa ne dépasse jamais sa boîte. */
.sj-regie__slot img {
	max-width: 100%;
	height: auto;
}

/* Colonne : ordinateur seulement, collante pendant la lecture. */
.sj-regie--colonne {
	display: none;
}

@media (min-width: 1200px) {
	.sj-regie--colonne {
		display: flex;
		position: sticky;
		top: 1rem;
		min-height: calc(600px + 1rem);
		margin: 0 auto;
	}

	/*
	 * Divi : la barre latérale fait 20,875 % du conteneur, soit moins de
	 * 300 px. On la porte à 340 px, et le conteneur passe en flex pour qu'elle
	 * soit aussi haute que l'article (sinon rien à coller).
	 */
	.sj-regie-colonne.et_right_sidebar #content-area {
		display: flex;
		align-items: stretch;
	}

	.sj-regie-colonne.et_right_sidebar #content-area::before,
	.sj-regie-colonne.et_right_sidebar #content-area::after {
		display: none;
	}

	.sj-regie-colonne.et_right_sidebar #left-area {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}

	.sj-regie-colonne.et_right_sidebar #sidebar {
		flex: 0 0 340px;
		width: 340px;
	}

	.sj-regie-colonne.et_right_sidebar #main-content .container::before {
		right: 340px !important;
	}

	.sj-regie-colonne #sidebar .sj-regie-widget {
		position: sticky;
		top: 1rem;
	}
}