/*
Theme Name: Mon Babyfoot
Description: Thème enfant GeneratePress de mon-babyfoot.info, maquette A4 « Le Terrain » sur fond neutre : surfaces blanches, vert sauge adouci, bandeaux étroits de tapis avec les lignes du terrain, barres de jeu et couleurs d'équipe (rouge enfant, bleu adulte, vert pour tous), balle blanche, Archivo et Inter hébergées, thème sombre anthracite suivant le système (sans bouton). Styles de blocs pour composer l'accueil en blocs natifs, peau des blocs Fox Blocks. Socle Fox embarqué (fox-socle/). Présentation seulement : aucun contenu.
Author: Fox
Template: generatepress
Version: 1.0.1
Fox Socle: 1.3.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mon-babyfoot-theme
*/

/*
 * Colours: ONLY the GeneratePress palette of inc/site.php, through its
 * variables. The night palette is printed from the same file. No colour is
 * written in this file: changing the palette never touches it.
 *   --contrast ink, --contrast-2 muted, --contrast-3 rule, --base white
 *   surfaces (header, cards), --base-3 the page, --accent sage (links,
 *   buttons), --on-accent, --accent-2 / --accent-3 teams as text,
 *   --terrain felt, --sur-terrain text and lines on it, --pastille-enfant /
 *   --pastille-adulte badge fills, --sur-pastille, --balle white ball.
 * --base-2 is never read: the FoxPilot charter writes base and base-3.
 * The field lines are a mask: its own colour does not show, the palette
 * paints it. The players of the rods are gradients in the team colour.
 */

:root {
	--mbf-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
	--mbf-body: "Inter", system-ui, sans-serif;
	--mbf-r: 10px;
	--mbf-rl: 16px;
	--mbf-lines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600' fill='none' stroke='%23000' stroke-width='3'%3E%3Cpath d='M30 30h1140v540H30zM600 30v540M30 170h150v260H30M30 235h60v130H30M1170 170h-150v260h150M1170 235h-60v130h60'/%3E%3Ccircle cx='600' cy='300' r='92'/%3E%3C/svg%3E");
}

/* The socle passes the palette and the fonts to Fox Blocks and Fox
   Affiliate. Kept here, by choice of the skin: the rounder corners. */
body {
	--fxb-radius-sm: 6px;
	--fxb-radius-md: var(--mbf-r);
	--fxb-radius-lg: var(--mbf-rl);
	--team: var(--accent);
	--team-fill: var(--terrain);
	background: var(--base-3);
	color: var(--contrast);
	font-family: var(--mbf-body);
	font-size: 17px;
	line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.main-title,
.mbf-qui,
.main-navigation .main-nav ul li a,
.menu-toggle {
	font-family: var(--mbf-display);
}

h1, h2, h3, h4 {
	font-weight: 800;
	font-stretch: 108%;
	line-height: 1.12;
	letter-spacing: -0.01em;
	text-wrap: balance;
	color: var(--contrast);
}

h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

a { text-underline-offset: 0.2em; }

:focus-visible {
	outline: 3px solid var(--accent-3);
	outline-offset: 2px;
}

::selection {
	background: var(--accent);
	color: var(--on-accent);
}

/* ---- Teams: red for children, blue for grown-ups, green for everyone ---- */

.pour-enfant, .tag-pour-enfant { --team: var(--accent-2); --team-fill: var(--pastille-enfant); }
.pour-adulte, .tag-pour-adulte { --team: var(--accent-3); --team-fill: var(--pastille-adulte); }
.pour-tous, .tag-pour-tous { --team: var(--accent); --team-fill: var(--terrain); }

.mbf-qui,
.is-style-mbf-pastille a {
	display: inline-block;
	margin: 0 0 10px;
	padding: 6px 10px 5px;
	border-radius: 999px;
	background: var(--team-fill);
	color: var(--sur-pastille);
	font-size: 0.75rem;
	font-weight: 700;
	font-stretch: 85%;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}

.is-style-mbf-pastille {
	font-size: 0;
	margin: 0;
}

.is-style-mbf-pastille .wp-block-post-terms__separator { display: none; }

.is-style-mbf-pastille a {
	margin: 0 6px 0 0;
	font-family: var(--mbf-display);
}

.is-style-mbf-pastille a:hover { color: var(--sur-pastille); text-decoration: underline; }

/* ---- Header ---- */

.site-header {
	border-bottom: 1px solid var(--contrast-3);
}

.inside-header {
	padding-top: 14px;
	padding-bottom: 14px;
}

.site-branding {
	position: relative;
	min-height: 46px;
	padding-left: 58px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.main-title {
	font-size: 1.375rem;
	font-weight: 800;
	font-stretch: 115%;
	line-height: 1.05;
}

.main-title a { text-decoration: none; }

.mbf-logo {
	position: absolute;
	left: 0;
	top: 50%;
	width: 46px;
	height: 46px;
	margin-top: -23px;
	object-fit: contain;
}

.site-description {
	margin-top: 4px;
	font-size: 0.8125rem;
	line-height: 1.3;
}

.mbf-night { display: none; }

@media (prefers-color-scheme: dark) {
	.mbf-day { display: none; }
	.mbf-night { display: block; }
}

.main-navigation .main-nav ul li a {
	padding-left: 12px;
	padding-right: 12px;
	line-height: 40px;
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 700;
}

.main-navigation .main-nav > ul {
	gap: 2px;
}

.main-navigation .main-nav ul ul {
	border: 1px solid var(--contrast-3);
	border-radius: var(--mbf-r);
	padding: 6px;
}

.inside-header .mobile-menu-control-wrapper button.menu-toggle,
.main-navigation .inside-navigation button.menu-toggle {
	align-items: center;
	flex: none;
	width: auto;
	white-space: nowrap;
	gap: 8px;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--accent);
	color: var(--on-accent);
	font: 700 0.9375rem/1 var(--mbf-display);
}

.inside-header .mobile-menu-control-wrapper button.menu-toggle:is(:hover, :focus),
.main-navigation .inside-navigation button.menu-toggle:is(:hover, :focus) {
	background: var(--contrast);
	color: var(--base-3);
}

@media (max-width: 768px) {
	.inside-header .mobile-menu-control-wrapper button.menu-toggle,
	.main-navigation.toggled .inside-navigation button.menu-toggle {
		display: inline-flex;
	}
}

/* ---- Content: reading column ---- */

.one-container .site-content {
	padding-top: 36px;
	padding-bottom: 64px;
}

.single .inside-article,
body.page:not(.mbf-home) .inside-article {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.entry-title {
	font-stretch: 112%;
	margin-bottom: 0;
}

.entry-header .entry-meta {
	margin-top: 14px;
	font-size: 0.875rem;
}

.entry-content > * + * { margin-top: 1.2em; }

.entry-content > :is(h2, h3) { margin-top: 2em; margin-bottom: 0; }

.entry-content p,
.entry-content ul,
.entry-content ol { margin-bottom: 0; }

.entry-content img,
.featured-image img,
.post-image img {
	border-radius: var(--mbf-rl);
}

.featured-image.page-header-image-single {
	margin-top: 24px;
}

.featured-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.entry-content figcaption,
.wp-element-caption {
	margin-top: 6px;
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--contrast-2);
	text-align: left;
}

.entry-content figcaption a { color: var(--contrast-2); }

.is-style-mbf-chapo {
	font-size: 1.1875rem;
	color: var(--contrast-2);
}

.is-style-mbf-surtitre {
	font-family: var(--mbf-display);
	font-size: 0.8125rem;
	font-weight: 700;
	font-stretch: 85%;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
}

/* The underline of the mock-up's title: the sage at 55 %. */
.mbf-surligne {
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
	text-decoration-thickness: 0.14em;
	text-decoration-skip-ink: none;
	text-underline-offset: 0.12em;
}

/* Buttons: sage pills; the « Contour » style is the ghost one. */
.wp-block-button__link,
.wp-element-button {
	border-radius: 999px;
	padding: 13px 20px;
	background: var(--accent);
	color: var(--on-accent);
	border: 2px solid var(--accent);
	font-family: var(--mbf-display);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	background: var(--contrast);
	border-color: var(--contrast);
	color: var(--base-3);
}

.is-style-mbf-contour a.wp-block-button__link:not(.has-background) {
	background: transparent;
	color: var(--contrast);
	border-color: var(--contrast);
}

.is-style-mbf-contour a.wp-block-button__link:not(.has-background):hover {
	background: var(--contrast);
	color: var(--base-3);
}

/* Separator « Barre de jeu »: the rod, its handle and four players, drawn
   with gradients in the team colour (no image, no fixed colour). */
.entry-content hr.wp-block-separator.is-style-mbf-barre,
hr.is-style-mbf-barre {
	width: auto;
	max-width: 360px;
	height: 44px;
	margin: 56px auto;
	border: 0;
	border-right: 14px solid var(--contrast);
	border-radius: 0 7px 7px 0;
	opacity: 1;
	--nb: 4;
}

hr.is-style-mbf-barre,
.is-style-mbf-barres > li::after {
	--w: calc(92% / var(--nb, 3));
	background:
		radial-gradient(circle 6px at 50% 50%, var(--team) 92%, transparent 100%) 2% 1px / var(--w) 13px repeat-x,
		linear-gradient(90deg, transparent calc(50% - 8px), var(--team) 0, var(--team) calc(50% + 8px), transparent 0) 2% 14px / var(--w) 17px repeat-x,
		linear-gradient(90deg, transparent calc(50% - 4px), var(--team) 0, var(--team) calc(50% + 4px), transparent 0) 2% 29px / var(--w) 14px repeat-x,
		linear-gradient(var(--contrast-3), var(--contrast-3)) 0 50% / 100% 4px no-repeat;
}

/* ---- Felt: the sage band with the field lines ---- */

.is-style-mbf-terrain {
	position: relative;
	isolation: isolate;
	background-color: var(--terrain);
	color: var(--sur-terrain);
	border-radius: var(--mbf-rl);
	overflow: hidden;
}

.is-style-mbf-terrain::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--sur-terrain);
	opacity: 0.12;
	-webkit-mask: var(--mbf-lines) center / cover no-repeat;
	mask: var(--mbf-lines) center / cover no-repeat;
	pointer-events: none;
}

.is-style-mbf-terrain:not(.wp-block-media-text) {
	padding: 28px;
}

.is-style-mbf-terrain :is(h1, h2, h3, h4, p, li, a, .is-style-mbf-surtitre) {
	color: var(--sur-terrain);
}

.is-style-mbf-terrain a.wp-block-button__link:not(.has-background) {
	background: var(--sur-terrain);
	border-color: var(--sur-terrain);
	color: var(--terrain);
}

.is-style-mbf-terrain a.wp-block-button__link:not(.has-background):hover {
	background: transparent;
	color: var(--sur-terrain);
}

.wp-block-media-text.is-style-mbf-terrain .wp-block-media-text__content {
	padding: 28px;
}

.wp-block-media-text.is-style-mbf-terrain .wp-block-media-text__media img {
	border-radius: 0;
}

.wp-block-media-text.is-style-mbf-terrain {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}

.wp-block-media-text.is-style-mbf-terrain h2 {
	font-size: 1.625rem;
	margin: 8px 0 10px;
}

.wp-block-media-text.is-style-mbf-terrain .wp-block-media-text__content > * + * {
	margin-top: 14px;
}

.is-style-mbf-terrain ol {
	list-style: none;
	padding: 0;
	margin-left: 0;
	counter-reset: mbf-r;
	display: grid;
	gap: 10px;
}

.is-style-mbf-terrain ol > li {
	counter-increment: mbf-r;
	position: relative;
	min-height: 30px;
	padding-left: 44px;
	margin: 0;
}

.is-style-mbf-terrain ol > li::before {
	content: counter(mbf-r);
	position: absolute;
	left: 0;
	top: -2px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid var(--sur-terrain);
	display: grid;
	place-items: center;
	font: 800 0.875rem/1 var(--mbf-display);
}

/* ---- Soft band and framed box ---- */

.is-style-mbf-doux,
.is-style-mbf-conseil {
	background: var(--base);
	border-radius: var(--mbf-rl);
	padding: 28px;
}

.is-style-mbf-conseil {
	padding: 24px;
}

:is(.is-style-mbf-doux, .is-style-mbf-conseil, .is-style-mbf-terrain) > .wp-block-group__inner-container {
	padding: 0;
}

:is(.is-style-mbf-doux, .is-style-mbf-conseil, .is-style-mbf-terrain) > :last-child,
:is(.is-style-mbf-doux, .is-style-mbf-conseil) .wp-block-columns {
	margin-bottom: 0;
}

.is-style-mbf-conseil img {
	border-radius: 50%;
}

.is-style-mbf-doux .is-style-mbf-puces + p {
	margin-top: 14px;
	font-size: 0.9375rem;
	color: var(--contrast-2);
}

.is-style-mbf-doux h2,
.is-style-mbf-doux h3 {
	font-size: 1.125rem;
	margin-bottom: 12px;
}

/* ---- Home: « Une » columns (text + photo) ---- */

.mbf-home .site-content { padding-top: 0; }

.mbf-home .entry-content > :is(.wp-block-group, .wp-block-columns, .wp-block-query, .wp-block-media-text, ol, ul, [class*="wp-block-fox"]) {
	margin-top: 28px;
}

.mbf-home .entry-content > :is(h2, .wp-block-group:has(> h2:first-child), .wp-block-columns:has(> .wp-block-column > h2:first-child), [class*="wp-block-fox"]) {
	margin-top: 64px;
}

.mbf-home .entry-content > h2 + p { margin-top: 8px; color: var(--contrast-2); max-width: 60ch; }

.mbf-home .entry-content > .wp-block-group:has(> h2:first-child) > h2 { margin: 0; }

.is-style-mbf-une { margin-bottom: 40px; }

.is-style-mbf-une {
	padding-top: 48px;
	gap: 48px;
	align-items: center;
}

.is-style-mbf-une h1 {
	font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.4rem);
	font-stretch: 115%;
	margin: 0;
}

.is-style-mbf-une p:not([class*="is-style"]) {
	font-size: 1.1875rem;
	max-width: 46ch;
	margin: 18px 0 24px;
}

.is-style-mbf-une img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ---- Lists: « Puces » (pills of links), « Barres » (one rod per rubric),
   « Guides » (title and line). A link of these lists may be a conditional
   link of Fox Blocks: <a class="fxb-smartlink"> once its target is published,
   <span class="fxb-smartlink--pending"> before; both get the same look. The
   team comes from a span inside the link (<span class="pour-enfant">), which
   Fox Blocks keeps, never from a class on the link, which it rewrites. ---- */

:is(.is-style-mbf-puces, .is-style-mbf-barres, .is-style-mbf-guides, .is-style-mbf-cartes) li:has(.pour-enfant),
.is-style-mbf-cartes > .wp-block-column:has(.pour-enfant) { --team: var(--accent-2); --team-fill: var(--pastille-enfant); }
:is(.is-style-mbf-puces, .is-style-mbf-barres, .is-style-mbf-guides, .is-style-mbf-cartes) li:has(.pour-adulte),
.is-style-mbf-cartes > .wp-block-column:has(.pour-adulte) { --team: var(--accent-3); --team-fill: var(--pastille-adulte); }
:is(.is-style-mbf-puces, .is-style-mbf-barres, .is-style-mbf-guides, .is-style-mbf-cartes) li:has(.pour-tous),
.is-style-mbf-cartes > .wp-block-column:has(.pour-tous) { --team: var(--accent); --team-fill: var(--terrain); }

:is(.is-style-mbf-puces, .is-style-mbf-barres, .is-style-mbf-guides, .is-style-mbf-cartes) .fxb-smartlink--pending {
	font-weight: inherit;
	color: inherit;
	text-decoration: none;
	background: none;
	border: 0;
}

.is-style-mbf-puces {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.is-style-mbf-puces li { margin: 0; }

.is-style-mbf-puces li > :is(a, .fxb-smartlink),
.is-style-mbf-puces .fxb-smartlink--pending {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 9px 14px;
	background: var(--base-3);
	border: 1.5px solid var(--contrast-3);
	border-radius: 999px;
	color: var(--contrast);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.2;
}

.is-style-mbf-puces li > a:hover { border-color: var(--contrast); }

.is-style-mbf-puces li > :is(a, .fxb-smartlink):is(.pour-enfant, .pour-adulte, .pour-tous)::before,
.is-style-mbf-puces li:is(:has(.pour-enfant), :has(.pour-adulte), :has(.pour-tous)) > :is(a, .fxb-smartlink)::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--team);
}

.is-style-mbf-barres {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: mbf-b;
}

.is-style-mbf-barres > li {
	counter-increment: mbf-b;
	position: relative;
	display: grid;
	grid-template-columns: 44px minmax(0, 16rem) minmax(0, 1fr);
	gap: 4px 16px;
	align-items: center;
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--contrast-3);
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--contrast-2);
	--nb: 3;
}

.is-style-mbf-barres > li:nth-child(5n+2) { --nb: 5; }
.is-style-mbf-barres > li:nth-child(5n+3) { --nb: 2; }
.is-style-mbf-barres > li:nth-child(5n+4) { --nb: 1; }
.is-style-mbf-barres > li:nth-child(5n) { --nb: 4; }

.is-style-mbf-barres > li::before {
	content: counter(mbf-b);
	grid-row: 1 / span 2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 3px solid var(--team);
	color: var(--team);
	display: grid;
	place-items: center;
	font: 800 1rem/1 var(--mbf-display);
}

/* The rod of the row: track, handle and players (see the separator). */
.is-style-mbf-barres > li::after {
	content: "";
	grid-column: 3;
	grid-row: 1 / span 2;
	height: 44px;
	border-right: 14px solid var(--contrast);
	border-radius: 0 7px 7px 0;
}

.is-style-mbf-barres > li > :is(a, .fxb-smartlink, strong) {
	grid-column: 2;
	align-self: end;
	color: var(--contrast);
	text-decoration: none;
	font: 800 1.25rem/1.15 var(--mbf-display);
}

.is-style-mbf-barres > li > a::before {
	content: "";
	position: absolute;
	inset: 0;
}

.is-style-mbf-barres > li > a:hover { color: var(--team); text-decoration: underline; }

.is-style-mbf-barres li > :is(small, em) {
	grid-column: 2;
	align-self: start;
	font-style: normal;
}

.is-style-mbf-barres br { display: none; }

/* « Guides »: a ring in front, the title in the display font, its line below. */
.wp-block-list.is-style-mbf-guides {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.wp-block-list.is-style-mbf-guides > li {
	position: relative;
	margin: 0;
	padding: 14px 0 14px 34px;
	border-bottom: 1px solid var(--contrast-3);
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--contrast-2);
}

.wp-block-list.is-style-mbf-guides > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 17px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 3px solid var(--team, var(--accent));
	box-sizing: border-box;
}

.wp-block-list.is-style-mbf-guides > li > :is(a, .fxb-smartlink, strong):first-child {
	display: block;
	margin-bottom: 2px;
	color: var(--contrast);
	text-decoration: none;
	font: 800 1.125rem/1.25 var(--mbf-display);
}

.wp-block-list.is-style-mbf-guides > li > a:first-child:hover { color: var(--accent); text-decoration: underline; }

.wp-block-list.is-style-mbf-guides br { display: none; }

/* « Cartes » on columns: each column is a card, its first image full bleed
   with the team border, a badge (paragraph « mbf-qui pour-… »), the title and
   a line. */
.wp-block-columns.is-style-mbf-cartes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	gap: 24px;
}

.is-style-mbf-cartes > .wp-block-column {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0 0 22px;
	border-radius: var(--mbf-rl);
	overflow: hidden;
	background: var(--base);
}

.is-style-mbf-cartes > .wp-block-column > * {
	margin: 0 20px;
}

.is-style-mbf-cartes > .wp-block-column > .wp-block-image:first-child {
	margin: 0 0 6px;
	max-width: none;
}

.is-style-mbf-cartes > .wp-block-column > .wp-block-image:first-child img {
	display: block;
	width: 100%;
	max-width: none;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 0;
	border-bottom: 6px solid var(--team-fill);
}

/* A photo alone in a column of the home page fills the column. */
.mbf-home .wp-block-column > .wp-block-image:not(:first-child) img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.is-style-mbf-cartes > .wp-block-column > .mbf-qui {
	align-self: flex-start;
	margin: 0 20px;
}

.is-style-mbf-cartes > .wp-block-column > :is(h2, h3, h4) {
	font-size: 1.3125rem;
}

.is-style-mbf-cartes > .wp-block-column > :is(h2, h3, h4) a {
	color: var(--contrast);
	text-decoration: none;
}

.is-style-mbf-cartes > .wp-block-column > :is(h2, h3, h4) a:hover {
	color: var(--accent);
	text-decoration: underline;
}

.is-style-mbf-cartes > .wp-block-column > p:not(.mbf-qui) {
	font-size: 0.9375rem;
	color: var(--contrast-2);
}

/* ---- Query loops: « Cartes » and « Guides » ---- */

.is-style-mbf-cartes .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.is-style-mbf-cartes .wp-block-post {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0 0 22px;
	border-radius: var(--mbf-rl);
	overflow: hidden;
	background: var(--base);
}

.is-style-mbf-cartes .wp-block-post > :not(.wp-block-post-featured-image) {
	margin: 0 20px;
}

.is-style-mbf-cartes .wp-block-post-featured-image {
	margin: 0 0 6px;
}

.is-style-mbf-cartes .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 0;
	border-bottom: 6px solid var(--team-fill);
}

.is-style-mbf-cartes .wp-block-post-title {
	font-size: 1.3125rem;
}

.is-style-mbf-cartes .wp-block-post-title a,
.is-style-mbf-guides .wp-block-post-title a {
	color: var(--contrast);
	text-decoration: none;
}

.is-style-mbf-cartes .wp-block-post-title a:hover,
.is-style-mbf-guides .wp-block-post-title a:hover {
	color: var(--accent);
	text-decoration: underline;
}

.is-style-mbf-cartes .wp-block-post-excerpt,
.is-style-mbf-guides .wp-block-post-excerpt {
	font-size: 0.9375rem;
	color: var(--contrast-2);
}

.wp-block-post-excerpt__excerpt { margin: 0; }

.is-style-mbf-guides .wp-block-post-template {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.is-style-mbf-guides .wp-block-post {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	column-gap: 16px;
	align-content: center;
	margin: 0;
}

.is-style-mbf-guides .wp-block-post-featured-image {
	grid-row: 1 / span 3;
	margin: 0;
}

.is-style-mbf-guides .wp-block-post-featured-image img {
	width: 112px;
	height: 112px;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--mbf-r);
}

.is-style-mbf-guides .wp-block-post > :not(.wp-block-post-featured-image) {
	grid-column: 2;
	margin: 0;
	align-self: center;
}

.is-style-mbf-guides .wp-block-post-title {
	font-size: 1.125rem;
}

/* ---- Archives: header (text + photo of the description), two columns ---- */

.page-header {
	padding-bottom: 24px;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--contrast-3);
}

.page-header .page-title {
	font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.2rem);
	font-stretch: 115%;
	margin: 10px 0 14px;
}

.taxonomy-description {
	font-size: 1.125rem;
}

.taxonomy-description p { margin-bottom: 0.8em; }

@media (min-width: 769px) {
	.page-header:has(.taxonomy-description figure, .taxonomy-description img) {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		column-gap: 40px;
		align-items: center;
	}

	.page-header:has(.taxonomy-description figure, .taxonomy-description img) > * {
		grid-column: 1;
	}

	.page-header:has(.taxonomy-description figure, .taxonomy-description img) .taxonomy-description {
		display: contents;
	}

	.page-header .taxonomy-description :is(figure, p:has(> img)) {
		grid-column: 2;
		grid-row: 1 / span 6;
		margin: 0;
	}
}

.taxonomy-description img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--mbf-rl);
}

.taxonomy-description figcaption {
	font-size: 0.75rem;
	color: var(--contrast-2);
	margin-top: 6px;
}

:is(.blog, .archive, .search) .site-main {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 40px;
}

:is(.blog, .archive, .search) .site-main > :not(article) {
	grid-column: 1 / -1;
}

:is(.blog, .archive, .search) .site-main > article {
	margin: 0;
	border-bottom: 1px solid var(--contrast-3);
}

:is(.blog, .archive, .search) .site-main > article .inside-article {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	column-gap: 18px;
	align-content: start;
	padding: 20px 0;
}

:is(.blog, .archive, .search) .inside-article > * {
	grid-column: 2;
}

:is(.blog, .archive, .search) .inside-article > .post-image {
	grid-column: 1;
	grid-row: 1 / span 4;
	margin: 0;
}

:is(.blog, .archive, .search) .post-image img {
	width: 132px;
	height: 132px;
	object-fit: cover;
	border-radius: var(--mbf-r);
	border-bottom: 6px solid var(--team-fill);
}

:is(.blog, .archive, .search) .entry-title {
	font-size: 1.25rem;
	font-stretch: 108%;
}

:is(.blog, .archive, .search) .entry-title a {
	color: var(--contrast);
	text-decoration: none;
}

:is(.blog, .archive, .search) .entry-title a:hover {
	color: var(--accent);
	text-decoration: underline;
}

:is(.blog, .archive, .search) .entry-summary {
	margin-top: 6px;
	font-size: 0.9375rem;
	color: var(--contrast-2);
}

:is(.blog, .archive, .search) .entry-summary p { margin: 0; }

:is(.blog, .archive, .search) .entry-header .entry-meta {
	margin-top: 4px;
	font-size: 0.8125rem;
}

:is(.blog, .archive, .search) footer.entry-meta { display: none; }

.paging-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	padding-top: 24px;
}

.paging-navigation .page-numbers {
	min-width: 44px;
	height: 44px;
	padding: 0 8px;
	display: inline-grid;
	place-items: center;
	border-radius: 999px;
	border: 2px solid var(--contrast-3);
	color: var(--contrast);
	text-decoration: none;
	font: 800 1rem/1 var(--mbf-display);
}

.paging-navigation .page-numbers.current {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--on-accent);
}

/* ---- Post footer: tags and neighbour posts ---- */

.single footer.entry-meta {
	margin-top: 40px;
	padding-top: 16px;
	border-top: 1px solid var(--contrast-3);
	font-size: 0.875rem;
}

/* ---- Fox Blocks skin (the colours come from the socle) ---- */

/* Verdict: the sage felt with its field lines, white text, white badge. */
.fxb-verdict-box {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border: 0;
	border-radius: var(--mbf-rl);
	background: var(--terrain);
	color: var(--sur-terrain);
}

.fxb-verdict-box::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--sur-terrain);
	opacity: 0.12;
	-webkit-mask: var(--mbf-lines) center / cover no-repeat;
	mask: var(--mbf-lines) center / cover no-repeat;
	pointer-events: none;
}

.fxb-verdict-box :is(.fxb-verdict-box__title, .fxb-verdict-box__text, .fxb-verdict-box__hint, .fxb-verdict-box__score, strong, em, a:not(.wp-block-button__link)) {
	color: var(--sur-terrain);
}

.fxb-verdict-box .fxb-badge {
	background: var(--sur-terrain);
	color: var(--terrain);
}

.fxb-verdict-box__score {
	font-family: var(--mbf-display);
	font-stretch: 85%;
}

/* Scores: a rod for the track, the white ball ringed with ink on the mark. */
.fxb-scores__bar {
	position: relative;
	overflow: visible;
	height: 4px;
	background: var(--contrast-3);
}

.fxb-scores__bar-fill {
	position: relative;
	height: 4px;
	background: var(--accent);
	overflow: visible;
}

.fxb-scores__bar-fill::after {
	content: "";
	position: absolute;
	right: -8px;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border-radius: 50%;
	background: var(--balle);
	border: 3px solid var(--contrast);
	box-sizing: border-box;
}

.fxb-scores__note,
.fxb-scores__global {
	font-family: var(--mbf-display);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* FAQ: a rule above, the sage disc marks the open question. */
.fxb-faq {
	border-top: 3px solid var(--contrast);
}

.fxb-faq__item {
	background: transparent;
	border-bottom: 1px solid var(--contrast-3);
}

.fxb-faq__question-text {
	font-family: var(--mbf-display);
	font-weight: 800;
	font-size: 1.125rem;
}

.fxb-faq__item[open] .fxb-faq__icon {
	border-radius: 50%;
	background: var(--accent);
	color: var(--on-accent);
}

/* Soft cards for the other boxes. */
.fxb-expert-tip,
.fxb-product-card,
.fxb-scores,
.fxb-lcard {
	border-radius: var(--mbf-rl);
}

.fxb-expert-tip {
	background: var(--base);
}

.fxb-lcard__img,
.fxb-lcard__media img {
	border-radius: 0;
	border-bottom: 6px solid var(--terrain);
}

.fxb-lcard__title,
.fxb-product-card__name,
.fxb-pros-cons__heading,
.fxb-expert-tip__title,
.fxb-scores__title,
.fxb-ctable__pname {
	font-family: var(--mbf-display);
	font-weight: 800;
}

/* ---- Footer: the sage felt ---- */

.site-footer {
	position: relative;
	isolation: isolate;
}

.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--sur-terrain);
	opacity: 0.12;
	-webkit-mask: var(--mbf-lines) center / cover no-repeat;
	mask: var(--mbf-lines) center / cover no-repeat;
	pointer-events: none;
}

.site-footer,
.footer-widgets,
.site-info {
	background-color: var(--terrain);
	color: var(--sur-terrain);
}

.site-footer a { color: var(--sur-terrain); }

.footer-widgets .inside-footer-widgets {
	gap: 28px;
}

.footer-widgets .widget-title,
.footer-widgets h2,
.footer-widgets h3,
.footer-widgets h4 {
	font-size: 1.0625rem;
	margin-bottom: 10px;
	color: var(--sur-terrain);
}

.footer-widgets ul {
	list-style: none;
	margin: 0;
	display: grid;
	gap: 8px;
	font-size: 0.9375rem;
}

.footer-widgets p { font-size: 0.9375rem; max-width: 40ch; }

.site-info {
	border-top: 1px solid color-mix(in srgb, var(--sur-terrain) 30%, transparent);
	font-size: 0.875rem;
}

.site-info .copyright-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.mbf-foot-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	align-items: center;
}

.mbf-foot-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
}

.mbf-foot-menu li { margin: 0; }

/* ---- Responsive ---- */

@media (max-width: 960px) {
	.is-style-mbf-cartes .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	:is(.blog, .archive, .search) .site-main {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 768px) {
	body { font-size: 16px; }

	.inside-header,
	.one-container .site-content,
	.footer-widgets-container,
	.inside-site-info {
		padding-left: 16px;
		padding-right: 16px;
	}

	.site-branding { padding-left: 54px; }

	.mbf-logo { width: 42px; height: 42px; margin-top: -21px; }

	.site-description { display: none; }

	.is-style-mbf-une { padding-top: 24px; gap: 24px; }

	.is-style-mbf-terrain:not(.wp-block-media-text),
	.is-style-mbf-doux,
	.is-style-mbf-conseil { padding: 18px; }

	.wp-block-media-text.is-style-mbf-terrain .wp-block-media-text__content { padding: 22px; }

}

@media (max-width: 640px) {
	.is-style-mbf-cartes .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
	}

	.is-style-mbf-barres > li {
		grid-template-columns: 44px minmax(0, 1fr);
		row-gap: 6px;
	}

	.is-style-mbf-barres > li::after {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.is-style-mbf-guides .wp-block-post { grid-template-columns: 88px minmax(0, 1fr); }

	.is-style-mbf-guides .wp-block-post-featured-image img { width: 88px; height: 88px; }

	:is(.blog, .archive, .search) .site-main > article .inside-article { grid-template-columns: 88px minmax(0, 1fr); gap: 0 14px; }

	:is(.blog, .archive, .search) .post-image img { width: 88px; height: 88px; }

	.site-info .copyright-bar { justify-content: center; text-align: center; }
}