/* Conteneur */
.mb-container {
	position: relative;
	width: 100%;
	/* Permet au contenu d'occuper toute la hauteur minimale (centrage vertical). */
	display: flex;
	flex-direction: column;
}

.mb-container__inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	/* Partage de la place entre conteneurs enfants, réglé avec la direction (voir plus bas). */
	--mb-child-flex: 0 1 auto;
	margin-left: auto;
	margin-right: auto;
}

.mb-container--full > .mb-container__inner {
	max-width: none;
}

/* Un conteneur enfant occupe toute la hauteur de sa case : dans une ligne,
   des cartes côte à côte ont la même hauteur (fond, bordure, ombre compris). */
.mb-w-container {
	--mb-display: flex; /* repris par « Masquer sur cet appareil » quand l'élément redevient visible */
	display: flex;
	flex-direction: column;
}

.mb-w-container > .mb-container {
	flex: 1 1 auto;
}

/* Dans une ligne, les conteneurs enfants se partagent la place par défaut
   (--mb-child-flex : 1 1 0). En colonne, ils gardent la hauteur de leur contenu
   (0 1 auto) : sinon ils se partageraient la hauteur en trop d'une case étirée.
   Le réglage « Largeur du conteneur » remplace ce comportement ; il peut se
   resserrer pour laisser la place aux espacements (50 % + 50 % + espacement). */
/* :where() = priorité nulle, pour que le réglage de largeur l'emporte toujours. */
:where(.mb-container__inner > .mb-w-container) {
	flex: var(--mb-child-flex);
	min-width: 0;
}

/* Superposition de couleur sur le fond (réglage « Superposition »). */
.mb-container::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
}

.mb-container__inner {
	position: relative;
	z-index: 1;
}