/**
 * Boussolio — la coquille.
 *
 * Une grille à trois colonnes qui occupe toute la largeur de l'écran :
 *
 *   ┌──────────┬───────────────────────────┬────────────┐
 *   │ panneau  │                           │  panneau   │
 *   │ gauche   │        contenu            │  droit     │
 *   │ (nav)    │                           │ (contexte) │
 *   └──────────┴───────────────────────────┴────────────┘
 *   ┌────────────────────────────────────────────────────┐
 *   │              barre inférieure                      │
 *   └────────────────────────────────────────────────────┘
 *
 * Choix structurant : sur ordinateur, les panneaux sont de VRAIES COLONNES
 * de grille, pas des blocs superposés en `position: fixed`. Ils ne peuvent
 * donc jamais recouvrir le contenu ni bloquer le défilement — c'est une
 * garantie de mise en page, pas un réglage à surveiller.
 *
 * À l'intérieur de leur colonne, les panneaux sont `sticky` : ils suivent la
 * lecture sans sortir du flux.
 *
 * Sur téléphone, et là seulement, ils deviennent des tiroirs coulissants.
 *
 * @package Boussolio
 */

/* ==========================================================================
   1. Bases
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	/* Le défilement par ancre s'arrête sous la barre supérieure mobile. */
	scroll-padding-top: calc(var(--bo-header) + var(--bo-sp-4));
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bo-surface-2);
	color: var(--bo-text);
	font-family: var(--bo-font);
	font-size: var(--bo-fs-base);
	line-height: var(--bo-lh-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*
 * PAS d'`overflow-x: hidden` sur `body`.
 *
 * Ce garde-fou, courant et d'apparence inoffensive, a un effet de bord
 * mesuré : quand un axe passe en `hidden`, l'autre bascule de `visible` à
 * `auto`, et `body` DEVIENT un conteneur de défilement. Les animations
 * liées au défilement se calent alors sur ce faux conteneur au lieu du
 * document : leur temps devient négatif et elles ne démarrent jamais.
 *
 * Constaté à la mesure : la dernière section de la page d'accueil restait à
 * opacité 0 en permanence, même défilement au maximum — donc invisible pour
 * le visiteur, alors qu'elle occupait sa place.
 *
 * On s'en passe : l'absence de débordement horizontal a été vérifiée à 360,
 * 390, 414, 768, 1024, 1280 et 1440 px — zéro élément sortant. Les tiroirs
 * sont en `position: fixed`, qui ne produit jamais de débordement. C'est la
 * mise en page qui garantit l'absence de barre horizontale, pas un rognage.
 */

/* Empêche une image ou un tableau trop large de faire déborder la page. */
img,
video,
canvas,
svg,
iframe {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   2. Accès au clavier
   ========================================================================== */

/* Lien d'évitement : premier élément focalisable de la page. */
.bo-skip {
	position: absolute;
	left: var(--bo-sp-4);
	top: var(--bo-sp-4);
	z-index: calc(var(--bo-z-drawer) + 10);
	padding: var(--bo-sp-3) var(--bo-sp-5);
	/*
	 * `--bo-navy` s'éclaircit en thème sombre : du blanc dessus tombait à
	 * 2,16:1. `--bo-navy-deep` reste sombre dans les deux thèmes — 15,97:1
	 * en clair, 18,72:1 en sombre.
	 */
	background: var(--bo-navy-deep);
	color: #fff;
	border-radius: var(--bo-r-md);
	font-weight: 700;
	text-decoration: none;
	/* Hors écran tant qu'il n'a pas le focus, mais jamais display:none —
	   un élément masqué ainsi n'est pas focalisable. */
	transform: translateY(-200%);
	transition: transform var(--bo-dur) var(--bo-ease);
}

.bo-skip:focus {
	transform: translateY(0);
}

/*
 * Anneau de focus visible et homogène.
 * `:focus-visible` seulement : un clic à la souris ne doit pas dessiner
 * d'anneau, mais la tabulation doit toujours en montrer un.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--bo-coral);
	outline-offset: 2px;
	border-radius: var(--bo-r-sm);
}

/* ==========================================================================
   3. La grille
   ========================================================================== */

/*
 * `.wp-site-blocks` est le conteneur que WordPress place autour de tout le
 * contenu d'un thème de blocs. C'est lui qui porte la grille.
 */
.wp-site-blocks {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"entete"
		"contenu";
	min-height: 100dvh;
	/* Laisse la place à la barre inférieure, qui est fixée. */
	padding-bottom: var(--bo-bottombar);
}

/*
 * Enveloppe transparente.
 * `display: contents` fait disparaitre la boite elle-meme : ce que WordPress
 * ajoute autour de la barre inferieure ne devient donc jamais une cellule de
 * la grille, et n'ouvre pas de rangee vide.
 */
.bo-chrome {
	display: contents;
}

/* Le contenu principal. */
.bo-main {
	grid-area: contenu;
	min-width: 0; /* sans cela, un tableau large étire toute la grille */
	padding: var(--bo-sp-5) var(--bo-sp-4) var(--bo-sp-8);
}

/* Les panneaux sont des tiroirs tant qu'on n'a pas la place : voir §5. */
.bo-rail {
	min-width: 0;
}

/* ---- À partir de 1024 px : le panneau de navigation devient une colonne -- */
@media (min-width: 64rem) {
	.wp-site-blocks {
		grid-template-columns: var(--bo-rail-left) minmax(0, 1fr);
		grid-template-areas: "railgauche contenu";
	}

	.bo-rail--left {
		grid-area: railgauche;
	}

	.bo-main {
		padding: var(--bo-sp-6) var(--bo-sp-6) var(--bo-sp-9);
	}
}

/* ---- À partir de 1360 px : le panneau contextuel apparaît -------------- */
@media (min-width: 85rem) {
	.wp-site-blocks {
		grid-template-columns:
			var(--bo-rail-left)
			minmax(0, 1fr)
			var(--bo-rail-right);
		grid-template-areas: "railgauche contenu raildroit";
	}

	.bo-rail--right {
		grid-area: raildroit;
	}
}

/* ---- Très grand écran : on borne la lecture, on ne l'étire pas --------- */
/*
 * Correction d'une erreur de conception relevée à la mesure : donner `1fr`
 * aux panneaux leur faisait absorber tout l'espace disponible — 4 248 px de
 * large sur un très grand écran, ce qui est absurde.
 *
 * Les panneaux gardent donc leur largeur fixe, et c'est le REMPLISSAGE de la
 * colonne centrale qui grandit. Le texte reste centré et lisible, les
 * panneaux restent des panneaux.
 */
@media (min-width: 120rem) {
	.bo-main {
		padding-inline: max(var(--bo-sp-6), (100% - 92rem) / 2);
	}
}

/* ==========================================================================
   4. Panneaux — apparence en colonne
   ========================================================================== */

.bo-rail--left {
	background: var(--bo-navy-deep);
	color: rgba(255, 255, 255, 0.86);
	border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.bo-rail--right {
	background: var(--bo-surface);
	border-left: 1px solid var(--bo-border);
}

/*
 * Contenu collant à l'intérieur du panneau.
 * `max-height` + `overflow-y:auto` : si la navigation est plus haute que
 * l'écran, elle défile dans son panneau au lieu d'être coupée.
 */
.bo-rail__inner {
	position: sticky;
	top: 0;
	max-height: 100dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--bo-sp-5) var(--bo-sp-4);
	display: flex;
	flex-direction: column;
	gap: var(--bo-sp-5);
	/* Barre de défilement discrète. */
	scrollbar-width: thin;
}

.bo-rail--left .bo-rail__inner {
	scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

/* ---- Identité en tête du panneau gauche ---- */
.bo-rail__brand {
	display: flex;
	align-items: center;
	gap: var(--bo-sp-3);
	text-decoration: none;
	color: #fff;
	font-weight: 800;
	font-size: var(--bo-fs-lg);
	letter-spacing: -0.02em;
	padding-block: var(--bo-sp-2);
}

/*
 * Le logo garde SES proportions.
 *
 * Défaut constaté en production : le logo de Boussolio est un bandeau large
 * (680 x 156). Le forcer en carré de 32 x 32 l'écrasait jusqu'à le rendre
 * illisible. On fixe donc la hauteur et on laisse la largeur suivre.
 */
.bo-rail__brand img {
	height: 30px;
	width: auto;
	max-width: 168px;
	object-fit: contain;
	flex: 0 0 auto;
}

/*
 * Quand un logo est défini, il porte déjà le nom de la marque : le répéter en
 * texte à côté ferait doublon. Le nom reste dans le balisage pour les lecteurs
 * d'écran et pour le référencement, simplement masqué à l'œil.
 */
.bo-rail__brand--logo .bo-rail__nom,
.bo-header__marque--logo .bo-header__nom {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bo-header__marque img {
	height: 26px;
	width: auto;
	max-width: 150px;
	object-fit: contain;
}

/* ---- Recherche ---- */
.bo-rail__search {
	position: relative;
}

.bo-rail__search input[type="search"] {
	width: 100%;
	padding: var(--bo-sp-3) var(--bo-sp-3) var(--bo-sp-3) 2.4rem;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--bo-r-md);
	color: #fff;
	font: inherit;
	font-size: var(--bo-fs-sm);
}

.bo-rail__search input::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.bo-rail__search svg {
	position: absolute;
	left: 0.7rem;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	opacity: 0.6;
	pointer-events: none;
}

/* ---- Navigation ---- */
.bo-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bo-nav__titre {
	font-size: var(--bo-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: rgba(255, 255, 255, 0.45);
	padding: var(--bo-sp-3) var(--bo-sp-3) var(--bo-sp-2);
	margin: 0;
}

.bo-nav__lien {
	display: flex;
	align-items: center;
	gap: var(--bo-sp-3);
	padding: var(--bo-sp-3);
	border-radius: var(--bo-r-md);
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	font-size: var(--bo-fs-sm);
	font-weight: 600;
	line-height: 1.3;
	/* Seuls `background` et `color` changent : aucun recalcul de mise en page. */
	transition: background var(--bo-dur-fast) var(--bo-ease),
	            color var(--bo-dur-fast) var(--bo-ease);
}

.bo-nav__lien:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

/*
 * Indicateur de la section consultée.
 * Le trait corail à gauche est doublé d'un fond et d'une graisse plus forte :
 * l'information n'est jamais portée par la seule couleur.
 */
.bo-nav__lien[aria-current="page"],
.bo-nav__lien.est-actif {
	background: rgba(255, 107, 74, 0.14);
	color: #fff;
	font-weight: 700;
	box-shadow: inset 3px 0 0 0 var(--bo-coral);
}

.bo-nav__icone {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	opacity: 0.85;
}

.bo-nav__compte {
	margin-left: auto;
	font-size: var(--bo-fs-xs);
	font-weight: 700;
	color: rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.08);
	border-radius: var(--bo-r-pill);
	padding: 1px 8px;
}

/* ---- Bas du panneau ---- */
.bo-rail__pied {
	margin-top: auto;
	padding-top: var(--bo-sp-4);
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	font-size: var(--bo-fs-xs);
	color: rgba(255, 255, 255, 0.5);
	display: flex;
	flex-direction: column;
	gap: var(--bo-sp-2);
}

.bo-rail__pied a {
	color: rgba(255, 255, 255, 0.66);
	text-decoration: none;
}

.bo-rail__pied a:hover {
	color: #fff;
	text-decoration: underline;
}

/* ---- Panneau droit ---- */
.bo-rail--right .bo-rail__inner {
	padding: var(--bo-sp-5) var(--bo-sp-4);
	gap: var(--bo-sp-5);
}

.bo-aside__titre {
	font-size: var(--bo-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--bo-text-faint);
	margin: 0 0 var(--bo-sp-3);
}

/* ==========================================================================
   5. Téléphone et tablette — les panneaux deviennent des tiroirs
   ========================================================================== */

/* En-tête mobile : visible seulement sous 1024 px (voir §3). */
.bo-header {
	grid-area: entete;
	position: sticky;
	top: 0;
	z-index: var(--bo-z-header);
	height: var(--bo-header);
	display: flex;
	align-items: center;
	gap: var(--bo-sp-3);
	padding-inline: var(--bo-sp-4);
	background: color-mix(in srgb, var(--bo-surface) 94%, transparent);
	/* Légère transparence : le contenu se devine derrière, sans nuire au texte. */
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--bo-border);
}

/* Repli si `backdrop-filter` n'est pas pris en charge : fond opaque. */
@supports not (backdrop-filter: blur(1px)) {
	.bo-header {
		background: var(--bo-surface);
	}
}

.bo-header__marque {
	display: flex;
	align-items: center;
	gap: var(--bo-sp-2);
	font-weight: 800;
	color: var(--bo-navy);
	text-decoration: none;
	margin-right: auto;
}

.bo-bouton-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 44 × 44 px : cible tactile minimale recommandée. */
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--bo-r-md);
	color: var(--bo-text-soft);
	cursor: pointer;
	transition: background var(--bo-dur-fast) var(--bo-ease),
	            color var(--bo-dur-fast) var(--bo-ease);
}

.bo-bouton-icone:hover {
	background: var(--bo-surface-3);
	color: var(--bo-navy);
}

.bo-rail--left .bo-bouton-icone {
	color: rgba(255, 255, 255, 0.75);
}

.bo-rail--left .bo-bouton-icone:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

/*
 * Les tiroirs.
 *
 * Sous le point de bascule, le panneau sort du flux et glisse par-dessus.
 * `visibility` accompagne `transform` : sans elle, un panneau translaté hors
 * écran reste focalisable à la tabulation — un piège classique pour la
 * navigation au clavier.
 */
@media (max-width: 63.999rem) {
	.bo-rail {
		position: fixed;
		top: 0;
		bottom: 0;
		z-index: var(--bo-z-drawer);
		width: min(86vw, 21rem);
		visibility: hidden;
		transition: transform var(--bo-dur) var(--bo-ease-out),
		            visibility 0s linear var(--bo-dur);
	}

	.bo-rail--left {
		left: 0;
		transform: translateX(-100%);
	}

	.bo-rail--right {
		right: 0;
		transform: translateX(100%);
		box-shadow: var(--bo-shadow-3);
	}

	.bo-rail[data-ouvert="true"] {
		transform: translateX(0);
		visibility: visible;
		transition: transform var(--bo-dur) var(--bo-ease-out),
		            visibility 0s;
	}

	.bo-rail__inner {
		max-height: 100dvh;
		padding-bottom: calc(var(--bo-bottombar) + var(--bo-sp-5));
	}
}

/* Sous 1360 px, le panneau droit reste un tiroir même sur tablette large. */
@media (min-width: 64rem) and (max-width: 84.999rem) {
	.bo-rail--right {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		z-index: var(--bo-z-drawer);
		width: min(86vw, 22rem);
		visibility: hidden;
		transform: translateX(100%);
		box-shadow: var(--bo-shadow-3);
		transition: transform var(--bo-dur) var(--bo-ease-out),
		            visibility 0s linear var(--bo-dur);
	}

	.bo-rail--right[data-ouvert="true"] {
		transform: translateX(0);
		visibility: visible;
		transition: transform var(--bo-dur) var(--bo-ease-out), visibility 0s;
	}
}

/* Voile derrière un tiroir ouvert. */
.bo-voile {
	position: fixed;
	inset: 0;
	z-index: var(--bo-z-overlay);
	background: rgba(13, 24, 48, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--bo-dur) var(--bo-ease),
	            visibility 0s linear var(--bo-dur);
	border: 0;
	padding: 0;
	cursor: pointer;
}

.bo-voile[data-actif="true"] {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--bo-dur) var(--bo-ease), visibility 0s;
}

/* Sur grand écran, aucun tiroir n'existe : le voile ne doit jamais apparaître. */
@media (min-width: 85rem) {
	.bo-voile {
		display: none;
	}
}

/* ==========================================================================
   6. Barre inférieure
   ========================================================================== */

.bo-barre-basse {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--bo-z-bottom);
	height: var(--bo-bottombar);
	display: flex;
	align-items: center;
	gap: var(--bo-sp-2);
	padding-inline: var(--bo-sp-3);
	background: color-mix(in srgb, var(--bo-surface) 94%, transparent);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-top: 1px solid var(--bo-border);
	/* Respecte la zone sûre des téléphones à encoche. */
	padding-bottom: env(safe-area-inset-bottom, 0);
	height: calc(var(--bo-bottombar) + env(safe-area-inset-bottom, 0px));
}

@supports not (backdrop-filter: blur(1px)) {
	.bo-barre-basse {
		background: var(--bo-surface);
	}
}

/*
 * Progression de lecture.
 *
 * Pilotée par `animation-timeline: scroll()` — donc par le compositeur, sans
 * une ligne de JavaScript et sans écouteur de défilement.
 * Repli si non pris en charge : voir animations.css.
 */
.bo-progression {
	position: absolute;
	top: -2px;
	left: 0;
	height: 3px;
	width: 100%;
	transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--bo-coral), var(--bo-coral-dark));
	transform: scaleX(0);
}

.bo-barre-basse__groupe {
	display: flex;
	align-items: center;
	gap: var(--bo-sp-1);
}

.bo-barre-basse__groupe--fin {
	margin-left: auto;
}

.bo-barre-basse__bouton {
	display: inline-flex;
	align-items: center;
	gap: var(--bo-sp-2);
	min-height: 40px;
	padding: 0 var(--bo-sp-3);
	background: transparent;
	border: 0;
	border-radius: var(--bo-r-md);
	color: var(--bo-text-soft);
	font: inherit;
	font-size: var(--bo-fs-sm);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--bo-dur-fast) var(--bo-ease),
	            color var(--bo-dur-fast) var(--bo-ease);
}

.bo-barre-basse__bouton:hover {
	background: var(--bo-surface-3);
	color: var(--bo-navy);
}

.bo-barre-basse__bouton--primaire {
	background: var(--bo-coral);
	color: #fff;
}

.bo-barre-basse__bouton--primaire:hover {
	background: var(--bo-coral-dark);
	color: #fff;
}

/* Pastille de comptage (favoris, comparateur). */
.bo-pastille {
	display: inline-grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding-inline: 5px;
	border-radius: var(--bo-r-pill);
	background: var(--bo-coral);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
}

.bo-pastille:empty,
.bo-pastille[data-valeur="0"] {
	display: none;
}

/*
 * Sur téléphone, les libellés disparaissent : seules les icônes restent.
 * Le nom accessible est conservé par `aria-label`, donc rien n'est perdu
 * pour un lecteur d'écran.
 */
@media (max-width: 34rem) {
	.bo-barre-basse__bouton span:not(.bo-pastille) {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.bo-barre-basse__bouton {
		min-width: 44px;
		justify-content: center;
	}
}

/* « Dernier article consulté » : sans intérêt sur petit écran. */
@media (max-width: 48rem) {
	.bo-barre-basse__reprendre {
		display: none;
	}
}

.bo-barre-basse__reprendre {
	display: inline-flex;
	align-items: center;
	gap: var(--bo-sp-2);
	max-width: 26rem;
	overflow: hidden;
	color: var(--bo-text-faint);
	font-size: var(--bo-fs-xs);
	text-decoration: none;
}

.bo-barre-basse__reprendre strong {
	color: var(--bo-navy);
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ==========================================================================
   7. Contenu — largeur de lecture
   ========================================================================== */

/*
 * Les blocs WordPress ordinaires se calent sur une largeur de lecture
 * confortable ; `alignwide` et `alignfull` respirent davantage.
 */
.bo-contenu > :where(*:not(.alignwide):not(.alignfull)) {
	max-width: var(--bo-content-max);
	margin-inline: auto;
}

.bo-contenu > .alignwide {
	max-width: 78rem;
	margin-inline: auto;
}

.bo-contenu > .alignfull {
	max-width: none;
	margin-inline: 0;
}

/* Un tableau ne doit jamais élargir la page : il défile dans son cadre. */
.bo-contenu :where(table) {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   9. Affichage des éléments de coquille — bloc final et volontairement dernier
   ==========================================================================

   Ces règles closent la feuille À DESSEIN.

   Une requête média n'ajoute aucune spécificité : entre deux règles de même
   poids, c'est la DERNIÈRE écrite qui gagne. Placées plus haut, ces règles
   étaient écrasées par les déclarations d'apparence qui les suivaient — c'est
   exactement le défaut relevé à la mesure : l'en-tête mobile restait affiché
   sur grand écran et créait une colonne fantôme dans la grille, tandis que le
   panneau droit restait masqué alors qu'il avait sa colonne.

   Toute nouvelle règle d'affichage de la coquille vient ici, à la fin.
   ========================================================================== */

/* En-tête compact : uniquement sous 1024 px. */
.bo-header { display: flex; }

@media (min-width: 64rem) {
	/* Au-delà, sa fonction est reprise par le panneau de navigation. */
	.bo-header { display: none; }
}

/*
 * Le panneau droit est TOUJOURS affiché.
 * Ce qui change selon la largeur, c'est son mode : tiroir sous 1360 px
 * (masqué par `visibility` et `transform`), colonne de grille au-delà.
 * Le masquer par `display` cassait le tiroir sur téléphone.
 */
.bo-rail--right { display: block; }

/* ==========================================================================
   8. Impression
   ========================================================================== */

@media print {
	.bo-rail,
	.bo-barre-basse,
	.bo-header,
	.bo-voile {
		display: none !important;
	}

	.wp-site-blocks {
		display: block;
		padding: 0;
	}

	.bo-main {
		padding: 0;
	}
}