/* =====================================================================
 * Vandeto Footer Columns
 * Le JS tague :
 *   .vfc-row        sur la ligne footer traitée
 *   .vfc-relayout   si ré-agencement activé
 *   .vfc-n1 / .vfc-n2 / .vfc-n3  selon le nb de colonnes restantes
 *   .vfc-hide       sur les colonnes masquées
 *   .vfc-keep       sur les colonnes conservées
 * En Yellow Pencil, .vfc-yp neutralise tout.
 * ===================================================================== */

:root {
	--vfc-xl-width: 44%;
}

/* --- Masquage des colonnes --- */
html:not(.vfc-yp) .vfc-row > .vfc-hide {
	display: none !important;
}

/* =====================================================================
 * RÉ-AGENCEMENT (relayout)
 * ===================================================================== */

/* Base : la row Bootstrap est déjà en flex-wrap. On sécurise. */
html:not(.vfc-yp) .vfc-row.vfc-relayout {
	display: flex;
	flex-wrap: wrap;
}

/* --- Desktop large (≥ 1200px) --- */
@media (min-width: 1200px) {

	/* Deux blocs restants : poussés aux deux bords, largeur équilibrée */
	html:not(.vfc-yp) .vfc-row.vfc-relayout.vfc-n2 {
		justify-content: space-between !important;
	}
	html:not(.vfc-yp) .vfc-row.vfc-relayout.vfc-n2 > .vfc-keep {
		flex: 0 0 auto !important;
		width: var(--vfc-xl-width) !important;
		max-width: var(--vfc-xl-width) !important;
	}

	/* Un seul bloc : aligné à gauche, largeur lisible */
	html:not(.vfc-yp) .vfc-row.vfc-relayout.vfc-n1 > .vfc-keep {
		flex: 0 0 auto !important;
		width: 50% !important;
		max-width: 50% !important;
	}

	/* Trois blocs : répartis à parts égales */
	html:not(.vfc-yp) .vfc-row.vfc-relayout.vfc-n3 {
		justify-content: space-between !important;
	}
	html:not(.vfc-yp) .vfc-row.vfc-relayout.vfc-n3 > .vfc-keep {
		flex: 0 0 auto !important;
		width: 30% !important;
		max-width: 30% !important;
	}
}

/* --- Tablette (768px → 1199px) : deux par ligne, plus d'air --- */
@media (min-width: 768px) and (max-width: 1199.98px) {
	html:not(.vfc-yp) .vfc-row.vfc-relayout > .vfc-keep {
		flex: 0 0 50% !important;
		max-width: 50% !important;
		margin-bottom: 24px;
	}
	html:not(.vfc-yp) .vfc-row.vfc-relayout.vfc-n1 > .vfc-keep {
		flex-basis: 60% !important;
		max-width: 60% !important;
	}
}

/* --- Mobile (< 768px) : empilé, plein largeur, espacé --- */
@media (max-width: 767.98px) {
	html:not(.vfc-yp) .vfc-row.vfc-relayout > .vfc-keep {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
		margin-bottom: 28px;
	}
	html:not(.vfc-yp) .vfc-row.vfc-relayout > .vfc-keep:last-child {
		margin-bottom: 0;
	}
}