/* Couche de compatibilité Bricks ↔ design system Plazur.
 * Générique, réutilisable pour toute page migrée : aucune règle propre à Soufflage.
 * Chaque règle neutralise un défaut Bricks mesuré comme conflictuel.
 * Aucun style Plazur n'est redéfini.
 *
 * Principe : les règles de FLUX utilisent :where(), dont la spécificité est nulle.
 * Le CSS Plazur (une classe) l'emporte donc systématiquement, sans !important
 * ni surcharge à maintenir page par page.
 */

/* ── A. Largeur du conteneur racine ─────────────────────────────────────────
 * Bricks : .brxe-container { width:1100px } — largeur FIXE, sans max-width.
 * Sur une page classique, le contenu est borné à 1100 px par le conteneur du
 * thème (marges auto). Une page Bricks n'a pas ce wrapper : on reproduit la
 * contrainte en la rendant fluide.
 * Mesuré avant : pilote 1180 px contre 1100 px sur l'original.
 * Le sélecteur ne présuppose pas le type d'élément Bricks : selon la balise
 * du renderer, la racine devient un container (<article>) ou un block (<div>).
 */
.plz-migrated {
	width: auto;
	max-width: 1100px;
}

/* ── A bis. Centrage du conteneur racine ────────────────────────────────────
 * Le rendu du shortcode était placé dans le conteneur du thème, qui le centrait.
 * La racine Bricks remplace ce conteneur : sans marges automatiques, une page
 * dont le CSS ne centre pas lui-même sa racine se retrouve collée à gauche.
 * Mesuré : contenu décalé de 170 px sur « Recherche & développement », largeur
 * pourtant identique (1100 px), donc invisible à une comparaison de dimensions.
 * :where() laisse la main à toute page qui définit déjà ses propres marges,
 * ainsi qu'au margin-inline:auto que Bricks pose sur .brxe-container.
 */
:where(.plz-migrated) {
	margin-inline: auto;
}

/* ── B. Largeur des conteneurs imbriqués ────────────────────────────────────
 * Même width:1100px appliqué à TOUS les .brxe-container, y compris les <ul>,
 * <li> et <figure> convertis : débordement horizontal dès que le viewport est
 * plus étroit. Mesuré avant : scrollWidth 1145 px pour un viewport de 390 px.
 */
:where(.plz-migrated) :where(.brxe-container) {
	width: auto;
	max-width: none;
	/* Bricks pose aussi margin-left/right:auto sur .brxe-container. Combiné à
	 * width:auto, un conteneur devenu élément de grille se rétracte à son contenu
	 * et se centre dans sa piste au lieu de l'occuper.
	 * Mesuré : carte de 206 px dans une piste de 420 px. */
	margin-left: 0;
	margin-right: 0;
}

/* ── C. Rétablissement du flux normal ───────────────────────────────────────
 * Bricks : .brxe-section, .brxe-container et .brxe-block sont
 * { display:flex; flex-direction:column; align-items:flex-start }.
 * Le CSS Plazur attend le flux normal (block) ou une grille explicite.
 * Mesuré avant : hero à 602 px au lieu de 532 px (les deux boutons inline-flex
 * s'empilaient au lieu de se placer côte à côte) et cartes non étirées.
 * flex-direction est réinitialisé aussi : une règle Plazur qui pose display:flex
 * sans direction attend « row », alors que Bricks impose « column ».
 * flex-wrap aussi : Bricks pose « wrap », ce qui faisait passer badge et texte à la ligne.
 * Mesuré : cartes d'étapes à 162 puis 190 px au lieu de 130, contenu empilé au lieu d'être en ligne.
 * :where() ramène la spécificité à zéro : display:grid de la grille de cartes,
 * inline-flex de un sur-titre, etc. reprennent naturellement la main.
 */
:where(.plz-migrated, .plz-migrated *):where(.brxe-section, .brxe-container, .brxe-block) {
	display: block;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: initial;
}