/* 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;
}

/* Séparateurs en forme (réglages « Forme du haut / du bas ») : nuages, vagues, dents de scie, coulures.
   La forme est dessinée à l'intérieur du conteneur, contre son bord, dans la couleur de la section voisine :
   rien ne dépasse, rien n'est rogné. Elle passe sous le contenu (une image peut la chevaucher).
   Le dessin (shapes/*.svg) garde ses proportions, se centre et ne se répète qu'au-delà de sa largeur,
   sans couture. Les dessins sont produits par tools/generer-formes.php. */
.mb-shape {
	position: absolute;
	left: 0;
	right: 0;
	top: -1px; /* recouvre la jointure avec la section voisine */
	z-index: 0;
	height: 80px;
	pointer-events: none;
	background-color: #fff;
	-webkit-mask: var(--mb-shape) repeat-x center top / auto 100%;
	mask: var(--mb-shape) repeat-x center top / auto 100%;
}

/* En bas, le même dessin retourné. */
.mb-shape--bottom {
	top: auto;
	bottom: -1px;
	transform: scaleY(-1);
}

.mb-shape--clouds {
	--mb-shape: url("shapes/clouds.svg");
	height: 190px;
}

.mb-shape--waves {
	--mb-shape: url("shapes/waves.svg");
	height: 80px;
}

.mb-shape--zigzag {
	--mb-shape: url("shapes/zigzag.svg");
	height: 32px;
}

.mb-shape--drips {
	--mb-shape: url("shapes/drips.svg?v=2");
	height: 180px;
}

/* Inversée : la section voisine déborde dans le conteneur. */
.mb-shape--invert.mb-shape--clouds {
	--mb-shape: url("shapes/clouds-inv.svg");
}

.mb-shape--invert.mb-shape--waves {
	--mb-shape: url("shapes/waves-inv.svg");
}

.mb-shape--invert.mb-shape--zigzag {
	--mb-shape: url("shapes/zigzag-inv.svg");
}

.mb-shape--invert.mb-shape--drips {
	--mb-shape: url("shapes/drips-inv.svg?v=2");
}

/* Sur téléphone, les formes sont deux fois moins hautes (sauf hauteur réglée à la main). */
@media (max-width: 767px) {
	.mb-shape--clouds {
		height: 100px;
	}

	.mb-shape--waves {
		height: 40px;
	}

	.mb-shape--zigzag {
		height: 18px;
	}

	.mb-shape--drips {
		height: 100px;
	}
}