/**
 * Front-end styles — Cabrio MiniWorld.
 *
 * Only holds what theme.json cannot express: focus states, hover behaviour,
 * and the theme's few .cab-* classes.
 *
 * @package cab-miniworld
 */

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* Headings read better when words are not broken at odd places. */
h1,
h2,
h3,
.wp-block-post-title,
.wp-block-query-title {
	text-wrap: balance;
}

p,
li {
	text-wrap: pretty;
}

/*
 * Every link slides from the charter's blue to its green instead of snapping.
 *
 * Written on the element itself so nothing has to remember it: a link added
 * tomorrow moves like the others without being told. Any rule that wants a
 * different movement outweighs this one without having to shout, and the
 * reduced-motion block above cancels the lot.
 *
 * `text-decoration-color` is in the list for a reason worth knowing: the line
 * itself cannot be animated. A link left at `text-decoration: none` and given
 * `underline` on hover snaps its rule into place while the colour beside it is
 * still travelling — half the movement arriving late. So every link of this
 * theme that gains a rule on hover carries it from the start, drawn in
 * transparent, and only its colour changes. The shorthand on the hover rule
 * puts `currentColor` back on its own, which is why the hover rules say nothing
 * about it.
 */
a {
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

/* A visible focus ring everywhere, including on elements with no style of their own. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-blue);
	outline-offset: 2px;
	border-radius: 2px;
}

.cab-skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--brand-blue);
	color: var(--cab-sur-fond-sombre);
	text-decoration: none;
}

.cab-skip-link:focus {
	left: 1rem;
	top: 1rem;
}

/* --------------------------------------------------------------------------
   Les champs

   Le site demandait cinq fois la même chose — écrire un mot dans un cadre — et
   le dessinait cinq fois autrement. Relevé sur les pages elles-mêmes, pas dans
   les feuilles :

     contact        9,6 / 12 px   filet #eee        rayon 3   corps 16   content-box
     proposer       9,6 / 12,8    filet bleu 35 %   rayon 8   corps 14
     commentaires   9,6 / 12,8    filet bleu 35 %   rayon 8   corps 14
     mon compte     9,6 / 12      filet noir 15 %   rayon 3   corps 16
     recherche      8 / 8         filet #949494     rayon 0   corps 16

   Une seule forme désormais : celle que deux d'entre eux avaient déjà, et qui
   est celle du site — le filet bleu dilué des panneaux, l'arrondi des cartes en
   plus petit, un fond qui bascule avec le mode sombre parce qu'il vient de la
   palette et non d'un blanc écrit à la main.

   DEUX CORRECTIONS QUI NE SONT PAS UNE AFFAIRE DE GOÛT. Le corps ne descend
   plus sous 16 px : en dessous, Safari sur iPhone agrandit la page dès qu'on
   touche le champ, et deux formulaires étaient à 14. Et la boîte est bordée :
   le formulaire de contact comptait ses 100 % AVANT le rembourrage et la
   bordure — il débordait de sa colonne de 25 px.

   Le forum n'est pas du lot. wpForo dessine ses propres objets — une gélule de
   recherche, un éditeur de message — et il a déjà sa règle, plus bas, qui lui
   donne les couleurs du site sans toucher à ses formes.

   `.cab-champ` est là pour le formulaire qui n'existe pas encore : une classe
   à poser, et il ressemble aux autres sans qu'on ait à rallonger cette liste.
   -------------------------------------------------------------------------- */

:root {
	--cab-champ-fond: var(--wp--preset--color--white);
	--cab-champ-encre: var(--cab-encre);
	--cab-champ-filet: color-mix(in srgb, var(--wp--preset--color--brand-blue) 35%, transparent);
	--cab-champ-filet-vif: var(--wp--preset--color--brand-blue);
	--cab-champ-rayon: 8px;
	--cab-champ-marge: 0.6rem 0.8rem;
	--cab-champ-corps: 1rem;

	/*
	 * La FORME des champs de Cabrio Connexion. Ses couleurs, elle, ne se
	 * donnent pas ici : elle les écrit elle-même sur `.cab-connexion`, plus
	 * près de l'élément que `:root`, et gagnerait — c'est `inc/connexion.php`
	 * qui les lui passe, par le filtre qu'elle prévoit pour ça.
	 */
	--cab-cnx-radius: var(--cab-champ-rayon);
	--cab-cnx-pad: var(--cab-champ-marge);
}

/* La forme. Une liste de types plutôt qu'un « input » : une case à cocher n'est
   pas un champ, et se serait retrouvée grande comme une ligne. */
.cab-champ,
:is(.cab-form__field, .cab-proposer__champ, .cab-comments .comment-form)
	:is(
		input[type="text"],
		input[type="email"],
		input[type="url"],
		input[type="tel"],
		input[type="number"],
		input[type="date"],
		input[type="datetime-local"],
		input[type="month"],
		input[type="time"],
		input[type="week"],
		input[type="password"],
		input[type="search"],
		select,
		textarea
	),
.cab-bandeau .wp-block-search__input {
	box-sizing: border-box;
	padding: var(--cab-champ-marge);
	border: 1px solid var(--cab-champ-filet);
	border-radius: var(--cab-champ-rayon);
	background: var(--cab-champ-fond);
	color: var(--cab-champ-encre);
	font-family: inherit;
	font-size: var(--cab-champ-corps);
	line-height: 1.4;
}

/*
 * L'étiquette. Relevée en trois tailles pour quatre formulaires — 16 px au
 * contact, 14 ailleurs — et le nom d'un champ n'est pas un texte qu'on lit, il
 * se repère : petit, appuyé, à l'encre du site.
 *
 * La dernière ligne est pour le formulaire qui n'existe pas encore : une
 * étiquette posée juste avant un `.cab-champ` parle comme les autres, sans
 * qu'on ait à lui inventer une classe.
 */
:is(.cab-form__field, .cab-proposer__champ) label,
.cab-comments .comment-form label,
label:has(+ .cab-champ) {
	color: var(--cab-encre);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

/*
 * La page du membre vient d'une extension, qui dit l'étiquette d'une voix un
 * peu différente : 14,4 px en 600 contre 14 en 700. Sa couleur, elle, lui est
 * passée proprement par le filtre — mais la typographie d'un site est l'affaire
 * du thème, et c'est la seule chose qu'on lui reprend.
 *
 * `legend` avec `label` : le titre du bloc de la photographie nomme un champ
 * comme les autres et se tient dans la même colonne ; il restait bleu.
 */
.cab-connexion .cab-connexion__field :is(label, legend) {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

/* Dans un formulaire empilé, le champ prend la ligne. Le champ de recherche,
   lui, partage la sienne avec un bouton : c'est le bloc du cœur qui l'étire. */
.cab-champ,
:is(.cab-form__field, .cab-proposer__champ, .cab-comments .comment-form)
	:is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]) {
	width: 100%;
}

/* Une zone de texte se tire en hauteur, jamais en largeur : élargie, elle sort
   de sa colonne et rien ne l'y ramène. */
:is(.cab-form__field, .cab-proposer__champ, .cab-comments .comment-form) textarea,
textarea.cab-champ {
	resize: vertical;
}

/*
 * Au focus, le filet s'affirme. L'anneau, lui, est déjà posé plus haut sur tout
 * ce qui se prend le clavier — inutile de le redire ici, et surtout pas
 * autrement : trois des cinq formulaires en avaient chacun leur version.
 */
.cab-champ:focus-visible,
:is(.cab-form__field, .cab-proposer__champ, .cab-comments .comment-form)
	:is(input, select, textarea):focus-visible,
.cab-bandeau .wp-block-search__input:focus-visible {
	border-color: var(--cab-champ-filet-vif);
}

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

/*
 * The bar follows the page.
 *
 * The template part is what sticks — the header block is its only child, and a
 * sticky element can never travel further than its own parent. Sticking the
 * header itself would pin it inside a box exactly its own height, which looks
 * like nothing happening at all.
 */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 20;
}

/*
 * The admin bar occupies the top of the screen for signed-in editors, and it
 * is itself fixed — so a bar latched to 0 slides underneath it and disappears.
 * WordPress's own heights: 32 px on the desktop, 46 px on the narrower layout,
 * and nothing below 600 px where the admin bar scrolls away with the page.
 */
.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

/*
 * The one-pixel marker the script watches, at the very top of the document.
 *
 * Out of the flow on purpose: as a normal sibling it counted as a block, and
 * the theme's block gap then pushed the bar 16 px down the page.
 */
.cab-header-marker {
	/* No `top`: absolute with none keeps the element at its static position,
	   which is the whole trick — it marks where the bar sits in the flow
	   without a single number being calculated. */
	position: absolute;
	left: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

/* It is a child of .wp-site-blocks like any other, so WordPress would space
   the bar away from it by a block gap. The bar keeps its place. */
.wp-site-blocks > .cab-header-marker + header.wp-block-template-part {
	margin-block-start: 0;
}

.cab-header {
	position: relative;
	z-index: 10;
	/*
	 * At rest the original is a translucent white plate with a soft glow all
	 * around it, not a bar with a rule under it. Measured on the live site:
	 * background rgba(255,255,255,.8), shadow 0 0 7px rgba(0,0,0,.3).
	 */
	/* La surface du theme, pas un blanc fixe : en mode sombre elle suit. */
	background: color-mix(in srgb, var(--wp--preset--color--white) 85%, transparent);
	box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
	/*
	 * The padding lives here, not on the block: an inline style set by the
	 * pattern would outrank the shrunken state and the bar would never lose a
	 * pixel. 5 px is what the original uses on a desktop; the two breakpoints
	 * further down carry its tablet and phone values.
	 */
	padding-block: 5px;
	transition: padding 0.25s ease, background-color 0.25s ease;
}

/*
 * Once latched to the top it shrinks and turns opaque — 127 px down to 66,
 * logo 253 wide down to 160, menu 16 px down to 14, all measured on the
 * original. Opaque matters: translucent over scrolling content is where text
 * loses its contrast.
 */
.cab-header.is-stuck {
	background: var(--wp--preset--color--white);
	padding-block: 3px;
}

.cab-header .wp-block-site-logo {
	transition: width 0.25s ease;
}

.cab-header.is-stuck .wp-block-site-logo {
	width: 160px;
	min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
	.cab-header,
	.cab-header .wp-block-site-logo {
		transition: none;
	}
}

/*
 * The logo grows with the page rather than sitting at a fixed width.
 *
 * The original gives it a fifth of its content column, and that column is
 * min(80vw, 1080px) — so a fifth of it is min(16vw, 216px). Written against
 * the viewport rather than against our own column, because ours is wider
 * (1280 against 1080) and the logo would come out too big. Reproduces the
 * original exactly: 205 at 1280 wide, 216 at 1440, against 203 and 218 there.
 */
.cab-header .wp-block-site-logo {
	width: min(16vw, 216px);
	min-width: 150px;
}

.cab-header .wp-block-site-logo img {
	width: 100%;
	height: auto;
	max-height: 90px;
	object-fit: contain;
	object-position: left center;
	transition: opacity 0.2s ease;
}

.cab-header .wp-block-site-logo a:hover img {
	opacity: 0.85;
}

/*
 * Navigation, account and search sit together at the end of the bar, and the
 * group reaches the full height of the row. That height comes from the logo,
 * and the account control needs it: its dropdown is measured from the bottom
 * of the group, so a group merely centred would open the menu mid-header.
 */
.cab-header__end {
	gap: var(--wp--preset--spacing--40);
	align-self: stretch;
	align-items: center;
}

/*
 * The original fades a link on hover rather than colouring it. The underline
 * below is kept for the current page only: the original marks it nowhere, and
 * a reader who cannot see the whole menu at once has no other way to tell.
 */
.cab-nav .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.35rem;
	transition: opacity 0.4s ease-in-out;
}

.cab-nav .wp-block-navigation-item__content:hover {
	opacity: 0.7;
}

.cab-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--meadow-green);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.22s ease;
}

.cab-nav .current-menu-item > .wp-block-navigation-item__content::after,
.cab-nav .current-menu-ancestor > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Account control
   -------------------------------------------------------------------------- */

/*
 * The control belongs to the menu, so it wears the menu's type.
 *
 * It also stretches to the full height of the row rather than sitting centred
 * in it. That is what lets the dropdown below open under the bar with a fixed
 * offset: measured from a centred box, the distance to the bottom of the
 * header depends on the height of the logo beside it, which is not something
 * CSS should have to know.
 */
.cab-account {
	position: relative;
	align-self: stretch;
	display: flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--body);
	/* The same 14 px as the menu beside it — it is one more entry of it. */
	font-size: 14px;
	font-weight: 300;
	transition: font-size 0.25s ease;
}

.cab-account__login,
.cab-account__summary {
	color: var(--wp--preset--color--brand-blue);
	text-decoration: none;
	transition: opacity 0.4s ease-in-out;
}

.cab-account__login:hover,
.cab-account__summary:hover {
	opacity: 0.7;
}

/* The marker is the chevron, so the browser's own triangle has to go. */
.cab-account__summary {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	list-style: none;
	padding-block: 0.35rem;
}

.cab-account__summary::-webkit-details-marker {
	display: none;
}

/*
 * Matched on .avatar too: wpForo rebuilds the <img> when it answers for the
 * site's avatars, and rebuilds it without the class this theme asked for.
 */
.cab-account__avatar,
.cab-account__summary .avatar {
	border-radius: 50%;
	width: 36px;
	height: 36px;
	object-fit: cover;
	transition: width 0.25s ease, height 0.25s ease;
}

.cab-header.is-stuck .cab-account__avatar,
.cab-header.is-stuck .cab-account__summary .avatar {
	width: 28px;
	height: 28px;
}

.cab-account__chevron {
	transition: transform 0.2s ease;
}

.cab-account__menu[open] .cab-account__chevron {
	transform: rotate(180deg);
}

/*
 * The panel drops below the whole bar, not below the name. The control now
 * reaches the bottom of the row, so clearing the header's own padding is
 * enough — and that padding differs between the two states, hence the second
 * rule.
 */
.cab-account__list {
	position: absolute;
	right: 0;
	top: calc(100% + 5px);
	z-index: 30;
	min-width: 12rem;
	margin: 0;
	padding: 0.4rem 0;
	list-style: none;
	background: var(--wp--preset--color--white);
	box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
}

.cab-header.is-stuck .cab-account__list {
	top: calc(100% + 3px);
}

.cab-account__list a {
	display: block;
	padding: 0.5rem 1rem;
	color: var(--wp--preset--color--brand-blue);
	text-decoration: none;
}

.cab-account__list a:hover,
.cab-account__list a:focus {
	background: var(--wp--preset--color--cream);
}

@media (prefers-reduced-motion: reduce) {
	.cab-account__avatar,
	.cab-account__chevron {
		transition: none;
	}
}

/* The search is an icon until it is asked for, as on the original. */
.cab-search .wp-block-search__button {
	background: transparent;
	border: 0;
	padding: 0.35rem;
	color: var(--wp--preset--color--brand-blue);
	cursor: pointer;
	transition: opacity 0.4s ease-in-out;
}

.cab-search .wp-block-search__button:hover {
	opacity: 0.7;
}

.cab-search .wp-block-search__button svg {
	width: 1.4rem;
	height: 1.4rem;
	fill: currentColor;
}

/*
 * The original's own two breakpoints, with its own values: a taller bar and a
 * bigger menu on a tablet, a compact one on a phone.
 */
@media (max-width: 980px) {
	/*
	 * The menu folds into its button here, not at 600 px.
	 *
	 * WordPress hard-codes that breakpoint, and the original folds a full 380
	 * pixels earlier. Between the two the six entries no longer fit beside the
	 * logo: they wrapped onto a second line and the bar grew from 127 px to
	 * 190. Only the header's own navigation is moved — any other navigation
	 * block on the site keeps the core behaviour.
	 */
	.cab-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.cab-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	/*
	 * One row, and the original's own order: the logo, then the magnifier,
	 * then the menu button. Three controls no longer fit beside the logo on a
	 * phone — the account leaves the bar and becomes the last entry of the
	 * menu, exactly where the original puts it. The move is done in JavaScript
	 * because CSS cannot lift an element into another subtree; without it the
	 * account simply stays in the bar.
	 */
	.cab-header .wp-block-group.alignwide {
		flex-wrap: nowrap;
	}

	.cab-header__end {
		flex-wrap: nowrap;
		gap: 0.75rem;
	}

	.cab-header .cab-search {
		order: -1;
	}

	.cab-search .wp-block-search__button svg {
		width: 1.7rem;
		height: 1.7rem;
	}

	/*
	 * Three thick bars, as on the original — which draws them from an icon
	 * font at 45 px. Core's own icon is a thin outline of a different shape.
	 * Three gradients rather than pseudo-elements: the button already uses
	 * both of those to lay its label out, and a background can be given an
	 * exact thickness, which is the whole point here.
	 */
	.cab-nav .wp-block-navigation__responsive-container-open svg {
		display: none;
	}

	.cab-nav .wp-block-navigation__responsive-container-open {
		width: 30px;
		height: 20px;
		padding: 0;
		background-image:
			linear-gradient(currentColor, currentColor),
			linear-gradient(currentColor, currentColor),
			linear-gradient(currentColor, currentColor);
		background-size: 100% 3px;
		background-position: left top, left center, left bottom;
		background-repeat: no-repeat;
	}

	.cab-header {
		padding-block: 16px;
	}

	.cab-header .wp-block-site-logo {
		width: auto;
		max-width: 100%;
		min-width: 0;
	}

	.cab-header .wp-block-site-logo img {
		width: auto;
		max-height: 95px;
	}

	.cab-nav,
	.cab-account {
		font-size: 16px;
	}
}

@media (max-width: 767px) {
	.cab-header {
		padding-block: 10px;
	}

	.cab-header .wp-block-site-logo img {
		max-height: 65px;
	}

	.cab-nav,
	.cab-account {
		font-size: 13px;
	}
}

/* --------------------------------------------------------------------------
   The panels that open under the menu, on a wide screen

   Four entries open a panel — three menu entries and the account — and until
   now each opened a different-looking one: core's grey-bordered box for the
   menu, our own white card for the account. The original draws a single panel
   for all four, so it is described once here and both use it.

   Measured on the original at 1280 px: 240 px wide, aligned on the left edge
   of the entry that opens it, a 2.8 px rule of #427aa1 on top, white at 80 %,
   a shadow of 0 2px 5px rgba(0,0,0,0.1), 20 px of padding above and below, and
   entries of 14 px with 6 px by 20 px around them.
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
	/*
	 * The class is repeated in these selectors. Core writes its own the same
	 * way — up to four times over — to be sure of winning inside its overlay,
	 * and its stylesheet is loaded after this one, so at equal weight it takes
	 * the declaration. Repeating is what tips the balance; nothing here would
	 * apply otherwise, as the panel's width, its position and the padding of
	 * its entries all showed by staying exactly as core left them.
	 */
	.cab-header .cab-nav .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container,
	.cab-header .cab-account__list {
		min-width: 240px;
		padding-block: 20px;
		border: 0;
		border-top: 3px solid var(--wp--preset--color--brand-blue);
		background: color-mix(in srgb, var(--wp--preset--color--white) 92%, transparent);
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	/*
	 * Aligned on the entry that opens it, as the original does. Core places it
	 * a pixel to the left and flips it to the right near the edge of the
	 * window; here the menu sits at the end of the bar, so the flip fired on
	 * every entry and the panels drifted about.
	 */
	.cab-header .cab-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
		left: 0;
		right: auto;
		/*
		 * Flush with the bottom edge of the bar, as on the original.
		 *
		 * 100 % is the bottom of the entry, which sits well above the bottom of
		 * the bar; the difference is the drop the script publishes. Stretching
		 * the entry to the full height of the bar would have been the tidier
		 * answer, but core buries the list four wrappers deep inside its
		 * responsive container and every one of them would have to be stretched
		 * too. A measured distance is one line, and it follows the shrunken
		 * state on its own.
		 *
		 * It matters beyond looks: a panel that starts lower leaves a gap the
		 * pointer falls through, and the menu closes on the way to it.
		 */
		top: calc(100% + var(--cab-nav-drop, 5px));
	}

	/*
	 * And a bridge across that drop.
	 *
	 * Hanging the panel from the bar left the height of the bar between the
	 * entry and the panel — empty space, belonging to neither. The pointer
	 * crossed it on the way down, the entry stopped being hovered, and the
	 * panel closed before a link could be reached. This invisible strip
	 * belongs to the panel, so the entry stays hovered all the way across.
	 */
	.cab-header .cab-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		/* Four pixels of overlap at each end: the entry, the drop and the panel
		   are all measured in fractions of a pixel, and a seam of three of them
		   was enough for the pointer to fall through and shut the panel. */
		top: calc(-1 * var(--cab-nav-drop, 5px) - 4px);
		height: calc(var(--cab-nav-drop, 5px) + 8px);
	}

	/*
	 * A third level opens to the side, not underneath.
	 *
	 * The rule above places a panel below the entry that opens it — which is
	 * right for the first level and wrong for every one after it: the panel of
	 * « Matériel roulant » landed exactly on top of the one holding it, hiding
	 * what it was opened from and making itself unreachable. A nested panel
	 * belongs beside its entry, and on the left: the menu sits at the end of a
	 * 1280 px bar, so a panel opening rightwards would run off the window.
	 *
	 * The -20 px lifts it by the padding the panel carries, so its first entry
	 * lines up with the entry it belongs to.
	 */
	.cab-header .cab-nav .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
		left: auto;
		right: 100%;
		top: -20px;
	}

	/* The account control reaches the full height of the row, so only the
	 * header's own padding separates it from its panel — a shorter bridge,
	 * which must not reach up over the name and swallow the clicks on it.
	 */
	.cab-header .cab-account__menu {
		align-self: stretch;
		display: flex;
		align-items: center;
	}

	.cab-header .cab-account__list::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -9px;
		height: 9px;
	}

	.cab-header .cab-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content,
	.cab-header .cab-account__list a {
		padding: 6px 20px;
		font-family: var(--wp--preset--font-family--body);
		font-size: 14px;
		font-weight: 300;
		color: var(--wp--preset--color--brand-blue);
	}

	/* Core underlines the current entry in the bar; in a panel the colour says
	   it, as on the original. */
	.cab-header .cab-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content::after {
		content: none;
	}

	.cab-header .cab-nav .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content {
		color: var(--wp--preset--color--meadow-green);
	}

	.cab-header .cab-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
	.cab-header .cab-account__list a:hover,
	.cab-header .cab-account__list a:focus {
		background: rgba(0, 0, 0, 0.025);
		opacity: 1;
	}

	/* The same arrow at the same size as the account's, which is the one this
	   bar uses everywhere. Core's is drawn at 8 px. */
	.cab-header .cab-nav .wp-block-navigation-submenu__toggle svg {
		/* Its own width, not what the line leaves it: as a flex item it was
		   squeezed to eight pixels and the chevron came out narrower than the
		   account's beside it. */
		flex: 0 0 auto;
		width: 12px;
		height: 12px;
	}

	/* The account's own arrow is drawn at the same size, or the same stroke in
	   a bigger box reads as a heavier one. */
	.cab-header .cab-account__chevron {
		width: 12px;
		height: 12px;
	}

	/*
	 * And drawn thinly. The path carries a stroke of 1.6, which suits it at the
	 * size the folded menu uses it — a ring of 24 px — but makes a small arrow
	 * beside a 14 px word the heaviest thing on the bar. A stylesheet outranks
	 * the attribute the markup sets, so the shape stays one description and
	 * only its weight changes with its size.
	 */
	.cab-header .cab-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle svg path,
	.cab-header .cab-account__chevron path {
		stroke-width: 1;
	}

	/* And on the line of the word it belongs to: core aligns the button to the
	   top of the entry, which left the arrow riding above the text. */
	.cab-header .cab-nav .wp-block-navigation-submenu__toggle {
		display: flex;
		align-self: center;
		align-items: center;
		height: auto;
	}

	/*
	 * Inside a panel it is the circled chevron of the folded menu — the same
	 * control, opening the same kind of list, so the same drawing: green, in a
	 * ring, pointing at the entry it would open and turning down once open.
	 */
	.cab-header .cab-nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
		display: flex;
		align-items: center;
	}

	.cab-header .cab-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		flex: 1 1 auto;
	}

	.cab-header .cab-nav .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle {
		flex: 0 0 auto;
		margin-left: auto;
		/* Sized by what it holds: core fixes it at 40 px, and the chevron then
		   spilled a pixel past the edge of the panel instead of sitting 20 px
		   inside it, as the entries beside it do. */
		box-sizing: content-box;
		width: auto;
		height: auto;
		padding-right: 20px;
	}

	.cab-header .cab-nav .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle svg {
		/* Its own size, not what is left of the line: as a flex item it was
		   squeezed to a sixth of its width. */
		flex: 0 0 auto;
		box-sizing: border-box;
		width: 1.5rem;
		height: 1.5rem;
		padding: 5px;
		border: 1px solid currentColor;
		border-radius: 50%;
		color: var(--wp--preset--color--meadow-green);
		transform: rotate(-90deg);
		transition: transform 0.2s ease;
	}

	.cab-header .cab-nav .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg,
	.cab-header .cab-nav .wp-block-navigation__submenu-container .cab-open > .wp-block-navigation-submenu__toggle svg {
		transform: rotate(0deg);
	}

	/* The account panel hangs from the bottom of the bar like the others, so it
	   only has to clear the header's own padding — which differs between the
	   two states, hence the second value further down this stylesheet. */
	.cab-header .cab-account__list {
		padding-inline: 0;
	}
}

/* --------------------------------------------------------------------------
   The search, once it is open

   The original does not slide a small field in beside the menu: it gives the
   whole bar to the search — the logo stays, the menu and the account step
   aside, and a borderless field takes the room they leave, fading in. The
   state is core's own: it removes __searchfield-hidden when the field opens.
   -------------------------------------------------------------------------- */
.cab-header:has(.cab-search:not(.wp-block-search__searchfield-hidden)) .cab-nav,
.cab-header:has(.cab-search:not(.wp-block-search__searchfield-hidden)) .cab-account {
	display: none;
}

.cab-header:has(.cab-search:not(.wp-block-search__searchfield-hidden)) .cab-header__end {
	flex: 1 1 auto;
}

.cab-search:not(.wp-block-search__searchfield-hidden) {
	flex: 1 1 auto;
}

.cab-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
	width: 100%;
}

.cab-search .wp-block-search__input {
	flex: 1 1 auto;
	padding: 0.4rem 0.6rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 300;
	color: var(--wp--preset--color--ink);
	background: transparent;
	border: 0;
	border-radius: 0;
	animation: cab-search-in 0.3s ease;
}

/*
 * No frame at rest — the original draws none, and the field only exists once
 * it has been asked for. A rule appears under it when it takes the keyboard,
 * because a field with no visible focus is a field nobody can follow.
 */
.cab-search .wp-block-search__input:focus-visible {
	outline: 0;
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--brand-blue);
}

/*
 * Once the search is open, the magnifier is the way out of it.
 *
 * Core leaves its own button as a submit at that point, so closing meant
 * clicking somewhere else on the page and hoping — the field closes on
 * focusout. The script turns the button back into a close control; here it is
 * simply drawn as one, two bars crossing where the glass was.
 */
.cab-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__button svg {
	display: none;
}

.cab-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__button {
	position: relative;
	width: 1.4rem;
	height: 1.4rem;
	padding: 0;
}

.cab-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__button::before,
.cab-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__button::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.3rem;
	height: 2px;
	margin-left: -0.65rem;
	margin-top: -1px;
	background: currentColor;
}

.cab-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__button::before {
	transform: rotate(45deg);
}

.cab-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__button::after {
	transform: rotate(-45deg);
}

/* Named for what it is, so the script can find nothing else. */
.cab-search__close {
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   The cross that closes

   One shape for the two of them. Core gives the menu overlay a hairline X in
   an svg and the search nothing at all; both are drawn here from the same two
   bars, so a reader who has closed one recognises the other. Two pixels thick,
   which is the weight of every other stroke in the bar.
   -------------------------------------------------------------------------- */

.cab-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__button::before,
.cab-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__button::after,
.cab-header .cab-nav .is-menu-open .wp-block-navigation__responsive-container-close::before,
.cab-header .cab-nav .is-menu-open .wp-block-navigation__responsive-container-close::after,
.cab-proposer__fermer::before,
.cab-proposer__fermer::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.3rem;
	height: 2px;
	margin-left: -0.65rem;
	margin-top: -1px;
	background: currentColor;
}

.cab-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__button::before,
.cab-header .cab-nav .is-menu-open .wp-block-navigation__responsive-container-close::before,
.cab-proposer__fermer::before {
	transform: rotate(45deg);
}

.cab-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__button::after,
.cab-header .cab-nav .is-menu-open .wp-block-navigation__responsive-container-close::after,
.cab-proposer__fermer::after {
	transform: rotate(-45deg);
}

@keyframes cab-search-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cab-search .wp-block-search__input {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   The menu panel on a tablet and a phone

   WordPress opens its menu as a full-screen overlay with every submenu laid
   out flat — thirty entries on a phone. The original drops a panel just under
   the bar, the width of the content column, ruled at the top in the
   navigation blue, one entry per line with a hairline between them, and the
   children folded behind a chevron. Measured on the original at 900 px: a
   2.8 px top rule in #427aa1, entries of 47 px at 16 px, a hairline of
   rgba(0,0,0,0.03) and a shadow of 0 2px 5px rgba(0,0,0,0.1).

   Every selector starts at .cab-header on purpose. The core stylesheet says
   the same things with the same weight and is loaded after this one, so at
   equal specificity it wins; the extra class is what tips the balance. Only
   this navigation is concerned — any other one on the site keeps the core
   behaviour.

   The two custom properties come from the script: the bar is sticky and its
   height changes with the shrunken state and with the admin bar, so where the
   panel starts is not something the stylesheet can know.
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
	/*
	 * Core animates the panel in with a transform. An identity matrix is
	 * still a transform, and a transformed element becomes the reference for
	 * anything fixed inside it — which is why the close button below landed
	 * at the top of the panel instead of the top of the window.
	 */
	/*
	 * The panel is fixed to the window, just under the bar.
	 *
	 * Where the bar ends is a number the script publishes, and it is measured
	 * again the moment the menu is asked for — that is what matters. Left to a
	 * measurement taken earlier it could be out of date, and a gap opened under
	 * the bar. (Hanging the panel from the header by absolute positioning would
	 * need no number at all, but the nearest positioned ancestor inside the bar
	 * is the navigation itself, a few pixels wide when the menu is folded: the
	 * panel collapsed to nothing.)
	 */
	/*
	 * The class is named twice on purpose.
	 *
	 * Core paints this box white — `.wp-block-navigation:not(.has-background)
	 * .wp-block-navigation__responsive-container.is-menu-open`, which counts
	 * four classes, exactly as many as the selector below counted before. A tie
	 * is settled by whichever stylesheet is printed last, and that is core's:
	 * the `background: transparent` written here has never once applied.
	 *
	 * It showed as a white frame around the menu — sixteen pixels down each
	 * side, where the panel is inset to line up with the page — and it showed
	 * only in the dark theme, because in the light one white on white is
	 * invisible. Saying `.is-menu-open` a second time costs nothing, changes
	 * nothing about what is matched, and settles the tie here.
	 */
	.cab-header .cab-nav .wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
		position: fixed;
		top: var(--cab-header-bottom, 127px);
		right: 0;
		bottom: auto;
		left: 0;
		display: block;
		max-height: calc(100vh - var(--cab-header-bottom, 127px));
		overflow-y: auto;
		padding: 0;
		background: transparent;

		/*
		 * Core fades its overlay in with an animation set to keep its last
		 * frame. An animated property outranks a plain declaration, so the
		 * identity transform it leaves behind cannot be overridden — it has
		 * to be the animation that goes. The original's panel simply appears.
		 */
		animation: none;
		transform: none;
	}

	.cab-header .cab-nav .is-menu-open .wp-block-navigation__responsive-close {
		max-width: var(--wp--style--global--wide-size);
		margin-inline: auto;
		padding-inline: var(--wp--style--root--padding-right, 16px);
	}

	/*
	 * The bottom edge is drawn as plainly as the top one. The original's soft
	 * shadow is enough on its own screen; over a photograph, which is what this
	 * panel usually falls on, it disappeared and the menu had no visible end.
	 */
	.cab-header .cab-nav .is-menu-open .wp-block-navigation__responsive-dialog.wp-block-navigation__responsive-dialog {
		/*
		 * Core pushes the panel down by the height of the admin bar — 46 px, or
		 * 32 above 782 — so that its own full-screen overlay clears it. This
		 * panel already starts below the bar, which itself already clears the
		 * admin bar, so that margin was pure gap: the menu hung 46 px under the
		 * bar for anyone signed in, and only for them.
		 */
		margin-top: 0;
		background: var(--wp--preset--color--white);
		border-top: 3px solid var(--wp--preset--color--brand-blue);
		border-bottom: 1px solid rgba(0, 0, 0, 0.12);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.14);
		padding-block: 0.75rem;
	}

	.cab-header .cab-nav .is-menu-open .wp-block-navigation__responsive-container-content,
	.cab-header .cab-nav .is-menu-open .wp-block-navigation__container,
	.cab-header .cab-nav .is-menu-open .wp-block-navigation__submenu-container {
		display: block;
		width: 100%;
		padding: 0;
		gap: 0;
		text-align: left;
	}

	/* An entry is a line: the link takes the width, the chevron sits at its
	   end, and the children it opens go underneath. */
	.cab-header .cab-nav .is-menu-open .wp-block-navigation-item {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	/*
	 * The colour is named twice over because core paints the entries of its
	 * overlay black, whatever the navigation block was given — which left the
	 * panel reading in ink while the bar above it read in blue.
	 */
	.cab-header .cab-nav .is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content {
		flex: 1 1 0;
		min-width: 0;
		padding: 10px 2rem;
		font-size: 16px;
		color: var(--wp--preset--color--brand-blue);
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	}

	/* In the panel every entry is on its own line, so the underline that marks
	   the current page in the bar is only noise: the colour says it instead. */
	.cab-header .cab-nav .is-menu-open .wp-block-navigation-item__content::after {
		content: none;
	}

	.cab-header .cab-nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content.wp-block-navigation-item__content,
	.cab-header .cab-nav .is-menu-open .current-menu-ancestor > .wp-block-navigation-item__content.wp-block-navigation-item__content {
		color: var(--wp--preset--color--meadow-green);
	}

	/*
	 * The children stay folded until the chevron is asked for.
	 *
	 * Two obstacles. Core repeats the class four times in its own selector to
	 * make sure its overlay wins, so ours has to be named twice to weigh as
	 * much — and this stylesheet is loaded first, which at equal weight loses.
	 * And aria-expanded cannot be read as the answer: in the overlay core
	 * binds it to the state of the panel, not of the submenu, so it says true
	 * on every entry the moment the menu opens. The state is ours, set by the
	 * script on the entry itself.
	 */
	.cab-header .cab-nav .is-menu-open .has-child > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
		display: none;
		flex-basis: 100%;
		position: static;
		border: 0;
		box-shadow: none;
		background: transparent;
	}

	.cab-header .cab-nav .is-menu-open .has-child.cab-open > .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
		display: block;
	}

	/*
	 * The indent belongs to the link, not to the list.
	 *
	 * Core pads the list itself by 32 px a side — and repeats its class four
	 * times so it wins — which pushed every level in from both edges: the
	 * chevron of the third level no longer lined up with the second's, and the
	 * hairlines stepped inwards with it. The list is flattened here and the
	 * step is written into the link, where it moves the text and nothing else.
	 */
	.cab-header .cab-nav .is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
		padding-inline: 0;
		margin-inline: 0;
	}

	.cab-header .cab-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding-left: 3.25rem;
		font-size: 15px;
	}

	.cab-header .cab-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding-left: 4.5rem;
	}

	/*
	 * The chevron shares the line with the link, so it has to be the same
	 * height as it: core centres it, which left its half of the hairline
	 * fourteen pixels above the other half.
	 */
	.cab-header .cab-nav .is-menu-open .wp-block-navigation-submenu__toggle {
		flex: 0 0 auto;
		display: flex;
		align-self: stretch;
		align-items: center;
		/* Core gives the button a height of its own, and a set height beats
		   stretch — which is why its half of the hairline sat higher. */
		height: auto;
		/*
		 * And a width of its own, 40 px, which left its chevron overflowing to
		 * the right of the 8 px it was given: the arrow ended 26 px further out
		 * than the account's, on the row just below. Sized by its content, both
		 * now stop at the same distance from the edge of the panel.
		 */
		box-sizing: content-box;
		width: auto;
		padding: 10px 2rem 10px 0.5rem;
		background: transparent;
		border: 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
		color: var(--wp--preset--color--meadow-green);
		cursor: pointer;
	}

	/*
	 * The original points the chevron at the entry it would open and turns it
	 * downwards once it is open. Core's caret points down to begin with, so
	 * the closed state is the one that turns.
	 */
	.cab-header .cab-nav .is-menu-open .wp-block-navigation-submenu__toggle svg {
		flex: 0 0 auto;
		box-sizing: border-box;
		width: 1.6rem;
		height: 1.6rem;
		padding: 5px;
		border: 1px solid currentColor;
		border-radius: 50%;
		fill: currentColor;
		transform: rotate(-90deg);
		transition: transform 0.2s ease;
	}

	.cab-header .cab-nav .is-menu-open .cab-open > .wp-block-navigation-submenu__toggle svg {
		transform: rotate(0deg);
	}

	/* The original tints the line under the pointer rather than the text. */
	.cab-header .cab-nav .is-menu-open .wp-block-navigation-item__content:hover,
	.cab-header .cab-nav .is-menu-open .wp-block-navigation-item__content:focus,
	.cab-header .cab-nav .is-menu-open .cab-account__login:hover,
	.cab-header .cab-nav .is-menu-open .cab-account__list a:hover {
		background: rgba(0, 0, 0, 0.025);
		opacity: 1;
	}

	/* The close button takes the place of the button that opened it. */
	.cab-header .cab-nav:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
		visibility: hidden;
	}

	/*
	 * Standing on the button it replaces, and not one step further right: the
	 * light-and-dark switch lives in that corner now. Where the opening button
	 * ends is measured by the script — the layout of the bar is not a number
	 * this stylesheet can guess.
	 */
	.cab-header .cab-nav .is-menu-open .wp-block-navigation__responsive-container-close {
		position: fixed;
		top: var(--cab-header-top, 0px);
		right: var(--cab-nav-open-right, var(--wp--style--root--padding-right, 16px));
		width: 1.9rem;
		height: calc(var(--cab-header-bottom, 127px) - var(--cab-header-top, 0px));
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		color: var(--wp--preset--color--brand-blue);
	}

	/* Core's own thin X gives way to the two bars drawn further up. */
	.cab-header .cab-nav .is-menu-open .wp-block-navigation__responsive-container-close svg {
		display: none;
	}

	/* The account, once the script has moved it in, is an entry like the
	   others — and its own menu opens in place rather than floating. */
	.cab-header .cab-nav .is-menu-open .cab-account {
		display: block;
		width: 100%;
		align-self: auto;
		position: static;
		font-size: 16px;
	}

	/*
	 * The keyboard's own mark, kept but quietened.
	 *
	 * Core moves the focus into the panel the moment it opens, so the first
	 * entry wears the focus ring even for someone who used the mouse — and on
	 * a row the width of the panel, the theme's 2 px ring reads as a heavy
	 * frame around the entry. Drawn inside the row it says the same thing
	 * without shouting. It is not removed: whoever navigates by keyboard has
	 * no other way of knowing where they are.
	 */
	.cab-header .cab-nav .is-menu-open a:focus-visible,
	.cab-header .cab-nav .is-menu-open button:focus-visible,
	.cab-header .cab-nav .is-menu-open summary:focus-visible {
		outline: 2px solid var(--wp--preset--color--brand-blue);
		outline-offset: -2px;
	}

	/* The last entry of the panel rules off like the others, which it cannot do
	   while it is only as wide as its own text. */
	/*
	 * The account is a row of the panel like the others: the name at the left,
	 * the chevron at the right, the avatar centred between them on the same
	 * line. Laid out as a block it fell back to text flow — the avatar rode
	 * high and the chevron sat wherever the text ended.
	 */
	.cab-header .cab-nav .is-menu-open .cab-account__login,
	.cab-header .cab-nav .is-menu-open .cab-account__summary {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		/* Its padding counts inside its width, or the row runs 64 px past the
		   edge of the panel and takes its hairline with it. */
		box-sizing: border-box;
		width: 100%;
		padding: 10px 2rem;
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	}

	/* The same chevron as the menu entries, in the same place and turning the
	   same way — it opens the same kind of list. */
	.cab-header .cab-nav .is-menu-open .cab-account__chevron {
		flex: 0 0 auto;
		box-sizing: border-box;
		margin-left: auto;
		width: 1.6rem;
		height: 1.6rem;
		padding: 5px;
		border: 1px solid currentColor;
		border-radius: 50%;
		color: var(--wp--preset--color--meadow-green);
		fill: currentColor;
		transform: rotate(-90deg);
	}

	.cab-header .cab-nav .is-menu-open .cab-account__menu[open] .cab-account__chevron {
		transform: rotate(0deg);
	}

	.cab-header .cab-nav .is-menu-open .cab-account__list {
		position: static;
		min-width: 0;
		padding: 0;
		background: transparent;
		box-shadow: none;
	}

	.cab-header .cab-nav .is-menu-open .cab-account__list a {
		padding: 10px 3.25rem;
		font-size: 15px;
		color: var(--wp--preset--color--brand-blue);
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	}

	/*
	 * Nothing rules off the last line: a hairline there separates the menu from
	 * the white margin below it, which reads as a line adrift rather than as
	 * the end of anything. The panel's own bottom edge says where it ends.
	 */
	.cab-header .cab-nav .is-menu-open .cab-account__login,
	.cab-header .cab-nav .is-menu-open .cab-account__menu:not([open]) > .cab-account__summary,
	.cab-header .cab-nav .is-menu-open .cab-account__list a:last-child {
		border-bottom: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cab-header .cab-nav .wp-block-navigation-submenu__toggle svg {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   The bands of the home page

   The original's home page is not a column of blocks but a stack of full-width
   coloured sections: pale blue for the welcome, sky blue for the news, white
   for the rest. Each carries its own padding — measured there, 50 px above and
   107 or 35 below — and the content column sits inside it.

   The colours and the rhythm are the original's. The type sizes are ours: its
   text runs at 14 px across 1012 px, which is about 120 characters to a line.
   Ours runs at 18 px across 1080, which is 103 — a measure Cyrille chose on
   2026-09-08 so that every page of the site holds one width, the reading
   column and the wide blocks alike. The figure is stated here because it was
   measured, not because it is comfortable: 65 to 75 is.
   -------------------------------------------------------------------------- */
.cab-bande {
	/* The bands touch: WordPress spaces the blocks of a page, and these are
	   not blocks in a page, they are the page. */
	margin-block: 0;
}

.cab-bande + .cab-bande {
	margin-block-start: 0;
}

/* And the first of them touches the bar, as on the original. */
.home .wp-site-blocks > main {
	margin-block-start: 0;
}

/*
 * Inside a band, the rhythm of the original: 28 px between a heading and the
 * text under it, against the 16 px WordPress gives every block. Measured there
 * — its heading carries 10 px of padding below and its text module 18 px of
 * margin above.
 */
.cab-bande :where(h1, h2, h3) + * {
	margin-block-start: 28px;
}

/*
 * The grids take the wide measure, the prose keeps the narrow one. That is the
 * original's arrangement too: its cards span the full 1012 px of the row while
 * its paragraphs sit in the same column — the difference here is only that our
 * column is narrower, because 18 px type needs less width to read well.
 */
.cab-bande .wp-block-columns,
.cab-bande .wp-block-query {
	max-width: var(--wp--style--global--wide-size);
}

/*
 * On the blue band, the band's own heading has to read against the blue — but
 * only that one. Applied to every heading inside, it also repainted the titles
 * of the cards, which sit on white: pale blue on white measures 1.13.
 */
.cab-bande--news > .wp-block-heading {
	color: var(--cab-encre-bande);
}

/* --------------------------------------------------------------------------
   Les trois accès de l'accueil

   Relevé dans son module, pas sur une capture : un encart bordé de 2 px de
   bleu de marque, arrondi à 15 px, rembourré de 15 px, tout centré ; l'icône
   à 54 % de la largeur utile ; le titre en h3 PETITES CAPITALES, suivi de
   10 px ; le texte à 14 px ; et, au survol, l'encart entier qui grandit de 4 %
   en trois dixièmes de seconde.

   Mesuré sur son site à 1 400 px : rangée 1 080, encart 320,4, contenu 286,4,
   icône 154,7 — soit exactement 54 %. Nos colonnes tombent sur les mêmes
   320,4 px, parce que la gouttière est la sienne et que notre largeur de
   contenu est déjà celle de sa rangée.

   UN SEUL ÉCART, ET IL EST VOULU. Chez lui, le premier encart est cliquable
   en entier — c'est le seul à porter `link_option_url` — et les deux autres ne
   le sont que par leur image et leur titre, ce qui fait deux liens vers le
   même endroit et deux arrêts au clavier. Ici les trois se comportent comme le
   premier : le lien est celui du titre, et il s'étend sur la carte.
   -------------------------------------------------------------------------- */

/*
 * La gouttière de l'original : 5,5 % de la rangée. Écrite en pour cent parce
 * que c'est ainsi qu'il la pose — 59,4 px sur ses 1 080, et la même proportion
 * partout ailleurs. Trois colonnes à 33,33 % dans 89 % de place restante se
 * rétractent d'elles-mêmes aux 320,4 px qu'il obtient.
 */
.cab-acces-rangee,
.cab-histoire__rangee {
	column-gap: 5.5%;
	row-gap: var(--wp--preset--spacing--50);
}

/*
 * L'encart porte la classe de la colonne plutôt que celle d'un groupe posé
 * dedans : c'est déjà une boîte, et les colonnes d'une rangée ont la même
 * hauteur sans qu'on le demande. `border-box` parce que le cœur laisse la
 * colonne en `content-box` et que ses 33,33 % doivent comprendre la bordure.
 */
.cab-acces {
	box-sizing: border-box;
	position: relative;
	padding: 15px;
	border: 2px solid var(--wp--preset--color--brand-blue);
	border-radius: 15px;
	color: var(--wp--preset--color--brand-blue);
	text-align: center;
	transition: transform 0.3s ease;
}

/*
 * SON SURVOL, AU CENTIEME : `transform_scale__hover="104%|104%"` et une
 * transition de 0,3 s sur la transformation, relevés dans son module puis
 * vérifiés sur son site. Le clavier y a droit aussi — `:focus-within`, puisque
 * c'est le lien à l'intérieur qui prend le focus et non la carte.
 *
 * Le bleu de la carte, lui, est celui du lien : le même raisonnement que
 * partout, le bleu dit qu'on peut cliquer. Ici toute la carte l'est, donc tout
 * y est bleu — et ce bleu-là suit la palette sombre, puisque c'est une encre.
 */
.cab-acces:hover,
.cab-acces:focus-within {
	transform: scale(1.04);
}

/*
 * L'icône fait 54 % de la largeur utile, plafonnée à ce que le dessin mesure :
 * 270 px, soit 54 % de ses 500 px naturels. C'est la règle de Divi, qui
 * applique ce pourcentage à l'image et non à la colonne.
 *
 * Et elle refuse le cadre des images du site — filet et angles arrondis —
 * qui vient des styles globaux : un cadre autour d'un dessin détouré dessine
 * une boîte vide autour de rien.
 */
.cab-acces__icone {
	width: 54%;
	max-width: 270px;
	margin-inline: auto;
}

.cab-acces__icone img {
	border: 0;
	border-radius: 0;
}

/*
 * Le titre descend d'un cran dans l'échelle du thème — `medium` plutôt que le
 * `large` d'un h3 — pour tomber sur les 20 px de l'original sans écrire de
 * pixels. Il garde le vert des titres : c'est un titre avant d'être un lien.
 */
.cab-bande--accueil .cab-acces__titre {
	margin-block: 0 10px;
	font-size: var(--wp--preset--font-size--medium);
	font-variant-caps: small-caps;
}

.cab-acces__titre a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.18em;
}

/*
 * LE LIEN DU TITRE COUVRE LA CARTE. Un calque transparent posé sur l'encart
 * entier : la cible est grande comme la carte, mais il n'y a qu'un seul lien à
 * lire et un seul arrêt au clavier. Le titre reste ce qui est annoncé.
 */
.cab-acces__titre a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cab-acces:hover .cab-acces__titre a,
.cab-acces__titre a:focus-visible {
	text-decoration-color: currentColor;
}

.cab-bande--accueil .cab-acces__texte {
	margin-block-end: 0;
	font-size: var(--wp--preset--font-size--small);
}

/* Qui a demandé moins de mouvement garde le souligné et perd l'agrandissement. */
@media (prefers-reduced-motion: reduce) {
	.cab-acces {
		transition: none;
	}

	.cab-acces:hover,
	.cab-acces:focus-within {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Les brèves de la bande « Mes dernières News »

   L'original ne met pas trois rangées de grandes cartes sur cette bande : il
   met une rangée de 2/3 – 1/3. À gauche deux articles en cartes, photographie
   comprise ; à droite deux listes de trois titres, sans image ni extrait, où
   chaque ligne dit son titre, sa date, sa rubrique et « Lire plus ».

   Relevé dans ses modules, pas sur une capture : titre en PETITES CAPITALES au
   bleu pâle #EBF2FA, date et rubrique du même bleu, « Lire plus » en blanc à
   48 % — c'est-à-dire lisible sans disputer la vedette au titre.

   La colonne étroite est ce qui fait tenir la bande : trois listes de cartes
   empilées faisaient 2 416 px de haut à elles seules.
   -------------------------------------------------------------------------- */

/*
 * LE DÉCOR DE FOND. L'original pose derrière cette bande un coin vert : le
 * masque « corner-square » de Divi, retourné puis basculé verticalement, en
 * vert vif à 55 % — `rgba(164,189,1,0.55)`, c'est-à-dire exactement le
 * `bright-green` de notre palette. Le TRACÉ est le sien, relevé dans son
 * fichier de masque ; le CADRAGE, non, et c'est délibéré.
 *
 * Il le dessine en `slice` : le tracé est agrandi jusqu'à déborder du cadre, et
 * sa pointe arrondie tombe alors dehors. Chez lui ça passe — sa bande fait
 * 2 006 px de haut. La nôtre en fait 570, et la pointe se coupait net, quelle
 * que soit la hauteur à laquelle on remontait le calque. Le tracé s'étire donc
 * au cadre (`preserveAspectRatio='none'`, `100% 100%`) : rien n'en sort.
 *
 * ET LE CADRE EST PLUS HAUT QUE LE DESSIN. Son tracé va de 0 à 1 145,79 dans un
 * carton de 1 440 : la pointe touche donc un bord. Retourné, ce bord devient le
 * HAUT, et la pointe ne peut plus dépasser sans être coupée — c'est ce qui se
 * voyait. Le carton est ramené à 1 250 : il reste 104 unités de vide au-dessus
 * du dessin, soit environ 8 % de la hauteur du calque, et la pointe remonte
 * d'autant DANS la séparation au lieu de s'arrêter dessous.
 *
 * En `::after` et non `::before` : le nœud papillon occupe déjà le premier.
 *
 * IL MONTE DANS LA SÉPARATION. L'arrondi du coin vert se coupait net sur le
 * bord haut de la bande. Le calque déborde donc vers le haut de la hauteur du
 * nœud papillon, et vient couvrir le bas de la bande d'accueil — sa marge
 * basse, où il n'y a rien à cacher.
 *
 * ET IL PASSE PAR-DESSUS LE NŒUD PAPILLON, sans quoi la moitié pleine du nœud
 * le coupait net à l'endroit même où il monte. Les deux dessins vivent dans la
 * même pile — le nœud est le `::after` d'un frère PRÉCÉDENT, mais un pseudo
 * positionné se range par son `z-index`, pas par l'ordre du document — et le
 * nœud est à 1. Le décor passe donc à 2, et le contenu de la bande à 3.
 *
 * Quatre couches, du bas vers le haut : le fond bleu de la bande, qui n'est
 * pas positionné et se peint donc sous tout le reste ; le nœud papillon ; le
 * coin vert ; le texte. Le vert recouvre du bleu de marque des deux côtés de
 * la couture — la moitié pleine du nœud est peinte de cette même couleur —
 * donc la courbe se lit d'un seul trait au travers de la séparation.
 *
 * La bande garde son `z-index: auto` : lui en donner un ferait d'elle une pile
 * à part, son fond remonterait au-dessus du nœud et effacerait la séparation.
 */
/*
 * LE NŒUD PAPILLON PEND SOUS LA BANDE D'ACCUEIL, il ne coiffe pas la bleue.
 * C'est l'arrangement de l'original, mesuré : son décor de 100 px vit à
 * l'intérieur du bas de `#accueilBlog`, qui réserve pour lui 107 px de marge
 * basse — et la bande des nouvelles, elle, n'est pas entamée.
 *
 * Notre bande d'accueil portait déjà ces 107 px depuis qu'elle a été relevée :
 * la place était réservée, il ne manquait que le dessin. Posé sur la bande
 * bleue à la place, il passait derrière son titre.
 *
 * Il se peint de la couleur de CE QUI SUIT — le bleu de marque monte dans le
 * bleu pâle — comme partout ailleurs où le thème l'emploie.
 */
.cab-bande--accueil {
	--cab-bowtie: var(--cab-fond-bande);
}

/*
 * Le fond est peint ici et non par un réglage de la page : l'attribut
 * `backgroundColor` d'un bloc pose une classe que le cœur écrit avec
 * `!important`, et qui suit la palette sombre. Ce bleu-ci n'a pas à la suivre.
 */
.cab-bande--news {
	position: relative;
	background-color: var(--cab-fond-bande);
}

.cab-bande--news::after {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--cab-bowtie-height, 100px)) 0 0;
	z-index: 2;
	pointer-events: none;
	background-image: var(--cab-coin-vert);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	transform: scaleY(-1);
}

.cab-bande--news > * {
	position: relative;
	z-index: 3;
}

/*
 * DEUX REQUÊTES, UNE SEULE LISTE. La colonne étroite empile deux requêtes — les
 * articles d'un côté, le matériel roulant de l'autre — mais rien ne doit le
 * laisser voir : c'est une suite de brèves, pas deux blocs. Aucun écart entre
 * elles, donc, et le filet court d'une liste à l'autre comme entre deux lignes.
 *
 * Le `li` porte une marge de 16 px que le cœur donne à toute liste d'articles.
 * Elle s'ajoutait sous la date, hors du rembourrage de la brève, et décalait le
 * filet vers le bas : c'est elle qui creusait l'espace. Le rythme n'appartient
 * qu'à la brève.
 */
.cab-news .cab-breves + .cab-breves {
	margin-block-start: 0;
}

.cab-news .cab-breves .wp-block-post-template {
	gap: 0;
}

.cab-news .cab-breves .wp-block-post-template > li {
	margin-block: 0;
}

/*
 * Un filet entre deux brèves, et rien autour : la même séparation que les
 * lignes d'un tableau, celle du site. Le blanc dilué parce qu'on est sur le
 * bleu de la bande, où l'encre du texte ne se voit pas.
 */
/*
 * Resserrées. L'article de l'original tient en 64 px : titre sur deux lignes à
 * l'interligne 0,8, la date dessous, et c'est tout — son « Lire plus » y est
 * écrasé à UN pixel de haut, donc écrit mais jamais lu. Le nôtre a été retiré
 * plutôt qu'écrasé : le titre est déjà le lien.
 */
/*
 * LE FILET AU MILIEU. Le rembourrage est le même des deux côtés : la date qui
 * le précède et le titre qui le suit en sont à la même distance, et le trait
 * appartient à l'écart, pas à l'une des deux brèves.
 *
 * Deux dixièmes de plus sous la date qu'au-dessus du titre, parce que les deux
 * lignes ne posent pas leur encre au même endroit dans leur boîte : la date a
 * l'interligne le plus lâche des deux (1,3 contre 1,15) et son texte flotte
 * donc plus haut dans la sienne. Ce sont les distances VUES qui sont égales.
 */
.cab-news .cab-breve {
	padding-block-start: 0.55rem;
	padding-block-end: 0.65rem;
	border-block-start: 1px solid rgba(255, 255, 255, 0.25);
}

/* Seule la toute première de la colonne s'ouvre sans filet. */
.cab-news .cab-breves:first-child li:first-child .cab-breve {
	border-block-start: 0;
	padding-block-start: 0;
}

/*
 * Le titre au corps courant, la ligne de date en dessous du plus petit palier
 * de la palette : l'échelle n'en a pas de plus fin, et il en faut un ici pour
 * que la date reste une mention et ne dispute rien au titre.
 *
 * Ces deux tailles se règlent ICI et non dans la page : l'attribut `fontSize`
 * d'un bloc pose une classe que le cœur écrit avec `!important`, qu'aucune
 * règle du thème ne peut alors corriger. Les brèves n'en portent plus.
 */
.cab-news .cab-breve .wp-block-post-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--regular);
	font-variant-caps: small-caps;
	line-height: 1.15;
}

.cab-news .cab-breve .wp-block-post-title a {
	color: var(--cab-encre-bande);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.18em;
}

/*
 * AU SURVOL, LE SOULIGNÉ PLUTÔT QU'UNE COULEUR. Le vert vif s'y trouvait, et
 * il tombait sur le coin vert du décor : 1,2 contre 1 — invisible. Mais aucune
 * couleur ne s'en tire ici, et c'est mesurable : sur ce vert composé (#5d9640,
 * le vif à 55 % sur le bleu), le bleu de la marque donne 1,80, le vert vif
 * éclairci des voisines 2,19, et le blanc lui-même plafonne à 3,56 — c'est le
 * plus haut qu'un fond de demi-ton laisse atteindre. L'encre au repos en est
 * déjà à 3,08 : il n'y a pas un cran de couleur à gagner.
 *
 * Le signal est donc le trait, qui se lit sur n'importe quel fond puisqu'il est
 * de la couleur du texte. C'est le geste du site — le souligné dessiné en
 * transparent au repos, révélé au survol — et le blanc l'accompagne pour le
 * demi-cran de clarté qui reste à prendre.
 */
.cab-news .cab-breve .wp-block-post-title a:hover,
.cab-news .cab-breve .wp-block-post-title a:focus-visible {
	color: var(--cab-sur-fond-sombre);
	text-decoration-color: currentColor;
}

/* La date et la rubrique sur une ligne, séparées par un trait comme là-bas. */
.cab-news .cab-breve__meta {
	gap: 0.5rem;
	margin-block-start: 0.15rem;
	color: var(--cab-encre-bande);
	font-size: 0.8125rem;
	font-style: italic;
	line-height: 1.3;
}

/*
 * La date, elle, ne suit pas : `theme.json` la peint en gris pour le corps des
 * pages, et ce gris #666 sur le bleu de la bande se lit à peine — mesuré
 * `rgb(102, 102, 102)` sur le bleu de marque. Elle reprend la couleur de la
 * ligne qui la porte, comme la rubrique à côté d'elle.
 */
.cab-news .cab-breve__meta > * {
	margin: 0;
	color: inherit;
}

/*
 * Le trait est accroché à la DATE et non à ce qui la suit : une rubrique longue
 * passe à la ligne, et le trait s'y retrouvait tout seul en tête, à séparer le
 * vide de quelque chose. Derrière la date, il ne quitte jamais sa ligne.
 */
.cab-news .cab-breve__meta .wp-block-post-date::after {
	content: "|";
	margin-inline-start: 0.5rem;
	opacity: 0.5;
	font-style: normal;
}

.cab-news .cab-breve__meta a {
	color: inherit;
	text-decoration-color: transparent;
}

.cab-news .cab-breve__meta a:hover,
.cab-news .cab-breve__meta a:focus-visible {
	color: var(--cab-sur-fond-sombre);
	text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   La section « histoire »

   La dernière rangée de l'accueil, relevée chez lui : le forum à gauche dans
   une carte bleu pâle, l'histoire du réseau à droite dans un encart bleu.

   Mesuré sur son site à 1 400 px : rangée 1 080, carte 320,4, encart 700,2 —
   d'où les largeurs de colonne 29,66 % et 64,83 %, qui avec la gouttière de
   5,5 % tombent exactement dessus. La carte fait 445 px de haut et l'encart
   466 : elle s'arrête donc à son contenu au lieu de s'étirer, et la rangée est
   alignée en haut pour ça.

   Chez lui la colonne de gauche est une zone de widgets contenant celui de
   wpForo. Ici c'est un bloc du thème qui interroge la même source : la liste
   est la même, le balisage est le nôtre. Voir `inc/block-forum-recent.php`.
   -------------------------------------------------------------------------- */

/*
 * LA CARTE DU FORUM. Son bleu pâle est celui des bandes, ses angles font 10 px
 * et non 15 — c'est ainsi chez lui, et les deux objets ne sont pas du même
 * ordre : l'encart est une affiche, la carte est un panneau.
 *
 * `align-self` et non `align-items` sur la rangée : le cœur pose
 * `align-items: normal !important` sur toute rangée de colonnes, et la carte
 * s'étirait donc à la hauteur de l'encart — 505 px au lieu de ses 445. Ce que
 * le parent ne peut pas dire, l'enfant le dit pour lui.
 */
.cab-histoire__forum {
	box-sizing: border-box;
	align-self: start;
	/*
	 * Les mesures des panneaux du site et non celles de son module : 14 px
	 * d'angle et 1,5/1,4 rem de rembourrage, contre 10 px et 20/15 chez lui.
	 * Depuis qu'elle porte le même filet qu'eux, la carte annonce la même
	 * famille — et une famille se tient à la même distance de ses bords.
	 */
	padding: 1.5rem 1.4rem;
	border-radius: 14px;
	background-color: var(--wp--preset--color--pale-blue);
	/*
	 * Le filet des panneaux latéraux du site, à l'identique : un quart du bleu
	 * de marque, posé en ombre intérieure et non en bordure — ainsi il ne prend
	 * pas de place et ne déplace rien. Sans lui, la carte flottait, alors que
	 * les panneaux d'une archive ou d'une fiche sont tous cernés.
	 */
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--brand-blue) 25%, transparent);
}

.cab-histoire__enseigne {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--large);
	font-variant-caps: small-caps;
}

.cab-forum {
	margin-block: 0;
	padding-inline-start: 0;
	list-style: none;
}

/*
 * Un filet sous chaque message, comme chez lui — et non au-dessus comme pour
 * les brèves : ici le titre de la carte est juste au-dessus du premier, un
 * filet l'en séparerait pour rien. Mélangé à l'encre plutôt que le gris #ccc
 * de l'original, pour qu'il suive le mode sombre.
 */
.cab-forum__item {
	display: flex;
	gap: 0.75rem;
	padding-block: 8px;
	border-block-end: 1px solid color-mix(in srgb, var(--cab-encre) 20%, transparent);
}

.cab-forum__portrait {
	flex: 0 0 42px;
}

.cab-forum__portrait img {
	display: block;
	width: 42px;
	height: 42px;
	border-radius: 50%;
}

/* Sans quoi un titre d'un seul mot très long élargit la carte. */
.cab-forum__corps {
	min-width: 0;
}

/*
 * LE TITRE N'EST PAS HABILLÉ EN TITRE. C'en est un pour la structure de la
 * page — trois messages, trois entrées — mais il se lit comme une ligne de
 * liste : la police du texte, le bleu des liens, 14 px. Les valeurs sont les
 * siennes ; seule la balise est plus juste que son `<p>`.
 */
.cab-forum__titre {
	margin-block: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.1;
	color: var(--wp--preset--color--brand-blue);
}

/*
 * BLEU PUIS VERT, COMME UN LIEN ORDINAIRE, ET IL FAUT LE DIRE.
 *
 * Le thème peint un lien logé dans un titre de la couleur des titres — vert au
 * repos, bleu au survol — parce qu'un titre-lien se lit comme un titre. C'est
 * la bonne règle pour le nom d'une rubrique dans un panneau ; ce n'en est pas
 * une ici, où chaque ligne est un message du forum et se lit comme un lien.
 * Les panneaux du site listent d'ailleurs leurs titres en bleu puis vert : la
 * balise est un `h3` pour la structure de la page, la couleur est celle du
 * lien. Les deux se disent, mais il faut les écrire.
 */
.cab-forum__titre a {
	color: var(--wp--preset--color--brand-blue);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.18em;
}

.cab-forum__titre a:hover,
.cab-forum__titre a:focus-visible {
	color: var(--wp--preset--color--meadow-green);
	text-decoration-color: currentColor;
}

.cab-forum__extrait {
	margin-block: 5px;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--wp--preset--color--brand-blue);
}

.cab-forum__meta {
	margin-block: 0;
	font-size: 0.75rem;
	color: var(--wp--preset--color--brand-blue);
}

/* Le nom de l'auteur suit la même règle que le titre au-dessus de lui. */
.cab-forum__meta a {
	text-decoration-color: transparent;
}

.cab-forum__meta a:hover,
.cab-forum__meta a:focus-visible {
	text-decoration-color: currentColor;
}

/*
 * L'ENCART DE L'HISTOIRE. Fond `#427AA1`, angles 15 px, rembourrage 40/60,
 * tout centré, encre blanche : ses valeurs, mesurées. Le fond est peint ici et
 * non par un réglage de la page, pour la raison habituelle — une couleur de
 * la palette basculerait au mode sombre, et un fond ne bascule pas.
 */
.cab-histoire__encart {
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	padding: 40px 60px;
	border-radius: 15px;
	background-color: var(--cab-fond-histoire);
	color: var(--cab-sur-fond-sombre);
	text-align: center;
}

/*
 * Les barres obliques du fond. Un calque à part et non un second fond, parce
 * qu'il se retourne — et une image de fond ne se retourne pas toute seule.
 * Le contenu se range au-dessus par son propre plan : la leçon du coin vert.
 */
.cab-histoire__encart::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: var(--cab-pilules);
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	transform: scaleX(-1);
}

.cab-histoire__encart > * {
	position: relative;
	z-index: 1;
}

.cab-histoire__encart :is(h1, h2, h3) {
	margin-block: 0 var(--wp--preset--spacing--40);
	color: var(--cab-sur-fond-sombre);
}

.cab-histoire__encart p {
	font-size: var(--wp--preset--font-size--small);
}

/*
 * SES LIENS SONT VERTS, LES NÔTRES SONT BLANCS ET SOULIGNÉS. C'est le seul
 * écart de cette section, et il se mesure : sur ce bleu, le vert vif qu'il
 * emploie donne 2,18 contre 1, le vert éclairci des bandes voisines 2,86, et
 * aucun vert ne peut aller plus haut — il faudrait une clarté que la teinte
 * n'atteint pas. Le blanc, lui, donne 4,64, soit le seuil d'un texte courant.
 *
 * Le souligné prend alors le relais de la couleur pour dire qu'on peut
 * cliquer, ce qui vaut mieux de toute façon : une couleur seule ne suffit
 * jamais à signaler un lien.
 */
.cab-histoire__encart p a {
	color: var(--cab-sur-fond-sombre);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.cab-histoire__encart p a:hover,
.cab-histoire__encart p a:focus-visible {
	text-decoration-color: transparent;
}

/*
 * Sous 60 rem la rangée s'empile : l'encart perd ses 60 px de rembourrage
 * latéral, qui mangeraient la moitié d'un écran de téléphone.
 */
@media (max-width: 60rem) {
	.cab-histoire__encart {
		padding-inline: 25px;
	}
}

/*
 * UN SEUL LIEN PAR CARTE.
 *
 * La photographie et le titre menaient au même article, avec le même nom — le
 * `alt` de l'image reprend le titre. Un lecteur d'écran annonçait donc chaque
 * article deux fois de suite, et il fallait deux tabulations pour franchir une
 * carte : six arrêts pour les deux, au lieu de quatre.
 *
 * Le lien de la photographie est retiré dans la page, et celui du titre s'étend
 * sur la carte entière. La cible est donc plus large qu'avant — toute la carte
 * et non la photo plus le titre — pour un seul lien annoncé et un seul arrêt.
 * C'est le geste des trois encarts de la bande d'accueil, à l'identique.
 *
 * DEUX PIÈGES, MESURÉS PLUTÔT QUE SUPPOSÉS.
 *
 * Le premier : l'ancêtre positionné le plus proche n'est pas la carte mais son
 * bandeau de texte, qui est en `absolute` et ne commence qu'à 108 px du haut.
 * Un calque à `inset: 0` ne couvrait donc que le bas de la carte — le haut de
 * la photographie restait hors du lien. Il remonte franchement au-dessus, et
 * c'est la carte qui le recadre : elle est en `overflow: hidden`, comme son
 * cadre photo.
 *
 * Le second : le calque passait devant le lien de la rubrique, écrit juste
 * après lui, et le rendait incliquable — vérifié en pointant dessus. Le relever
 * d'un plan ne suffit pas : le titre de la carte porte un `z-index: 2` hérité
 * de la règle qui le colle au bas d'une photographie, et le calque monte avec
 * lui. Le seuil a été cherché plutôt que supposé — à 0 et à 1 la rubrique reste
 * dessous, à 2 elle repasse devant — et il est pris à 3 pour ne pas vivre
 * collé à la valeur qu'il doit dépasser.
 *
 * L'extrait, lui, reste sous le calque : cliquer n'importe où dans la carte
 * doit mener à l'article, c'est tout l'intérêt.
 */
.cab-bande--news .cab-card--pleine .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: -100rem 0 0;
}

.cab-bande--news .cab-card--pleine .cab-meta a {
	position: relative;
	z-index: 3;
}

/* --------------------------------------------------------------------------
   Le plan du site

   Une longue liste à lire en diagonale, jamais phrase par phrase : elle coule
   donc en colonnes, et c'est le navigateur qui décide combien — une sur un
   téléphone, deux ou trois sur un écran. Aucun point de bascule à tenir, et la
   page ne se déforme pas le jour où une rubrique gagne vingt articles.

   `break-inside: avoid` sur chaque section : une rubrique ne se coupe pas au
   milieu d'une colonne, son titre ne part pas seul au bas de l'une pendant que
   ses articles passent dans l'autre.
   -------------------------------------------------------------------------- */
.cab-sitemap {
	columns: 20rem;
	column-gap: var(--wp--preset--spacing--60);
}

.cab-sitemap__part {
	break-inside: avoid;
	margin-block-end: var(--wp--preset--spacing--60);
}

.cab-sitemap__titre {
	margin-block: 0 0.6rem;
	padding-block-end: 0.4rem;
	border-block-end: 1px solid color-mix(in srgb, var(--cab-encre) 20%, transparent);
	font-size: var(--wp--preset--font-size--medium);
}

.cab-sitemap__rubrique {
	margin-block: 1.1rem 0.35rem;
	font-size: var(--wp--preset--font-size--regular);
	font-variant-caps: small-caps;
}

/* Le titre d'une section mène à son archive, et se lit comme un titre. */
.cab-sitemap :is(.cab-sitemap__titre, .cab-sitemap__rubrique) a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.18em;
}

.cab-sitemap :is(.cab-sitemap__titre, .cab-sitemap__rubrique) a:hover,
.cab-sitemap :is(.cab-sitemap__titre, .cab-sitemap__rubrique) a:focus-visible {
	text-decoration-color: currentColor;
}

.cab-sitemap__liste {
	margin-block: 0;
	padding-inline-start: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
}

.cab-sitemap__item {
	margin-block: 0.3rem;
	line-height: 1.4;
}

/*
 * La date suit le titre plutôt que de s'aligner à droite : dans une colonne
 * étroite, une colonne de dates mangerait la moitié de la largeur, et le titre
 * y passerait à la ligne pour rien.
 */
.cab-sitemap__date {
	color: var(--wp--preset--color--gray);
	font-size: 0.8125rem;
	white-space: nowrap;
}

.cab-sitemap__date::before {
	content: " — ";
}

/* La liste des pages garde sa hiérarchie, donc son retrait. */
.cab-sitemap__liste--pages .children {
	margin-block: 0.25rem;
	padding-inline-start: 1.1rem;
	list-style: none;
}

.cab-sitemap__liste--pages li {
	margin-block: 0.3rem;
}

/* La page où l'on se trouve déjà : dite, mais sans insister. */
.cab-sitemap__liste--pages .current_page_item > a {
	color: var(--cab-encre);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Les portes

   Chaque bande de l'accueil montre un échantillon — deux articles, six brèves,
   trois affiches, trois messages — et aucune ne disait où trouver le reste. Le
   lecteur qui voulait tout voir devait repartir dans le menu. Son site ne le
   disait pas non plus, mais lui n'avait pas nos archives.

   Une porte est un lien seul, rangé à droite de ce qu'il prolonge, avec une
   flèche pour qu'on le reconnaisse sans avoir à le survoler. C'est la place et
   la forme de son « En savoir plus » sur la carte d'un événement — un lien, pas
   un bouton : le bouton de la page est celui de l'encart bleu, et deux boutons
   de même poids ne diraient plus lequel est le principal.

   Elle prend l'encre de l'endroit où elle se trouve, `currentColor` compris
   pour son souligné : le bleu sur la carte du forum, le bleu pâle sur la bande
   bleue, l'encre du site sur le vert pâle des événements.
   -------------------------------------------------------------------------- */
.cab-porte {
	margin-block: var(--wp--preset--spacing--50) 0;
	font-size: var(--wp--preset--font-size--small);
	text-align: right;
}

.cab-porte a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.18em;
}

/*
 * La flèche est dessinée ici et non écrite dans la page : elle appartient à la
 * forme de la porte, pas à ce qu'elle annonce. L'espace qui la précède est
 * insécable, sinon elle passe seule à la ligne sur un écran étroit.
 */
.cab-porte a::after {
	content: "\00a0\2192";
}

.cab-porte a:hover,
.cab-porte a:focus-visible {
	text-decoration-color: currentColor;
}

/* Sur le bleu de la bande, l'encre de la bande — celle des brèves. */
.cab-bande--news .cab-porte {
	color: var(--cab-encre-bande);
}

/*
 * SUR UNE TABLETTE, DEUX AFFICHES ET PAS TROIS.
 *
 * La grille des événements se remplit toute seule — autant de colonnes que la
 * largeur en tient, jamais moins de 17 rem par carte. Entre 38 et 56 rem, elle
 * n'en tient que deux : la troisième affiche partait seule à la ligne suivante,
 * et la bande passait à 1 233 px de haut pour trois événements.
 *
 * Les serrer à trois n'est pas la réponse, et c'est mesuré : à 820 px de large,
 * trois colonnes donnent des cartes de 247 px où l'affiche se réduit à un
 * bandeau et où l'adresse s'étale sur quatre lignes. Il leur faut leurs 300 px.
 *
 * La troisième se retire donc le temps de cette largeur, et « Tout l'agenda »
 * est juste en dessous pour aller la chercher. Son affiche est en chargement
 * paresseux : cachée, elle n'est même pas demandée au serveur.
 *
 * Bornée à la bande de l'accueil : sur les pages de l'agenda, cette même
 * grille EST le contenu, et il n'y a rien à y retirer.
 *
 * LES DEUX BORNES SONT CHOISIES AU PLUS SERRÉ, et pas au hasard. En dessous de
 * 38 rem la grille n'a plus qu'une colonne : y cacher la troisième retirerait
 * une affiche à un téléphone. Au-dessus de 54,5 rem elle peut en tenir trois :
 * n'en montrer que deux y laisserait une case vide à droite, ce qui est pire
 * qu'un retour à la ligne. Entre les deux, deux colonnes à coup sûr — barre de
 * défilement comprise ou non, puisque sa largeur ne se demande pas en CSS.
 */
@media (min-width: 38rem) and (max-width: 54.5rem) {
	.cab-bande--evenements .cab-events__item:nth-child(3) {
		display: none;
	}
}

/* Dans la carte du forum, le bleu qui y sert déjà de couleur de lien. */
.cab-histoire__forum .cab-porte {
	color: var(--wp--preset--color--brand-blue);
}

/*
 * ET LÀ OÙ LE FOND LE PERMET, LE VERT DU SURVOL. Les deux portes posées sur un
 * fond clair reprennent le geste de tous les liens du site — bleu puis vert.
 * Celle de la bande bleue ne le peut pas : mesuré plus haut, aucun vert ne se
 * lit sur ce fond, et c'est pour ça que le trait y porte seul le survol.
 */
.cab-histoire__forum .cab-porte a:hover,
.cab-histoire__forum .cab-porte a:focus-visible,
.cab-bande--evenements .cab-porte a:hover,
.cab-bande--evenements .cab-porte a:focus-visible {
	color: var(--wp--preset--color--meadow-green);
}

/* --------------------------------------------------------------------------
   The home banner

   Relevé on cabminiworld.fr at 1280 px, and reproduced value by value: a
   minimum height of 450 px with 140 px of padding above and below, which makes
   561 px on a desktop and 614 on a phone; the photograph under a sky-blue wash;
   the name at 75 px in the display face with a soft drop shadow; one line of
   welcome at 25 px; one sentence at 14 px; and two buttons of 20 px, the first
   filled in the same blue, the second outlined in white.

   The bar sits under it rather than over it — that is the home page's whole
   arrangement on the original, and it is the template that says so.
   -------------------------------------------------------------------------- */
.cab-home-hero {
	padding-block: 140px;
	position: relative;
	isolation: isolate;
}

/*
 * The band that makes the text readable, and only where the text is.
 *
 * The original leaves white type on a bare photograph and relies on drop
 * shadows: they help the eye and count for nothing in a measurement. Measured
 * on this photograph, white text failed on 65.9 % of the sentence's width
 * (worst 1.19), and on a quarter of the title's and the welcome line's.
 *
 * The strength is measured, not chosen. Against the same pixels: 0.3 left 8 %
 * of the sentence below 4.5, 0.45 left 0.8 %, 0.55 left two pixels out of
 * twelve thousand, and 0.58 leaves none — the two headings, which need only 3.0
 * at their size, clear it well before that. Transparent
 * at both edges, so the photograph keeps its own light at the top and bottom
 * and only the middle is held back; the text lives between 28 % and 72 % of the
 * height at every width measured.
 *
 * On ::before and not ::after: the cover block's own layers put the image at
 * z-index 0, and at equal z-index painting follows tree order — a band
 * generated last would fall over the text instead of behind it.
 */
.cab-home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(20, 35, 43, 0) 0%,
		rgba(20, 35, 43, 0.58) 25%,
		rgba(20, 35, 43, 0.58) 75%,
		rgba(20, 35, 43, 0) 100%
	);
	pointer-events: none;
}

/*
 * The 20 px of margin and 10 px of padding are the original's own, on its
 * block of text — and they are why its banner measures 561 px where 140 px of
 * padding alone would give 501. Reproduced here rather than folded into the
 * padding, so the two numbers still say what they are.
 */
.cab-home-hero .wp-block-cover__inner-container {
	/*
	 * Above the band, said out loud rather than left to chance. The cover
	 * block's own stylesheet gives this container z-index 1, the same as the
	 * band, and at equal z-index it is tree order that decides — which the
	 * text won only because it comes last. The editor loads a different set of
	 * block styles, the container came out at `auto`, and the band fell over
	 * the text: white on the site, grey in the pattern thumbnail.
	 */
	position: relative;
	z-index: 2;
	display: grid;
	/*
	 * One column, sized by the container and not by its contents. Left to
	 * itself the grid took the width of its widest child — the row of buttons —
	 * and handed that width to the paragraphs, which then stopped wrapping
	 * where the original wraps them. The buttons still overrun the column, as
	 * they do there.
	 */
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	margin-block: 20px;
	padding: 10px;
	/*
	 * The width of the original's text column, which is what decides where the
	 * lines break — and therefore the height of the whole banner. Measured
	 * there: 780 px of text on a 1280 screen, and 295 on a 375 one, where the
	 * welcome line takes two lines and the sentence three. Ours was 28 px wider
	 * on a phone, so a line fitted that should not have, and the banner came
	 * out 94 px shorter than the original's.
	 */
	max-width: 800px;
}

/*
 * The shadows are the original's own: a long soft one under the name, a
 * shorter one under the line of welcome, none under the sentence. They are
 * what keeps white text readable over a photograph whose brightness nobody
 * controls — the wash alone does not.
 */
.cab-home-hero__title {
	margin: 0;
	/* The ten pixels Divi puts under every heading, and the last of the
	   difference between 551 and the original's 561. */
	padding-bottom: 10px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 75px;
	font-weight: 300;
	line-height: 1;
	color: var(--cab-sur-fond-sombre);
	text-shadow: 0 7.5px 7.5px rgba(0, 0, 0, 0.4);
}

.cab-home-hero__lead {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 25px;
	font-weight: 500;
	line-height: 1.7;
	color: var(--cab-sur-fond-sombre);
	text-shadow: 0 2.5px 2.5px rgba(0, 0, 0, 0.4);
}

.cab-home-hero__note {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.7;
	color: var(--cab-sur-fond-sombre);
}

.cab-home-hero__buttons {
	margin-top: 20px;
	/* 15 px between them side by side, 20 px once stacked — the original's
	   button carries `margin: 20px 15px 0 0`, and both numbers show. */
	column-gap: 15px;
	row-gap: 20px;
	/*
	 * They wrap when they no longer fit, which is what the original does: side
	 * by side on a desktop, stacked on a phone. Forcing them onto one line —
	 * which an earlier reading of the original wrongly suggested — cut the
	 * second one off at the edge of a 360 px screen.
	 */
	flex-wrap: wrap;
}

.cab-home-hero .wp-block-button__link {
	padding: 6px 20px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 20px;
	font-weight: 400;
	border-radius: 3px;
	border: 2px solid var(--wp--preset--color--brand-blue);
	background: var(--wp--preset--color--brand-blue);
	color: var(--cab-sur-fond-sombre);
}

.cab-home-hero .is-style-outline .wp-block-button__link {
	border-color: var(--cab-sur-fond-sombre);
	background: transparent;
	color: var(--cab-sur-fond-sombre);
}

.cab-home-hero .wp-block-button__link:hover,
.cab-home-hero .wp-block-button__link:focus-visible {
	filter: brightness(1.1);
}

/*
 * No gap between the banner and the bar underneath it. WordPress spaces the
 * children of .wp-site-blocks, and on this page the header is no longer the
 * first of them — it inherited a 16 px margin the original does not have.
 */
.wp-site-blocks > .cab-home-hero + header.wp-block-template-part {
	margin-block-start: 0;
}

/* The original's own steps: a smaller name and smaller buttons on a phone. */
@media (max-width: 980px) {
	.cab-home-hero__title {
		font-size: 55px;
	}

	.cab-home-hero__lead {
		font-size: 20px;
	}
}

@media (max-width: 767px) {
	/*
	 * 64 % of the screen, which is the original's own text column on a phone:
	 * 240 px at 375 and 230 at 360, both measured. It is that width which
	 * decides where the lines break, and therefore the height of the banner —
	 * the welcome line takes two lines and the sentence three, as there.
	 */
	.cab-home-hero .wp-block-cover__inner-container {
		max-width: 64%;
	}

	.cab-home-hero__title {
		font-size: 40px;
	}

	.cab-home-hero__lead {
		font-size: 16px;
	}

	/* The original scales the padding with the type: 3.3 by 11 against 6 by 20,
	   which is what makes its buttons 29 px tall here instead of 35. */
	.cab-home-hero .wp-block-button__link {
		font-size: 11px;
		padding: 3.3px 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cab-home-hero .wp-block-button__link {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   The page banner

   His, measured on the Divi site rather than guessed: a flat band of pale blue
   — no photograph behind the text, which is what this theme had been doing —
   carrying the title and a few lines on the left, an illustration on the
   right, and closed underneath by the bow-tie divider.

   Read off the original at 1280 px: a row of 1080, columns of 585 and 371 (three
   fifths against two), 40 px of air above the text, 110 below it, a divider of
   100. The illustration is capped at 200 px tall, framed in blue with rounded
   corners, tilted six degrees and enlarged a fifth while being pushed up and to
   the left — which is what makes it lean out of its column instead of sitting
   in it.

   One band serves an article, a page, a piece of rolling stock and an archive;
   only what fills it changes. The title is an h1 everywhere, including on the
   archives, where his own template left an h2 and therefore no first-level
   heading at all.
   -------------------------------------------------------------------------- */

.cab-bandeau {
	position: relative;
	isolation: isolate;
	padding-block: 0.75rem 6.875rem;
}

/*
 * The band starts where the bar ends, with nothing between them.
 *
 * WordPress spaces the children of `.wp-site-blocks`, so the bar and the page
 * were a block gap apart — a strip of the page's own background showing above
 * a band that, on the original, is flush against it.
 */
.wp-site-blocks > main:has(> :first-child .cab-bandeau),
.wp-site-blocks > main:has(> .cab-bandeau:first-child) {
	margin-block-start: 0;
}

/*
 * The illustration rises under the bar, as his does: measured on the original,
 * its top edge sits twenty pixels behind the bar's lower line. Nothing is
 * clipped — the bar is painted after the band and simply covers it.
 */

/*
 * Above the divider, which is painted last and would otherwise fall over it.
 *
 * The row keeps itself off the screen edge rather than leaning on the band's
 * padding. A full-width group takes that padding from `has-global-padding`, and
 * the editor gives that class nothing to read: on the front the row cleared the
 * edge, in the editor it sat flat against it.
 *
 * The class is written twice on purpose. The editor caps a wide block with a
 * selector of its own carrying an attribute, which outweighs a plain pair of
 * classes; repeating one is what puts this rule back on top, in both places.
 */
.cab-bandeau .wp-block-columns.wp-block-columns {
	position: relative;
	z-index: 2;
	max-width: min(var(--wp--style--global--wide-size, 1080px), calc(100% - 2rem));
	margin-block: 0;
	margin-inline: auto;
}

/*
 * The title, whichever block wrote it.
 *
 * Most banners take it from the post or the archive; the two that have neither
 * — the rolling stock and the calendar — write a heading of their own. Naming
 * only the first two left those with the site's ordinary h1: half again as
 * large, lighter, and without the shadow. All three are named here.
 *
 * The size is the h1's own preset and not a clamp of its own any more. Written
 * apart, the two drifted: this rule capped the title at 40 px while WordPress's
 * fluid typography served the h2's preset at 48 — a page whose first heading
 * was smaller than its second. Naming the preset makes them one number.
 */
.cab-bandeau :where(.wp-block-post-title, .wp-block-query-title, .wp-block-heading) {
	margin: 0;
	color: var(--wp--preset--color--meadow-green);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 600;
	line-height: 1;
	text-shadow: 0 2px 2px rgba(20, 35, 43, 0.4);
	text-wrap: balance;
}

/*
 * One word of a banner title told apart from the rest.
 *
 * The charter's blue against the headings' green, which is the pairing the
 * archives already use inside « Tous les articles de : « … » ». Measured on the
 * band's pale blue, it clears the ratio a heading of this size needs.
 */
.cab-bandeau__accent {
	color: var(--wp--preset--color--brand-blue);
}

/*
 * His green is #679436, which reads at 3.2:1 against this band — enough for a
 * heading, and only just. The palette's own green is the same colour a shade
 * deeper and clears 4.4:1, so the band uses that one and the title stops
 * depending on its size to be legible.
 */

/*
 * The trail, pinned under the bar.
 *
 * It lives inside the header's template part, which is the element that
 * sticks: written into the banner it would have scrolled away with it, and
 * pages without a banner would have had none at all. Here one declaration
 * serves every page, and the trail travels down the screen with the bar.
 *
 * Two markups have to look the same: SEOPress's, which the site now uses, and
 * the one the theme falls back on. Both are a list inside a `nav`, so the rules
 * read the list and not the class.
 */
.cab-fil {
	color: var(--wp--preset--color--brand-blue);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

/*
 * It rides at the top of the band, above the title and clear of the row.
 *
 * Not inside the text column: the row centres its two columns against each
 * other, and a trail caught in that centring pushed the title far down the
 * band and left a hole between the two. Not a strip of its own under the bar
 * either — that read as a second band and broke the one below it. First child
 * of the band, on the same wide measure as the menu and the title.
 */
.cab-bandeau > .cab-fil {
	max-width: min(var(--wp--style--global--wide-size, 1080px), calc(100% - 2rem));
	margin-block: 0;
	margin-inline: auto;
}

/*
 * The list stops where the text column stops.
 *
 * The illustration leans out over the top right corner of the band, and a long
 * trail ran straight under it: on an article whose title is the last step, that
 * step disappeared behind the picture. The width is capped on the list rather
 * than padded on the box around it — a percentage padding is measured against
 * the container, not against the capped width, and it pushed the whole trail
 * out of its own measure.
 */
.cab-bandeau > .cab-fil ol {
	max-width: 60%;
}

.cab-fil ol {
	display: flex;
	flex-wrap: nowrap;
	gap: 0 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The steps that lead somewhere keep their whole name; the one naming the page
 * you are already on gives way, since the title says it again just underneath.
 */
.cab-fil li {
	flex: none;
	margin: 0;
	white-space: nowrap;
}

.cab-fil li:last-child {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*
 * SEOPress prints its own rule in the head, and its own separator with it: a
 * « > » hung off every item. One trail must not wear two. Its declaration is
 * a bare class, so naming the strip is enough to outweigh it.
 */
.cab-fil .breadcrumb li::after {
	content: none;
	margin: 0;
}

.cab-fil li + li::before {
	content: "›";
	margin-inline-end: 0.4rem;
	opacity: 0.55;
}

.cab-fil a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
}

.cab-fil a:hover,
.cab-fil a:focus-visible {
	text-decoration: underline;
}

/* The step one is standing on is not a link, and does not pretend to be one. */
.cab-fil [aria-current="page"] {
	opacity: 0.75;
}

/* Room to breathe between the trail and the title it introduces. */
.cab-bandeau > .cab-fil + .wp-block-columns {
	margin-block-start: 1.25rem;
}

/* The house and its word travel together, and wrap together. */
.cab-fil li:first-child > :where(a, span) {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.cab-fil__maison {
	flex: none;
}

/*
 * A phone has neither the width for a trail nor the room to spare under the
 * bar: three levels of category wrap onto three lines and eat the screen. The
 * menu leads back the same way.
 */
@media (max-width: 781px) {
	.cab-fil {
		display: none;
	}
}

/*
 * The band's own text is blue, as his is: `#00648c` on the original, our brand
 * blue here. It is the one place on the site where the neutral ink gives way —
 * the band is his signature, and reading it in grey made it a stranger's.
 */
.cab-bandeau :where(p, .wp-block-post-excerpt, .wp-block-term-description, .cab-bandeau__meta) {
	color: var(--wp--preset--color--brand-blue);
}

.cab-bandeau :where(p, .wp-block-post-excerpt, .wp-block-term-description) {
	max-width: 95%;
	margin-block: 0.625rem 0;
}

.cab-bandeau :where(.wp-block-post-excerpt p, .wp-block-term-description p) {
	margin-block: 0;
}

.cab-bandeau .wp-block-post-excerpt__more-text {
	display: none;
}

/* The line that explains why the list below is looking backwards. */
.cab-bandeau__note {
	max-width: 95%;
	margin-block: 0.5rem 0;
	font-size: var(--wp--preset--font-size--small);
	font-style: italic;
}

/* The line of date, author and categories, set against the right edge as his. */
.cab-bandeau__meta {
	justify-content: flex-end;
	gap: 0 0.5rem;
	margin-block-start: 0.625rem;
	font-size: var(--wp--preset--font-size--small);
}

.cab-bandeau__meta > * + *::before {
	content: "|";
	margin-inline-end: 0.5rem;
	opacity: 0.5;
}

/*
 * A page, a piece of rolling stock and an archive have no author and no date
 * worth reading: the date of the entry says nothing about the model, and his
 * own template hid the line on everything but an article.
 */
body:not(.single-post) .cab-bandeau__meta {
	display: none;
}

/*
 * The illustration ends where the menu ends.
 *
 * Centred in its column it stopped some ninety pixels short of the bar's own
 * right edge, and the two never lined up. The figure now shrinks to the picture
 * and is pushed against the right of the column — the column's edge and the
 * menu's are the same wide measure — and the sideways nudge that follows is
 * what the enlargement gives back.
 */
.cab-bandeau :where(.wp-block-post-featured-image, .cab-term-image, .wp-block-image, .cab-bandeau__affiche) {
	width: fit-content;
	margin: 0 0 0 auto;
	line-height: 0;
	transform: scale(1.2) translate(-33px, -33px) rotate(-6deg);
}

.cab-bandeau :where(.wp-block-post-featured-image, .cab-term-image, .wp-block-image, .cab-bandeau__affiche) img {
	width: auto;
	max-width: 100%;
	max-height: 200px;
	border: 2px solid var(--wp--preset--color--brand-blue);
	border-radius: 15px;
}

/*
 * The poster of an event grows downward, and the band does not grow with it.
 *
 * There were 121 px of empty band under it, room the bow-tie needs but that the
 * poster was not using. Three things make the growth go one way only:
 *
 *  — `transform-origin` at the top edge, so the enlargement falls below it.
 *    Scaled from the middle, the poster would have climbed 14 px further into
 *    the header at the same time.
 *  — the vertical nudge redone for that origin: -50 instead of -33 puts the
 *    poster's own top edge back where it was. What is measured 5 px higher is
 *    the corner of the tilt, whose bounding box grows with the picture — the
 *    poster itself has not climbed.
 *  — the height it gains handed straight back as a negative margin, so the
 *    column — and the band above it — keep the height they had. Measured: 368 px
 *    before and after, with the poster going from 262 to 390.
 *
 * It ends 21 px short of what follows, so nothing has to be lifted over
 * anything else.
 */
.cab-bandeau--evenement .cab-bandeau__affiche img {
	max-height: 300px;
}

.cab-bandeau--evenement .cab-bandeau__affiche {
	transform-origin: center top;
	transform: scale(1.2) translate(-33px, -50px) rotate(-6deg);
	margin-bottom: -100px;
}

@media (prefers-reduced-motion: no-preference) {
	.cab-bandeau--evenement .cab-bandeau__affiche {
		animation-name: cab-affiche-entree;
	}
}

/* The same rise as the others, read from the new origin. */
@keyframes cab-affiche-entree {
	from {
		opacity: 0;
		transform: scale(1.06) translate(-33px, -7px) rotate(-6deg);
	}

	to {
		opacity: 1;
		transform: scale(1.2) translate(-33px, -50px) rotate(-6deg);
	}
}

/*
 * Le champ de la page de résultats : la moitié de la mesure au plus.
 *
 * Une largeur en pourcentage écrite dans le bloc valait aussi sur un téléphone,
 * où la moitié d'une colonne de 311 px moins le bouton laisse 48 px de champ —
 * deux lettres. Un maximum en `rem` ne serre que là où il y a de la place.
 */
.cab-bandeau .cab-recherche-encore {
	max-width: 32rem;
}

/*
 * Sur un téléphone, le bouton montre la loupe au lieu de dire le mot.
 *
 * À 375 px, « Rechercher » prend 130 des 311 px de la bande et il ne reste que
 * 158 px de champ : la question qu'on vient de poser ne s'y relit pas en
 * entier. Le mot s'efface, la loupe de la barre du haut prend sa place — le
 * même dessin, celui du cœur, posé en masque pour qu'il garde la couleur du
 * bouton, quelle qu'elle devienne.
 *
 * Le mot n'est pas retiré du bouton, seulement réduit à rien : il reste son nom
 * pour qui écoute la page, et aucune étiquette n'a à être écrite ailleurs.
 */
@media (max-width: 30rem) {
	.cab-recherche-encore .wp-block-search__button {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: none;
		width: 3rem;
		min-width: 0;
		padding-inline: 0;
		font-size: 0;
	}

	.cab-recherche-encore .wp-block-search__button::before {
		content: "";
		width: 1.5rem;
		height: 1.5rem;
		background-color: currentColor;
		-webkit-mask-image: var(--cab-loupe);
		mask-image: var(--cab-loupe);
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
	}
}

/* --------------------------------------------------------------------------
   La carte du membre, dans le bandeau de « Mon compte »

   Le dessin vient de l'extension Cabrio Connexion et n'est pas refait ici. Deux
   choses seulement : la place qu'elle prend sous le titre, et la couleur de ses
   trois lignes, que la règle du bandeau repeignait toutes en bleu de marque.
   -------------------------------------------------------------------------- */

.cab-carte-compte {
	position: relative;
	z-index: 2;
	max-width: 34rem;
	margin-block-start: 1.25rem;
}

/*
 * À plat sur la bande.
 *
 * L'extension enferme ces lignes dans une carte blanche à ombre portée, ce qui
 * est juste au milieu d'une page blanche. Le bandeau est déjà une surface : une
 * seconde boîte dessus ferait une boîte dans une boîte, et le portrait est
 * parti dans son propre cadre.
 */
.cab-carte-compte .cab-connexion__card {
	display: block;
	padding: 0;
	background: none;
	box-shadow: none;
}

/*
 * Le formulaire du compte, dans sa colonne.
 *
 * L'extension le centre dans une mesure de 30rem et l'enferme dans une carte
 * blanche à ombre portée — juste au milieu d'une page entière, de trop ici :
 * la page a déjà son panneau à gauche, et une seconde boîte à côté de la
 * première fait deux cadres pour un seul sujet. Il s'aligne donc sur le bord de
 * sa colonne, à plat.
 *
 * La page de connexion garde sa carte, elle : seule au milieu d'un écran vide,
 * elle a besoin d'un bord pour se tenir.
 */
.cab-colonnes .cab-connexion {
	max-width: none;
	margin-inline: 0;
}

.cab-colonnes .cab-connexion__form {
	padding: 0;
	background: none;
	box-shadow: none;
}

/*
 * LA PHOTO FAIT FACE À L'IDENTITÉ.
 *
 * Les trois champs qui disent qui l'on est — prénom, nom affiché, courriel —
 * tiennent une colonne ; le portrait et ses trois réponses tiennent l'autre, en
 * regard, et s'étendent sur exactement leurs trois rangées. Les mots de passe
 * reprennent ensuite toute la mesure, dessous, parce qu'ils ne regardent pas la
 * photo.
 *
 * Dans le flux, la photo vient après le courriel : sur un téléphone, où tout
 * s'empile, on remplit d'abord son nom.
 */
/*
 * LES PROFILS SOCIAUX SUR LE VERT PÂLE, comme la seconde moitié d'une fiche de
 * matériel roulant passe sur cette même couleur. Ici la partie vit dans une
 * colonne et non d'un bord à l'autre de l'écran : c'est une boîte pâle, pas une
 * bande, et elle déborde légèrement pour que le vert respire autour du texte.
 */
.cab-connexion__section--ailleurs {
	position: relative;
	margin-block: var(--wp--preset--spacing--30, 1rem);
	padding-block: var(--wp--preset--spacing--40, 1.5rem);
}

/*
 * Le vert se peint derrière, sur un voile qui déborde jusqu'aux deux bords.
 *
 * La bande n'est pas fille du corps de la page — elle est au fond d'un
 * formulaire, dans une colonne — donc `alignfull` ne l'atteint pas, et les
 * recettes en `50% - 50vw` supposent un élément centré dans la fenêtre, ce
 * qu'elle n'est pas. Un script mesure le décalage et le publie ici ; sans lui,
 * les deux valeurs par défaut laissent le vert à la largeur de la colonne,
 * ce qui se lit tout aussi bien.
 *
 * Le vert pâle de la palette s'appelle `cream` : c'est son nom affiché qui dit
 * « Pale green », pas son slug.
 */
.cab-connexion__section--ailleurs::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block: 0;
	left: var(--cab-pleine-gauche, 0px);
	width: var(--cab-pleine-largeur, 100%);
	background: var(--wp--preset--color--cream);
}

@media (min-width: 48rem) {
	/*
	 * La photo fait face à l'identité, à l'intérieur de la première partie : la
	 * grille est passée du formulaire à la section le jour où les parties sont
	 * apparues, sans quoi le portrait aurait fait face au titre.
	 */
	.cab-colonnes .cab-connexion__section--options {
		grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
		/*
		 * La gouttière du site, et pas une autre : 48 px, comme entre le texte
		 * d'une fiche et son panneau, comme entre un article et sa barre
		 * latérale. Elle était à 16 — mesuré — et la photo semblait collée aux
		 * champs qu'elle regarde.
		 */
		column-gap: var(--wp--preset--spacing--60, 48px);
		align-items: start;
	}

	/*
	 * Les champs d'identité sont un seul élément de grille — c'est ce qui
	 * empêche le portrait, plus haut qu'eux, d'étirer leurs rangées : essayé en
	 * les laissant séparés, le formulaire prenait 190 px par ligne.
	 */
	.cab-colonnes .cab-connexion__identite {
		grid-column: 1;
		grid-row: 2;
	}

	.cab-colonnes .cab-connexion__field--avatar {
		grid-column: 2;
		grid-row: 2;
	}

	/* Le titre et le reste prennent toute la mesure. */
	.cab-colonnes .cab-connexion__section--options > :not(.cab-connexion__identite):not(.cab-connexion__field--avatar) {
		grid-column: 1 / -1;
	}
}

/*
 * Le nom et l'adresse sur une même ligne dès qu'il y a la place.
 *
 * Empilées, ces trois lignes faisaient une colonne étroite au milieu d'une
 * bande large. L'adresse vient donc se poser à côté du nom, alignée sur la
 * même ligne de base malgré leurs deux tailles ; la date d'inscription passe
 * seule dessous — `flex-basis: 100%` la fait changer de rangée sans qu'on ait
 * à deviner la largeur de ce qui la précède.
 *
 * Sous 48rem on empile : le téléphone n'a pas cette place, et deux mots serrés
 * l'un contre l'autre se lisent moins bien que deux lignes.
 */
@media (min-width: 48rem) {
	.cab-carte-compte .cab-connexion__card > div {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		column-gap: 1.25rem;
	}

	.cab-carte-compte .cab-connexion__mail {
		margin-block-start: 0;
	}

	.cab-carte-compte .cab-connexion__since {
		flex-basis: 100%;
	}
}

/*
 * Le nom, l'adresse et la date se distinguaient par la couleur ; le bandeau
 * peint tous ses paragraphes en bleu, et les trois lignes se sont retrouvées
 * identiques. Les variables sont celles de l'extension : c'est elle qui décide
 * de ses couleurs, ici on lui rend seulement la main.
 */
.cab-bandeau .cab-carte-compte .cab-connexion__name {
	color: var(--cab-cnx-accent, var(--wp--preset--color--brand-blue));
}

.cab-bandeau .cab-carte-compte .cab-connexion__mail,
.cab-bandeau .cab-carte-compte .cab-connexion__since {
	color: var(--cab-cnx-muted, var(--wp--preset--color--gray));
}

/* Without an illustration the text takes the whole width rather than two thirds. */
.cab-bandeau .wp-block-columns:not(:has(img)) > .wp-block-column {
	flex-basis: 100% !important;
}

.cab-bandeau .wp-block-column:last-child:not(:has(img)) {
	display: none;
}

/*
 * His illustration bounces in. Ours rises into place, which says the same thing
 * without the hop — and says nothing at all to a reader who asked for stillness.
 */
@media (prefers-reduced-motion: no-preference) {
	.cab-bandeau :where(.wp-block-post-featured-image, .cab-term-image, .wp-block-image, .cab-bandeau__affiche) {
		animation: cab-bandeau-entree 900ms cubic-bezier(0.22, 1.15, 0.36, 1) both;
	}
}

@keyframes cab-bandeau-entree {
	from {
		opacity: 0;
		transform: scale(1.06) translate(-33px, 10px) rotate(-6deg);
	}

	to {
		opacity: 1;
		transform: scale(1.2) translate(-33px, -33px) rotate(-6deg);
	}
}

/*
 * On a phone the columns stack and the illustration goes back to its own size:
 * enlarged and pushed left it would leave the screen. The tilt stays, it being
 * the only thing that survives of the effect at that width in his version too.
 */
@media (max-width: 781px) {
	.cab-bandeau {
		padding-block: 1.75rem 4.375rem;
	}

	/*
	 * Stacked, there is no menu edge to line up with any more: the picture goes
	 * back to the middle of its own column, where the original leaves it.
	 */
	.cab-bandeau :where(.wp-block-post-featured-image, .cab-term-image, .wp-block-image, .cab-bandeau__affiche) {
		margin-inline: auto;
		transform: rotate(-6deg);
	}

	/*
	 * And the event's poster goes back with them. Stacked, there is no empty
	 * band beside the text to grow into: a poster spilling downward would land
	 * on the words. Said with the same two classes as the rule above, which
	 * would otherwise outweigh this one.
	 */
	.cab-bandeau--evenement .cab-bandeau__affiche {
		transform-origin: center;
		transform: rotate(-6deg);
		margin-bottom: 0;
	}

	.cab-bandeau--evenement .cab-bandeau__affiche img {
		max-height: 200px;
	}

	/*
	 * Narrow enough and the line wraps, which leaves a rule stranded at the
	 * start of the second line. Space alone separates the three readings there.
	 */
	.cab-bandeau__meta {
		gap: 0 1rem;
	}

	.cab-bandeau__meta > * + *::before {
		content: none;
	}
}

@media (max-width: 781px) and (prefers-reduced-motion: no-preference) {
	.cab-bandeau :where(.wp-block-post-featured-image, .cab-term-image, .wp-block-image, .cab-bandeau__affiche),
	.cab-bandeau--evenement .cab-bandeau__affiche {
		animation-name: cab-bandeau-entree-etroit;
	}
}

@keyframes cab-bandeau-entree-etroit {
	from {
		opacity: 0;
		transform: translateY(10px) rotate(-6deg);
	}

	to {
		opacity: 1;
		transform: rotate(-6deg);
	}
}

/* --------------------------------------------------------------------------
   Post grids
   -------------------------------------------------------------------------- */

/*
 * The cards.
 *
 * The frame is his, measured at 1280 px: a white box in a 2 px blue frame,
 * corners at 15, 19 px of padding, and a photograph flush against the top
 * three sides. What sits on top of it is ours.
 *
 * The card itself no longer moves on hover. The photograph does: dark at rest,
 * it lightens and grows a little under the pointer. The title sits on it, over
 * a gradient veil — and the veil is what keeps that title readable, not the
 * dimming, which disappears at the very moment someone looks at the card.
 */
.cab-card {
	/*
	 * LA HAUTEUR DEMANDÉE EST CELLE DU CADRE, BORDURE ET MARGE INTÉRIEURE
	 * COMPRISES. Sans cette ligne, `height: 100%` ne valait que pour le contenu,
	 * et les 19 px du bas plus les 2 px de chaque bord s'ajoutaient dessous : la
	 * carte dépassait sa case de 23 px. Dans une grille à une seule colonne — la
	 * bande du bas sur un téléphone — ces 23 px mangeaient les 16 px d'écart et
	 * mordaient de 7 px sur la carte suivante, qui semblait la toucher.
	 */
	box-sizing: border-box;
	height: 100%;
	background: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--brand-blue);
	border-radius: 15px;
	/*
	 * No padding at the top: the photograph is the first thing in the card and
	 * has to touch the frame. Pulling it up with a negative margin worked on
	 * the site and not in the editor, where `:root :where(.is-layout-flow) >
	 * :first-child { margin-block-start: 0 }` weighs the same as our rule and
	 * comes after it. Taking the padding away removes the need for the margin,
	 * and with it the argument.
	 */
	padding: 0 19px 19px;
	box-shadow: 0 12px 18px -6px rgba(0, 0, 0, 0.3);
	/* The ribbon crosses the corner and is cut by the card. */
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/*
 * The photograph reaches the frame: pulled out of the padding on three sides,
 * and rounded to 13 — the card's 15 less the 2 px of frame it sits inside, so
 * the two curves are concentric instead of merely close.
 */
/*
 * Named through the card: the space WordPress puts between the blocks of a
 * group is set by `:root :where(.is-layout-flow) > *`, which weighs as much as
 * a single class and comes after this sheet. Left at one class, the pull-out
 * lost on the top edge alone and the photograph sat 19 px low.
 */
.cab-card .cab-card__photo {
	position: relative;
	margin: 0 -19px 16px;
	border-radius: 13px 13px 0 0;
	overflow: hidden;
	background: var(--wp--preset--color--ink);
}

.cab-card__photo .wp-block-post-featured-image {
	margin: 0;
}

.cab-card__photo img {
	display: block;
	width: 100%;
	/* 315 by 197 on the original, which is 8:5 and not the 3:2 we had. */
	aspect-ratio: 8 / 5;
	object-fit: cover;
	border-radius: 0;
	transform: scale(1);
	transition: filter 0.35s ease, transform 0.55s ease;
}

/*
 * Only where there is a pointer. On a phone nothing ever hovers anything, and
 * a photograph that stays dark for good would be a defect rather than an
 * effect.
 */
@media (hover: hover) {
	.cab-card__photo img {
		filter: brightness(0.68);
	}

	.cab-card:hover .cab-card__photo img,
	.cab-card:focus-within .cab-card__photo img {
		filter: brightness(1);
		transform: scale(1.06);
	}
}

/* The veil under the title. It never leaves, whatever the dimming does. */
.cab-card__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(11, 20, 26, 0.92) 0%,
		rgba(11, 20, 26, 0.72) 34%,
		rgba(11, 20, 26, 0.12) 66%,
		rgba(11, 20, 26, 0) 100%
	);
}

.cab-card__photo .wp-block-post-title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	margin: 0;
	padding: 16px 18px;
	font-size: 21px;
	line-height: 1.18;
	color: var(--cab-sur-fond-sombre);
}

.cab-card__photo .wp-block-post-title a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
}

.cab-card__photo .wp-block-post-title a:hover,
.cab-card__photo .wp-block-post-title a:focus-visible {
	text-decoration: underline;
}

/*
 * UNE CARTE SANS PHOTOGRAPHIE PERDAIT SON TITRE, ET LE TITRE SON LIEN.
 *
 * Le titre est posé sur l'image — en absolu, en bas, à l'encre claire — et
 * `.cab-card__photo` tire sa hauteur de l'image qu'il contient. Un contenu sans
 * image mise en avant repliait donc la boîte à zéro, et `overflow: hidden`
 * emportait le titre avec elle, le ruban aussi : la carte montrait un extrait
 * et rien d'autre, sans aucune porte d'entrée.
 *
 * Neuf contenus publiés sont dans ce cas — un article, trois pages et les cinq
 * événements sans affiche — et ils remontent tous dans la recherche, qui
 * mélange les types.
 *
 * On donne donc à la boîte une hauteur à elle. Tout le reste fonctionne alors
 * comme avant : le fond sombre, le voile qui porte le titre, le ruban sur sa
 * bande. Le coin vert est le décor de la page d'accueil, repris ici pour qu'une
 * carte sans image appartienne encore au site au lieu de ressembler à une
 * photographie qui n'a pas chargé.
 *
 * La variante pleine hauteur n'a besoin de rien : elle déclare déjà une hauteur
 * minimale et un rapport.
 */
.cab-card:not(.cab-card--pleine) .cab-card__photo:not(:has(img)) {
	min-height: 11rem;
	background-image: var(--cab-coin-vert);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

/*
 * The category, inside a card, does not look like the extract under it.
 *
 * They shared a colour and a size, so the eye read the two lines as one block
 * and nothing said that the first classes the post while the second summarises
 * it. The category is now smaller, in small capitals, spaced — and coloured.
 * Three differences rather than one: a reader who cannot tell the two colours
 * apart still sees a different shape.
 */
.cab-card .cab-meta {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-blue);
}

.cab-card .cab-meta a {
	color: inherit;
	/* Same trick as the section names above: the line is drawn from the start
	   in transparent so it can fade rather than appear. The travel itself is
	   the one every link of the site inherits. */
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.18em;
}

/* Blue at rest, green under the pointer, underlined then: the site's rule for
   every link, which this one was following by half. */
.cab-card .cab-meta a:hover,
.cab-card .cab-meta a:focus-visible {
	color: var(--wp--preset--color--meadow-green);
	text-decoration-color: currentColor;
}

/* The extract is grey, not blue: blue reads as a link that is not one. */
.cab-card .wp-block-post-excerpt {
	color: var(--wp--preset--color--gray);
}

/* --------------------------------------------------------------------------
   The « new » ribbon

   Borrowed from Cabrio Dolce Machja, where it crosses the corner of a product
   tile: a band turned 45 degrees, wider than the corner it crosses, and cut
   by the container — hence the `overflow: hidden` on the card and on the
   photograph. Its colour is the theme's meadow green, which reads 4.99:1
   against white at this size.
   -------------------------------------------------------------------------- */
/*
 * Named through the card, and with a margin of its own: the ribbons are direct
 * children of the photograph's group, so WordPress's `:root
 * :where(.is-layout-flow) > *` gave the second one 16 px of block margin — and
 * a margin does move an absolutely positioned element. It sat 16 px lower than
 * its `top` said, which is exactly the gap that showed between the two bands,
 * and what threw the date off centre inside its own band.
 */
.cab-card .cab-card__ruban {
	margin: 0;
	position: absolute;
	z-index: 4;
	padding: 0.26rem 0;
	transform: rotate(-45deg);
	text-align: center;
	font-size: 0.68rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	/*
	 * The shadow stays under its own band. At `0 2px 8px` the blur reached
	 * 8 px in every direction for an offset of 2, so the second band cast a
	 * shade back over the first — and the pair looked separated by a dark line
	 * where they in fact touch. Pulled in by the spread, it can no longer climb
	 * past its own edge.
	 */
	box-shadow: 0 2px 3px -1px rgba(20, 35, 43, 0.32);
	color: var(--cab-sur-fond-sombre);
	/* The card's link covers the whole surface: without this, the ribbon would
	   punch a dead hole in the middle of what can be clicked. */
	pointer-events: none;
}

/*
 * The two colours come from the palette: the meadow green announces what is
 * new, the brand blue carries the date. Both read white text well above the
 * threshold — 4.99:1 and 5.66:1 — which a band of 11 px needs.
 */
.cab-card .cab-card__ruban--neuf {
	background-color: var(--wp--preset--color--meadow-green);
}

.cab-card .cab-card__ruban--date {
	background-color: var(--wp--preset--color--brand-blue);
	/* A date is read, not shouted. */
	text-transform: none;
	letter-spacing: 0.08em;
}

/*
 * The ranks move away from the corner. Each band is centred on the diagonal:
 * `left` is the distance to the corner less half the width, and `top` that
 * same distance less half the height — which is what keeps the band centred
 * whatever its rank. The second band crosses further from the corner, so it
 * spans a longer chord and is widened accordingly; without that its ends would
 * appear inside the card instead of being cut off.
 */
.cab-card .cab-card__ruban--rang-1 {
	top: 1.6rem;
	left: -3.2rem;
	width: 11rem;
}

.cab-card .cab-card__ruban--rang-2 {
	/*
	 * Recomputed rather than copied. The centre of a band sits on the corner's
	 * diagonal at a distance d, so `left` is d/√2 less half the width, and
	 * `top` that same d/√2 less half the height. With d₁ = 3.30 rem and a band
	 * 1.54 rem tall, the second sits at d₂ = d₁ + 1.54 − 0.06 rem.
	 *
	 * The 0.06 is what makes them touch. Placed at exactly one band's distance
	 * they meet edge to edge and a hairline of the picture shows between them:
	 * two antialiased edges at 45 degrees never quite close. Dolce Machja has
	 * them bite by a pixel for the same reason.
	 *
	 * Its width is not the first's either: the chord it crosses is longer
	 * (2 × d₂ = 9.56 rem), and it has to overshoot on both sides by more than
	 * the corner's radius, or its end shows inside the picture instead of being
	 * cut off. At 12 rem it overshot by 6 px and the bevel was visible; 14 rem
	 * gives 34 px, the same margin the first band has.
	 */
	top: 2.61rem;
	left: -3.62rem;
	width: 14rem;
}

/* --------------------------------------------------------------------------
   The home page cards: the photograph is the whole card

   Portrait, no frame, every word on the image. Kept for the three lists of the
   home page, where there are few cards and they can afford the room.
   -------------------------------------------------------------------------- */
.cab-card--pleine {
	border: 0;
	padding: 0;
	background: transparent;
}

/*
 * The frame keeps its shape whether or not there is a poster inside it.
 *
 * All the height came from the picture. On a row where one card had a poster
 * the others were stretched to match and nobody noticed; the day a card
 * without one stood alone on its row, it collapsed to nothing — the title, the
 * date and the link were all there, in a box zero pixels high.
 *
 * `height: 100%` still wins whenever the row has a height to give, so nothing
 * changes where it already worked.
 */
.cab-card--pleine .cab-card__photo,
.cab-card.cab-card--pleine .cab-card__photo {
	margin: 0;
	height: 100%;
	min-height: 17rem;
	aspect-ratio: 3 / 4;
	border-radius: 15px;
}

.cab-card--pleine .cab-card__photo img {
	aspect-ratio: 3 / 4;
	height: 100%;
}

/*
 * Here the veil is carried by the block of text itself, not by the whole
 * photograph.
 *
 * The first attempt darkened the full height — it held the measure and killed
 * the picture, which is what Cyrille saw straight away. What has to be dark is
 * only what sits behind words; above them the photograph is left alone. The
 * shared `::after` therefore keeps just enough to seat the text block, and the
 * work is done underneath it.
 */
.cab-card--pleine .cab-card__photo::after {
	background: linear-gradient(
		to top,
		rgba(11, 20, 26, 0.5) 0%,
		rgba(11, 20, 26, 0.18) 30%,
		rgba(11, 20, 26, 0) 55%
	);
}

.cab-card--pleine .cab-card__texte {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	/* 54 px above, which is where the veil fades in: the words never begin
	   before it is dark enough to carry them. */
	padding: 54px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	/*
	 * The veil holds its strength up to 82 %, which is where the padding
	 * begins, and fades only above it: the title therefore always sits on the
	 * full veil. At 62 % the fade started under the title itself and it came
	 * out at 3.94:1 for the 4.5 it needs.
	 */
	background: linear-gradient(
		to top,
		rgba(11, 20, 26, 0.72) 0%,
		rgba(11, 20, 26, 0.68) 82%,
		rgba(11, 20, 26, 0) 100%
	);
}

.cab-card--pleine .cab-card__texte .wp-block-post-title {
	position: static;
	padding: 0;
	font-size: 21px;
}

/*
 * The category takes a green on a photograph too, where the extract stays
 * pale — the same three differences as on a white card.
 *
 * A shade lighter than the palette's bright green, and measured: over the
 * lightened veil that green reads 4.05:1 for the 4.5 a 12 px line needs. This
 * one reads 5.2 on the worst pixel of the three home page images.
 */
.cab-card--pleine .cab-card__texte .cab-meta,
.cab-card--pleine .cab-card__texte .cab-meta a {
	color: var(--cab-meta-photo);
}

.cab-card--pleine .cab-card__texte .wp-block-post-excerpt {
	color: var(--cab-texte-photo);
	font-size: var(--wp--preset--font-size--small);
}

/* Meta line: category, date, author. */
.cab-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.9rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--gray);
}

.cab-meta a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
}

/*
 * Vert et non bleu : le bleu est la couleur du repos, la reprendre au survol
 * ne disait rien. Signalé de longue date sur les cartes du matériel roulant.
 */
.cab-meta a:hover,
.cab-meta a:focus-visible {
	color: var(--wp--preset--color--meadow-green);
	text-decoration-line: underline;
	text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   Post content
   -------------------------------------------------------------------------- */

/*
 * DEUX NOMS POUR UN SEUL ENDROIT. Tout ce qui suit habille le contenu d'un
 * texte, et le dit deux fois : `.cab-content` est la classe que le gabarit
 * donne au bloc « Contenu » sur le site, `.wp-block-post-content` celle que
 * l'éditeur donne à la racine de son canevas — il ne connaît pas la nôtre,
 * puisqu'elle est écrite dans un gabarit qu'il n'ouvre pas.
 *
 * Sans le second nom, l'éditeur montre autre chose que le site : le dépliant y
 * sortait nu et le bloc de code sans sa marge intérieure. Le `:is()` ne pèse
 * que ce que pèse une classe, donc rien ne change de poids en chemin.
 */

/*
 * UN DÉFAUT, PAS UNE DÉCISION. Ces 3 px sont là pour qu'une image posée sans
 * rien dire n'ait pas des angles vifs. Mais les styles globaux — Apparence →
 * Styles → Blocs → Image — écrivent leur rayon dans
 * `:root :where(.wp-block-image img …)`, dont le poids ne tient qu'au `:root` :
 * (0,1,0). Notre sélecteur pesait (0,1,1) et gagnait, donc un rayon choisi dans
 * l'éditeur de site ne s'appliquait qu'à l'écran d'édition, jamais sur le site.
 *
 * Tout entier dans un `:where()`, il ne pèse plus rien : il tient tant que
 * personne n'a dit autre chose, et s'efface dès qu'on le fait.
 */
:where(:is(.cab-content, .wp-block-post-content) figure) img {
	border-radius: 3px;
}

:is(.cab-content, .wp-block-post-content) figcaption {
	margin-top: 0.5rem;
}

/* Wide content must never widen the page itself. */
:is(.cab-content, .wp-block-post-content) :where(table, pre, .wp-block-table) {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* --------------------------------------------------------------------------
   Les blocs du texte

   Le thème habillait jusqu'ici les blocs qui FONT le site — la navigation, la
   recherche, les cartes, les fiches — et laissait nus ceux qu'on emploie en
   ÉCRIVANT. La page d'exemple, qui sert de banc d'essai, le disait sans
   détour : un entête de tableau coupé au milieu d'un mot, un bloc de code dont
   le texte touchait le bord, des listes à 40 px de retrait et des puces grises,
   un filet de séparation collé au paragraphe suivant.

   Rien ici n'invente une couleur. Tout est pris dans la palette ou mélangé à
   l'encre, donc tout suit le mode sombre — où `cream`, `white` et `--cab-encre`
   changent de valeur — sans qu'une seule de ces règles ait à le savoir.

   Et tout est borné à `:is(.cab-content, .wp-block-post-content)` : ce sont les blocs d'un texte, pas ceux
   d'un gabarit. Une liste de la barre de filtres ou du pied de page n'est pas
   concernée.
   -------------------------------------------------------------------------- */

/*
 * LE TABLEAU REDEVIENT UN TABLEAU. La règle plus haut passe `table` en `block`
 * pour qu'un tableau large ne pousse pas la page ; le défilement, lui, se fait
 * très bien sur la `figure` qui l'entoure, et un tableau en `block` perd la
 * mise en page qui est sa raison d'être. Il la retrouve ici, et c'est la figure
 * qui glisse.
 *
 * Sous 40 rem, trois colonnes dans 360 px ne sont plus un tableau mais une
 * bouillie : on lui rend une largeur minimale et on le laisse filer sous le
 * doigt.
 */
:is(.cab-content, .wp-block-post-content) .wp-block-table table {
	display: table;
	width: 100%;
	border-collapse: collapse;
}

@media (max-width: 40rem) {
	:is(.cab-content, .wp-block-post-content) .wp-block-table table {
		min-width: 30rem;
	}
}

/*
 * LA CÉSURE DU CŒUR. WordPress pose `word-break: break-word` sur les cellules :
 * un mot qui ne tient pas est coupé n'importe où. Mesuré sur le banc d'essai —
 * « Name » devenait « Nam / e » et la rangée d'entête montait à 81 px ; césure
 * rendue normale, elle retombe à 50 px et le mot se lit.
 *
 * `overflow-wrap` reste : l'adresse interminable, elle, doit bien céder
 * quelque part, mais seulement quand elle n'a pas le choix.
 *
 * Les filets : ceux de la fiche — un trait d'un pixel entre les lignes, rien
 * autour. Le cœur cerne chaque cellule, ce qui fait une grille de comptable
 * là où le site ne dessine jamais que des lignes.
 */
:is(.cab-content, .wp-block-post-content) .wp-block-table :is(th, td) {
	padding: 0.6rem 0.8rem;
	border: 0;
	border-block-start: 1px solid color-mix(in srgb, var(--cab-encre) 12%, transparent);
	font-variant-numeric: tabular-nums;
	overflow-wrap: break-word;
	text-align: start;
	vertical-align: top;
	word-break: normal;
}

/*
 * Et le cœur barre l'entête et le pied d'un trait de 3 px à l'encre pleine —
 * mesuré : 2,8 px de #2b3a44 sur `thead`, autant sur `tfoot`. Deux traits noirs
 * dans un tableau qui n'a partout ailleurs que des cheveux gris. On les efface
 * ici, et ce sont les cellules qui portent la séparation, comme les lignes.
 */
:is(.cab-content, .wp-block-post-content) .wp-block-table :is(thead, tfoot) {
	border: 0;
}

/* L'entête parle comme les étiquettes de la fiche : petites capitales, en bleu. */
:is(.cab-content, .wp-block-post-content) .wp-block-table thead th {
	border-block-start: 0;
	border-block-end: 2px solid color-mix(in srgb, var(--wp--preset--color--brand-blue) 35%, transparent);
	color: var(--wp--preset--color--brand-blue);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Le total se distingue de la dernière ligne, sinon il en est une de plus. */
:is(.cab-content, .wp-block-post-content) .wp-block-table tfoot :is(th, td) {
	border-block-start-width: 2px;
	font-weight: 600;
}

/*
 * Les rayures du cœur sont grises (#f0f0f0) : elles le restent sur fond sombre.
 * Celles-ci sont le vert pâle du site, qui bascule avec lui. Et quand les
 * rangées sont peintes, les filets n'ont plus rien à séparer.
 */
:is(.cab-content, .wp-block-post-content) .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: var(--wp--preset--color--cream);
}

:is(.cab-content, .wp-block-post-content) .wp-block-table.is-style-stripes tbody :is(th, td) {
	border-block-start-color: transparent;
}

:is(.cab-content, .wp-block-post-content) .wp-block-table.is-style-stripes {
	border-bottom: 1px solid color-mix(in srgb, var(--cab-encre) 12%, transparent);
}

/*
 * LE CODE. `theme.json` lui donnait sa couleur de fond et sa fonte, personne ne
 * lui avait donné de marge intérieure : le texte commençait sur le bord du
 * rectangle. Le cerclé d'un pixel est celui du panneau de la fiche, l'arrondi
 * aussi — c'est la même famille d'objets, une surface posée dans le texte.
 */
:is(.cab-content, .wp-block-post-content) :is(.wp-block-code, .wp-block-preformatted, .wp-block-verse) {
	padding: 1rem 1.1rem;
	border-radius: 14px;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cab-encre) 12%, transparent);
}

/* Le préformaté et le vers n'ont pas de fond déclaré ; ils prennent le même. */
:is(.cab-content, .wp-block-post-content) :where(.wp-block-preformatted, .wp-block-verse) {
	background-color: var(--wp--preset--color--cream);
}

/*
 * Le code AU FIL DU TEXTE — `for (;;)` dans un paragraphe — n'était rien :
 * la fonte `monospace` du navigateur, sans fond, plus petite que la ligne qui
 * la porte. Le mélange à l'encre plutôt que le vert pâle, parce qu'il arrive
 * qu'il tombe sur un fond déjà vert pâle.
 */
:is(.cab-content, .wp-block-post-content) :not(pre) > code {
	padding: 0.1em 0.4em;
	border-radius: 4px;
	background-color: color-mix(in srgb, var(--cab-encre) 8%, transparent);
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: 0.9em;
}

/*
 * LE BOUTON À CONTOUR. `theme.json` dit la couleur du bouton plein ; le style
 * « contour » du cœur, lui, vide le fond et prend `currentColor` — c'est-à-dire
 * l'encre du texte au milieu duquel il tombe. Sur le banc d'essai, les deux
 * boutons voisins n'étaient donc pas de la même famille : l'un bleu de marque,
 * l'autre cerclé de noir.
 *
 * Il prend le bleu, et au survol il se remplit de vert comme son frère plein.
 * `:not(.has-text-color)` pour qu'une couleur choisie dans l'éditeur gagne.
 */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--brand-blue);
}

/*
 * Sauf sur une photographie. La bannière de l'accueil pose le sien dans un
 * bloc « Couverture », où le texte est déjà clair : `currentColor` y valait du
 * blanc, et le bleu de marque l'aurait fait disparaître dans l'image. Là, il
 * reprend l'encre de l'endroit — c'est-à-dire ce qu'il avait avant.
 */
:is(.wp-block-cover, .cab-voisines__bande, .cab-histoire__encart, [class*="has-brand-blue-background"]) .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	color: currentColor;
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):hover,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color):focus-visible {
	border-color: var(--wp--preset--color--meadow-green);
	background-color: var(--wp--preset--color--meadow-green);
	color: var(--cab-sur-fond-sombre);
}

/*
 * LES LISTES. Quarante pixels de retrait sont ceux du navigateur, pas ceux
 * d'une mise en page : le texte d'une liste décrochait de celui du paragraphe
 * au-dessus. Un retrait relatif suit le corps du texte partout où il change.
 *
 * La puce prend le vert du site. C'est `::marker` qui la porte, donc le numéro
 * d'une liste ordonnée l'a aussi — et la ligne, elle, reste à l'encre.
 */
:is(.cab-content, .wp-block-post-content) .wp-block-list {
	padding-inline-start: 1.5em;
}

:is(.cab-content, .wp-block-post-content) .wp-block-list li {
	margin-block: 0.3rem;
}

:is(.cab-content, .wp-block-post-content) .wp-block-list li::marker {
	color: var(--wp--preset--color--meadow-green);
}

:is(.cab-content, .wp-block-post-content) .wp-block-list :is(ul, ol) {
	margin-block-start: 0.3rem;
}

/*
 * LE FILET. Le cœur en dessine deux — une bordure en haut, une en bas — et le
 * bloc arrivait avec 16 px au-dessus et rien en dessous : un trait collé au
 * titre qu'il annonçait. Un seul trait, à l'encre diluée pour qu'il tienne sur
 * les deux fonds, et l'air d'un changement de sujet de part et d'autre.
 */
:is(.cab-content, .wp-block-post-content) .wp-block-separator {
	margin-block: var(--wp--preset--spacing--50);
}

:is(.cab-content, .wp-block-post-content) .wp-block-separator:not(.is-style-dots) {
	height: 0;
	border-block-start-width: 0;
	border-block-end: 1px solid color-mix(in srgb, var(--cab-encre) 15%, transparent);
}

/*
 * LE DÉPLIANT. Nu : ni marge intérieure, ni cadre, ni fond, et son titre en
 * texte courant derrière le petit triangle du navigateur — rien ne disait qu'on
 * pouvait cliquer dessus, et rien ne disait où le replié commençait ni finissait.
 *
 * C'est la même surface que le bloc de code, juste au-dessus : vert pâle,
 * cerclée d'un pixel, 14 px d'arrondi. Les deux sont des objets posés DANS le
 * texte plutôt que du texte, et ils doivent se ressembler.
 *
 * Le titre prend la voix des titres — fonte et vert du site — parce que c'en
 * est un : il annonce ce qu'il cache. Le chevron est celui du dépliant de
 * l'agenda, au trait près ; il n'y a qu'un seul dessin de chevron sur ce site.
 *
 * `list-style: none` retire le triangle, et la règle `::-webkit-details-marker`
 * le retire une seconde fois pour Safari, qui dessine le sien et ignore l'autre.
 */
:is(.cab-content, .wp-block-post-content) .wp-block-details {
	padding: 0.9rem 1.1rem;
	border-radius: 14px;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cab-encre) 12%, transparent);
	background-color: var(--wp--preset--color--cream);
}

:is(.cab-content, .wp-block-post-content) .wp-block-details > summary {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--wp--preset--color--meadow-green);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.15;
	list-style: none;
}

:is(.cab-content, .wp-block-post-content) .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

/* Le chevron pointe vers le bas quand il y a à ouvrir, vers le haut sinon. */
:is(.cab-content, .wp-block-post-content) .wp-block-details > summary::before {
	content: "";
	flex: none;
	width: 0.4rem;
	height: 0.4rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}

:is(.cab-content, .wp-block-post-content) .wp-block-details[open] > summary::before {
	transform: translateY(2px) rotate(-135deg);
}

/*
 * Ce qui sort du pli se sépare du titre par un filet, comme deux lignes d'un
 * tableau : sans lui, la première phrase se colle au titre qui l'annonce.
 *
 * `summary + *` et non `:not(summary):first-of-type` : le second compte par
 * TYPE d'élément, donc un dépliant qui commence par un titre puis un paragraphe
 * aurait reçu deux filets, l'un sous l'autre. Ici, c'est le voisin immédiat du
 * titre, quel qu'il soit, et lui seul.
 */
:is(.cab-content, .wp-block-post-content) .wp-block-details > summary + * {
	margin-block-start: 0.9rem;
	padding-block-start: 0.9rem;
	border-block-start: 1px solid color-mix(in srgb, var(--cab-encre) 12%, transparent);
}

:is(.cab-content, .wp-block-post-content) .wp-block-details > :last-child {
	margin-block-end: 0;
}

/*
 * LE MÉDIA-TEXTE, ET SA GOUTTIÈRE QUI N'EN ÉTAIT PAS UNE. Le cœur ne met aucun
 * écart entre l'image et le texte : il prend 8 % de la colonne de texte comme
 * marge intérieure — mesuré, 27 px À GAUCHE ET À DROITE. Le texte se détachait
 * donc de l'image d'un côté, et rentrait d'autant du côté opposé, où il n'y
 * avait rien à éviter.
 *
 * Un vrai écart, et le même que partout ailleurs : celui des colonnes du site.
 * Le texte retrouve alors toute sa largeur, et sa dernière lettre s'aligne sur
 * le bord de la page comme celle du paragraphe au-dessus.
 *
 * Empilé sur un téléphone, 48 px entre une image et son texte feraient deux
 * blocs étrangers : la ligne se resserre à l'écart courant.
 */
:is(.cab-content, .wp-block-post-content) .wp-block-media-text {
	gap: var(--wp--preset--spacing--50, 1.5rem) var(--wp--preset--spacing--60, 3rem);
}

:is(.cab-content, .wp-block-post-content) .wp-block-media-text > .wp-block-media-text__content {
	padding-inline: 0;
}

/*
 * LE CONTENU EMBARQUÉ, qui n'avait presque rien à se faire dire. Mesuré sur les
 * deux vidéos du décor de Noël : pleine largeur du texte à 678 px, rapport 1,78
 * exact, et il se redimensionne. Une seule chose lui manquait, celle que le
 * thème donne à toutes les images d'un texte : les 3 px d'angle, dont son cadre
 * ne peut hériter puisque ce n'est pas une image.
 *
 * TOUT ENTIER DANS UN `:where()`, donc sans poids : ces 3 px sont le repli du
 * site qui n'a rien choisi. Dès qu'un cadre est posé dans l'éditeur de site,
 * `inc/image-frame.php` le prête à la vidéo comme aux images, et cette ligne
 * s'efface sans avoir à être annulée.
 */
:where(:is(.cab-content, .wp-block-post-content) .wp-block-embed) :is(iframe, video) {
	border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.cab-footer a {
	text-decoration: underline;
	text-decoration-color: transparent;
}

.cab-footer a:hover {
	text-decoration: underline;
}

/*
 * The footer is two bands, as the original is: a pale blue one carrying the
 * columns, and a dark bar under it carrying the signature. Measured there at
 * 1280 px — 603 px for the first, 61 for the second, 100 px of padding above
 * the columns under the divider.
 */
.cab-footer__haut {
	padding-block: 100px 50px;
}

.cab-footer__colonnes {
	gap: 31px;
}

/*
 * The column headings: 23 px Unica One there, in a green that failed the
 * contrast measure. Ours is the meadow green the whole site settled on, which
 * reads at 4.9:1 on this pale blue.
 */
.cab-footer__titre {
	margin-block: 0 18px;
	/*
	 * A shade under the meadow green of the palette, and measured rather than
	 * chosen: #557a2c reads 4.43:1 on this pale blue, just under the 4.5 a
	 * 22 px heading needs. This one reads 5.14:1. The original's own green is
	 * lighter still and fails the same measure.
	 */
	color: var(--cab-titre-pied);
	line-height: 1.5;
}

/*
 * The lists of posts, and the lists of links, share one rhythm: 14 px, 7 px
 * between entries, and the brand blue for the text — the original's numbers.
 */
.cab-footer__liste .wp-block-post-title,
.cab-footer__liens {
	margin-block: 0;
	line-height: 1.4;
}

.cab-footer__liste .wp-block-post-template {
	gap: 7px;
}

.cab-footer__liste .wp-block-post-title a,
.cab-footer__liens a {
	color: var(--wp--preset--color--brand-blue);
}

.cab-footer__liens a {
	display: inline-block;
	margin-block: 3px;
}

/*
 * The dark bar. Its parts sit on one line, 48 px tall.
 *
 * Named through the footer, and not on its own: the space between the blocks
 * of a group is set by `:root :where(.is-layout-flow) > *`, which weighs
 * exactly as much as a single class. On the site the global stylesheet comes
 * first and this rule won; in the editor the order is reversed and it lost —
 * the white strip between the pale blue and the ink was the page's own
 * background, seen through that gap. One class more settles it everywhere.
 */
.cab-footer .cab-footer__bas {
	/* 11 px, not 6: the row is a flex group now, and no longer carries the
	   margins a pair of columns brought with it. */
	padding-block: 11px;
	margin-block-start: 0;
}

/*
 * The signature is one flex row and no longer a pair of columns: the copyright
 * to the left, the logo and the icons to the right. Columns brought a block
 * the editor kept refusing — and with it an empty thumbnail on the Patterns
 * screen — for a layout two flex rules describe.
 */
.cab-footer__signature {
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.cab-footer__copyright {
	margin-block: 0;
	font-family: var(--wp--preset--font-family--heading);
	line-height: 1.7;
}

/*
 * The links in the dark bar take the colour of the line they sit in — the
 * bright green, which reads 7.55:1 against the ink — and brighten on hover.
 * Not the blue links get everywhere else: that blue reads 2.52:1 here.
 *
 * They carry no underline at rest, which is Cyrille's call and the original's
 * way; the underline comes back for keyboard focus, where the ring alone is
 * not always enough to say which of the two links is about to be followed.
 */
.cab-footer__copyright a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
	transition: filter 0.15s ease;
}

.cab-footer__copyright a:hover {
	filter: brightness(1.25);
	text-decoration: none;
}

.cab-footer__copyright a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/*
 * The Cabrio logo and the social icons share one line, to the right of the
 * copyright — on a phone too, where the rest of the bar stacks above them.
 */
.cab-footer__signes {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: nowrap;
	gap: 20px;
}

.cab-footer__marque {
	margin-block: 0;
	flex: 0 0 auto;
}

/*
 * The logo brightens on hover rather than swapping for the light version in
 * the media library: one file, no second request, and nothing to keep in step
 * if the logo ever changes.
 */
/*
 * The link around the logo is displayed as a block, and that is what puts the
 * logo level with the line beside it: left inline, it sat on a text baseline
 * and the figure came out 36 px tall for a 26 px image — the image pinned to
 * the top of it, four pixels above everything else on the bar.
 */
.cab-footer__marque a {
	display: block;
}

.cab-footer__marque img {
	display: block;
	transition: filter 0.15s ease;
}

.cab-footer__marque a:hover img,
.cab-footer__marque a:focus-visible img {
	filter: brightness(1.35);
}

.cab-footer__social {
	margin-block: 0;
	flex: 0 0 auto;
}

/* Under 782 px the three parts stack, and each takes the middle. */
@media (max-width: 781px) {
	.cab-footer__signature {
		text-align: center;
		justify-content: center;
	}

	.cab-footer__signature > .cab-footer__copyright {
		flex-basis: 100%;
	}

	/*
	 * Stacked, the logo sits at the exact middle of the bar and the social
	 * icons hang to its right. Centring the pair as a whole would have put
	 * their common middle at the centre, and the logo a little to the left of
	 * it — which is what showed. Two equal side columns fix the middle one.
	 */
	/*
	 * Named through the bar, and not on its own: the group carries WordPress's
	 * own `is-layout-flex` class, whose `justify-content` is declared in a
	 * sheet that comes after this one. At equal weight the last one wins, so
	 * this needs one class more to be heard.
	 */
	.cab-footer__bas .cab-footer__signes {
		justify-content: center;
	}

	.cab-footer__haut {
		padding-block: 70px 40px;
	}

	/*
	 * Four posts a list instead of six. Stacked, the four columns run to more
	 * than a thousand pixels of footer, most of it headlines the visitor has
	 * already scrolled past. The two links that lead to the full lists are
	 * right there in the column beside them.
	 */
	.cab-footer__liste .wp-block-post-template > li:nth-child(n + 5) {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   The bow-tie divider

   The original slides one between its bands: two triangles crossing, one
   solid, one at half opacity, in the colour of the band *facing* it. Lifted
   from its own SVG — 1280 by 140, drawn at 100 px tall and stretched to any
   width.

   It is a mask and not a background image, which is what makes it reusable:
   the drawing decides the shape, `background-color` decides the colour, and
   the half-opaque triangle comes out as a half-covered band of that same
   colour. One rule serves every junction; only `--cab-bowtie` changes.
   -------------------------------------------------------------------------- */
.cab-bowtie {
	position: relative;
}

/*
 * UN PIXEL PLUS HAUT QUE LE HAUT.
 *
 * Le nœud commence exactement où la bande au-dessus s'arrête — même position
 * au centième de pixel près, mesurée. Ça ne suffit pas : le fond de la bande
 * et ce dessin sont peints par deux couches différentes, chacune arrondie à sa
 * manière sur la grille de l'écran, et sur un téléphone (deux pixels physiques
 * pour un pixel CSS) il restait entre les deux une ligne du fond du pied de
 * page, pâle, sur toute la largeur.
 *
 * Le dessin déborde donc d'un pixel vers le haut. Sa première ligne est pleine
 * et de la couleur de ce qui précède — c'est la règle de ce décor — donc elle
 * recouvre la bande de sa propre couleur : rien à voir, sauf la couture qui
 * disparaît. Le masque s'étire d'un soixantième, ce que personne ne mesure.
 */
.cab-bowtie::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: calc(var(--cab-bowtie-height, 100px) + 1px);
	z-index: 1;
	pointer-events: none;
	background-color: var(--cab-bowtie, var(--wp--preset--color--white));
	-webkit-mask-image: var(--cab-bowtie-image);
	mask-image: var(--cab-bowtie-image);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

:root {
	--cab-bowtie-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1280' height='140' viewBox='0 0 1280 140' preserveAspectRatio='none'%3E%3Cg fill='%23fff'%3E%3Cpath d='M1280 0L640 70 0 0v140l640-70 640 70V0z' fill-opacity='.5'/%3E%3Cpath d='M1280 0H0l640 70 640-70z'/%3E%3C/g%3E%3C/svg%3E");
	--cab-bowtie-image-bas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1280' height='140' viewBox='0 0 1280 140' preserveAspectRatio='none'%3E%3Cg fill='%23fff'%3E%3Cpath d='M0 140l640-70 640 70V0L640 70 0 0v140z' fill-opacity='.5'/%3E%3Cpath d='M0 140h1280L640 70 0 140z'/%3E%3C/g%3E%3C/svg%3E");

	/* Le coin vert du fond de la bande des nouvelles, tracé de l'original. */
	--cab-coin-vert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1250' preserveAspectRatio='none' fill='%23a4bd01' fill-opacity='.55'%3E%3Cpath d='M1423.43,1145.79,1920,958.23V0H832.83l400.32,1059.85A147.64,147.64,0,0,0,1423.43,1145.79Z'/%3E%3C/svg%3E");

	/*
	 * Les barres obliques du fond de l'encart : le masque « diagonal-pills »
	 * de Divi, relevé dans la page rendue puis décodé. Son noir à 10 % et son
	 * `xMinYMin slice` sont les siens ; il se retourne à l'horizontale comme
	 * chez lui, où le réglage dit `invert|flip_horizontal`.
	 */
	--cab-pilules: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1440' preserveAspectRatio='xMinYMin slice' fill='%23000' fill-opacity='.1'%3E%3Cpath d='M1354.19,697.54,817.48,1440H525l637.07-881.3a118.5,118.5,0,0,1,165.46-26.62h0A118.51,118.51,0,0,1,1354.19,697.54Zm7-212.3h0a118.49,118.49,0,0,0,165.45-26.61L1858.16,0H1565.72L1334.55,319.78A118.5,118.5,0,0,0,1361.17,485.24Zm-3.6,519.84h0a118.5,118.5,0,0,0-165.46,26.62L897,1440H1189.4l194.79-269.46A118.51,118.51,0,0,0,1357.57,1005.08Zm33.6-46.84h0a118.49,118.49,0,0,0,165.45-26.61L1920,429V24.4L1364.55,792.78A118.5,118.5,0,0,0,1391.17,958.24Zm306.4,89.84h0a118.5,118.5,0,0,0-165.46,26.62L1268.05,1440h292.43l163.71-226.46A118.51,118.51,0,0,0,1697.57,1048.08Zm7-212.3a118.5,118.5,0,0,0,26.62,165.46h0a118.49,118.49,0,0,0,165.45-26.61L1920,942.29V537.74Z'/%3E%3C/svg%3E");

	/* La loupe du cœur, celle que porte le bouton de la barre du haut. */
	--cab-loupe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M13 5c-3.3 0-6 2.7-6 6 0 1.4.5 2.7 1.3 3.7l-3.8 3.8 1.1 1.1 3.8-3.8c1 .8 2.3 1.3 3.7 1.3 3.3 0 6-2.7 6-6S16.3 5 13 5zm0 10.5c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5 4.5 2 4.5 4.5-2 4.5-4.5 4.5z'/%3E%3C/svg%3E");
}

/*
 * The same divider hung under a band instead of over one — the drawing turned
 * upside down, nothing else. A band closes itself with `--bas`; a section opens
 * itself with the plain class.
 */
.cab-bowtie--bas {
	position: relative;
}

/* Et d'un pixel vers le bas pour celui qui pend, même couture, même remède. */
.cab-bowtie--bas::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: calc(var(--cab-bowtie-height, 100px) + 1px);
	z-index: 1;
	pointer-events: none;
	background-color: var(--cab-bowtie, var(--wp--preset--color--white));
	-webkit-mask-image: var(--cab-bowtie-image-bas);
	mask-image: var(--cab-bowtie-image-bas);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* A phone gets a shallower one, as the original does. */
@media (max-width: 781px) {
	.cab-bowtie::before,
	.cab-bowtie--bas::after {
		height: calc(var(--cab-bowtie-height, 60px) + 1px);
	}

	/* Et le décor vert ne monte que d'autant. */
	.cab-bande--news::after {
		inset: calc(-1 * var(--cab-bowtie-height, 60px)) 0 0;
	}
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--50);
}

.wp-block-query-pagination .page-numbers,
.cab-comments .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	height: 2.4rem;
	padding-inline: 0.5rem;
	border: 1px solid var(--wp--preset--color--light-gray);
	border-radius: 3px;
	text-decoration: none;
}

.wp-block-query-pagination .page-numbers:hover,
.wp-block-query-pagination .page-numbers.current,
.cab-comments .page-numbers:hover,
.cab-comments .page-numbers.current {
	background: var(--wp--preset--color--brand-blue);
	border-color: var(--wp--preset--color--brand-blue);
	color: var(--cab-sur-fond-sombre);
}

/* --------------------------------------------------------------------------
   Upcoming events block
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   The events

   Same data as the original — the day on a tab, the title, then the date, the
   venue, its address, the organiser, the price and the event's own site — laid
   out as a full-image card, which is what Cyrille asked for.

   The poster of an event is usually a portrait full of writing, so the veil of
   `.cab-card--pleine` does more work here than on a photograph of a layout.
   -------------------------------------------------------------------------- */
.cab-events {
	display: grid;
	/* auto-fill and not auto-fit: with a single event to show, auto-fit
	   collapses the empty tracks and the lone card stretches to the full
	   width of the page. */
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * SAUF SOUS LE TITRE D'UNE BANDE. La grille est une liste, et la remise à zéro
 * ci-dessus lui retire aussi la marge que le rythme des bandes lui donne — les
 * 28 px relevés chez lui entre un titre et ce qui le suit. Les deux règles
 * pèsent pareil, celle-ci est écrite après, donc c'est elle qui l'emportait :
 * sur l'accueil, les cartes des événements touchaient leur titre, quand les
 * colonnes des nouvelles gardaient bien leurs 28 px deux bandes plus haut.
 */
.cab-bande :where(h1, h2, h3) + .cab-events {
	margin-block-start: 28px;
}

.cab-events__item {
	margin: 0;
}

/* The tab of days, top left, over the picture and over the veil. */
.cab-events__tab {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
	margin: 0;
	padding: 8px 12px 7px;
	border-radius: 4px;
	background: rgba(244, 246, 243, 0.94);
	text-align: center;
	line-height: 1.1;
}

/*
 * The stamp of a date gone by, on the corner the tab leaves free.
 *
 * Tilted and outlined, because that is what a stamp looks like and the shape
 * carries the meaning before the word is read — a reader who lands on a past
 * view from a link has nothing else to tell them.
 */
.cab-events__tampon {
	position: absolute;
	top: 16px;
	right: 12px;
	z-index: 3;
	padding: 0.28rem 0.6rem;
	border: 2px solid var(--wp--preset--color--signal-orange);
	border-radius: 4px;
	margin: 0;
	background: rgba(244, 246, 243, 0.94);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.86rem;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	transform: rotate(-8deg);
}

.cab-events--cote .cab-events__tampon {
	top: 12px;
	right: 10px;
	font-size: 0.74rem;
}

.cab-events__day {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.55rem;
	color: var(--wp--preset--color--meadow-green);
}

.cab-events__month {
	display: block;
	margin-top: 2px;
	font-size: 0.78rem;
	color: var(--wp--preset--color--brand-blue);
}

.cab-events__title {
	margin: 0 0 10px;
	font-size: 20px;
	line-height: 1.2;
	color: var(--cab-sur-fond-sombre);
}

.cab-events__title a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
}

.cab-events__title a:hover,
.cab-events__title a:focus-visible {
	text-decoration: underline;
}

.cab-events__facts {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

/*
 * Each fact is an icon and a line of text. The icon keeps its own column so
 * that a fact running over two lines stays aligned under itself.
 */
.cab-events__fact {
	display: grid;
	grid-template-columns: 15px 1fr;
	align-items: start;
	gap: 8px;
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.4;
	color: var(--cab-texte-photo-fort);
}

.cab-events__icon {
	margin-top: 0.18em;
	color: var(--cab-meta-photo);
}

/*
 * `text-decoration-line` et non le raccourci : `text-decoration: underline`
 * remet la couleur du trait à `currentColor`, et ce lien était le seul de tout
 * le site à garder un souligné visible au repos après le balayage.
 */
.cab-events__fact a {
	color: inherit;
	text-decoration-line: underline;
	text-underline-offset: 2px;
}

/* The address is the longest line and the least useful at a glance. */
.cab-events__fact--place {
	font-size: 0.78rem;
	color: var(--cab-texte-photo-doux);
}

.cab-events--empty p {
	margin: 0;
	color: var(--wp--preset--color--gray);
}

/* --------------------------------------------------------------------------
   Contact form block
   -------------------------------------------------------------------------- */

.cab-form__form {
	display: grid;
	gap: var(--wp--preset--spacing--30, 1rem);
	max-width: 38rem;
}

.cab-form__field {
	display: grid;
	gap: 0.3rem;
	margin: 0;
}

/* The honeypot must be reachable by robots but invisible to people. */
.cab-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cab-form__actions {
	margin: 0;
}

.cab-form__notice {
	padding: 0.9rem 1.1rem;
	margin-bottom: 1.2rem;
	border-left: 4px solid;
	border-radius: 3px;
}

.cab-form__notice--succes {
	border-color: var(--wp--preset--color--meadow-green, #557a2c);
	background: color-mix(in srgb, var(--wp--preset--color--meadow-green, #557a2c) 12%, transparent);
}

.cab-form__notice--erreur {
	border-color: var(--wp--preset--color--signal-orange, #ff812d);
	background: color-mix(in srgb, var(--wp--preset--color--signal-orange, #ff812d) 12%, transparent);
}

/* --------------------------------------------------------------------------
   The map of the regions

   His drawing, and his two colours: a grey France, the region under the
   pointer in green. Everything else here is what the original leaned on a
   script for — the outline follows the pointer, the keyboard and the page you
   are on, all of it in the stylesheet.
   -------------------------------------------------------------------------- */

.cab-carte {
	margin: 0;
}

.cab-carte__trace {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * France arrives in thirteen pieces, and the browser paints each one as it
 * lands: on a slow answer the map draws itself region by region, which reads
 * as a page in trouble rather than a page still loading.
 *
 * Nothing here waits for a script. The legend is written right after the
 * closing tag of the drawing, so its mere presence means the outline is whole:
 * until the parser reaches it the map is held back, then shown in one piece.
 *
 * Guarded, because a browser without `:has()` would have no way of ever
 * showing it — there, the map simply behaves as it did before.
 */
@supports selector(:has(*)) {
	.cab-carte .cab-carte__trace {
		opacity: 0;
	}

	.cab-carte:has(.cab-carte__legende) .cab-carte__trace {
		opacity: 1;
		transition: opacity 0.25s ease-out;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cab-carte:has(.cab-carte__legende) .cab-carte__trace {
		transition: none;
	}
}

.cab-carte__region {
	fill: var(--cab-carte-actif, #d5d5d5);
	stroke: var(--wp--preset--color--white);
	stroke-width: 0.8;
	stroke-linejoin: round;
	transition: fill 0.2s ease;
}

/* Nothing coming up, but a past worth reading. */
.cab-carte__region--calme {
	fill: var(--cab-carte-calme, #e6e6e6);
}

/*
 * Nothing at all, ever. Hatched rather than a third grey: three greys would
 * have asked the reader to compare shades, hatching says « empty » on its own.
 * It is the only region that is not a link either.
 */
.cab-carte__region--rien {
	fill: url("#cab-carte-hachures");
}

.cab-carte__hachure-fond {
	fill: var(--cab-carte-calme, #e6e6e6);
}

.cab-carte__hachure-trait {
	stroke: var(--cab-carte-hachure, #c9c9c9);
	stroke-width: 2;
}

/* --------------------------------------------------------------------------
   The key under the map
   -------------------------------------------------------------------------- */

.cab-carte__legende {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.1rem;
	margin: 0.9rem 0 0;
	padding: 0;
	list-style: none;
	color: var(--cab-encre);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}

.cab-carte__cle {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
}

.cab-carte__pastille {
	flex: none;
	width: 0.95rem;
	height: 0.95rem;
	border: 1px solid color-mix(in srgb, var(--cab-encre) 25%, transparent);
	border-radius: 2px;
}

.cab-carte__pastille--actif {
	background: var(--cab-carte-actif, #d5d5d5);
}

.cab-carte__pastille--calme {
	background: var(--cab-carte-calme, #e6e6e6);
}

/*
 * The same hatching as on the map, at the same angle — drawn again in CSS
 * because an SVG pattern cannot be borrowed by an element outside its drawing.
 */
.cab-carte__pastille--rien {
	background:
		repeating-linear-gradient(
			45deg,
			var(--cab-carte-hachure, #c9c9c9) 0 2px,
			var(--cab-carte-calme, #e6e6e6) 2px 5px
		);
}

.cab-carte a:hover .cab-carte__region,
.cab-carte a:focus-visible .cab-carte__region,
.cab-carte__region--courante {
	fill: var(--wp--preset--color--meadow-green);
}

/* The focus ring belongs on the shape, not on a box around it. */
.cab-carte a {
	outline: none;
}

.cab-carte a:focus-visible .cab-carte__region {
	stroke: var(--wp--preset--color--brand-blue);
	stroke-width: 2;
}

@media (prefers-reduced-motion: reduce) {
	.cab-carte__region {
		transition: none;
	}
}

/*
 * The two greys are named rather than taken from the palette: they are the
 * background of a drawing, not colours of the site, and on a dark screen a flat
 * grey holds better than a surface that follows the theme.
 */
:root[data-theme="dark"] {
	--cab-carte-actif: #3c4a55;
	--cab-carte-calme: #2c3841;
	--cab-carte-hachure: #4b5b68;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--cab-carte-actif: #3c4a55;
		--cab-carte-calme: #2c3841;
		--cab-carte-hachure: #4b5b68;
	}
}

/* --------------------------------------------------------------------------
   The event card, laid on its side

   His calendar's shape, and the right one for a single event: the poster on the
   left carrying its date, everything else beside it. The other shape — the
   poster filling the card, the words on top of it — stays on the home page,
   where four of them sit in a row and only need to be recognised.

   That other shape is written for a dark ground: white title, pale facts, lime
   icons. Laid on its side the card has no photograph under its words, so every
   one of those colours has to be said again — and said on the same element the
   first rule names, or it loses.
   -------------------------------------------------------------------------- */

ul.cab-events--cote {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cab-events--cote .cab-events__item {
	display: grid;
	grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	align-items: start;
	margin: 0;
}

/*
 * The corners and the shadow belong to the frame, not to the picture.
 *
 * The frame is what clips, so a picture that grows under the pointer keeps
 * rounded corners. Rounded on the picture alone they slid out of a square clip
 * and the corners went square at the very moment of the gesture. And a shadow
 * cast by a clipped child is cut off by that same clip — an element's own
 * shadow is not, which is why it moves here too.
 */
.cab-events--cote .cab-events__vignette {
	position: relative;
	border-radius: 10px;
	margin: 0;
	box-shadow: 0 8px 14px -6px rgba(20, 35, 43, 0.35);
	line-height: 0;
	overflow: hidden;
}

.cab-events--cote .cab-events__vignette img {
	width: 100%;
	height: auto;
}

.cab-events--cote .cab-events__corps {
	min-width: 0;
}

.cab-events--cote .cab-events__title {
	margin: 0 0 0.6rem;
	color: var(--wp--preset--color--meadow-green);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.15;
}

.cab-events--cote .cab-events__title a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
}

.cab-events--cote .cab-events__title a:hover,
.cab-events--cote .cab-events__title a:focus-visible {
	text-decoration: underline;
}

.cab-events--cote .cab-events__fact {
	display: flex;
	align-items: flex-start;
	gap: 0.45rem;
	margin: 0 0 0.3rem;
	color: var(--cab-encre);
	font-size: var(--wp--preset--font-size--small);
}

.cab-events--cote .cab-events__fact--place {
	color: var(--cab-encre);
	font-size: var(--wp--preset--font-size--small);
}

.cab-events--cote .cab-events__icon {
	flex: none;
	margin-top: 0.2em;
	color: var(--wp--preset--color--meadow-green);
}

.cab-events--cote .cab-events__extrait {
	margin: 0.9rem 0 0;
	color: var(--cab-encre);
}

/* « More about it », set against the right edge as his is. */
.cab-events--cote .cab-events__plus {
	margin: 1rem 0 0;
	text-align: right;
}

.cab-events--cote .cab-events__lien {
	display: inline-block;
	padding: 0.4rem 1rem;
	border: 2px solid var(--wp--preset--color--bright-green);
	border-radius: 3px;
	color: var(--wp--preset--color--meadow-green);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.cab-events--cote .cab-events__lien:hover,
.cab-events--cote .cab-events__lien:focus-visible {
	background-color: color-mix(in srgb, var(--wp--preset--color--bright-green) 18%, transparent);
}

/* --------------------------------------------------------------------------
   The rest of the diary, under the next date

   The card above says everything about the next event; the ones below say
   « and then ». They are the home page's cards, unchanged — the same grid, the
   same poster filling the frame — so the reader recognises them on sight. Only
   the line that introduces them is new.
   -------------------------------------------------------------------------- */

/*
 * « The rest » is a band of its own, on the theme's pale green.
 *
 * It runs the width of the page and down to the footer, whose bow-tie is
 * painted in the page's ground by default — white, which would cut a notch
 * between the two. On the diary's pages that divider is repainted in the same
 * green, so the band and the footer meet without a seam. The rule is scoped to
 * those pages: everywhere else the divider still opens on white.
 */
.cab-events-suite--grille {
	padding-block: 2.5rem 3.5rem;
	margin-block-start: 2.5rem;
	background: var(--wp--preset--color--cream);
}

.cab-events-suite--grille > * {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: 1rem;
}

/*
 * The green divider belongs to the band, not to the page.
 *
 * Scoped to the diary's addresses it was painted whether or not the band was
 * there — and on a region with nothing to list, the band is not there. What
 * showed was a green notch above the footer with white above it, which is the
 * seam it was meant to hide, drawn in the wrong place.
 *
 * `:has()` asks the real question — is the band on this page? — so the rule
 * follows the band and not the address. Guarded: without `:has()` the divider
 * simply stays white, which is what it was before.
 *
 * La quatrième de la liste est la bande des événements de l'accueil, passée du
 * blanc au vert pâle : elle ferme la page, elle touche donc le pied, et elle
 * avait le même besoin — sans quoi une encoche blanche s'ouvrait entre les
 * deux, plus les seize pixels d'écart que le cœur laisse entre deux sections.
 */
@supports selector(:has(*)) {
	.wp-site-blocks:has(.cab-events-suite--grille, .cab-fiche__voisins, .cab-bande-liste, .cab-bande--evenements) .cab-footer__haut {
		--cab-bowtie: var(--wp--preset--color--cream);
	}

	/*
	 * And the band has to reach the footer. WordPress spaces the page's sections
	 * with its block gap, which between two coloured bands is not air but a
	 * white line — sixteen pixels of it, measured.
	 */
	.wp-site-blocks:has(.cab-events-suite--grille, .cab-fiche__voisins, .cab-bande-liste, .cab-bande--evenements) > footer {
		margin-block-start: 0;
	}
}

/* The card above the featured event needs no distance from the filters. */
.cab-events-suite--cote {
	margin-block-start: 0;
}

/*
 * Under an event, the band is already painted.
 *
 * `.cab-fiche__voisins` is the band there, and the heading above the list
 * belongs to it. The section the block now prints — it needs one to hang its
 * fold from — must therefore paint nothing and constrain nothing, or the page
 * gets two grounds, two paddings and one indent too many.
 */
.cab-fiche__voisins .cab-events-suite--grille {
	margin-block-start: 0;
	padding-block: 0;
	background: none;
}

.cab-fiche__voisins .cab-events-suite--grille > * {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

/* --------------------------------------------------------------------------
   The rest of the list, folded

   A `details` and nothing else. The button is the summary itself, so the
   browser announces it, focuses it and opens it with the keyboard without a
   line of script — and the cards inside are simply not in the page until they
   are asked for.

   Same shape as the filter bar's segments on purpose: a white capsule ringed
   in blue. The two are the only controls of this page and they should look
   like they were drawn by the same hand.
   -------------------------------------------------------------------------- */

.cab-events__repli,
.cab-galerie__repli {
	margin-block-start: var(--wp--preset--spacing--40);
	text-align: center;
}

.cab-events__repli-bouton,
.cab-galerie__repli-bouton {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.55rem 1.4rem;
	border: 2px solid var(--wp--preset--color--brand-blue);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--brand-blue);
	cursor: pointer;
	font-size: var(--wp--preset--font-size--small);
	list-style: none;
	transition: background-color 0.2s ease;
}

/* Safari draws its own triangle and ignores `list-style`. */
.cab-events__repli-bouton::-webkit-details-marker {
	display: none;
}

.cab-events__repli-bouton:hover,
.cab-events__repli-bouton:focus-visible,
.cab-galerie__repli-bouton:hover,
.cab-galerie__repli-bouton:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--brand-blue) 8%, transparent);
}

/* One word or the other, never both: the button says what it is about to do. */
.cab-events__repli-mot--fermer,
.cab-events__repli[open] .cab-events__repli-mot--ouvrir {
	display: none;
}

.cab-events__repli[open] .cab-events__repli-mot--fermer {
	display: inline;
}

.cab-events__repli-fleche,
.cab-galerie__repli-fleche {
	width: 0.4rem;
	height: 0.4rem;
	flex: none;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.cab-events__repli[open] .cab-events__repli-fleche {
	transform: translateY(2px) rotate(-135deg);
}

/* The cards that come out of the fold keep the rhythm of those above them. */
.cab-events--suite {
	margin-block-start: var(--wp--preset--spacing--40);
	text-align: start;
}

@media (prefers-reduced-motion: reduce) {
	.cab-events__repli-bouton,
	.cab-galerie__repli-bouton {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   The diary's grid on a telephone: two columns, six cards

   One card across a telephone is a poster with a paragraph on it — generous,
   and slow to walk through: six dates meant six screens of scrolling. Two
   across turns each one into a thumbnail 163 px wide, and six of them fit in
   about a screen and a half.

   At that width the card has to shed weight or it becomes a wall of small
   type. What is kept is what lets somebody choose: the poster, the date on its
   tab, the name, and where it is held. The full address, the organiser and the
   price go — they are one tap away, on the page of the event itself, and none
   of them is what makes a reader stop on a thumbnail.

   Nothing is hidden on the wide screen: this only ever applies below 40rem.
   -------------------------------------------------------------------------- */

@media (max-width: 40rem) {
	.cab-events-suite--grille .cab-events {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.cab-events-suite--grille .cab-card--pleine .cab-card__texte {
		padding: 40px 10px 11px;
		gap: 4px;
	}

	.cab-events-suite--grille .cab-events__title {
		margin-block-end: 3px;
		font-size: 15px;
	}

	/* The tab says the day already, and the rest belongs to the event's page. */
	.cab-events-suite--grille .cab-events__fact--date,
	.cab-events-suite--grille .cab-events__fact--place,
	.cab-events-suite--grille .cab-events__fact--who,
	.cab-events-suite--grille .cab-events__fact--cost {
		display: none;
	}

	.cab-events-suite--grille .cab-events__fact {
		grid-template-columns: 13px 1fr;
		gap: 6px;
		font-size: 0.72rem;
	}

	.cab-events-suite--grille .cab-events__icon {
		width: 13px;
		height: 13px;
	}

	/* The date tab took half the width of a thumbnail. */
	.cab-events-suite--grille .cab-events__tab {
		top: 8px;
		left: 8px;
		padding: 5px 8px 4px;
		font-size: 0.68rem;
	}

	.cab-events-suite--grille .cab-events__day {
		font-size: 1.1rem;
	}

	.cab-events-suite--grille .cab-events__tampon {
		top: 9px;
		right: 7px;
		padding: 0.2rem 0.42rem;
		font-size: 0.62rem;
	}
}

/*
 * Six in the open instead of nine, the last three joining the fold.
 *
 * The cut is made on the server, once, at nine — a `details` cannot be told to
 * cut somewhere else on a narrower screen. So the three cards over the count
 * are put away here and brought back when the fold is opened, which is the
 * only moment they are wanted. `:has()` is what asks « is the fold open », and
 * a browser without it simply shows the nine: fewer cards hidden is a far
 * smaller fault than three that never come back.
 */
@supports selector(:has(*)) {
	@media (max-width: 40rem) {
		/*
		 * Only where a fold exists to bring them back. Without that guard, a
		 * region showing eight dates — too few for the server to fold anything
		 * — hid its last two with no way on earth to see them again.
		 */
		.cab-events-suite--grille:not(.cab-events-suite--pas-a-pas):has(.cab-events__repli) > ul.cab-events > li:nth-child(n+7) {
			display: none;
		}

		.cab-events-suite--grille:not(.cab-events-suite--pas-a-pas):has(.cab-events__repli[open]) > ul.cab-events > li:nth-child(n+7) {
			display: flex;
		}

		/*
		 * And a section that asks for a single row keeps a single row here
		 * too: two across on a telephone, so the third card the server left in
		 * the open joins the fold with the others.
		 */
		.cab-events-suite--grille[data-rangees="1"]:not(.cab-events-suite--pas-a-pas):has(.cab-events__repli) > ul.cab-events > li:nth-child(n+3) {
			display: none;
		}

		.cab-events-suite--grille[data-rangees="1"]:not(.cab-events-suite--pas-a-pas):has(.cab-events__repli[open]) > ul.cab-events > li:nth-child(n+3) {
			display: flex;
		}
	}
}

/* --------------------------------------------------------------------------
   One row at a time, and the row comes down

   `assets/js/events-more.js` takes the fold apart, gives its cards back to the
   list and hands out one row per press — three across on a desk, two on a
   telephone, because the step it counts in is the number of columns the grid
   is actually using.

   The stylesheet's part is small and deliberately so: hide a card, and give
   the arriving ones a descent. Everything above stays true when the script
   never runs.
   -------------------------------------------------------------------------- */

.cab-events__item--cachee {
	display: none;
}

@keyframes cab-descente {
	from {
		opacity: 0;
		transform: translateY(-18px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/*
 * Each card of the row waits a little longer than the one before it, so the
 * row reads as arriving rather than as switching on. The rank is set by the
 * script, and the whole thing is cancelled by the reduced-motion block at the
 * top of this file, which pins every animation to a hundredth of a
 * millisecond.
 */
.cab-events__item--arrive {
	animation: cab-descente 0.45s cubic-bezier(0.22, 0.68, 0.28, 1) both;
	animation-delay: calc(var(--cab-rang, 0) * 70ms);
}

/*
 * The block at the top of this file pins every animation to a hundredth of a
 * millisecond, but says nothing about a delay: a card would still sit invisible
 * for its share of the stagger. The row arrives all at once instead.
 */
@media (prefers-reduced-motion: reduce) {
	.cab-events__item--arrive {
		animation-delay: 0s;
	}
}

/*
 * The poster leads where the title leads, and says so by moving under the
 * pointer — the same gesture as the cards on the home page.
 */
.cab-events__affiche {
	display: block;
}

.cab-events__affiche img,
.cab-events__affiche .cab-sans-affiche {
	transition: transform 0.55s ease;
}

@media (hover: hover) {
	.cab-events__item:hover .cab-events__affiche img,
	.cab-events__item:focus-within .cab-events__affiche img,
	.cab-events__item:hover .cab-events__affiche .cab-sans-affiche,
	.cab-events__item:focus-within .cab-events__affiche .cab-sans-affiche {
		transform: scale(1.06);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cab-events__affiche img,
	.cab-events__affiche .cab-sans-affiche {
		transition: none;
	}

	.cab-events__item:hover .cab-events__affiche img,
	.cab-events__item:hover .cab-events__affiche .cab-sans-affiche {
		transform: none;
	}
}

/*
 * The heading of a list, and at the other end of its line the way back in time.
 *
 * That link is not a filter — it does not narrow the list, it changes which
 * list is shown — so it belongs to the title of the list and not to the bar
 * above it. Baselines rather than centres: it has to read as the end of the
 * same sentence.
 */
.cab-events-suite__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.4rem 1.2rem;
	margin-block-end: 0.85rem;
}

.cab-events-suite__titre {
	margin-block: 0 0.85rem;
	color: var(--wp--preset--color--brand-blue);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
}

.cab-events-suite__entete .cab-events-suite__titre {
	margin-block-end: 0;
}

/* Colour left to the charter, hover included — see `.cab-carte__retour`. */
.cab-events-suite__temps {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 0.35rem;
	font-size: var(--wp--preset--font-size--small);
	text-underline-offset: 3px;
}

.cab-events-suite__temps-icone {
	flex: none;
}

/* Under a sentence saying there is nothing ahead, it is the only way out. */
.cab-events--empty .cab-events-suite__temps {
	margin-block-start: 0.7rem;
}

/* Stacked, the poster goes back above its own words. */
@media (max-width: 900px) {
	.cab-events--cote .cab-events__item {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cab-events--cote .cab-events__lien {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   The invitation under the map
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   The two columns of the diary

   Air between the map and the card beside it. The map gives up a little width
   for it, which it can afford — it is a drawing, not a document, and it reads
   as well small. Without the gap the two read as one crowded block.
   -------------------------------------------------------------------------- */

/*
 * Written out rather than taken from the spacing presets: those resolve to
 * WordPress's own scale, not the theme's — `theme.json` is v3, where
 * `spacingScale.steps` no longer suppresses the defaults. Until that is settled
 * a preset here would quietly mean half of what it says.
 */
.cab-agenda__rangee {
	column-gap: clamp(1.75rem, 3.5vw, 3rem);
}

/* --------------------------------------------------------------------------
   The invitation under the map

   On its own pale ground, so the eye lands on it. It is the one thing on this
   page asking the reader for something rather than telling them something, and
   it was reading as a footnote to the map.
   -------------------------------------------------------------------------- */

.cab-annonce {
	padding: 1.6rem 1.5rem;
	border-radius: 14px;
	margin-block-start: 2.25rem;
	background: var(--wp--preset--color--pale-blue);
	/*
	 * A hairline, because the pale ground alone does not survive the dark
	 * theme: there the card and the page differ by 1.03 to 1, which is to say
	 * the card is not there. Drawn as an inset shadow so nothing moves.
	 */
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--brand-blue) 45%, transparent);
}

.cab-annonce h3 {
	margin-block: 0 0.6rem;
}

.cab-annonce p {
	margin-block: 0 1.25rem;
	font-size: var(--wp--preset--font-size--small);
}

/* The invitation is the one thing here asking something of the reader. */
.cab-annonce .wp-block-buttons {
	margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   The filters above the events list

   The block is only the form now: everything visible in it is the segmented
   bar, drawn further down and belonging to no page in particular. What is left
   here is the air between the bar and the card it filters.
   -------------------------------------------------------------------------- */

.cab-filtres {
	/* Écrit en clair : les pas d'espacement du thème ne sont pas ceux servis. */
	margin-block-end: 2rem;
}

/* --------------------------------------------------------------------------
   The page of a single event

   His model's arrangement: the description on the left, the practical facts on
   the right in a panel of their own, and « it is also happening in … » below.
   The panel is the only card here — everything else is text — so it is the one
   thing that gets a ground and a border.
   -------------------------------------------------------------------------- */

.cab-fiche {
	margin-block: var(--wp--preset--spacing--50);
}

.cab-fiche__rangee {
	column-gap: clamp(1.75rem, 3.5vw, 3rem);
}

.cab-fiche__texte > :first-child {
	margin-block-start: 0;
}

.cab-fiche__passe {
	padding: 0.7rem 1rem;
	border-inline-start: 4px solid var(--wp--preset--color--signal-orange);
	margin-block: 0 1.5rem;
	background: color-mix(in srgb, var(--wp--preset--color--signal-orange) 12%, transparent);
	font-size: var(--wp--preset--font-size--small);
}

.cab-fiche__panneau {
	padding: 1.5rem 1.4rem;
	border-radius: 14px;
	background: var(--wp--preset--color--pale-blue);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--brand-blue) 25%, transparent);
}

.cab-fiche__titre {
	margin-block: 0 1.1rem;
	color: var(--wp--preset--color--brand-blue);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
}

.cab-fiche__ligne {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	padding-block: 0.6rem;
	border-block-start: 1px solid color-mix(in srgb, var(--cab-encre) 12%, transparent);
	line-height: 1.4;
}

.cab-fiche__ligne:first-of-type {
	border-block-start: 0;
	padding-block-start: 0;
}

.cab-fiche__ligne .cab-events__icon {
	flex: none;
	margin-block-start: 0.9em;
	color: var(--wp--preset--color--meadow-green);
}

.cab-fiche__quoi {
	display: block;
	color: var(--cab-encre);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	opacity: 0.7;
	text-transform: uppercase;
}

.cab-fiche__adresse,
.cab-fiche__lien {
	display: block;
}

/*
 * Le panneau ne dit plus la couleur de ses liens : le `theme.json` la donne
 * déjà, et la répéter ici l'immobilisait. La règle pesait exactement autant
 * que celle du survol, et cette feuille étant imprimée en dernier, elle
 * gagnait aussi au survol — les liens restaient bleus. Mesuré : couleur
 * inchangée sous le curseur, seul le trait se colorait.
 */

.cab-fiche__agenda {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1rem;
	padding-block-start: 0.9rem;
	border-block-start: 1px solid color-mix(in srgb, var(--cab-encre) 12%, transparent);
	margin-block-start: 0.6rem;
}

.cab-fiche__agenda .cab-fiche__quoi {
	flex-basis: 100%;
	margin-block-end: 0.2rem;
}

/*
 * Air between the band and what it introduces.
 *
 * The block gap left 24 px there, which was little enough before and is less
 * now that the poster leans down into it. Doubled class: the gap is written by
 * the layout rules core generates for the page — `> * { margin-block-start }`
 * — and those carry a class's weight and are printed after the theme. A single
 * class ties and loses.
 */
.cab-fiche.cab-fiche {
	margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
}

/*
 * « It is also happening in Brittany »: the same band as the diary's own
 * « other dates to come », so a reader recognises it from one page to the next.
 */
/*
 * Le même vert que la bande de la collection : une seule couleur de bande
 * pâle sur le site, demandée pour l'uniformité. C'était le crème, qui n'était
 * vert que de deux points sur 255 — personne ne le lisait comme tel.
 */
.cab-fiche__voisins {
	padding-block: 2.5rem 3.5rem;
	background: var(--wp--preset--color--cream);
}

.cab-fiche__voisins > * {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: 1rem;
}

@media (max-width: 781px) {
	.cab-fiche__panneau {
		margin-block-start: 1.5rem;
	}
}

/* --------------------------------------------------------------------------
   The banner of a single event

   The same band as every other page, with an event's facts under the title
   instead of a post's excerpt: when, where, and in which region. The poster
   takes the place the illustration holds elsewhere.
   -------------------------------------------------------------------------- */

.cab-bandeau__faits {
	display: grid;
	gap: 0.45rem;
	padding: 0;
	margin: 1rem 0 0;
	list-style: none;
}

.cab-bandeau__faits li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	color: var(--wp--preset--color--brand-blue);
	line-height: 1.35;
}

.cab-bandeau__faits .cab-events__icon {
	flex: none;
	margin-block-start: 0.28em;
	opacity: 0.75;
}

.cab-bandeau__faits a {
	color: inherit;
}

/*
 * The stand-in has no proportions of its own, so it takes a poster's: the
 * shared rule above caps a real picture by height, this gives the drawing the
 * same height and the upright shape that goes with it.
 */
.cab-bandeau__affiche .cab-sans-affiche {
	display: block;
	width: 150px;
	height: 200px;
	border: 2px solid var(--wp--preset--color--brand-blue);
	border-radius: 15px;
}

/* --------------------------------------------------------------------------
   The stand-in poster

   It fills its frame exactly as a real poster does, so a row of cards keeps one
   rhythm whether the organisers have sent their artwork or not.
   -------------------------------------------------------------------------- */

.cab-sans-affiche {
	display: block;
	width: 100%;
	height: 100%;
	color: color-mix(in srgb, var(--cab-sur-fond-sombre) 60%, transparent);
}

.cab-sans-affiche__fond {
	fill: var(--wp--preset--color--ink);
}

.cab-sans-affiche__mot {
	fill: currentColor;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 27px;
	letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   The segmented bar

   One white capsule ringed in blue, cut into segments by hairlines: the menus
   first, then what acts, and the segment that submits closing it in solid blue.

   It is one object on purpose. « Everything on one line, all the same » is a
   structural problem before it is a decorative one: five separate buttons carry
   five heights, five radii and five borders that never stay in step, and their
   widths added up — measured — to 881 px in a column 619 px wide. A capsule has
   one of each by construction, and a hairline costs a pixel where two borders
   meeting cost four.

   Nothing here knows about events. `inc/segmented-bar.php` builds the markup,
   and the next filter the site grows — the rolling stock, the articles — should
   reuse both rather than start a second dialect.
   -------------------------------------------------------------------------- */

.cab-segments {
	--cab-segments-rayon: 999px;
	--cab-segments-filet: color-mix(in srgb, var(--wp--preset--color--brand-blue) 28%, transparent);

	display: inline-flex;
	align-items: stretch;
	max-width: 100%;
	min-height: 46px;
	border: 2px solid var(--wp--preset--color--brand-blue);
	border-radius: var(--cab-segments-rayon);
	background: var(--wp--preset--color--white);
}

.cab-segments > * {
	display: flex;
	margin: 0;
}

.cab-segments > * + * {
	border-inline-start: 1px solid var(--cab-segments-filet);
}

/* The face of a segment, whatever it is made of underneath. */
.cab-segments__pave {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 0.45rem;
	padding-inline: 0.85rem;
	border: 0;
	background: none;
	color: var(--wp--preset--color--brand-blue);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
	list-style: none;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}

/*
 * Nothing gives ground: a squeezed segment is a segment nobody can read. Said
 * after the rule above, which carries the same weight and would otherwise win.
 */
.cab-segments > .cab-segments__pave {
	flex: none;
}

/* Safari draws its own triangle and ignores `list-style`. */
.cab-segments__pave::-webkit-details-marker {
	display: none;
}

.cab-segments__pave:hover,
.cab-segments__pave:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--brand-blue) 8%, transparent);
}

/* The capsule's corners are drawn by the segments sitting at its ends. */
.cab-segments > :first-child > .cab-segments__pave,
.cab-segments > .cab-segments__pave:first-child {
	padding-inline-start: 1.1rem;
	border-start-start-radius: var(--cab-segments-rayon);
	border-end-start-radius: var(--cab-segments-rayon);
}

.cab-segments > :last-child > .cab-segments__pave,
.cab-segments > .cab-segments__pave:last-child {
	border-start-end-radius: var(--cab-segments-rayon);
	border-end-end-radius: var(--cab-segments-rayon);
}

/* The one that submits closes the bar, and is the only one filled in. */
.cab-segments__pave--valider {
	padding-inline: 1.2rem;
	background: var(--wp--preset--color--brand-blue);
	color: var(--wp--preset--color--white);
	font-weight: 700;
}

.cab-segments__pave--valider:hover,
.cab-segments__pave--valider:focus-visible {
	background: var(--wp--preset--color--brand-blue);
	filter: brightness(1.15);
}

.cab-segments__icone {
	display: block;
	flex: none;
}

/* ---- a menu of boxes ---------------------------------------------------- */

.cab-segments__menu {
	position: relative;
}

/* Chosen, and shut: the segment is tinted and carries how many. */
.cab-segments__menu--actif > .cab-segments__pave {
	background: var(--wp--preset--color--pale-blue);
	font-weight: 700;
}

.cab-segments__fleche {
	width: 0.4rem;
	height: 0.4rem;
	flex: none;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.cab-segments__menu[open] .cab-segments__fleche {
	transform: translateY(2px) rotate(-135deg);
}

.cab-segments__compte {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	min-width: 1.3rem;
	height: 1.3rem;
	padding-inline: 0.3rem;
	border-radius: 999px;
	background: var(--wp--preset--color--brand-blue);
	color: var(--wp--preset--color--white);
	font-size: 0.74rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

/*
 * The open list hangs below its segment instead of taking room in the row.
 *
 * The bar would otherwise grow in place — upwards, over the banner, because it
 * is aligned by its bottom. Hanging it keeps the capsule the same size open or
 * shut, which is also what makes it read as a menu rather than as the page
 * rearranging itself.
 */
.cab-segments__liste {
	position: absolute;
	z-index: 5;
	inset-block-start: calc(100% + 0.5rem);
	inset-inline-start: 0;
	min-width: 100%;
	width: max-content;
	max-width: min(22rem, 80vw);
	max-height: 17rem;
	padding: 0.9rem 1.1rem;
	border-radius: 12px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 12px 34px rgb(6 38 52 / 20%);
	overflow-y: auto;
}

.cab-segments__liste fieldset {
	padding: 0;
	border: 0;
	margin: 0;
}

.cab-segments__case {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding-block: 0.4rem;
	color: var(--wp--preset--color--brand-blue);
	cursor: pointer;
	line-height: 1.3;
}

.cab-segments__case span {
	text-decoration: underline;
	text-decoration-color: transparent;
	transition: text-decoration-color 0.2s ease;
}

.cab-segments__case:hover span {
	text-decoration-color: currentColor;
}

.cab-segments__case input {
	flex: none;
	width: 1.05rem;
	height: 1.05rem;
	margin: 0.05rem 0 0;
	accent-color: var(--wp--preset--color--brand-blue);
}

/* ---- folded, on a telephone --------------------------------------------- */

/*
 * Two columns rather than shorter words: the menus above, what acts below, and
 * a lone submit spreading over both. The same object, folded — which is why the
 * capsule keeps its border and only trades its radius for a smaller one.
 */
@media (max-width: 40rem) {
	.cab-segments {
		--cab-segments-rayon: 18px;

		display: grid;
		grid-template-columns: 1fr 1fr;
		width: 100%;
	}

	.cab-segments > * + * {
		border-inline-start: 0;
	}

	.cab-segments > *:nth-child(even) {
		border-inline-start: 1px solid var(--cab-segments-filet);
	}

	.cab-segments > *:nth-child(n+3) {
		border-block-start: 1px solid var(--cab-segments-filet);
	}

	.cab-segments > :last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	/*
	 * LES ANGLES D'UNE GRILLE NE SONT PAS CEUX D'UNE RANGÉE. Sur une ligne, le
	 * premier pavé arrondit ses deux coins de gauche et le dernier ses deux
	 * coins de droite. Repliée en deux colonnes, la capsule en demande quatre
	 * différents : le premier ne ferme plus que le haut-gauche, le deuxième le
	 * haut-droit, et c'est le bouton du bas qui ferme les deux d'en bas.
	 *
	 * Faute de quoi le bouton plein débordait du contour : son coin bas-gauche
	 * restait carré pendant que la capsule l'arrondissait, et le premier pavé
	 * creusait un coin au milieu de la barre.
	 *
	 * Le sommaire d'une fiche emploie la même capsule mais reste sur une ligne
	 * — il a sa propre exception plus bas — donc ces règles l'évitent.
	 */
	.cab-segments:not(.cab-sommaire__gelule) > :first-child > .cab-segments__pave,
	.cab-segments:not(.cab-sommaire__gelule) > .cab-segments__pave:first-child {
		border-radius: var(--cab-segments-rayon) 0 0 0;
	}

	.cab-segments:not(.cab-sommaire__gelule) > :nth-child(2) > .cab-segments__pave,
	.cab-segments:not(.cab-sommaire__gelule) > .cab-segments__pave:nth-child(2) {
		border-radius: 0 var(--cab-segments-rayon) 0 0;
	}

	/* Seul sur sa rangée, il ferme les deux coins du bas. */
	.cab-segments:not(.cab-sommaire__gelule) > :last-child:nth-child(odd) > .cab-segments__pave,
	.cab-segments:not(.cab-sommaire__gelule) > .cab-segments__pave:last-child:nth-child(odd) {
		border-radius: 0 0 var(--cab-segments-rayon) var(--cab-segments-rayon);
	}

	/* À deux sur la dernière rangée, chacun ferme son côté. */
	.cab-segments:not(.cab-sommaire__gelule) > :last-child:nth-child(even) > .cab-segments__pave,
	.cab-segments:not(.cab-sommaire__gelule) > .cab-segments__pave:last-child:nth-child(even) {
		border-radius: 0 0 var(--cab-segments-rayon) 0;
	}

	.cab-segments:not(.cab-sommaire__gelule) > :nth-last-child(2):nth-child(odd) > .cab-segments__pave,
	.cab-segments:not(.cab-sommaire__gelule) > .cab-segments__pave:nth-last-child(2):nth-child(odd) {
		border-radius: 0 0 0 var(--cab-segments-rayon);
	}

	/*
	 * Une capsule d'une seule rangée — deux segments — garde les angles d'une
	 * rangée : les deux règles ci-dessus l'auraient coupée en deux.
	 */
	.cab-segments:not(.cab-sommaire__gelule) > :first-child:nth-last-child(2) > .cab-segments__pave,
	.cab-segments:not(.cab-sommaire__gelule) > .cab-segments__pave:first-child:nth-last-child(2) {
		border-radius: var(--cab-segments-rayon) 0 0 var(--cab-segments-rayon);
	}

	.cab-segments:not(.cab-sommaire__gelule) > :last-child:nth-child(2) > .cab-segments__pave,
	.cab-segments:not(.cab-sommaire__gelule) > .cab-segments__pave:last-child:nth-child(2) {
		border-radius: 0 var(--cab-segments-rayon) var(--cab-segments-rayon) 0;
	}

	.cab-segments__pave {
		justify-content: center;
		min-height: 46px;
		padding-inline: 0.6rem;
		text-align: center;
		white-space: normal;
	}

	/*
	 * Les angles sont écrits plus haut, pour un nombre quelconque de segments.
	 * Ce qui restait ici les décrivait pour TROIS exactement — le premier en
	 * haut à gauche, le deuxième en haut à droite, le troisième seul en bas —
	 * et une barre de cinq y gagnait un coin arrondi en plein milieu.
	 */
	.cab-segments > :first-child > .cab-segments__pave,
	.cab-segments > .cab-segments__pave:first-child {
		padding-inline-start: 0.6rem;
	}

	/* The right-hand menu opens leftwards, or it would hang off the screen. */
	.cab-segments > *:nth-child(even) .cab-segments__liste {
		inset-inline-start: auto;
		inset-inline-end: 0;
	}
}

/*
 * The way out of a region, at the far end of the line under the map — under
 * Corsica, where the drawing ends and nothing else is competing for the eye.
 *
 * No colour of its own: the charter already says a link is blue and turns green
 * under the pointer, and repeating the blue here — as this rule used to — beat
 * the hover it never repeated. A colour written twice is a colour that stops
 * moving.
 */
.cab-carte__retour {
	margin: 0.6rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	text-align: end;
}

@media (prefers-reduced-motion: reduce) {
	.cab-segments__pave {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Back to the top of the page

   Round, in the corner the thumb reaches, and absent until there is something
   to come back from — a button offering to take you where you already are is
   noise. `assets/js/back-to-top.js` decides that moment; the stylesheet only
   says what appearing looks like.

   It hides with `visibility` and not with opacity alone: a button faded to
   nothing is still on the keyboard's path, and Tab would land on something
   nobody can see.
   -------------------------------------------------------------------------- */

.cab-haut {
	position: fixed;
	z-index: 90;
	right: clamp(0.75rem, 3vw, 1.5rem);
	bottom: clamp(0.75rem, 3vw, 1.5rem);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-blue);
	color: var(--wp--preset--color--white);
	box-shadow: 0 6px 18px rgb(6 38 52 / 28%);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition:
		opacity 0.25s ease,
		transform 0.25s ease,
		visibility 0.25s,
		background-color 0.2s ease;
}

.cab-haut--vu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* The charter's own gesture: what is blue turns green under the pointer. */
.cab-haut:hover,
.cab-haut:focus-visible {
	background: var(--wp--preset--color--meadow-green);
}

/* The one pixel the observer watches, at the very top of the document. */
.cab-haut-marqueur {
	position: absolute;
	width: 1px;
	height: 1px;
}

/* --------------------------------------------------------------------------
   Proposing an event

   The original opened a window 1080 px wide holding a three-step form. The
   steps are kept and their order turned round — the event first, because that
   is what somebody came to announce — and the window is kept too, as an
   addition: the form has a page of its own, and the window shows that same
   form where a script runs.

   Nothing here is required for the form to work. Unfolded it is one long page
   with three groups; that is what a reader without a script gets, and it is a
   perfectly good form.
   -------------------------------------------------------------------------- */

.cab-proposer {
	max-width: 44rem;
	margin-inline: auto;
}

.cab-proposer__reponse {
	padding: 0.9rem 1.1rem;
	border-inline-start: 4px solid var(--wp--preset--color--meadow-green);
	border-radius: 0 8px 8px 0;
	margin-block-end: 1.6rem;
	background: color-mix(in srgb, var(--wp--preset--color--meadow-green) 10%, transparent);
}

/* « Voici votre demande » : un état, pas une alerte. */
.cab-proposer__etat {
	padding: 0.7rem 1rem;
	border-radius: 8px;
	margin-block-end: 1.4rem;
	background: var(--wp--preset--color--pale-blue);
	color: var(--wp--preset--color--brand-blue);
	font-size: var(--wp--preset--font-size--small);
}

.cab-proposer__reponse--mal {
	border-inline-start-color: var(--wp--preset--color--signal-orange);
	background: color-mix(in srgb, var(--wp--preset--color--signal-orange) 12%, transparent);
}

/* ---- the three milestones --------------------------------------------- */

/*
 * Drawn even when the form is not folded: three numbered names tell the reader
 * what is going to be asked, which is worth knowing before starting.
 */
.cab-proposer__chemin {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.4rem;
	margin: 0 0 1.8rem;
	padding: 0;
	list-style: none;
}

.cab-proposer__jalon {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--gray);
	font-size: var(--wp--preset--font-size--small);
}

.cab-proposer__numero {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	border: 2px solid currentColor;
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.95rem;
	line-height: 1;
}

.cab-proposer__jalon--ici {
	color: var(--wp--preset--color--brand-blue);
	font-weight: 700;
}

.cab-proposer__jalon--fait {
	color: var(--wp--preset--color--meadow-green);
}

.cab-proposer__jalon--fait .cab-proposer__numero {
	background: var(--wp--preset--color--meadow-green);
	border-color: var(--wp--preset--color--meadow-green);
	color: var(--wp--preset--color--white);
}

/* ---- the groups -------------------------------------------------------- */

.cab-proposer__etape {
	padding: 0;
	border: 0;
	margin: 0 0 1.6rem;
}

.cab-proposer__etape > legend {
	padding: 0;
	margin-block-end: 1rem;
	color: var(--wp--preset--color--brand-blue);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
}

/* Folded, the group on screen is the whole form: it needs no title twice. */
.cab-proposer__formulaire--pliee .cab-proposer__etape > legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.cab-proposer__champ {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0 0 1rem;
}

.cab-proposer__requis {
	color: var(--wp--preset--color--signal-orange);
}

.cab-proposer__aide {
	color: var(--wp--preset--color--gray);
	font-size: 0.82rem;
	line-height: 1.4;
}

/*
 * Two fields that belong together stand side by side, and stack when narrow.
 *
 * Two named tracks and not `auto-fit`: asked to fit, the grid made *three*
 * columns in the room available and collapsed the third to nothing — a track
 * that exists, weighs nothing, and quietly eats one of the gaps.
 */
.cab-proposer__paire {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1rem;
}

@media (max-width: 34rem) {
	.cab-proposer__paire {
		grid-template-columns: 1fr;
	}
}

/* ---- the kinds --------------------------------------------------------- */

.cab-proposer__cases {
	padding: 0.9rem 1.1rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand-blue) 22%, transparent);
	border-radius: 10px;
	margin: 0 0 1rem;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: 0.15rem 1rem;
}

.cab-proposer__cases > legend {
	padding-inline: 0.35rem;
	color: var(--cab-encre);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.cab-proposer__case {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding-block: 0.25rem;
	color: var(--wp--preset--color--brand-blue);
	cursor: pointer;
	font-size: 0.86rem;
	line-height: 1.3;
}

.cab-proposer__case input {
	flex: none;
	width: 1rem;
	height: 1rem;
	margin: 0.1rem 0 0;
	accent-color: var(--wp--preset--color--brand-blue);
}

/* The field only a machine fills in. Off-screen, not `display: none`: what is
   not rendered is not filled in either, and then it catches nothing. */
.cab-proposer__leurre {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- moving on, and sending ------------------------------------------- */

.cab-proposer__navigation {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0;
}

.cab-proposer__navigation:has(.cab-proposer__pas--arriere[hidden]) {
	justify-content: flex-end;
}

/*
 * Said before the two rules below, and repeated as a class so it outweighs
 * them: `display: inline-flex` written on a class beats the browser's own
 * `[hidden] { display: none }`, and « Suivant » went on being drawn on the
 * last step, underneath « Envoyer la demande ». Cyrille saw the two buttons
 * on top of one another.
 */
.cab-proposer__pas[hidden],
.cab-proposer__envoi[hidden],
.cab-proposer__etape[hidden] {
	display: none;
}

.cab-proposer__pas,
.cab-proposer__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding-inline: 1.4rem;
	border: 2px solid var(--wp--preset--color--brand-blue);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--brand-blue);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	transition: background-color 0.2s ease;
}

.cab-proposer__pas:hover,
.cab-proposer__pas:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--brand-blue) 8%, transparent);
}

.cab-proposer__bouton {
	background: var(--wp--preset--color--brand-blue);
	color: var(--wp--preset--color--white);
	font-weight: 700;
}

.cab-proposer__bouton:hover,
.cab-proposer__bouton:focus-visible {
	background: var(--wp--preset--color--brand-blue);
	filter: brightness(1.15);
}

.cab-proposer__envoi {
	margin: 1.4rem 0 0;
	text-align: end;
}

/* The one that moves forward is the one that acts, so it is the filled one. */
.cab-proposer__formulaire--pliee .cab-proposer__pas--avant {
	background: var(--wp--preset--color--brand-blue);
	color: var(--wp--preset--color--white);
	font-weight: 700;
}

.cab-proposer__formulaire--pliee .cab-proposer__envoi {
	margin-block-start: 0;
}

/* ---- the window -------------------------------------------------------- */

/*
 * The width of the original, and never more than the screen. A `dialog` that
 * nobody opened is not drawn at all — which is exactly what a reader without a
 * script needs, since for them the button is a link to the page.
 */
.cab-proposer__fenetre {
	position: relative;
	width: min(1080px, 92vw);
	max-width: none;
	max-height: 88vh;
	padding: 2.2rem clamp(1.1rem, 4vw, 2.6rem) 2rem;
	border: 0;
	border-radius: 14px;
	background: var(--wp--preset--color--white);
	color: var(--cab-encre);
	box-shadow: 0 18px 50px rgb(6 38 52 / 32%);
	overflow-y: auto;
}

.cab-proposer__fenetre::backdrop {
	background: rgb(6 38 52 / 55%);
}

.cab-proposer__fenetre .cab-proposer {
	max-width: 46rem;
}

.cab-proposer__fermer {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
	width: 2.2rem;
	height: 2.2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--wp--preset--color--brand-blue);
	cursor: pointer;
}

.cab-proposer__fermer:hover,
.cab-proposer__fermer:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--brand-blue) 10%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.cab-proposer__pas,
	.cab-proposer__bouton {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   The events calendar

   Nothing here. The Events Calendar reads a stylesheet of its own from the
   theme — `tribe-events/tribe-events.css` — and loads it after its own, on its
   own pages only. That is where its colours are re-pointed at the palette, and
   it is the plugin's documented door: rules written there weigh the same as
   its own and win by coming later, so none of them has to be forced.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   wpForo

   Carried over from the Divi child theme, minus the rules that only made sense
   under Divi: the #page-container overflow fix and the hard widths that fought
   Divi's own layout. The block theme lays the forum out on its own, so what
   remains is what the forum itself needs.
   -------------------------------------------------------------------------- */

/* Sub-forum lists carry their own layout; bullets double up with it. */
#wpforo .wpforo-subforum ul li {
	list-style: none;
}

#wpforo .wpforo-category {
	min-height: 134px;
}

@media (max-width: 1024px) {
	#wpforo .wpforo-category {
		min-height: 50px;
	}
}

/* Recent replies widget: the author sits to the right of the excerpt. */
#wpforo #wpf-widget-recent-replies .postuser {
	margin-top: 10px;
	text-align: right;
	font-style: italic;
	color: var(--wp--preset--color--gray);
}

/* Orange reached 2.49:1 on white; forum links read like the rest of the site. */
#wpforo #wpf-widget-recent-replies .postuser a {
	color: var(--wp--preset--color--brand-blue);
}

.widget_wpforo_recent_posts {
	margin-bottom: 0;
}

/* The forum brings its own typography; keep it on the site's faces. */
#wpforo,
#wpforo input,
#wpforo textarea,
#wpforo select,
#wpforo button {
	font-family: var(--wp--preset--font-family--body);
}

#wpforo h1,
#wpforo h2,
#wpforo h3,
#wpforo #wpforo-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
}
/* --------------------------------------------------------------------------
   The forum, in the site's own hand

   The colours are wpForo's business: it paints its whole board by substituting
   27 numbered values into a 923-line template, and those 27 now hold the
   site's palette (Forum → Réglages → Styles). What follows is everything that
   matrix cannot say.

   And the first of those is the dark palette. wpForo has one set of values and
   no idea that this site turns over: with the page at #16202a the board stayed
   a white slab, measured. The surfaces are therefore said again here in terms
   of the theme's presets — which are the very colours the matrix carries, so
   nothing moves in daylight — and because presets are what the dark palette
   redefines, the board follows the site without a single rule of its own.
   -------------------------------------------------------------------------- */

#wpforo #wpforo-wrap {
	background: var(--wp--preset--color--white);
	color: var(--cab-encre);
}

/* The bar of tabs, and the head bar under it. */
#wpforo #wpforo-wrap #wpforo-menu,
#wpforo #wpforo-wrap .wpf-head-bar,
#wpforo #wpforo-wrap .wpforo-topic-badges {
	background: var(--wp--preset--color--cream);
}

#wpforo #wpforo-wrap #wpforo-menu {
	border-bottom-color: var(--wp--preset--color--light-gray);
}

/*
 * Everything wpForo colours under a `.wpfl-N` class needs that step named
 * again, or the rule here weighs one class less and loses. Measured: the
 * description stayed at the matrix value in both palettes while every surface
 * around it had turned over.
 */
#wpforo #wpforo-wrap #wpforo-menu li a,
#wpforo #wpforo-wrap .wpf-search input[type="text"],
#wpforo #wpforo-wrap [class*="wpfl-"] .cat-title,
#wpforo #wpforo-wrap [class*="wpfl-"] .cat-stat-posts,
#wpforo #wpforo-wrap [class*="wpfl-"] .cat-stat-topics,
#wpforo #wpforo-wrap [class*="wpfl-"] .head-title,
#wpforo #wpforo-wrap [class*="wpfl-"] .wpforo-topic-info,
#wpforo #wpforo-wrap [class*="wpfl-"] .wpforo-topic-head {
	color: var(--wp--preset--color--brand-blue);
}

/* The bands that head a category and a topic list. */
#wpforo #wpforo-wrap [class*="wpfl-"] .wpforo-category,
#wpforo #wpforo-wrap [class*="wpfl-"] .wpforo-post .wpf-left,
#wpforo #wpforo-wrap [class*="wpfl-"] .wpforo-last-topics-list li {
	background-color: var(--wp--preset--color--cream);
}

#wpforo #wpforo-wrap [class*="wpfl-"] .wpforo-category,
#wpforo #wpforo-wrap [class*="wpfl-"] .wpforo-topic-head {
	border-bottom-color: var(--wp--preset--color--brand-blue);
}

/* The rules between rows. */
#wpforo #wpforo-wrap [class*="wpfl-"] .forum-wrap {
	border-bottom-color: var(--wp--preset--color--cream);
}

#wpforo #wpforo-wrap [class*="wpfl-"] .topic-wrap,
#wpforo #wpforo-wrap .wpf-head-bar {
	border-bottom-color: var(--wp--preset--color--light-gray);
}

#wpforo #wpforo-wrap [class*="wpfl-"] .wpforo-subforum {
	border-top-color: var(--wp--preset--color--light-gray);
}

/*
 * What is said quietly: descriptions, and the line under a forum.
 *
 * These two are the only place where the theme and the matrix do not already
 * hold the same value. The matrix has two distinct greys for them — #5f7280
 * and #5f6e79, chosen and measured on the comparison — where the theme has one
 * `gray`. So the rule is given to the dark palette only: in daylight the
 * matrix keeps the pair it was given, and nothing here second-guesses it.
 */
:root[data-theme="dark"] #wpforo #wpforo-wrap [class*="wpfl-"] .wpforo-forum-description,
:root[data-theme="dark"] #wpforo #wpforo-wrap [class*="wpfl-"] .wpforo-forum-description p,
:root[data-theme="dark"] #wpforo #wpforo-wrap [class*="wpfl-"] .wpforo-forum-description b,
:root[data-theme="dark"] #wpforo #wpforo-wrap [class*="wpfl-"] .wpforo-forum-footer {
	color: var(--wp--preset--color--gray);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap [class*="wpfl-"] .wpforo-forum-description,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap [class*="wpfl-"] .wpforo-forum-description p,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap [class*="wpfl-"] .wpforo-forum-description b,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap [class*="wpfl-"] .wpforo-forum-footer {
		color: var(--wp--preset--color--gray);
	}
}

/* Fields, which ship white and would stay white on a dark page. */
#wpforo #wpforo-wrap input[type="text"],
#wpforo #wpforo-wrap input[type="email"],
#wpforo #wpforo-wrap input[type="password"],
#wpforo #wpforo-wrap input[type="search"],
#wpforo #wpforo-wrap textarea,
#wpforo #wpforo-wrap select {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--light-gray);
	color: var(--cab-encre);
}

/*
 * The board given the site's shape.
 *
 * Everything on this site that holds content is a card: fifteen pixels of
 * radius, a hairline, and a shadow that lifts it off the page. The board was
 * the one thing lying flat on it.
 */
/*
 * No frame at all.
 *
 * The board was given the card treatment the rest of the site uses — a radius,
 * a hairline, a shadow. It does not take it: wpForo gives its rows no inner
 * padding, so the words came up against the edge and touched it, and an outline
 * drawn where nothing can stand back from it reads as a mistake. Dropping the
 * outline left the shadow doing the same thing on its own, and it read the same
 * way. The board sits on the page, plainly, and its own bars say where it
 * begins.
 */

/* wpForo's own padding leaves the corners bare; the board fills its frame. */
#wpforo #wpforo-wrap {
	padding: 0;
}

/*
 * A row of buttons that could not wrap.
 *
 * `.wpf-footer-buttons` ships as a flex row with `nowrap`, and its four items
 * ran 19 px past the edge of a 375 px screen — measured, a document 394 px wide
 * where the window was 375. Nothing else on the board overflowed; this one row
 * was the whole of it.
 *
 * Letting them wrap was the fix. The gap I put with it was not: each button
 * already carries `margin-left: 14px` of wpForo's own, so a column gap on top
 * of it spaced the four icons 45 px apart in a 147 px box — and the fourth
 * dropped to a second line. The head of that widget is a flex row aligned on
 * `flex-end`, so the two-line block then floated above the title's underline
 * instead of sitting on it. Cyrille saw it before I did; I was reading the
 * words in that corner and not the shapes.
 *
 * The column gap is therefore zero — wpForo's margins are the spacing — and
 * only the row gap remains, for the day something does wrap. Measured after:
 * one line, 127 px in the 147 available, the four icons on the title's
 * baseline.
 */
#wpforo #wpforo-wrap .wpf-footer-buttons {
	flex-wrap: wrap;
	gap: 0.35rem 0;
}

/*
 * And on a telephone, the room they were missing.
 *
 * With the gap gone the four icons want 127 px. At 375 px the head measures
 * 343 and the title takes 251 of it — leaving 92, so they wrapped again, two
 * and two, back above the underline. The 251 is 158 px of text and **50 px of
 * right padding**, which is wpForo's way of running the blue rule a little
 * past the word. Thirty-five of those fifty are the whole shortfall.
 *
 * So the rule is a touch shorter here, and the icons stay on their line: title
 * 216, icons 127, exactly the 343 available. Under 375 px it wraps again and
 * that is fair — there is genuinely no room. The breakpoint is wpForo's own
 * 480 and not one of ours.
 *
 * `#wpforo-stat-header` is in the selector because wpForo's own rule carries
 * it: three ids and a class. Written with the two ids the rest of this file
 * uses, the padding simply lost and nothing moved — measured, still 50 px.
 */
@media (max-width: 480px) {
	#wpforo #wpforo-wrap #wpforo-stat-header .wpf-footer-title {
		padding-right: 15px;
	}
}


/* Wide forum tables must scroll inside their own box, never widen the page. */
.cab-forum :where(table) {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* --------------------------------------------------------------------------
   The few colours the palette does not carry

   Everything the theme paints comes from theme.json — this is the short list
   of what does not: shades that had to be measured against one particular
   surface, and that no palette entry matches. They are named here so they are
   written once, and so the dark palette can answer them.

   `--cab-titre-pied` is the palette's meadow green, taken down a notch: at
   #557a2c it reads 4.43:1 on the pale blue of the footer for the 4.5 a 22 px
   heading needs. `--cab-meta-photo` is the same idea the other way, a bright
   green lightened for a dark veil. The rest are the pale inks that sit on a
   photograph, where the ground is the veil and not a palette colour.
   -------------------------------------------------------------------------- */
:root {
	--cab-titre-pied: #4d6f27;
	--cab-meta-photo: #c9e14e;
	--cab-texte-photo: #d5e2ea;
	--cab-texte-photo-fort: #e4edf3;
	--cab-texte-photo-doux: #cfdae2;

	/*
	 * White that means white. The palette's `white` is the site's surface, and
	 * it turns dark with the rest; but a title on a photograph, a label on the
	 * ink bar or a button's own text sit on grounds that do not change, and
	 * they have to stay light in both modes. Two meanings, two names.
	 */
	--cab-sur-fond-sombre: #fff;

	/*
	 * LE BLEU DE LA BANDE, ET L'ENCRE QUI VA DESSUS. Même raisonnement, pour
	 * la bande des nouvelles : `brand-blue` y sert de FOND, et la palette
	 * sombre le retourne en bleu ciel — la bande devenait le seul bloc clair
	 * d'une page sombre, quand toutes ses voisines passaient au bleu nuit.
	 *
	 * Un fond ne se retourne pas : c'est l'encre posée dessus qui doit rester
	 * lisible, et elle l'est dans les deux modes puisqu'elle ne bouge pas non
	 * plus. Ce sont les deux valeurs de la palette claire, figées ici.
	 */
	--cab-fond-bande: #06668c;
	--cab-encre-bande: #ebf2fa;

	/*
	 * Et le bleu de l'encart de l'histoire, qui n'est ni celui de la marque ni
	 * celui d'une bande : `#427AA1`, une seule fois sur tout le site. Même
	 * raison de ne pas basculer — c'est un fond, et l'encre blanche posée
	 * dessus n'aurait plus rien à faire sur un fond devenu clair.
	 */
	--cab-fond-histoire: #427aa1;

	/*
	 * The ink of the site. Not a palette entry: what the reader can choose in
	 * the editor and what the theme writes its running text in are two
	 * different questions, and merging them cost us a colour.
	 *
	 * A slate grey rather than the blue it used to be. The blue is now the
	 * link's own colour and nothing else — which is what a blue means
	 * everywhere else on the web — and a long paragraph reads more quietly in
	 * a neutral ink. Measured: 11.7:1 on white, 10.4 on the pale blue of the
	 * bands, where the old blue gave 5.7. In dark mode it turns pale while the
	 * links keep their blue.
	 */
	--cab-encre: #2b3a44;
}

/* --------------------------------------------------------------------------
   The dark palette

   The theme drives almost everything from a handful of preset colours: the
   page background is `white`, the text `--cab-encre`, the links `brand-blue`,
   the headings `meadow-green`. Redefining those is therefore enough to turn
   the whole site over — the cards, the bands, the bar and the footer follow
   without a rule of their own.

   Three states, and the middle one is the default: no attribute means « auto »
   and the system decides, `data-theme="dark"` and `data-theme="light"` are the
   reader's own choice and win over it. Hence the `:not([data-theme="light"])`
   guard on the media query: an explicit light choice must beat a dark system.

   The values are measured, not inverted. A palette turned over by arithmetic
   gives grey text on grey ground; these were checked pair by pair against the
   surfaces they actually sit on.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
	--wp--preset--color--white: #16202a;
	--wp--preset--color--cream: #1b2734;
	--wp--preset--color--light-gray: #2a3a48;
	--wp--preset--color--pale-blue: #16232e;
	--wp--preset--color--gray: #a2b3bf;
	--cab-encre: #d3e2ec;
	--wp--preset--color--brand-blue: #74bfe2;
	--wp--preset--color--meadow-green: #a9d16b;
	--wp--preset--color--ink: #0e1720;

	/* Sur fond sombre, le vert du pied de page n'a plus besoin d'etre
	   assombri : c'est l'inverse. */
	--cab-titre-pied: #a9d16b;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--wp--preset--color--white: #16202a;
		--wp--preset--color--cream: #1b2734;
			--wp--preset--color--light-gray: #2a3a48;
		--wp--preset--color--pale-blue: #16232e;
		--wp--preset--color--gray: #a2b3bf;
		--cab-encre: #d3e2ec;
		--wp--preset--color--brand-blue: #74bfe2;
			--wp--preset--color--meadow-green: #a9d16b;
		--wp--preset--color--ink: #0e1720;
		--cab-titre-pied: #a9d16b;
	}
}

/* --------------------------------------------------------------------------
   The light / dark switch

   Built like the account menu beside it, and deliberately so: same panel, same
   distance under the bar, same shadow. One new control in a bar is enough to
   learn; one new *kind* of control is one too many.
   -------------------------------------------------------------------------- */
.cab-header .cab-theme {
	position: relative;
	display: flex;
	align-items: center;
	align-self: stretch;
}

.cab-theme__menu {
	position: relative;
	display: flex;
	align-items: center;
	align-self: stretch;
}

.cab-theme__bouton {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	cursor: pointer;
	color: var(--wp--preset--color--brand-blue);
	list-style: none;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.cab-theme__bouton::-webkit-details-marker {
	display: none;
}

.cab-theme__bouton:hover,
.cab-theme__menu[open] .cab-theme__bouton {
	color: var(--wp--preset--color--brand-blue);
	background: color-mix(in srgb, var(--wp--preset--color--brand-blue) 14%, transparent);
}

.cab-theme__icone,
.cab-theme__marque,
.cab-theme__coche {
	flex: 0 0 auto;
}

.cab-theme__liste {
	position: absolute;
	right: 0;
	top: calc(100% + 5px);
	z-index: 30;
	min-width: 11rem;
	margin: 0;
	padding: 0.4rem 0;
	list-style: none;
	background: var(--wp--preset--color--white);
	box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
}

.cab-header.is-stuck .cab-theme__liste {
	top: calc(100% + 3px);
}

.cab-theme__choix {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	padding: 0.45rem 0.9rem;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--cab-encre);
	text-align: left;
}

.cab-theme__choix:hover,
.cab-theme__choix:focus-visible {
	background: var(--wp--preset--color--cream);
}

.cab-theme__nom {
	flex: 1 1 auto;
}

/* The tick shows on the state we are in, and only there. */
.cab-theme__coche {
	opacity: 0;
	color: var(--wp--preset--color--meadow-green);
}

.cab-theme__choix[aria-pressed="true"] .cab-theme__coche {
	opacity: 1;
}

/* On a phone the panel hangs from the bar, like the others. */
@media (max-width: 980px) {
	.cab-header .cab-theme__liste {
		min-width: 240px;
		padding-block: 20px;
		border-top: 3px solid var(--wp--preset--color--brand-blue);
		background: color-mix(in srgb, var(--wp--preset--color--white) 92%, transparent);
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}
}

/*
 * And it opens over the menu, not under it.
 *
 * Core's panel is drawn at z-index 100000; the bar is at 10, and every control
 * inside the bar is sealed under that ceiling by its parent — a child cannot
 * climb out of the layer its parent occupies. So the switch opened its three
 * choices *behind* the menu: the presses landed on whatever entry was drawn
 * over them, and the theme never changed. Nothing looked broken, which is why
 * it took a while to see.
 *
 * The bar gives up being a layer of its own while the panel is open, and the
 * switch takes one for itself, above the panel. Nothing else moves: the menu
 * hangs below the bar and never covered it, and core's close button, still at
 * 100000, goes on drawing over the bar's own ground.
 */
.has-modal-open .cab-header {
	z-index: auto;
}

.has-modal-open .cab-theme {
	z-index: 100001;
}

/* --------------------------------------------------------------------------
   The discussion

   Shaped after Dolce Machja's, in this site's colours: each comment is a
   bubble with a point turned towards the face beside it, and the replies are
   folded behind a button, hung off a vertical rail.

   The colours are the charter's and nothing else — the ground is the pale
   green, the point is the blue, a name is the green of the headings. All of
   them presets, so the dark palette turns this over with the rest of the site
   without a single rule of its own down here.

   Written for every page that opens a discussion, not for one of them. The
   only thing that changes from an article to an event is the width, and that
   comes from whatever the page puts around the pattern.

   The air above and below is not written here: the block layout of the group
   around it cancels a margin set on a class of ours. It travels with the
   markup, in patterns/comments.php.
   -------------------------------------------------------------------------- */

/* The heading of a section, and not a label: the rule needs air under it. */
.cab-comments__titre {
	display: inline-block;
	margin: 0 0 var(--wp--preset--spacing--50);
	padding-bottom: 0.3em;
	border-bottom: 3px solid var(--wp--preset--color--brand-blue);
}

/* Lists: no bullets and no indent of their own, the offset is set further down. */
.cab-comments .wp-block-comment-template,
.cab-comments .wp-block-comment-template ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cab-comments .wp-block-comment-template > li + li {
	margin-top: var(--wp--preset--spacing--40);
}

/*
 * One comment: the face on the left, the bubble beside it.
 *
 * The two groups are laid out in flow — that is what a group with no layout of
 * its own does — and core then hands every child but the first a top margin of
 * one block gap. Under `display: flex` that margin becomes a shove downwards,
 * and the bubble sits lower than the face it belongs to. Hence the reset: the
 * spacing here is the gap's business.
 */
.cab-comment {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
}

.cab-comment > *,
.cab-comment__bulle > *,
.cab-comment__tete > * {
	margin-block-start: 0;
}

.cab-comment__face {
	flex-shrink: 0;
	line-height: 0;
}

.cab-comment__face img {
	display: block;
	width: 56px;
	height: 56px;
	border: 2px solid var(--wp--preset--color--light-gray);
	border-radius: 50%;
}

.cab-comment__bulle {
	position: relative;
	flex: 1;
	min-width: 0;
	padding: 1rem 1.25rem;
	border: 1px solid var(--wp--preset--color--light-gray);
	border-radius: 12px;
	background: var(--wp--preset--color--cream);
}

/*
 * The point of the bubble: two triangles laid over one another.
 *
 * One triangle would give either a point with no outline or an outline with no
 * point. The first carries the border's colour, the second the ground's, a
 * pixel to its right — what shows between them is the outline carried round
 * the corner.
 */
.cab-comment__bulle::before,
.cab-comment__bulle::after {
	content: "";
	position: absolute;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
}

.cab-comment__bulle::before {
	top: 18px;
	left: -9px;
	border-right: 9px solid var(--wp--preset--color--light-gray);
}

.cab-comment__bulle::after {
	top: 19px;
	left: -7px;
	border-top-width: 7px;
	border-bottom-width: 7px;
	border-right: 8px solid var(--wp--preset--color--cream);
}

/* The head of a bubble: who, when, and what can be done about it. */
.cab-comment__tete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.9rem;
	margin-bottom: 0.75rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--wp--preset--color--light-gray);
}

/*
 * A name is a heading, so it takes the headings' green — and keeps it when it
 * is a link, which is what the reset of colour and underline is for. Blue and
 * underlined, a name would read as somewhere to go rather than as who spoke.
 */
.cab-comment__tete .wp-block-comment-author-name {
	color: var(--wp--preset--color--meadow-green);
	font-size: var(--wp--preset--font-size--regular);
	font-weight: 700;
	line-height: 1.2;
}

.cab-comment__tete .wp-block-comment-author-name a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
}

.cab-comment__tete .wp-block-comment-author-name a:hover {
	text-decoration: underline;
}

/* The date takes the room that is left, and pushes the buttons to the right. */
.cab-comment__tete .wp-block-comment-date {
	flex: 1;
	color: var(--wp--preset--color--gray);
	font-size: 0.82rem;
}

.cab-comment__tete .wp-block-comment-date a,
.cab-comment__tete .wp-block-comment-edit-link a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
}

.cab-comment__tete .wp-block-comment-edit-link {
	color: var(--wp--preset--color--gray);
	font-size: 0.78rem;
}

.cab-comment__tete .wp-block-comment-date a:hover,
.cab-comment__tete .wp-block-comment-edit-link a:hover {
	color: var(--wp--preset--color--meadow-green);
	text-decoration: underline;
}

/* « Reply » and the folding button: one and the same capsule. */
.cab-comment__tete .wp-block-comment-reply-link a,
.cab-comments__replier {
	display: inline-block;
	padding: 0.5rem 1.3rem;
	border: 2px solid var(--wp--preset--color--brand-blue);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--brand-blue);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Blue at rest, green under the pointer: the site's rule for every link. */
.cab-comment__tete .wp-block-comment-reply-link a:hover,
.cab-comment__tete .wp-block-comment-reply-link a:focus-visible,
.cab-comments__replier:hover,
.cab-comments__replier:focus-visible {
	background: var(--wp--preset--color--meadow-green);
	border-color: var(--wp--preset--color--meadow-green);
	color: var(--cab-sur-fond-sombre);
}

.cab-comment .wp-block-comment-content {
	margin: 0;
	color: var(--cab-encre);
	font-size: 0.95rem;
	line-height: 1.7;
}

.cab-comment .wp-block-comment-content p:last-child {
	margin-bottom: 0;
}

/*
 * A comment waiting to be read.
 *
 * WordPress puts no class on the item in that case: the only thing to go on is
 * the note the « Comment content » block inserts at the head of the text. The
 * bubble is reached back from it with `:has()`.
 */
.cab-comment .wp-block-comment-content p:has( > .comment-awaiting-moderation ) {
	margin: 0 0 0.85rem;
}

.cab-comment .comment-awaiting-moderation {
	display: block;
	padding: 0.55rem 0.85rem;
	border-radius: 8px;
	background: var(--wp--preset--color--signal-orange);
	color: #2b1a0c;
	font-size: 0.78rem;
	font-style: normal;
	line-height: 1.5;
}

.cab-comment .comment-awaiting-moderation::before {
	content: "⏳ ";
}

/* Dashed, and warmed over, for as long as nobody has read it. */
@supports selector(:has(*)) {
	.cab-comment__bulle:has( .comment-awaiting-moderation ) {
		border-color: var(--wp--preset--color--signal-orange);
		border-style: dashed;
		background: color-mix(in srgb, var(--wp--preset--color--signal-orange) 8%, var(--wp--preset--color--white));
	}

	.cab-comment__bulle:has( .comment-awaiting-moderation )::before {
		border-right-color: var(--wp--preset--color--signal-orange);
	}

	.cab-comment__bulle:has( .comment-awaiting-moderation )::after {
		border-right-color: color-mix(in srgb, var(--wp--preset--color--signal-orange) 8%, var(--wp--preset--color--white));
	}
}

/* The folding button lines up with the left edge of the replies. */
.cab-comments__replier {
	margin: 0.75rem 0 0 4.75rem;
}

.cab-comments__replier::before {
	content: "▾";
	margin-right: 0.5em;
}

.cab-comments__replier[aria-expanded="true"]::before {
	content: "▴";
}

/* Replies: a rail down the side, and a bluer bubble to tell them apart. */
.cab-comments .wp-block-comment-template ol {
	margin: 0.75rem 0 0 4.75rem;
	padding-left: 1.5rem;
	border-left: 3px solid var(--wp--preset--color--light-gray);
}

.cab-comments .wp-block-comment-template ol > li + li {
	margin-top: var(--wp--preset--spacing--30);
}

.cab-comments .wp-block-comment-template ol .cab-comment__bulle {
	background: var(--wp--preset--color--pale-blue);
}

.cab-comments .wp-block-comment-template ol .cab-comment__bulle::after {
	border-right-color: var(--wp--preset--color--pale-blue);
}

/* Pagination: the pills are the site's, shared with the archives further up. */
.cab-comments .wp-block-comments-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--light-gray);
}

.cab-comments .wp-block-comments-pagination-numbers {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.cab-comments .wp-block-comments-pagination-next {
	margin-left: auto;
}

/*
 * Closed discussion: WordPress drops the form, and this takes its place so the
 * thread does not stop without a word. Dashed, like a comment nobody has read
 * yet — in both cases nothing new can happen here.
 */
.cab-comments__close {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: var(--wp--preset--spacing--40);
	border: 1px dashed var(--wp--preset--color--brand-blue);
	border-radius: 14px;
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--gray);
	font-size: 0.9rem;
	text-align: center;
}

.cab-comments__close::before {
	content: "🔒";
	flex-shrink: 0;
}

/* The form to answer with: a card set apart from the thread. */
.cab-comments .comment-respond {
	margin-top: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--light-gray);
	border-radius: 14px;
	background: var(--wp--preset--color--cream);
}

.cab-comments .comment-reply-title {
	display: block;
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--meadow-green);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 1.15;
}

.cab-comments .comment-reply-title small {
	margin-left: 1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.78rem;
	font-weight: 400;
}

/* « Cancel reply »: a quiet capsule beside the title. Shown only once the
   form has been moved under a comment. */
.cab-comments #cancel-comment-reply-link {
	display: inline-block;
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--wp--preset--color--brand-blue);
	border-radius: 999px;
	color: var(--wp--preset--color--brand-blue);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}

.cab-comments #cancel-comment-reply-link::before {
	content: "✕";
	margin-right: 0.45em;
}

.cab-comments #cancel-comment-reply-link:hover {
	background: var(--wp--preset--color--meadow-green);
	border-color: var(--wp--preset--color--meadow-green);
	color: var(--cab-sur-fond-sombre);
}

/*
 * The form once it has been moved under a comment.
 *
 * WordPress inserts it as the sibling of the item replied to, at full width:
 * it is set at the same offset as the replies and hung off a blue rail,
 * stronger than the replies' own, to say that something is under way.
 */
.cab-comments .wp-block-comment-template .comment-respond {
	margin: 0.75rem 0 0 4.75rem;
	border-left: 3px solid var(--wp--preset--color--brand-blue);
	border-radius: 0 14px 14px 0;
}

.cab-comments .wp-block-comment-template .comment-reply-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	font-size: var(--wp--preset--font-size--medium);
}

.cab-comments .wp-block-comment-template .comment-reply-title small {
	margin-left: 0;
}

/* Below the first level, the parent list already provides the offset. */
.cab-comments .wp-block-comment-template ol .comment-respond {
	margin-left: 0;
}

/*
 * Signed in: a line of identity above the box, under a blue rule. It stays a
 * paragraph in flow — text nodes and links alternate in it, and a flex layout
 * would pull apart the punctuation that separates them.
 */
.cab-comments .logged-in-as {
	padding-bottom: 0.8rem;
	border-bottom: 1px solid var(--wp--preset--color--brand-blue);
	color: var(--wp--preset--color--gray);
	font-size: 0.85rem;
	line-height: 1.7;
}

/*
 * The face on that line, whoever drew it.
 *
 * The class asked for on `get_avatar()` does not always arrive: wpForo replaces
 * the whole tag when a member has uploaded a picture on the forum, and rebuilds
 * it with its own attributes — measured, `class='avatar avatar-32 photo'` and
 * nothing of ours. So the picture is reached by where it stands, and the class
 * kept only as a second hold for the installs where it does survive.
 */
.cab-comments .logged-in-as img,
.cab-comments__moi {
	width: 32px;
	height: 32px;
	margin-right: 0.6rem;
	border: 2px solid var(--wp--preset--color--light-gray);
	border-radius: 50%;
	object-fit: cover;
	vertical-align: middle;
}

.cab-comments .logged-in-as a {
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: transparent;
}

.cab-comments .logged-in-as a:hover {
	text-decoration: underline;
}

/* The note about required fields goes on its own line, quietly. */
.cab-comments .logged-in-as .required-field-message {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.78rem;
	font-style: italic;
}

.cab-comments .required {
	color: var(--wp--preset--color--signal-orange);
}

/* Le cœur écrit l'étiquette et le champ sur la même ligne : ici elle est au-dessus. */
.cab-comments .comment-form label {
	display: block;
	margin-bottom: 0.35rem;
}

/* La hauteur d'ouverture de la zone de message : elle seule est propre à cet
   endroit, la forme du champ vient de la règle commune. */
.cab-comments .comment-form textarea {
	min-height: 9rem;
}

/*
 * The grid of the form: three columns, so name, e-mail and site sit on one
 * line. Everything else spans the lot. A grid and not inline blocks, whose
 * whitespace pushed the third column over the edge; and `order` lifts the
 * three fields above the box, which WordPress prints first.
 */
.cab-comments .comment-form {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30) 1rem;
}

.cab-comments .comment-form > * {
	grid-column: 1 / -1;
	margin: 0;
}

.cab-comments .comment-form .comment-notes {
	order: -2;
	color: var(--wp--preset--color--gray);
	font-size: 0.82rem;
}

.cab-comments .comment-form-author,
.cab-comments .comment-form-email,
.cab-comments .comment-form-url {
	order: -1;
}

.cab-comments .comment-form-author {
	grid-column: 1;
}

.cab-comments .comment-form-email {
	grid-column: 2;
}

.cab-comments .comment-form-url {
	grid-column: 3;
}

.cab-comments .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.cab-comments .comment-form-cookies-consent label {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 400;
}

.cab-comments .comment-form .form-submit {
	margin-bottom: 0;
}

/* The send button is not named here: in a block theme WordPress gives it the
   button classes, and it takes the site's button from theme.json like the
   rest. */

@media (max-width: 781px) {
	.cab-comment {
		gap: 0.9rem;
	}

	.cab-comment__face img {
		width: 42px;
		height: 42px;
	}

	.cab-comments .wp-block-comment-template ol,
	.cab-comments .wp-block-comment-template .comment-respond,
	.cab-comments__replier {
		margin-left: 2rem;
	}

	.cab-comments .wp-block-comment-template ol {
		padding-left: 0.9rem;
	}

	/* One column: the three fields stack, still above the box thanks to
	   « order ». */
	.cab-comments .comment-form {
		grid-template-columns: 1fr;
	}

	.cab-comments .comment-form-author,
	.cab-comments .comment-form-email,
	.cab-comments .comment-form-url {
		grid-column: 1 / -1;
	}

	.cab-comments .wp-block-comments-pagination {
		justify-content: center;
	}

	.cab-comments .wp-block-comments-pagination-next {
		margin-left: 0;
	}
}

/* --------------------------------------------------------------------------
   Sharing

   A line of links and nothing more. No third party is loaded — see inc/share.php
   — so there is no borrowed widget to fight with, and the row can be written in
   the site's own hand: a small grey heading, blue links turning green under the
   pointer, separated by a middle dot.

   The same row serves an event, an article and a piece of rolling stock, so it
   is written to sit at the foot of anything, on a rule that says « this is the
   end of what there was to read ».
   -------------------------------------------------------------------------- */

/*
 * The class is doubled on purpose. WordPress gives the last child of a flow
 * layout `margin-block-end: 0`, and this block is always the last one: its
 * bottom margin fell to zero and the links came to touch what follows.
 * Measured — neither `main .cab-partage` nor the class alone gets past it.
 */
.cab-partage.cab-partage {
	margin: clamp(2rem, 4vw, 3rem) 0 clamp(2rem, 4vw, 3rem);
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--light-gray);
}

.cab-partage__titre {
	margin: 0 0 0.6rem;
	color: var(--wp--preset--color--gray);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.cab-partage__liste {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	/* The spacing is the gap's; the dot must not add its own, or the room
	   between two entries is counted twice. */
	gap: 0.3rem 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cab-partage__liste li::before {
	content: none;
}

/*
 * The separating dot, and only between two entries that are actually shown:
 * the two hidden buttons must not leave one behind them. The empty alternative
 * text keeps it out of what a screen reader says.
 */
.cab-partage__liste li:not([hidden]) ~ li:not([hidden])::before {
	content: "·";
	content: "·" / "";
	margin-right: 0.55rem;
	color: var(--wp--preset--color--light-gray);
}

.cab-partage__lien {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0;
	border: 0;
	border-bottom: 1px solid transparent;
	background: none;
	color: var(--wp--preset--color--brand-blue);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.cab-partage__lien svg {
	flex: none;
	width: 1em;
	height: 1em;
	fill: currentColor;
	opacity: 0.8;
}

/* Blue at rest, green under the pointer: the site's rule for every link. */
.cab-partage__lien:hover,
.cab-partage__lien:focus-visible {
	border-bottom-color: var(--wp--preset--color--meadow-green);
	color: var(--wp--preset--color--meadow-green);
}

.cab-partage__lien:focus-visible {
	border-radius: 2px;
	outline: 2px solid var(--wp--preset--color--brand-blue);
	outline-offset: 3px;
}

/*
 * Copy confirmed. The orange is never a link on this site, so it reads as an
 * answer and not as something else to press.
 */
.cab-partage__lien--copie.est-copie {
	border-bottom-color: transparent;
	color: var(--wp--preset--color--signal-orange);
}

@media (prefers-reduced-motion: reduce) {
	.cab-partage__lien {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   The sections of an archive

   Four cards to a row on a desk, two on anything narrower. His Divi model went
   down to one on a telephone; two of these sit side by side perfectly well, and
   one per row turned six sections into a page nobody scrolls to the end of.

   The picture keeps the frame the rest of the site gives a picture — two pixels
   of blue, fifteen of radius, a shadow underneath — so a section card and an
   event card read as the same family.
   -------------------------------------------------------------------------- */

.cab-rubriques {
	margin-block: clamp(2rem, 4vw, 3rem);
}

.cab-rubriques__titre {
	margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
}

.cab-rubriques__liste {
	display: grid;
	grid-template-columns: repeat(var(--cab-rubriques-colonnes, 4), minmax(0, 1fr));
	gap: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * La collection en tient deux : les locomotives puis les wagons, chacune
 * remplissant sa ligne. Elles se suivent au même écart que les cartes entre
 * elles, pour qu'on lise une grille et non deux blocs.
 */
.cab-rubriques__liste + .cab-rubriques__liste {
	margin-block-start: 2rem;
}

.cab-rubrique {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
	min-width: 0;
}

/*
 * The picture and the name are one link, laid out as a column so the name sits
 * under the picture rather than beside it.
 */
.cab-rubrique__lien {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	text-decoration: none;
}

.cab-rubrique__photo {
	display: block;
	overflow: hidden;
	border: 2px solid var(--wp--preset--color--brand-blue);
	border-radius: 15px;
	/* The shadow belongs to the frame: cast by the picture it would be clipped
	   by the very rounding that clips the picture. */
	box-shadow: 0 8px 14px -6px rgba(20, 35, 43, 0.35);
	line-height: 0;
}

.cab-rubrique__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.cab-rubrique__lien:hover .cab-rubrique__photo img,
.cab-rubrique__lien:focus-visible .cab-rubrique__photo img {
	transform: scale(1.05);
}

/*
 * The name is underlined, as his model underlined it — and takes the headings'
 * green rather than the blue of a link, because the picture above it already
 * says the whole card leads somewhere.
 */
.cab-rubrique__nom {
	color: var(--wp--preset--color--meadow-green);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.15;
	/*
	 * The line is always there and its colour is not: `text-decoration-line`
	 * cannot be animated, so going from `none` to `underline` snaps the rule
	 * into place while the colour beside it is still travelling. Drawn in
	 * transparent, it fades in with everything else.
	 */
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.18em;
	transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

/*
 * The rule comes with the pointer and not before it. Underlined at rest, four
 * names in a row read as four rules across the page — and the photograph above
 * each of them already said the card leads somewhere.
 */
.cab-rubrique__lien:hover .cab-rubrique__nom,
.cab-rubrique__lien:focus-visible .cab-rubrique__nom {
	color: var(--wp--preset--color--brand-blue);
	text-decoration-color: currentColor;
}

.cab-rubrique__lien:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-blue);
	outline-offset: 4px;
	border-radius: 4px;
}

.cab-rubrique__compte {
	margin: 0;
	color: var(--wp--preset--color--gray);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/*
 * The line between the contents and the list itself. Only printed where cards
 * stand above it — see patterns/archive-body.php — so it never announces a
 * separation that is not there.
 */
.cab-liste__titre {
	margin-block: clamp(2.5rem, 5vw, 3.5rem) clamp(1.25rem, 2.5vw, 2rem);
}

.cab-liste__titre span {
	color: var(--wp--preset--color--brand-blue);
}

@media (max-width: 900px) {
	.cab-rubriques__liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

@media (max-width: 600px) {
	.cab-rubriques__liste {
		gap: 1.1rem;
	}

	.cab-rubrique__nom {
		font-size: var(--wp--preset--font-size--regular);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cab-rubrique__photo img {
		transition: none;
	}

	.cab-rubrique__lien:hover .cab-rubrique__photo img {
		transform: none;
	}
}

/*
 * Every light surface of the board, turned over at once.
 *
 * Naming components one by one does not hold: the matrix paints backgrounds
 * with slot 1 on 48 selectors and slot 9 on 70, and two of them — the category
 * panel and « Forum Information » — were missed on the first pass and stayed
 * white slabs in a dark page. The list below is not typed out by hand: it is
 * read straight from `themes/2022/styles/matrix.css`, so it is the plugin's own
 * inventory and not my memory of it.
 *
 * Backgrounds only. The text on them inherits from `#wpforo-wrap`, which has
 * already turned over, so a surface that goes dark carries light text with it.
 */
:root[data-theme="dark"] #wpforo #wpforo-wrap,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-tab-content,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-search-form[data-search-form="classic"] input[type="text"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-search-form[data-search-form="classic"] select,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-admin-note,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-button-outlined:hover,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-button-outlined.wpf-subscribe-forum,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-button-outlined.wpf-subscribe-topic,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-member-title.wpfut,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .wpforo-last-topics,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .wpforo-last-posts,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .wpforo-post .wpf-left .avatar,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .wpforo-post,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .wpforo-post .wpf-right .wpforo-post-content-bottom,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .wpforo-post .wpf-left .avatar,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-last-topics,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-post,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-comment,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpforo-post .wpf-left .avatar,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-child-post .wpf-reply-head .wpf-author-avatar .avatar,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-child-post .wpf-reply-content .wpf-reply-tree .wpf-tree-item.wpf-starter .avatar,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-board-panel-right span.wpf-active,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-activity-icon i,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-subscriptions .wpf-sbs-bulk-options,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-category .wpf-button,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field input[type="text"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field input[type="search"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field input[type="password"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field input[type="email"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field input[type="date"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field input[type="number"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field input[type="url"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field input[type="tel"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field textarea,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field select,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-tools .wpf-tool li input[type="text"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-tools .wpf-tool .wpf-split-posts,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-revisions-wrap .wpforo-revision-body {
	background-color: var(--wp--preset--color--white);
}

:root[data-theme="dark"] #wpforo #wpforo-wrap #wpforo-menu,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-helper-toggle,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-search-mode-active,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-tab-content .wpf-ai-search-form .wpf-ai-results .wpf-ai-more-btn,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-chat-msg-assistant .wpf-ai-chat-msg-content,
:root[data-theme="dark"] #wpforo #wpforo-wrap #wpforo-menu li > ul,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-search input[type="text"]:focus,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-notifications .wpf-notification-content li:hover,
:root[data-theme="dark"] #wpf-widget-profile .wpf-notifications .wpf-notification-content li:hover,
:root[data-theme="dark"] #wpforo #wpforo-wrap .author-rating,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-breadcrumb div:hover,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-breadcrumb div.active,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-topic-badges,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-head-bar,
:root[data-theme="dark"] #wpforo #wpforo-wrap.wpft-post .wpf-manage-link .wpf-action,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-post-head .wpf-post-head-top,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-post-head .wpf-topic-more-info,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .wpforo-category,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .wpforo-last-topics-list li,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .wpforo-post .wpf-left,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .wpforo-post .wpf-left .author-rating,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .wpforo-post .wpf-action,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .wpforo-category,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .wpforo-post .wpf-right,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-category,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-last-topic .wpf-tbox,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-tags,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-comment .wpf-right,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpforo-category,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpforo-post .wpf-left .author-rating,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpft-topic .wpfl-4 .wpf-thread,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpforo-profile-menu .wpf-profile-menu:hover,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-board-panel,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpf-field input[type="text"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpf-field input[type="password"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpf-field input[type="email"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpf-field input[type="date"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpf-field input[type="number"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpf-field input[type="url"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpf-field input[type="tel"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpf-field textarea,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpf-field select,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-activity-panel .wpf-activity-panel-right span.wpf-active,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-subscriptions .wpf-sbs-bulk-options .wpf-sbs-cat,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-sbs-panel .wpf-sbs-panel-right span.wpf-active,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-followers .wpforo-follower,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-following .wpforo-follower,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-topic-create,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-post-create,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-please-login,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-search-wrap .wpforo-search-content .wpf-ttr,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-recent-wrap .wpf-recent-bar,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-footer-box,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-tools,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-sb-1,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-sb-2,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-revision,
:root[data-theme="dark"] #wpforo #wpforo-wrap #wpforo-menu .wpf-menu,
:root[data-theme="dark"] #wpforo #wpforo-wrap.wpf-dark .wpf-topic-create,
:root[data-theme="dark"] #wpforo #wpforo-wrap.wpf-dark .wpf-topic-create div.mce-toolbar-grp,
:root[data-theme="dark"] #wpforo #wpforo-wrap.wpf-dark .wpf-post-create,
:root[data-theme="dark"] #wpforo #wpforo-wrap.wpf-dark .wpf-post-create div.mce-toolbar-grp,
:root[data-theme="dark"] #wpforo #wpforo-wrap.wpf-dark .wpforo-members-content table tr,
:root[data-theme="dark"] #wpforo #wpforo-wrap.wpf-dark .wpf-field:nth-child(even),
:root[data-theme="dark"] #wpforo #wpforo-wrap.wpf-dark .wpforo-portable-form-wrap div.mce-toolbar-grp,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-portable-form-wrap div.mce-menubar {
	background-color: var(--wp--preset--color--cream);
}

:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .wpforo-last-posts-list,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .wpforo-forum .wpforo-forum-data,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-forum,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-topic .wpf-tbox,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right .wpforo-post-content,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-content-foot,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-child-post .wpf-reply-content,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpforo-post .wpforo-post-footer,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-members .wpforo-member,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-recent-wrap .wpforo-recent-content .wpf-ttr {
	background-color: var(--wp--preset--color--white);
}

:root[data-theme="dark"] #wpforo #wpforo-wrap pre,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right .wpforo-post-author-data-content,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-profile-section .wpf-statbox .wpf-statbox-icon {
	background-color: var(--wp--preset--color--pale-blue);
}

@media (prefers-color-scheme: dark) {

	:root:not([data-theme="light"]) #wpforo #wpforo-wrap,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-tab-content,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-search-form[data-search-form="classic"] input[type="text"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-search-form[data-search-form="classic"] select,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-admin-note,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-button-outlined:hover,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-button-outlined.wpf-subscribe-forum,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-button-outlined.wpf-subscribe-topic,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-member-title.wpfut,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .wpforo-last-topics,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .wpforo-last-posts,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .wpforo-post .wpf-left .avatar,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .wpforo-post,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .wpforo-post .wpf-right .wpforo-post-content-bottom,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .wpforo-post .wpf-left .avatar,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-last-topics,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-post,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-comment,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpforo-post .wpf-left .avatar,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-child-post .wpf-reply-head .wpf-author-avatar .avatar,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-child-post .wpf-reply-content .wpf-reply-tree .wpf-tree-item.wpf-starter .avatar,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-board-panel-right span.wpf-active,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-activity-icon i,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-subscriptions .wpf-sbs-bulk-options,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-category .wpf-button,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field input[type="text"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field input[type="search"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field input[type="password"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field input[type="email"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field input[type="date"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field input[type="number"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field input[type="url"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field input[type="tel"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field textarea,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field select,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-tools .wpf-tool li input[type="text"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-tools .wpf-tool .wpf-split-posts,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-revisions-wrap .wpforo-revision-body {
		background-color: var(--wp--preset--color--white);
	}

	:root:not([data-theme="light"]) #wpforo #wpforo-wrap #wpforo-menu,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-helper-toggle,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-search-mode-active,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-tab-content .wpf-ai-search-form .wpf-ai-results .wpf-ai-more-btn,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-chat-msg-assistant .wpf-ai-chat-msg-content,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap #wpforo-menu li > ul,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-search input[type="text"]:focus,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-notifications .wpf-notification-content li:hover,
	:root:not([data-theme="light"]) #wpf-widget-profile .wpf-notifications .wpf-notification-content li:hover,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .author-rating,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-breadcrumb div:hover,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-breadcrumb div.active,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-topic-badges,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-head-bar,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap.wpft-post .wpf-manage-link .wpf-action,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-post-head .wpf-post-head-top,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-post-head .wpf-topic-more-info,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .wpforo-category,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .wpforo-last-topics-list li,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .wpforo-post .wpf-left,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .wpforo-post .wpf-left .author-rating,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .wpforo-post .wpf-action,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .wpforo-category,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .wpforo-post .wpf-right,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-category,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-last-topic .wpf-tbox,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-tags,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-comment .wpf-right,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpforo-category,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpforo-post .wpf-left .author-rating,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpft-topic .wpfl-4 .wpf-thread,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpforo-profile-menu .wpf-profile-menu:hover,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-board-panel,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpf-field input[type="text"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpf-field input[type="password"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpf-field input[type="email"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpf-field input[type="date"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpf-field input[type="number"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpf-field input[type="url"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpf-field input[type="tel"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpf-field textarea,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpf-field select,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-activity-panel .wpf-activity-panel-right span.wpf-active,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-subscriptions .wpf-sbs-bulk-options .wpf-sbs-cat,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-sbs-panel .wpf-sbs-panel-right span.wpf-active,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-followers .wpforo-follower,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-following .wpforo-follower,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-topic-create,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-post-create,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-please-login,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-search-wrap .wpforo-search-content .wpf-ttr,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-recent-wrap .wpf-recent-bar,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-footer-box,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-tools,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-sb-1,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-sb-2,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-revision,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap #wpforo-menu .wpf-menu,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap.wpf-dark .wpf-topic-create,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap.wpf-dark .wpf-topic-create div.mce-toolbar-grp,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap.wpf-dark .wpf-post-create,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap.wpf-dark .wpf-post-create div.mce-toolbar-grp,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap.wpf-dark .wpforo-members-content table tr,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap.wpf-dark .wpf-field:nth-child(even),
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap.wpf-dark .wpforo-portable-form-wrap div.mce-toolbar-grp,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-portable-form-wrap div.mce-menubar {
		background-color: var(--wp--preset--color--cream);
	}

	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .wpforo-last-posts-list,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .wpforo-forum .wpforo-forum-data,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-forum,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-topic .wpf-tbox,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right .wpforo-post-content,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-content-foot,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-child-post .wpf-reply-content,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpforo-post .wpforo-post-footer,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-members .wpforo-member,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-recent-wrap .wpforo-recent-content .wpf-ttr {
		background-color: var(--wp--preset--color--white);
	}

	:root:not([data-theme="light"]) #wpforo #wpforo-wrap pre,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right .wpforo-post-author-data-content,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-profile-section .wpf-statbox .wpf-statbox-icon {
		background-color: var(--wp--preset--color--pale-blue);
	}
}

/*
 * And the light surfaces wpForo writes as literals.
 *
 * The matrix is not the whole story: its static stylesheets set another 56
 * backgrounds in plain hex, outside the 27 slots — the admin panel's own title
 * bar among them, and the category panel. Same method as above: the list is
 * read from the plugin's files, so it holds what the plugin holds and not what
 * I remembered to look at.
 *
 * Anything at 250 or above takes the page's ground; the rest takes the pale
 * green of the secondary surfaces. wpForo's own `.wpf-dark` rules are left
 * alone — those are its dark mode, not ours.
 */
:root[data-theme="dark"] #wpforo #wpf-widget-profile .wpf-prof-notifications .wpf-notifications,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-acp-content a.wpf-button-secondary,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-acp-footer a.wpf-button-secondary,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-pref-input,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-pref-select,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-popover .wpf-popover-content i:hover,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-recent-activity-filter-form select,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-search input[type="text"].wpf-search-field:focus,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-timeline-card,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-timeline-icon,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .wpforo-post .wpf-left .wpforo-reaction,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .wpforo-post .wpf-right .wpforo-post-content .wpforo-reaction,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-content .wpf-logout-message,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-portable-form-wrap,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpforo-profile-head-panel .wpforo-profile-head-data .wpf-profile-details,
:root[data-theme="dark"] #wpforo-dialog,
:root[data-theme="dark"] .wpf-topic-added,
:root[data-theme="dark"] .wpf_ac_results {
	background-color: var(--wp--preset--color--white);
}

:root[data-theme="dark"] #wpforo #wpf-widget-profile .wpf-prof-footer .wpf-prof-buttons a,
:root[data-theme="dark"] #wpforo #wpf-widget-profile .wpf-prof-header .wpf-prof-alerts .wpf-bell > svg,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-acp-content,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-acp-footer,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-acp-title,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-activity-delete:hover,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-chat-messages .wpf-ai-chat-typing,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-moderation-report,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-moderation-report.wpf-ai-mod-clean,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-moderation-report.wpf-ai-mod-detected,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-moderation-report.wpf-ai-mod-suspected,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-moderation-report.wpf-ai-mod-uncertain,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-button-secondary,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-page-message-text,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-popover .wpf-popover-content,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-recent-activity-item:hover,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-spoiler-wrap,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-topic-field .wpf-topic-field-label,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-child-post .wpf-reply-head .wpf-author .wpf-author-title .wpf-member-title.wpfut.wpfsut,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-login-wrap .wpforo-table .wpfw-1 .wpf-field:nth-child(even),
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpforo-follow-user:hover,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpforo-profile-head-panel .wpf-edit-cover i,
:root[data-theme="dark"] #wpforo .wpforo-widget-wrap .wpf-button-secondary,
:root[data-theme="dark"] .wpf-post-create,
:root[data-theme="dark"] .wpf_ac_results .wpf_ac_over,
:root[data-theme="dark"] .wpforo-widget-wrap .wpf-button-secondary,
:root[data-theme="dark"] /**************** wpForo Waring Message *************/ /****************************************************/ #wpforo #wpforo-wrap .wpforo-rcn-wrap,
:root[data-theme="dark"] /********************* wpForo Login **********************/ /*********************************************************/ #wpforo #wpforo-wrap .wpforo-login-wrap .wpforo-login-table {
	background-color: var(--wp--preset--color--cream);
}

@media (prefers-color-scheme: dark) {

	:root:not([data-theme="light"]) #wpforo #wpf-widget-profile .wpf-prof-notifications .wpf-notifications,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-acp-content a.wpf-button-secondary,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-acp-footer a.wpf-button-secondary,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-pref-input,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-pref-select,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-popover .wpf-popover-content i:hover,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-recent-activity-filter-form select,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-search input[type="text"].wpf-search-field:focus,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-timeline-card,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-timeline-icon,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .wpforo-post .wpf-left .wpforo-reaction,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .wpforo-post .wpf-right .wpforo-post-content .wpforo-reaction,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-content .wpf-logout-message,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-portable-form-wrap,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpforo-profile-head-panel .wpforo-profile-head-data .wpf-profile-details,
	:root:not([data-theme="light"]) #wpforo-dialog,
	:root:not([data-theme="light"]) .wpf-topic-added,
	:root:not([data-theme="light"]) .wpf_ac_results {
		background-color: var(--wp--preset--color--white);
	}

	:root:not([data-theme="light"]) #wpforo #wpf-widget-profile .wpf-prof-footer .wpf-prof-buttons a,
	:root:not([data-theme="light"]) #wpforo #wpf-widget-profile .wpf-prof-header .wpf-prof-alerts .wpf-bell > svg,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-acp-content,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-acp-footer,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-acp-title,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-activity-delete:hover,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-chat-messages .wpf-ai-chat-typing,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-moderation-report,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-moderation-report.wpf-ai-mod-clean,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-moderation-report.wpf-ai-mod-detected,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-moderation-report.wpf-ai-mod-suspected,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-moderation-report.wpf-ai-mod-uncertain,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-button-secondary,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-page-message-text,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-popover .wpf-popover-content,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-recent-activity-item:hover,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-spoiler-wrap,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-topic-field .wpf-topic-field-label,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-child-post .wpf-reply-head .wpf-author .wpf-author-title .wpf-member-title.wpfut.wpfsut,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-login-wrap .wpforo-table .wpfw-1 .wpf-field:nth-child(even),
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpforo-follow-user:hover,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpforo-profile-head-panel .wpf-edit-cover i,
	:root:not([data-theme="light"]) #wpforo .wpforo-widget-wrap .wpf-button-secondary,
	:root:not([data-theme="light"]) .wpf-post-create,
	:root:not([data-theme="light"]) .wpf_ac_results .wpf_ac_over,
	:root:not([data-theme="light"]) .wpforo-widget-wrap .wpf-button-secondary,
	:root:not([data-theme="light"]) /**************** wpForo Waring Message *************/ /****************************************************/ #wpforo #wpforo-wrap .wpforo-rcn-wrap,
	:root:not([data-theme="light"]) /********************* wpForo Login **********************/ /*********************************************************/ #wpforo #wpforo-wrap .wpforo-login-wrap .wpforo-login-table {
		background-color: var(--wp--preset--color--cream);
	}
}


/*
 * The last two, and the only two that need forcing.
 *
 * `.wpforo-cat-panel` carries its colours in a `style` attribute written by
 * PHP — `background: rgba(255,255,255,.7); color:#000` — which no selector of
 * any weight can outrank. And the secondary buttons are declared `!important`
 * inside the matrix itself, at #FEFEFE.
 *
 * Those are the two cases where `!important` is the answer rather than a
 * shortcut: an inline style and an `!important` are the only things a
 * stylesheet cannot beat by being more specific or by coming later. Everything
 * else above is plain cascade.
 */
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-cat-panel {
	background: rgba(22, 32, 42, 0.72) !important;
	color: var(--cab-encre) !important;
}

:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-button-secondary {
	background: var(--wp--preset--color--cream) !important;
	border-color: var(--wp--preset--color--light-gray) !important;
	color: var(--cab-encre) !important;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-cat-panel {
		background: rgba(22, 32, 42, 0.72) !important;
		color: var(--cab-encre) !important;
	}

	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-button-secondary {
		background: var(--wp--preset--color--cream) !important;
		border-color: var(--wp--preset--color--light-gray) !important;
		color: var(--cab-encre) !important;
	}
}

/*
 * And the literals inside the matrix itself — the third and last source.
 *
 * The template does not only carry its 27 placeholders: a handful of surfaces
 * are written in plain hex right there, so they survive every palette. The
 * secondary buttons of the admin panel were one of them, at #fefefe.
 */
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-button-secondary,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-button-secondary:hover,
:root[data-theme="dark"] .wpf-button-secondary,
:root[data-theme="dark"] .wpf-button-secondary:hover {
	background-color: var(--wp--preset--color--white);
}

:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field input[type="date"]:focus,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field input[type="email"]:focus,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field input[type="number"]:focus,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field input[type="password"]:focus,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field input[type="tel"]:focus,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field input[type="text"]:focus,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field input[type="url"]:focus,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field select:focus,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field textarea:focus,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-notifications,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .wpforo-post-content.wpf-ai-translated,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-comment-text.wpf-ai-translated,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-post-content.wpf-ai-translated,
:root[data-theme="dark"] */ #wpf-widget-profile .wpf-notifications {
	background-color: var(--wp--preset--color--cream);
}

@media (prefers-color-scheme: dark) {

	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-button-secondary,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-button-secondary:hover,
	:root:not([data-theme="light"]) .wpf-button-secondary,
	:root:not([data-theme="light"]) .wpf-button-secondary:hover {
		background-color: var(--wp--preset--color--white);
	}

	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field input[type="date"]:focus,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field input[type="email"]:focus,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field input[type="number"]:focus,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field input[type="password"]:focus,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field input[type="tel"]:focus,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field input[type="text"]:focus,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field input[type="url"]:focus,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field select:focus,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field textarea:focus,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-notifications,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .wpforo-post-content.wpf-ai-translated,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-comment-text.wpf-ai-translated,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-post-content.wpf-ai-translated,
	:root:not([data-theme="light"]) */ #wpf-widget-profile .wpf-notifications {
		background-color: var(--wp--preset--color--cream);
	}
}

/*
 * The `wpfbg-N` utility classes, which I had excluded from the first sweep and
 * should not have.
 *
 * wpForo carries thirteen of them, each a shorthand for one slot, and they are
 * declared `!important` — that is their whole purpose. Three of the thirteen
 * are light: `wpfbg-3` for the ground, `wpfbg-9` for the secondary surface,
 * `wpfbg-7` for the rules. The members list uses them, which is how they were
 * found: seven light slabs on a page I had not opened.
 */
:root[data-theme="dark"] #wpforo .wpfbg-3,
:root[data-theme="dark"] .wpfbg-3 {
	background-color: var(--wp--preset--color--white) !important;
}

:root[data-theme="dark"] #wpforo .wpfbg-9,
:root[data-theme="dark"] .wpfbg-9 {
	background-color: var(--wp--preset--color--cream) !important;
}

:root[data-theme="dark"] #wpforo .wpfbg-7,
:root[data-theme="dark"] .wpfbg-7 {
	background-color: var(--wp--preset--color--light-gray) !important;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) #wpforo .wpfbg-3,
	:root:not([data-theme="light"]) .wpfbg-3 {
		background-color: var(--wp--preset--color--white) !important;
	}

	:root:not([data-theme="light"]) #wpforo .wpfbg-9,
	:root:not([data-theme="light"]) .wpfbg-9 {
		background-color: var(--wp--preset--color--cream) !important;
	}

	:root:not([data-theme="light"]) #wpforo .wpfbg-7,
	:root:not([data-theme="light"]) .wpfbg-7 {
		background-color: var(--wp--preset--color--light-gray) !important;
	}
}

/*
 * The light BORDERS, and the pseudo-elements — the last two families.
 *
 * The same reading as the backgrounds, on `border*` this time: a white ring
 * round an avatar, another round the presence dot, the rules between profile
 * tabs. In daylight those rings read as a cut-out against a photograph; on a
 * dark page they are the brightest thing on the screen.
 *
 * A ring at 250 or above takes the page's ground, so it goes on cutting the
 * avatar out of what is behind it; the paler rules take the theme's line
 * colour.
 *
 * And the four pseudo-elements I had struck out of the first sweep with a
 * blanket « no `:after` »: the diamonds of the breadcrumb are `:after` squares
 * turned 45 degrees, painted with slot 1 — three white lozenges across a dark
 * page, which is exactly what that exclusion cost.
 */
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-board-panel-right span,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-load-more-spinner,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .wpforo-last-topics-list li,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .wpforo-forum .wpforo-forum-data .wpforo-forum-details .wpf-stat-box .wpf-sbd.wpf-sbd-avatar img,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .wpforo-post .wpf-right .wpforo-post-content-bottom,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .wpforo-topic .wpf-sbd.wpf-sbd-avatar img,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right .wpforo-post-author-data-content,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-cat-forum-list .wpf-forum-item:nth-child(even),
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpforo-post .wpforo-post-footer .reacted-users:not(:empty),
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-followers .wpforo-follower .follower-avatar img,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-following .wpforo-follower .follower-avatar img,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-members .wpforo-member .wpf-member-avatar img,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-members .wpforo-member .wpf-member-avatar img.avatar,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-members .wpforo-member .wpf-member-online,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-post .wpforo-post-attachments,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpforo-profile-head-panel .wpf-profile-avatar .wpf-profile-online,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpforo-profile-head-panel .wpf-profile-avatar img,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpforo-profile-head-panel .wpf-profile-avatar img.avatar,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpforo-profile-menu .wpf-profile-menu,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-recent-wrap .wpf-recent-bar .wpfltd,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-recent-wrap .wpf-recent-bar .wpfrtd,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-recent-wrap .wpforo-recent-content td.wpf-shead-icon,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-recent-wrap .wpforo-recent-content td.wpf-spost-icon,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar .wpfltd,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar .wpfrtd,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-search-wrap .wpforo-search-content td.wpf-shead-icon,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-search-wrap .wpforo-search-content td.wpf-spost-icon,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-subscriptions .sbn-icon,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-tags .wpf-tags-title,
:root[data-theme="dark"] /************* wpForo Form Fields ******************/ /****************************************************/ #wpforo #wpforo-wrap .wpf-field {
	border-color: var(--wp--preset--color--white);
}

:root[data-theme="dark"] #wpf-widget-profile .wpf-notifications .wpf-notification-content li,
:root[data-theme="dark"] #wpf-widget-profile .wpf-prof-content,
:root[data-theme="dark"] #wpf-widget-profile .wpf-prof-content .wpf-prof-data .wpf-member-title.wpfut,
:root[data-theme="dark"] #wpf-widget-profile .wpf-prof-header .wpf-prof-alerts,
:root[data-theme="dark"] #wpf-widget-profile .wpf-prof-header .wpf-prof-info,
:root[data-theme="dark"] #wpf-widget-profile .wpf-prof-notifications .wpf-notifications .wpf-notification-content .wpf-ndesc,
:root[data-theme="dark"] #wpforo #wpf-widget-profile .wpf-prof-content,
:root[data-theme="dark"] #wpforo #wpf-widget-profile .wpf-prof-content .wpf-prof-data .wpf-member-title.wpfut,
:root[data-theme="dark"] #wpforo #wpf-widget-profile .wpf-prof-header .wpf-prof-alerts,
:root[data-theme="dark"] #wpforo #wpf-widget-profile .wpf-prof-header .wpf-prof-info,
:root[data-theme="dark"] #wpforo #wpf-widget-profile .wpf-prof-notifications .wpf-notifications .wpf-notification-content .wpf-ndesc,
:root[data-theme="dark"] #wpforo #wpforo-wrap #wpforo-menu,
:root[data-theme="dark"] #wpforo #wpforo-wrap #wpforo-menu li > ul li,
:root[data-theme="dark"] #wpforo #wpforo-wrap #wpforo-poweredby,
:root[data-theme="dark"] #wpforo #wpforo-wrap #wpforo-stat-body .wpf-last-info div.wpf-forum-icons,
:root[data-theme="dark"] #wpforo #wpforo-wrap #wpforo-stat-body .wpf-stat-item,
:root[data-theme="dark"] #wpforo #wpforo-wrap #wpforo-stat-body .wpf-stat-item .wpf-stat-label,
:root[data-theme="dark"] #wpforo #wpforo-wrap #wpforo-stat-header,
:root[data-theme="dark"] #wpforo #wpforo-wrap .author-rating,
:root[data-theme="dark"] #wpforo #wpforo-wrap .widget-title,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-acp-footer,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-action-link,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-activity-data,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-activity-data .wpf-activity-bottom .wpf-activity-forum,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-activity-panel .wpf-activity-panel-right span,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-helper-toggle,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-moderation-report,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-moderation-report .wpf-ai-mod-indicator.wpf-ai-mod-severity-low,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-moderation-report.wpf-ai-mod-clean,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-moderation-report.wpf-ai-mod-detected,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-moderation-report.wpf-ai-mod-uncertain,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-search-form[data-search-form="classic"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-search-form[data-search-form="classic"] .wpf-toggle-wrap .wpf-toggle,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-search-form[data-search-form="classic"] .wpfltd,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-search-form[data-search-form="classic"] .wpfrtd,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-search-form[data-search-form="classic"] input[type="text"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-search-form[data-search-form="classic"] select,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-search-toggle,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-tab-content,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-tab-content .wpf-ai-search-form .wpf-ai-input-wrap .wpf-ai-input,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-tab-content .wpf-ai-search-form .wpf-ai-input-wrap .wpf-ai-input:focus,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-tab-content .wpf-ai-search-form .wpf-ai-results .wpf-ai-result-card,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-tab-content .wpf-ai-search-form .wpf-ai-results .wpf-ai-result-card:hover,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-bar-right .wpf-alerts,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-button-secondary,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field .wpf-field-wrap .mce-tinymce.mce-container.mce-panel,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field .wpf-filed-value i,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field input[type="date"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field input[type="email"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field input[type="number"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field input[type="password"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field input[type="search"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field input[type="tel"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field input[type="text"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field input[type="url"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field select,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-field textarea,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-head-bar,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-notifications,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-notifications .wpf-notification-content li,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-p-error,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-post-create .wp-editor-tabs a.switch-html,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-post-create .wp-editor-tabs a.switch-tmce,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-post-create .wp-editor-tools,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-post-edit-wrap,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-recent-activity-filter-form select,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-recent-activity-item,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-sbs-panel .wpf-sbs-panel-right span,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-spoiler-wrap .wpf-spoiler-body,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-timeline-avatar img,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-timeline-card,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-timeline-card-header,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-timeline-excerpt,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-timeline-icon,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-tools .wpf-tool .wpf-split-posts,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-tools .wpf-tool .wpf-split-posts ul li,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-topic-create .wp-editor-tabs a.switch-html,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-topic-create .wp-editor-tabs a.switch-tmce,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-topic-create .wp-editor-tools,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-topic-field .wpf-topic-field-label,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-topic-field .wpf-topic-field-value,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-topic-form-wrap > .wpf-extra-fields,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-topic-navi .wpf-navi-wrap,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-topic-rel .wpf-no-rel,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-topic-rel .wpf-rel-wrap,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-topic-visitors,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .forum-wrap,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .topic-wrap,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .wpf-sb-right.wpf-sb-1,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .wpf-sb-right.wpf-sb-2,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .wpforo-last-posts-list,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .wpforo-post .wpf-left .author-rating,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .wpforo-post .wpf-right .wpforo-post-content-top,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .wpforo-subforum,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .post-wrap,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .topic-wrap,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .wpf-sb-right,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .wpforo-forum .wpforo-forum-data .wpforo-last-post-info,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .wpforo-last-post-avatar img,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .wpforo-post .wpf-left .avatar,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .wpforo-topic-avatar img,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpf-bottom-bar,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpf-sb-right,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-forum-stat .wpft-cell-left,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-last-topic-status,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-left,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right .wpforo-post-author .wpforo-post-author-details .wpforo-post-author-data,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right .wpforo-post-author .wpforo-post-author-details .wpforo-post-author-stat,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right .wpforo-post-content-top,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right .wpforo-post-tool-bar,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-topic-status,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-cat-forum-list .wpf-forum-item,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-cat-forum-list .wpf-forum-item .wpf-forum-item-stat,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-child-post .wpf-content-foot,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-child-post .wpf-reply-content .wpf-reply-tree,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-child-post .wpf-reply-head .wpf-author-avatar .avatar,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-content-foot .wpf-reaction-wrap,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-content-foot .wpf-reaction-wrap .wpf-like-count,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-replies-sep,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-thread-status .wpf-circle.wpfsq:first-child,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-threads-head,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpforo-post .bottom,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpforo-post .wpf-left .author-rating,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpforo-post .wpf-left .avatar,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpforo-post .wpf-right .wpforo-post-content-top,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-404-wrap .wpf-search-box,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-404-wrap .wpforo-404-content,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-admin-note,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-content .wpf-logout-message,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-followers .wpf-tab-subtitle,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-following .wpf-tab-subtitle,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-legal-privacy,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-legal-rules,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-login-wrap .wpforo-login-content,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-members .wpforo-member .wpforo-member-ug,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-members-wrap td.wpf-members-search,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-post .wpforo-post-attachments img,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-post .wpforo-post-code,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-post .wpforo-post-code-title,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-post .wpforo-post-content img,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-post .wpforo-post-signature,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-post code,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-post-head .wpf-post-head-top .wpf-post-stat .wpf-post-stat-box.wpf-pb-more,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpf-field input[type="date"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpf-field input[type="email"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpf-field input[type="number"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpf-field input[type="password"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpf-field input[type="tel"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpf-field input[type="text"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpf-field input[type="url"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpf-field select,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpf-field textarea,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpforo-profile-home .wpf-field.wpf-field-name-html_soc_net,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpforo-profile-menu,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpforo-user-actions,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile img.wpf-custom-avatar-img,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-recent-wrap .wpf-recent-bar,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-recent-wrap .wpforo-recent-content,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-register-wrap .wpforo-register-content,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-revision-body .wpforo-post-code,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-revision-body code,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-revision-body img,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-revisions-wrap,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar .wpf-toggle-wrap .wpf-toggle,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-search-wrap .wpforo-search-content,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-search-wrap .wpforo-search-content .wpf-ptr,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-subscriptions .wpf-sbs-bulk-options,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-subscriptions .wpf-sbs-bulk-options ul li,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-subscriptions .wpforo-sb,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-widget-wrap .wpforo-widget-content li,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpft-topic .wpfl-4 .wpf-threads-head,
:root[data-theme="dark"] #wpforo #wpforo-wrap input[type="email"],
:root[data-theme="dark"] #wpforo #wpforo-wrap input[type="password"],
:root[data-theme="dark"] #wpforo #wpforo-wrap input[type="text"],
:root[data-theme="dark"] #wpforo #wpforo-wrap pre,
:root[data-theme="dark"] #wpforo #wpforo-wrap select,
:root[data-theme="dark"] #wpforo #wpforo-wrap textarea,
:root[data-theme="dark"] #wpforo .wpforo-widget-wrap .wpf-button-secondary,
:root[data-theme="dark"] .ui-dialog .ui-widget-header,
:root[data-theme="dark"] .wpf-button-secondary,
:root[data-theme="dark"] .wpf-post-create,
:root[data-theme="dark"] .wpf_ac_results,
:root[data-theme="dark"] .wpfbr-7,
:root[data-theme="dark"] .wpfbr-9,
:root[data-theme="dark"] .wpforo-widget-wrap .widget-title,
:root[data-theme="dark"] .wpforo-widget-wrap .wpf-button-secondary,
:root[data-theme="dark"] .wpforo-widget-wrap .wpforo-widget-content li,
:root[data-theme="dark"] /************* Page Message ************************/ /****************************************************/ #wpforo #wpforo-wrap .wpf-page-message-wrap,
:root[data-theme="dark"] /**************** wpForo Waring Message *************/ /****************************************************/ #wpforo #wpforo-wrap .wpforo-rcn-wrap {
	border-color: var(--wp--preset--color--light-gray);
}

:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-breadcrumb div:after,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-tags a:after {
	background: var(--wp--preset--color--white);
}

:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-breadcrumb div.active:after,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-breadcrumb div:hover:after {
	background: var(--wp--preset--color--cream);
}

@media (prefers-color-scheme: dark) {

	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-board-panel-right span,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-load-more-spinner,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .wpforo-last-topics-list li,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .wpforo-forum .wpforo-forum-data .wpforo-forum-details .wpf-stat-box .wpf-sbd.wpf-sbd-avatar img,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .wpforo-post .wpf-right .wpforo-post-content-bottom,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .wpforo-topic .wpf-sbd.wpf-sbd-avatar img,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right .wpforo-post-author-data-content,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-cat-forum-list .wpf-forum-item:nth-child(even),
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpforo-post .wpforo-post-footer .reacted-users:not(:empty),
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-followers .wpforo-follower .follower-avatar img,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-following .wpforo-follower .follower-avatar img,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-members .wpforo-member .wpf-member-avatar img,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-members .wpforo-member .wpf-member-avatar img.avatar,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-members .wpforo-member .wpf-member-online,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-post .wpforo-post-attachments,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpforo-profile-head-panel .wpf-profile-avatar .wpf-profile-online,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpforo-profile-head-panel .wpf-profile-avatar img,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpforo-profile-head-panel .wpf-profile-avatar img.avatar,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpforo-profile-menu .wpf-profile-menu,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-recent-wrap .wpf-recent-bar .wpfltd,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-recent-wrap .wpf-recent-bar .wpfrtd,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-recent-wrap .wpforo-recent-content td.wpf-shead-icon,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-recent-wrap .wpforo-recent-content td.wpf-spost-icon,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar .wpfltd,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar .wpfrtd,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-search-wrap .wpforo-search-content td.wpf-shead-icon,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-search-wrap .wpforo-search-content td.wpf-spost-icon,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-subscriptions .sbn-icon,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-tags .wpf-tags-title,
	:root:not([data-theme="light"]) /************* wpForo Form Fields ******************/ /****************************************************/ #wpforo #wpforo-wrap .wpf-field {
		border-color: var(--wp--preset--color--white);
	}

	:root:not([data-theme="light"]) #wpf-widget-profile .wpf-notifications .wpf-notification-content li,
	:root:not([data-theme="light"]) #wpf-widget-profile .wpf-prof-content,
	:root:not([data-theme="light"]) #wpf-widget-profile .wpf-prof-content .wpf-prof-data .wpf-member-title.wpfut,
	:root:not([data-theme="light"]) #wpf-widget-profile .wpf-prof-header .wpf-prof-alerts,
	:root:not([data-theme="light"]) #wpf-widget-profile .wpf-prof-header .wpf-prof-info,
	:root:not([data-theme="light"]) #wpf-widget-profile .wpf-prof-notifications .wpf-notifications .wpf-notification-content .wpf-ndesc,
	:root:not([data-theme="light"]) #wpforo #wpf-widget-profile .wpf-prof-content,
	:root:not([data-theme="light"]) #wpforo #wpf-widget-profile .wpf-prof-content .wpf-prof-data .wpf-member-title.wpfut,
	:root:not([data-theme="light"]) #wpforo #wpf-widget-profile .wpf-prof-header .wpf-prof-alerts,
	:root:not([data-theme="light"]) #wpforo #wpf-widget-profile .wpf-prof-header .wpf-prof-info,
	:root:not([data-theme="light"]) #wpforo #wpf-widget-profile .wpf-prof-notifications .wpf-notifications .wpf-notification-content .wpf-ndesc,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap #wpforo-menu,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap #wpforo-menu li > ul li,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap #wpforo-poweredby,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap #wpforo-stat-body .wpf-last-info div.wpf-forum-icons,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap #wpforo-stat-body .wpf-stat-item,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap #wpforo-stat-body .wpf-stat-item .wpf-stat-label,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap #wpforo-stat-header,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .author-rating,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .widget-title,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-acp-footer,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-action-link,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-activity-data,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-activity-data .wpf-activity-bottom .wpf-activity-forum,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-activity-panel .wpf-activity-panel-right span,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-helper-toggle,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-moderation-report,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-moderation-report .wpf-ai-mod-indicator.wpf-ai-mod-severity-low,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-moderation-report.wpf-ai-mod-clean,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-moderation-report.wpf-ai-mod-detected,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-moderation-report.wpf-ai-mod-uncertain,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-search-form[data-search-form="classic"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-search-form[data-search-form="classic"] .wpf-toggle-wrap .wpf-toggle,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-search-form[data-search-form="classic"] .wpfltd,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-search-form[data-search-form="classic"] .wpfrtd,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-search-form[data-search-form="classic"] input[type="text"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-search-form[data-search-form="classic"] select,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-search-toggle,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-tab-content,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-tab-content .wpf-ai-search-form .wpf-ai-input-wrap .wpf-ai-input,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-tab-content .wpf-ai-search-form .wpf-ai-input-wrap .wpf-ai-input:focus,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-tab-content .wpf-ai-search-form .wpf-ai-results .wpf-ai-result-card,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-tab-content .wpf-ai-search-form .wpf-ai-results .wpf-ai-result-card:hover,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-bar-right .wpf-alerts,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-button-secondary,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field .wpf-field-wrap .mce-tinymce.mce-container.mce-panel,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field .wpf-filed-value i,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field input[type="date"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field input[type="email"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field input[type="number"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field input[type="password"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field input[type="search"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field input[type="tel"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field input[type="text"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field input[type="url"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field select,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-field textarea,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-head-bar,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-notifications,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-notifications .wpf-notification-content li,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-p-error,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-post-create .wp-editor-tabs a.switch-html,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-post-create .wp-editor-tabs a.switch-tmce,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-post-create .wp-editor-tools,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-post-edit-wrap,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-recent-activity-filter-form select,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-recent-activity-item,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-sbs-panel .wpf-sbs-panel-right span,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-spoiler-wrap .wpf-spoiler-body,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-timeline-avatar img,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-timeline-card,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-timeline-card-header,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-timeline-excerpt,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-timeline-icon,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-tools .wpf-tool .wpf-split-posts,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-tools .wpf-tool .wpf-split-posts ul li,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-topic-create .wp-editor-tabs a.switch-html,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-topic-create .wp-editor-tabs a.switch-tmce,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-topic-create .wp-editor-tools,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-topic-field .wpf-topic-field-label,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-topic-field .wpf-topic-field-value,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-topic-form-wrap > .wpf-extra-fields,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-topic-navi .wpf-navi-wrap,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-topic-rel .wpf-no-rel,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-topic-rel .wpf-rel-wrap,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-topic-visitors,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .forum-wrap,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .topic-wrap,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .wpf-sb-right.wpf-sb-1,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .wpf-sb-right.wpf-sb-2,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .wpforo-last-posts-list,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .wpforo-post .wpf-left .author-rating,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .wpforo-post .wpf-right .wpforo-post-content-top,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .wpforo-subforum,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .post-wrap,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .topic-wrap,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .wpf-sb-right,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .wpforo-forum .wpforo-forum-data .wpforo-last-post-info,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .wpforo-last-post-avatar img,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .wpforo-post .wpf-left .avatar,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .wpforo-topic-avatar img,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpf-bottom-bar,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpf-sb-right,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-forum-stat .wpft-cell-left,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-last-topic-status,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-left,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right .wpforo-post-author .wpforo-post-author-details .wpforo-post-author-data,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right .wpforo-post-author .wpforo-post-author-details .wpforo-post-author-stat,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right .wpforo-post-content-top,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right .wpforo-post-tool-bar,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-topic-status,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-cat-forum-list .wpf-forum-item,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-cat-forum-list .wpf-forum-item .wpf-forum-item-stat,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-child-post .wpf-content-foot,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-child-post .wpf-reply-content .wpf-reply-tree,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-child-post .wpf-reply-head .wpf-author-avatar .avatar,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-content-foot .wpf-reaction-wrap,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-content-foot .wpf-reaction-wrap .wpf-like-count,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-replies-sep,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-thread-status .wpf-circle.wpfsq:first-child,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-threads-head,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpforo-post .bottom,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpforo-post .wpf-left .author-rating,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpforo-post .wpf-left .avatar,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpforo-post .wpf-right .wpforo-post-content-top,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-404-wrap .wpf-search-box,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-404-wrap .wpforo-404-content,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-admin-note,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-content .wpf-logout-message,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-followers .wpf-tab-subtitle,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-following .wpf-tab-subtitle,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-legal-privacy,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-legal-rules,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-login-wrap .wpforo-login-content,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-members .wpforo-member .wpforo-member-ug,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-members-wrap td.wpf-members-search,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-post .wpforo-post-attachments img,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-post .wpforo-post-code,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-post .wpforo-post-code-title,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-post .wpforo-post-content img,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-post .wpforo-post-signature,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-post code,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-post-head .wpf-post-head-top .wpf-post-stat .wpf-post-stat-box.wpf-pb-more,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpf-field input[type="date"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpf-field input[type="email"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpf-field input[type="number"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpf-field input[type="password"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpf-field input[type="tel"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpf-field input[type="text"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpf-field input[type="url"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpf-field select,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpf-field textarea,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpforo-profile-home .wpf-field.wpf-field-name-html_soc_net,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpforo-profile-menu,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpforo-user-actions,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile img.wpf-custom-avatar-img,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-recent-wrap .wpf-recent-bar,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-recent-wrap .wpforo-recent-content,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-register-wrap .wpforo-register-content,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-revision-body .wpforo-post-code,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-revision-body code,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-revision-body img,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-revisions-wrap,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-search-wrap .wpf-search-bar .wpf-toggle-wrap .wpf-toggle,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-search-wrap .wpforo-search-content,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-search-wrap .wpforo-search-content .wpf-ptr,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-subscriptions .wpf-sbs-bulk-options,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-subscriptions .wpf-sbs-bulk-options ul li,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-subscriptions .wpforo-sb,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-widget-wrap .wpforo-widget-content li,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpft-topic .wpfl-4 .wpf-threads-head,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap input[type="email"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap input[type="password"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap input[type="text"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap pre,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap select,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap textarea,
	:root:not([data-theme="light"]) #wpforo .wpforo-widget-wrap .wpf-button-secondary,
	:root:not([data-theme="light"]) .ui-dialog .ui-widget-header,
	:root:not([data-theme="light"]) .wpf-button-secondary,
	:root:not([data-theme="light"]) .wpf-post-create,
	:root:not([data-theme="light"]) .wpf_ac_results,
	:root:not([data-theme="light"]) .wpfbr-7,
	:root:not([data-theme="light"]) .wpfbr-9,
	:root:not([data-theme="light"]) .wpforo-widget-wrap .widget-title,
	:root:not([data-theme="light"]) .wpforo-widget-wrap .wpf-button-secondary,
	:root:not([data-theme="light"]) .wpforo-widget-wrap .wpforo-widget-content li,
	:root:not([data-theme="light"]) /************* Page Message ************************/ /****************************************************/ #wpforo #wpforo-wrap .wpf-page-message-wrap,
	:root:not([data-theme="light"]) /**************** wpForo Waring Message *************/ /****************************************************/ #wpforo #wpforo-wrap .wpforo-rcn-wrap {
		border-color: var(--wp--preset--color--light-gray);
	}

	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-breadcrumb div:after,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-tags a:after {
		background: var(--wp--preset--color--white);
	}

	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-breadcrumb div.active:after,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-breadcrumb div:hover:after {
		background: var(--wp--preset--color--cream);
	}
}


/*
 * A statistic badge that had gone oval.
 *
 * The badges sit in a flex row with `flex: 1`, so the one whose label runs to
 * two lines — « Commentaires sur les questions » — was squeezed by its
 * neighbour: measured 32 x 46 where every other read 46 x 46, and a circle
 * given a 50 % radius on unequal sides is an ellipse. It has nothing to do
 * with the palette; it is wrong in daylight too.
 */
#wpforo #wpforo-wrap .wpf-statbox-icon {
	flex: none;
}

/*
 * The editor's frame on a dark page.
 *
 * This one is not wpForo's: it is WordPress's own TinyMCE, which wpForo puts
 * on the account page and on the reply box. Its chrome — the container, the
 * toolbar, the status bar — ships white, and stood as a bright slab.
 *
 * The sheet itself is left alone, and cannot be otherwise: what is typed lives
 * inside an `iframe`, whose document no outside stylesheet reaches. A white
 * sheet in a dark frame is what an editor looks like anyway.
 *
 * Two identifiers in the prefix, and the colour set on the frame rather than
 * on each label. wpForo declares `#wpforo #wpforo-wrap * { color: inherit }` —
 * two ids beat one id and any number of classes — so every word in there takes
 * its colour from an ancestor, and there is exactly one place worth setting:
 * the panel itself. Measured before: the whole chain, from the toolbar down to
 * the button's `span`, sat at #666 — 2.5:1 on this ground.
 *
 * Scoped to `#wpforo`, so no other editor of the site is touched by it.
 */
/* Le cadre : conteneur, barre d'outils, barre d'état. */
:root[data-theme="dark"] #wpforo #wpforo-wrap .mce-tinymce.mce-panel,
:root[data-theme="dark"] #wpforo #wpforo-wrap .mce-toolbar-grp.mce-panel,
:root[data-theme="dark"] #wpforo #wpforo-wrap .mce-statusbar.mce-panel,
:root[data-theme="dark"] #wpforo #wpforo-wrap .mce-menubar.mce-panel {
	background: var(--wp--preset--color--cream);
	border-color: var(--wp--preset--color--light-gray);
	color: var(--cab-encre);
}

/* Un bouton sous le pointeur, et celui qui est enfoncé. */
:root[data-theme="dark"] #wpforo #wpforo-wrap .mce-btn:hover,
:root[data-theme="dark"] #wpforo #wpforo-wrap .mce-btn.mce-active,
:root[data-theme="dark"] #wpforo #wpforo-wrap .mce-btn:focus {
	background: var(--wp--preset--color--light-gray);
	border-color: var(--wp--preset--color--light-gray);
}

@media (prefers-color-scheme: dark) {
	/* Le cadre : conteneur, barre d'outils, barre d'état. */
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .mce-tinymce.mce-panel,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .mce-toolbar-grp.mce-panel,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .mce-statusbar.mce-panel,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .mce-menubar.mce-panel {
		background: var(--wp--preset--color--cream);
		border-color: var(--wp--preset--color--light-gray);
		color: var(--cab-encre);
	}

	/* Un bouton sous le pointeur, et celui qui est enfoncé. */
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .mce-btn:hover,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .mce-btn.mce-active,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .mce-btn:focus {
		background: var(--wp--preset--color--light-gray);
		border-color: var(--wp--preset--color--light-gray);
	}
}

/*
 * The ring round an avatar, and the presence dot beside it.
 *
 * wpForo draws both in white: the ring cuts the portrait out of the cover
 * photograph behind it, which works on a light page and turns into the
 * brightest thing on the screen on a dark one. Ours is the charter's blue —
 * the same two pixels of blue that frame an event's poster — and being a
 * preset it turns over with the palette instead of being said twice.
 */
#wpforo #wpforo-wrap .wpforo-profile .wpforo-profile-head-panel .wpf-profile-avatar img.avatar,
#wpforo #wpforo-wrap .wpforo-members .wpforo-member .wpf-member-avatar img.avatar,
#wpforo #wpforo-wrap .wpforo-followers .wpforo-follower .follower-avatar img,
#wpforo #wpforo-wrap .wpforo-following .wpforo-follower .follower-avatar img,
#wpforo #wpforo-wrap .wpfl-2 .wpforo-forum .wpforo-forum-data .wpforo-forum-details .wpf-stat-box .wpf-sbd.wpf-sbd-avatar img,
#wpforo #wpforo-wrap .wpfl-2 .wpforo-topic .wpf-sbd.wpf-sbd-avatar img {
	border-color: var(--wp--preset--color--brand-blue);
}

/*
 * And the dot loses its ring.
 *
 * The dot itself is a Font Awesome circle, coloured by state — `wpfcl-8` for
 * « en ligne », which is the charter's bright green, and `wpfcl-0` for « hors
 * ligne », the quiet grey. The ring was a separate box around it, 27 x 23, so
 * a `border-radius: 50 %` made an oval that never hugged the round dot it was
 * meant to frame. Measured, and visible at a glance.
 */
#wpforo #wpforo-wrap .wpforo-profile .wpforo-profile-head-panel .wpf-profile-avatar .wpf-profile-online,
#wpforo #wpforo-wrap .wpforo-members .wpforo-member .wpf-member-online {
	border: 0;
}

/*
 * Said again under the dark guards, and it has to be.
 *
 * The blanket border sweep further up carries a `:root[data-theme="dark"]`
 * prefix, which outweighs the plain rule above — so in the dark palette the
 * rings went back to the page's ground. These few are named twice on purpose:
 * they are the one family that must keep its own colour rather than melt into
 * the background.
 */
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpforo-profile-head-panel .wpf-profile-avatar img.avatar,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-members .wpforo-member .wpf-member-avatar img.avatar,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-followers .wpforo-follower .follower-avatar img,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-following .wpforo-follower .follower-avatar img,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .wpforo-forum .wpforo-forum-data .wpforo-forum-details .wpf-stat-box .wpf-sbd.wpf-sbd-avatar img,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .wpforo-topic .wpf-sbd.wpf-sbd-avatar img {
	border-color: var(--wp--preset--color--brand-blue);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpforo-profile-head-panel .wpf-profile-avatar img.avatar,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-members .wpforo-member .wpf-member-avatar img.avatar,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-followers .wpforo-follower .follower-avatar img,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-following .wpforo-follower .follower-avatar img,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .wpforo-forum .wpforo-forum-data .wpforo-forum-details .wpf-stat-box .wpf-sbd.wpf-sbd-avatar img,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .wpforo-topic .wpf-sbd.wpf-sbd-avatar img {
		border-color: var(--wp--preset--color--brand-blue);
	}
}

/*
 * The dashed ellipse around a usergroup badge.
 *
 * `.wpforo-member-ug` is only the box that holds the badge, and wpForo gives
 * it a dashed border with a 50 % radius — an ellipse drawn round a pill, for
 * no reason the markup explains. It was pale and easy to miss on a light page;
 * the border sweep recoloured it and made it plain. It is the box that is
 * wrong, not its colour, so the box loses its outline in both palettes.
 *
 * Named the way wpForo names it — `.wpforo-members .wpforo-member
 * .wpforo-member-ug` — because a shorter selector loses: two classes fewer,
 * and the dashes stayed put.
 */
#wpforo #wpforo-wrap .wpforo-members .wpforo-member .wpforo-member-ug,
#wpforo #wpforo-wrap .wpforo-profile .wpforo-member-ug {
	border: 0;
}

/*
 * A long member name climbing into the cover photograph.
 *
 * The card's head is a flex row aligned to its bottom edge, so anything that
 * grows, grows upward. Measured: the cover ends at 763, a one-line name starts
 * at 771 and sits clear, a two-line name starts at 751 — twelve pixels inside
 * the photograph, where it is unreadable.
 *
 * Two things together, because either alone leaves a case open. The head is
 * given the height two lines need, so they clear the cover instead of climbing
 * into it; and the name is held to two lines, because a third would climb
 * again whatever height the head is given — the growth goes up, always.
 *
 * The avatar drops twenty pixels with the head and still straddles the cover,
 * which is what that overlap is for. Measured after: eight pixels of daylight
 * under the photograph for a two-line name, twenty-eight for one line.
 *
 * Above 800 px only, which is wpForo's own breakpoint and not one of ours: it
 * gives a card 48 % of the row below that width and 99 % below 620, and a card
 * that wide never wraps a name. Applied there, the extra height was twenty
 * pixels of emptiness under a name that had never been in trouble.
 */
@media (min-width: 801px) {
	#wpforo #wpforo-wrap .wpforo-members .wpforo-member .wpforo-member-head {
		min-height: 130px;
	}

	#wpforo #wpforo-wrap .wpforo-members .wpforo-member .wpforo-member-head .wpf-member-name {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/*
 * The blue TEXT of the board — the family I had left out.
 *
 * The sweeps above took the backgrounds and then the borders; the words
 * themselves were still painted with the matrix's literal #06668c, which is
 * right on white and measures 2.58:1 on the dark ground. Measured on the
 * members list: every name, not only the one with a usergroup colour.
 *
 * Same reading as before — the rules are read from the matrix, on `color`
 * this time, for the slots that carry the charter's blue: 3, 11, 12, 14, 15
 * and 16. They all take the preset, which is the same blue by day and the
 * lighter one by night.
 */
:root[data-theme="dark"] #wpf-widget-profile .wpf-notifications .wpf-notification-content,
:root[data-theme="dark"] #wpf-widget-profile .wpf-notifications .wpf-notification-head,
:root[data-theme="dark"] #wpforo #wpforo-wrap #wpforo-description,
:root[data-theme="dark"] #wpforo #wpforo-wrap #wpforo-menu li a,
:root[data-theme="dark"] #wpforo #wpforo-wrap #wpforo-poweredby,
:root[data-theme="dark"] #wpforo #wpforo-wrap #wpforo-poweredby a,
:root[data-theme="dark"] #wpforo #wpforo-wrap #wpforo-stat-body .wpf-all-read i,
:root[data-theme="dark"] #wpforo #wpforo-wrap #wpforo-stat-body.wpf-new svg,
:root[data-theme="dark"] #wpforo #wpforo-wrap #wpforo-stat-header,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-acp-header .wpf-acp-toggle i,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-action,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-action:hover,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-add-topic-title,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-chat-msg-content .wpf-ai-chat-reference,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-chat-msg-content .wpf-ai-chat-reference:hover,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-helper-toggle,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-suggestions-title,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-summarize-btn,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-summarize-btn .wpf-ai-star,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-summarize-btn:hover,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-summary-body h3,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-summary-body h4,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-tab-active,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-ai-tab-content .wpf-ai-search-form .wpf-ai-results .wpf-ai-result-score,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-bar-right .wpf-alerts i:hover,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-breadcrumb div.active,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-link,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-notifications .wpf-notification-content,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-notifications .wpf-notification-head,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-popover i.fa-thumbs-up,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-post-starter,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-profile-section .wpf-statbox .wpf-statbox-icon,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-recent-activity-label a,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-res-menu,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-sb .wpf-sb-toggle .wpfsa,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-sb-2,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-sb-4,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-sb.wpf-sb-top.sb-tt-expanded .wpf-sb-buttons i,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-sbtn,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-search i,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-search input[type="text"],
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-timeline-user a:hover,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-tools .wpf-tool-tabs .wpf-tool-tab.wpf-tt-active,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-topic-tags #wpf_tags,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpf-unread-forum .wpforo-forum-icon i,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .cat-stat-posts,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .cat-stat-topics,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .cat-title,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .head-stat-posts,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .head-stat-views,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .head-title,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .wpforo-last-posts-list,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .wpforo-last-posts-tab,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .wpforo-last-topics-list,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .wpforo-last-topics-tab,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .wpforo-topic-head,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .wpforo-topic-info,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .wpforo-topic-stat-posts,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-1 .wpforo-topic-stat-views,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .cat-lastpostinfo,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .cat-title,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .head-stat-lastpost,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .head-stat-posts,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .head-stat-views,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .head-title,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .wpforo-forum-icon,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .wpforo-forum-info,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .wpforo-last-post,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .wpforo-last-post-avatar,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .wpforo-post .wpf-right .wpforo-post-content-top,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .wpforo-topic-avatar,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .wpforo-topic-head,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .wpforo-topic-info,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .wpforo-topic-stat-lastpost,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .wpforo-topic-stat-posts,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-2 .wpforo-topic-stat-views,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .cat-stat-answers,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .cat-stat-posts,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .cat-stat-questions,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .cat-title,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .head-stat-lastpost,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .head-stat-posts,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .head-title,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-comment .wpforo-comment-action-links .wpf-action:hover,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-forum-icon,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-forum-info,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-forum-stat-answers,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-forum-stat-posts,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-forum-stat-questions,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-last-topics-list,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-last-topics-tab,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right .wpforo-post-content-top,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-topic,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-3 .wpforo-topic-head,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-cat-forum-list .wpf-forum-item a,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-cat-forum-list .wpf-forum-item a:hover,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-content-foot .wpf-buttons .wpf-action.wpforo-approve i,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-content-foot .wpf-buttons .wpf-action.wpforo-open i,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-content-foot .wpf-buttons .wpf-action.wpforo-public i,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-content-foot .wpf-buttons .wpf-action.wpforo-unsolved i,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-content-foot .wpf-buttons .wpf-action.wpforo-unsolved i:hover,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-content-foot .wpf-buttons .wpf-action.wpforo-unsticky i,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-content-foot .wpf-buttons .wpf-action.wpforo-unsticky i:hover,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-content-foot .wpf-buttons .wpf-action:hover,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-content-foot .wpf-reply:hover .wpf-action,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-load-threads .wpf-newest.wpf-active,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-load-threads .wpf-newest:hover,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-post-replies-bar .wpf-post-replies-info,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-thread-body,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpfl-4 .wpf-threads .wpforo-tags tag a:hover,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpflink,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpflink:hover,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-category .wpf-button,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-login-wrap .wpforo-login-content h3,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-members .wpforo-member .wpforo-member-social a:hover,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-post .wpforo-membertoggle i,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpforo-profile-menu .wpf-profile-menu.wpforo-active,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpforo-profile-menu .wpf-profile-menu:hover,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-profile .wpforo-user-tools span,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-register-wrap .wpforo-register-content h3,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-revisions-wrap .wpforo-revision-body,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-subforum .wpf-unread-forum i,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-subscriptions .wpf-sbs-bulk-options .wpf-sbs-checkbox,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-topic-badges i.fa,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-topic-badges i.fab,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-topic-badges i.fal,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-topic-badges i.far,
:root[data-theme="dark"] #wpforo #wpforo-wrap .wpforo-topic-badges i.fas,
:root[data-theme="dark"] #wpforo #wpforo-wrap a,
:root[data-theme="dark"] #wpforo #wpforo-wrap a:active,
:root[data-theme="dark"] #wpforo #wpforo-wrap a:hover,
:root[data-theme="dark"] #wpforo #wpforo-wrap a:visited,
:root[data-theme="dark"] #wpforo-load,
:root[data-theme="dark"] #wpforo-load i,
:root[data-theme="dark"] .wpf-notifications .wpf-action,
:root[data-theme="dark"] .wpf-notifications .wpf-action:hover,
:root[data-theme="dark"] .wpfcl-1,
:root[data-theme="dark"] .wpfcl-6,
:root[data-theme="dark"] .wpfcl-a,
:root[data-theme="dark"] .wpfcl-b {
	color: var(--wp--preset--color--brand-blue);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) #wpf-widget-profile .wpf-notifications .wpf-notification-content,
	:root:not([data-theme="light"]) #wpf-widget-profile .wpf-notifications .wpf-notification-head,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap #wpforo-description,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap #wpforo-menu li a,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap #wpforo-poweredby,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap #wpforo-poweredby a,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap #wpforo-stat-body .wpf-all-read i,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap #wpforo-stat-body.wpf-new svg,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap #wpforo-stat-header,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-acp-header .wpf-acp-toggle i,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-action,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-action:hover,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-add-topic-title,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-chat-msg-content .wpf-ai-chat-reference,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-chat-msg-content .wpf-ai-chat-reference:hover,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-helper-toggle,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-suggestions-title,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-summarize-btn,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-summarize-btn .wpf-ai-star,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-summarize-btn:hover,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-summary-body h3,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-summary-body h4,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-tab-active,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-ai-tab-content .wpf-ai-search-form .wpf-ai-results .wpf-ai-result-score,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-bar-right .wpf-alerts i:hover,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-breadcrumb div.active,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-link,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-notifications .wpf-notification-content,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-notifications .wpf-notification-head,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-popover i.fa-thumbs-up,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-post-starter,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-profile-section .wpf-statbox .wpf-statbox-icon,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-recent-activity-label a,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-res-menu,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-sb .wpf-sb-toggle .wpfsa,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-sb-2,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-sb-4,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-sb.wpf-sb-top.sb-tt-expanded .wpf-sb-buttons i,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-sbtn,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-search i,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-search input[type="text"],
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-timeline-user a:hover,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-tools .wpf-tool-tabs .wpf-tool-tab.wpf-tt-active,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-topic-tags #wpf_tags,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpf-unread-forum .wpforo-forum-icon i,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .cat-stat-posts,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .cat-stat-topics,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .cat-title,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .head-stat-posts,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .head-stat-views,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .head-title,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .wpforo-last-posts-list,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .wpforo-last-posts-tab,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .wpforo-last-topics-list,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .wpforo-last-topics-tab,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .wpforo-topic-head,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .wpforo-topic-info,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .wpforo-topic-stat-posts,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-1 .wpforo-topic-stat-views,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .cat-lastpostinfo,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .cat-title,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .head-stat-lastpost,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .head-stat-posts,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .head-stat-views,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .head-title,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .wpforo-forum-icon,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .wpforo-forum-info,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .wpforo-last-post,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .wpforo-last-post-avatar,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .wpforo-post .wpf-right .wpforo-post-content-top,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .wpforo-topic-avatar,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .wpforo-topic-head,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .wpforo-topic-info,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .wpforo-topic-stat-lastpost,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .wpforo-topic-stat-posts,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-2 .wpforo-topic-stat-views,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .cat-stat-answers,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .cat-stat-posts,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .cat-stat-questions,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .cat-title,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .head-stat-lastpost,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .head-stat-posts,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .head-title,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-comment .wpforo-comment-action-links .wpf-action:hover,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-forum-icon,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-forum-info,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-forum-stat-answers,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-forum-stat-posts,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-forum-stat-questions,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-last-topics-list,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-last-topics-tab,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-post .wpf-right .wpforo-post-content-top,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-topic,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-3 .wpforo-topic-head,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-cat-forum-list .wpf-forum-item a,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-cat-forum-list .wpf-forum-item a:hover,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-content-foot .wpf-buttons .wpf-action.wpforo-approve i,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-content-foot .wpf-buttons .wpf-action.wpforo-open i,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-content-foot .wpf-buttons .wpf-action.wpforo-public i,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-content-foot .wpf-buttons .wpf-action.wpforo-unsolved i,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-content-foot .wpf-buttons .wpf-action.wpforo-unsolved i:hover,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-content-foot .wpf-buttons .wpf-action.wpforo-unsticky i,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-content-foot .wpf-buttons .wpf-action.wpforo-unsticky i:hover,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-content-foot .wpf-buttons .wpf-action:hover,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-content-foot .wpf-reply:hover .wpf-action,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-load-threads .wpf-newest.wpf-active,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-load-threads .wpf-newest:hover,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-post-replies-bar .wpf-post-replies-info,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-thread-body,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpfl-4 .wpf-threads .wpforo-tags tag a:hover,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpflink,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpflink:hover,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-category .wpf-button,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-login-wrap .wpforo-login-content h3,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-members .wpforo-member .wpforo-member-social a:hover,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-post .wpforo-membertoggle i,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpforo-profile-menu .wpf-profile-menu.wpforo-active,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpforo-profile-menu .wpf-profile-menu:hover,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-profile .wpforo-user-tools span,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-register-wrap .wpforo-register-content h3,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-revisions-wrap .wpforo-revision-body,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-subforum .wpf-unread-forum i,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-subscriptions .wpf-sbs-bulk-options .wpf-sbs-checkbox,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-topic-badges i.fa,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-topic-badges i.fab,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-topic-badges i.fal,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-topic-badges i.far,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap .wpforo-topic-badges i.fas,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap a,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap a:active,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap a:hover,
	:root:not([data-theme="light"]) #wpforo #wpforo-wrap a:visited,
	:root:not([data-theme="light"]) #wpforo-load,
	:root:not([data-theme="light"]) #wpforo-load i,
	:root:not([data-theme="light"]) .wpf-notifications .wpf-action,
	:root:not([data-theme="light"]) .wpf-notifications .wpf-action:hover,
	:root:not([data-theme="light"]) .wpfcl-1,
	:root:not([data-theme="light"]) .wpfcl-6,
	:root:not([data-theme="light"]) .wpfcl-a,
	:root:not([data-theme="light"]) .wpfcl-b {
		color: var(--wp--preset--color--brand-blue);
	}
}

/*
 * A member's name, promoted without being redrawn.
 *
 * On a profile the page fell from h1 to h3: wpForo prints no title of its own
 * there, and the member's name — the one thing the page is about — sat in a
 * plain `div`. It is now the h2 that level was missing (see `inc/wpforo.php`).
 *
 * Nothing about it should move. The theme's h2 would arrive with the display
 * family, 1.75rem and a margin above; the heading is therefore told to take
 * everything from the line it replaced, which is what it looked like before
 * the tag changed.
 *
 * And `inline`, which is the part that matters: the name and the `@nicename`
 * beside it share one line, and a heading is a block. Measured on the first
 * pass — the h2 took 47 px of height and pushed `@cabrio2b` down to a line of
 * its own, forty-eight pixels below where it belongs.
 *
 * Measured after: 16 px / 600 / 27.2 px, and the two back on the same line.
 */
#wpforo #wpforo-wrap .wpfp-name .wpfp-name__titre {
	display: inline;
	margin: 0;
	font: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
}

/*
 * The title of a category, on its plaque.
 *
 * wpForo writes the cover band entirely in line — `background-size: cover`, a
 * fixed `height: 170px`, and on the plaque that carries the name,
 * `background: rgba(255,255,255,0.7); color:#000`, repeated on the name
 * itself. Written in line, so nothing in a stylesheet reaches it.
 *
 * White plaque, black text: right by day, and only by day. The dark sweep
 * above had already repainted the plaque — measured at rgba(22,32,42,0.72) —
 * but the black text came along untouched. On the dark ground (#1b2734 read
 * through a transparent banner) that composites to #17222d under black:
 * **1.30:1**. Invisible, and the more so now that the banners are PNGs with
 * an alpha channel, which let the page's own dark through where a photograph
 * used to hold some light.
 *
 * The ink is said once, for both grounds, because the inline colour has to be
 * beaten in both. `!important` is not a preference here: it is the only weight
 * that reaches a style attribute. Measured after: 12.2:1 by night, unchanged
 * by day.
 */
#wpforo #wpforo-wrap .wpforo-category .wpforo-cat-panel,
#wpforo #wpforo-wrap .wpforo-category .wpforo-cat-panel .cat-name {
	color: var(--cab-encre) !important;
}

/*
 * Two counters that could not hold their own words.
 *
 * wpForo gives the category band three columns — the name, then the number of
 * posts and of topics — and sizes the last two as a share of the width:
 * `width: 7%` and `width: 8%`, with the header label and the figure below it
 * taking the same share so they line up.
 *
 * Seven percent was measured for « Posts ». The French phrase is
 * « Publications », which needs **84 px** at 13 px of Comfortaa; on the widest
 * board this site ever draws — 767 px — seven percent is **51**. The word ran
 * 33 px past its column, straight over « Sujets » next door, and the two read
 * as one blot. It is not a wrapping problem: a single word has nowhere to
 * break. Below 620 px wpForo raises the share to 13 %, which is 76 px at that
 * width — still short. It was wrong at every width where the counters show.
 *
 * `min-width` rather than a width of our own: wpForo keeps its proportions,
 * and simply stops being allowed to go under what the word measures. Said for
 * the header and for the figure together, because a column that no longer sat
 * over its own label would only trade one fault for another.
 *
 * 96 and 64 — the words plus their air. « Sujets » measures 41 and was never
 * in trouble; it is named here only so the pair keeps its balance.
 */
#wpforo #wpforo-wrap .wpfl-1 .cat-stat-posts,
#wpforo #wpforo-wrap .wpfl-1 .wpforo-forum-stat-posts {
	min-width: 96px;
}

#wpforo #wpforo-wrap .wpfl-1 .cat-stat-topics,
#wpforo #wpforo-wrap .wpfl-1 .wpforo-forum-stat-topics {
	min-width: 64px;
}

/* --------------------------------------------------------------------------
   An archive and its panel, side by side

   A pair of core columns will not do here, and the reason is worth writing
   down: two columns start on the same line. The panel therefore began level
   with « Tous les articles de… » while the cards began **69 px lower** —
   measured — and it read as a panel that had slipped upward.

   A grid fixes it at the root. The heading and the filter bar take rows of
   their own in the left-hand track, the cards take the next, and the panel is
   placed on that same row: `--cab-rangee`, written on the wrapper by the
   pattern, which is the only place that knows whether the bar is drawn. Two on
   the collection's pages, three on an archive that carries a bar, one where
   nothing precedes the cards at all.

   `align-items: start` so the panel keeps its own height instead of stretching
   down beside twenty cards.

   AND THE SPACING BECOMES THE GRID'S, not the blocks'. Core gives every child
   of a group but the first a top margin of one block gap; the panel is second
   on the collection's pages and third on an archive, so it inherited that
   margin exactly when its row-mate did not, and sat **16 px** low — measured,
   after the first attempt at this. Only the TOP margins are levelled: the
   blocks keep the bottom margins that give the site its rhythm, and those
   carry the spacing between rows, so `row-gap` stays at nothing. Adding one
   spaced the title from the cards twice over — 85 px against the 69 the rest
   of the site uses, measured on a contents page for comparison.

   The class is written twice because core's own rule arrives after this
   stylesheet with a class's weight; one mention would lose.

   Below 782 px — the width at which core stops laying columns side by side —
   the grid is not declared at all and everything falls into one column in
   source order, the panel last.
   -------------------------------------------------------------------------- */

@media (min-width: 782px) {
	.cab-archive-corps {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
		column-gap: 1.5rem;
		row-gap: 0;
		align-items: start;
	}

	.cab-archive-corps.cab-archive-corps > * {
		grid-column: 1;
		margin-block-start: 0;
	}

	.cab-archive-corps > .cab-voisines {
		grid-column: 2;
		grid-row: var(--cab-rangee, 1);
	}

	/*
	 * The one child that keeps a top margin. Levelling them all put the way
	 * back flat against the last card — nought pixels, measured, and Cyrille
	 * saw it before I did. It closes the column and has no row-mate to line up
	 * with, so nothing is gained by holding it to the grid's discipline.
	 */
	.cab-archive-corps.cab-archive-corps > .cab-retour {
		margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
	}
}

/* --------------------------------------------------------------------------
   The panel of neighbouring sections

   The event sheet's panel, worn by an archive: the same pale blue, the same
   hairline, the same heading. Cyrille asked for that panel and not for a
   second one that looks nearly like it, so nothing here repaints it — what
   follows is only what a list of sections needs that a list of facts did not.

   The Divi model set these headings at a flat 17 px with an inline green. Ours
   take the theme's own scale and the charter's blue, which is what every other
   link on the site does; the green stays for the hover, as everywhere.
   -------------------------------------------------------------------------- */

.cab-voisines__rubrique + .cab-voisines__rubrique {
	margin-block-start: 1.1rem;
	padding-block-start: 1.1rem;
	border-block-start: 1px solid color-mix(in srgb, var(--cab-encre) 12%, transparent);
}

.cab-voisines__nom {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-block: 0 0.45rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--regular);
	font-weight: 700;
	line-height: 1.3;
}

/*
 * The count is said quietly and never wraps away from its name: it is a
 * measure of the section, not a word of it.
 */
.cab-voisines__compte {
	flex: none;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: var(--wp--preset--color--gray);
	font-variant-numeric: tabular-nums;
}

.cab-voisines__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cab-voisines__item {
	margin-block-start: 0.3rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

/*
 * Le panneau ne dit rien de ses liens, et c'est exprès : les règles générales
 * font déjà les deux cas qu'il contient — le nom d'une rubrique est un `h3`,
 * donc vert puis bleu ; les titres listés dessous sont des liens ordinaires,
 * donc bleus puis verts. Une règle ici sur `.cab-voisines a` les peignait tous
 * de la même couleur et écrasait la distinction.
 */

/* --------------------------------------------------------------------------
   The way back up

   One quiet line closing a leaf archive. It is not a button: the reader has
   finished the list and is choosing where to go, not being pushed anywhere, so
   it takes the weight of a link and the colours every other link on the site
   has — blue at rest, green under the cursor, with the trait drawn from the
   start in transparent so its colour has something to travel to.

   The arrow shifts a little on hover, which is the only motion here and says
   « back » better than the word can on its own. It is held still for a reader
   who has asked for less movement.
   -------------------------------------------------------------------------- */

.cab-retour {
	margin-block: clamp(1.5rem, 3vw, 2.25rem) 0;
	font-size: var(--wp--preset--font-size--small);
}

/*
 * Rien sur les couleurs : la charte générale s'en charge, et la redire ici
 * l'immobiliserait comme elle a immobilisé le panneau de la fiche évènement.
 * Ne reste que la mise en ligne de la flèche et du mot.
 */
.cab-retour__lien {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45rem;
}

.cab-retour__fleche {
	transition: transform 0.3s ease;
}

.cab-retour__lien:hover .cab-retour__fleche,
.cab-retour__lien:focus-visible .cab-retour__fleche {
	transform: translateX(-0.2em);
}

@media (prefers-reduced-motion: reduce) {
	.cab-retour__fleche {
		transition: none;
	}

	.cab-retour__lien:hover .cab-retour__fleche,
	.cab-retour__lien:focus-visible .cab-retour__fleche {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   La charte des liens : ce que le theme.json ne sait pas dire

   Les couleurs sont déjà dans `theme.json`, et c'est leur place —
   `elements.link` dit le bleu au repos, le vert au survol et le souligné. Rien
   de tout cela n'est répété ici : l'identité du thème s'écrit là-bas.

   Deux choses lui échappent, et ce sont précisément les deux qui manquaient :

   1. `text-decoration-color`. Le schéma du `theme.json` ne connaît pas cette
      propriété. Sans elle, le souligné du repos se peint en bleu — c'est ce
      qu'on voyait sur le panneau de la fiche évènement, sur son corps et sur
      les liens dans le texte d'un article. Ces trois-là étaient simplement les
      endroits où aucune règle du thème ne passait devant celle de WordPress ;
      partout ailleurs — fil d'Ariane, pied de page, cartes, panneaux — une
      règle à nous le faisait déjà. Mesuré sur six zones avant d'écrire.

   2. `transition`. Le `theme.json` n'en dit rien du tout.

   D'où la manœuvre : le trait est dessiné dès le repos, en transparent, et
   seule sa couleur voyage. `text-decoration-line` ne s'anime pas — un trait
   qui apparaît d'un coup arriverait en retard sur la couleur qui
   l'accompagne — et rien ne bouge dans la mise en page au survol, puisque le
   trait était déjà là.

   Le sélecteur est celui de WordPress au caractère près : `:where()` ne pèse
   rien, donc les deux règles ont le même poids et c'est l'ordre qui tranche.
   Cette feuille est imprimée en dernier.

   Tout ce qui a sa propre règle garde la sienne : un bouton, une carte, un
   onglet du menu, et le forum entier, dont les sélecteurs portent un
   identifiant et pèsent donc plus lourd.
   -------------------------------------------------------------------------- */

a:where(:not(.wp-element-button)) {
	text-decoration-color: transparent;
	text-underline-offset: 0.18em;
	transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

a:where(:not(.wp-element-button)):hover,
a:where(:not(.wp-element-button)):focus-visible {
	text-decoration-color: currentColor;
}

/*
 * Un titre qui est un lien prend la charte à l'envers.
 *
 * Les titres du site sont verts — `elements.heading` le dit dans le
 * `theme.json`. Un lien posé dedans doit donc partir du vert et virer au bleu,
 * pas l'inverse : sans cette règle il naissait bleu, c'est-à-dire de la
 * couleur du survol des autres titres, et Cyrille l'a vu comme une inversion.
 *
 * Le poids fait le tri tout seul, et c'est voulu : `:is(h1…h6) a` ne pèse que
 * deux éléments, donc tout titre qui a déjà son traitement le garde — les
 * titres de cartes, blancs sur une photographie, ne bougent pas, ni au repos
 * ni au survol. Relevé avant d'écrire : sur six pages, les seuls titres-liens
 * sur fond normal sont les noms du panneau des rubriques voisines.
 */
:is(h1, h2, h3, h4, h5, h6) a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--meadow-green);
}

:is(h1, h2, h3, h4, h5, h6) a:where(:not(.wp-element-button)):hover,
:is(h1, h2, h3, h4, h5, h6) a:where(:not(.wp-element-button)):focus-visible {
	color: var(--wp--preset--color--brand-blue);
	text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   Les survols que le poids empêchait

   Le survol des liens vient du `theme.json`, et WordPress l'émet en
   `:root :where(a:where(…):hover)` — un poids de (0,1,0), c'est-à-dire presque
   rien. Toute règle du thème qui pose une couleur de lien au repos avec une
   classe ou plus le bat donc **aussi au survol**, et le lien reste figé.

   Relevé mécaniquement sur la feuille, commentaires retirés : sur trente-six
   règles qui posent une couleur de lien, dix-sept n'avaient pas de survol, et
   quatre concernaient le site — le reste appartient au forum, qui a sa propre
   palette. Ce sont ces quatre-là, nommées avec leur propre poids pour passer
   devant elles-mêmes.

   La couleur suit le fond, mesuré à chaque fois : le vert du charter sur les
   fonds clairs, le vert vif sur les cartes sombres, où le vert foncé se
   perdrait — 7,57:1 contre 1,9:1, mesuré sur l'encre du fond.
   -------------------------------------------------------------------------- */

.cab-bandeau__faits a:hover,
.cab-bandeau__faits a:focus-visible,
.cab-footer__liste .wp-block-post-title a:hover,
.cab-footer__liste .wp-block-post-title a:focus-visible {
	color: var(--wp--preset--color--meadow-green);
	text-decoration-color: currentColor;
}

.cab-events__fact a:hover,
.cab-events__fact a:focus-visible {
	color: var(--wp--preset--color--bright-green);
	text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   La bande des modèles, et le saut qui y mène

   Sur l'archive de la collection deux listes se suivent : les types, puis tous
   les modèles. Un titre seul ne les séparait pas assez, d'où la bande — pleine
   largeur et vert pâle.

   ⚠ LA COULEUR EXISTAIT DÉJÀ, et j'en ai fabriqué trois avant de m'en
   apercevoir. Le slug de la couleur du thème dit `cream`, mais son **nom**,
   celui que l'éditeur affiche, est « Vert pâle » depuis le début. J'ai lu le
   slug et pas le nom, ajouté une couleur, l'ai corrigée deux fois pour la
   rendre moins jaune — et la palette portait alors deux entrées au même nom,
   ce que Cyrille a vu tout de suite.

   La bande porte donc la couleur du thème, `cream` / « Vert pâle ». Leçon :
   lire le `name` d'une couleur avant de conclure qu'elle manque, le slug ne
   dit pas ce que l'utilisateur lit.

   ⚠ Le nœud papillon du pied de page se peint dans la couleur de la bande
   qu'il surplombe, sinon il découpe un coin blanc dans le vert. La règle
   `:has()` existait déjà pour la fiche évènement ; celle-ci suit le même
   principe — elle demande si la bande est sur la page, pas quelle page c'est.
   -------------------------------------------------------------------------- */

.cab-bande-liste {
	padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 4.5rem);
}

/* La bande touche le pied : le nœud papillon est la seule séparation voulue. */
.cab-bande-liste:last-child {
	margin-block-end: 0;
}

/*
 * Le nœud papillon du pied et les seize pixels de blanc sous la bande sont
 * traités plus haut, avec les deux bandes des évènements : elles portent
 * désormais la même couleur, une seule règle les couvre toutes les trois.
 * Le cœur de WordPress pose une marge haute sur tout enfant sauf le premier,
 * et le pied en héritait — une lame blanche s'ouvrait sous le vert, juste
 * au-dessus du nœud. Mesuré à seize pixels.
 */

/*
 * Le saut, en face du titre des types.
 *
 * La rangée est en `space-between` : le titre à gauche, le lien à droite, et
 * ils retombent l'un sous l'autre quand la ligne devient trop courte. Le lien
 * garde la charte des liens ordinaires — bleu, puis vert souligné — et seule
 * la flèche lui appartient.
 */
.cab-rubriques__titre {
	margin-block-end: 0;
}

.cab-rubriques > .cab-rubriques__titre,
.cab-rubriques > .cab-rubriques__saut {
	display: inline-block;
}

.cab-rubriques {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
}

.cab-rubriques__liste {
	flex-basis: 100%;
}

.cab-rubriques__saut {
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}

.cab-rubriques__fleche {
	display: inline-block;
	transition: transform 0.3s ease;
}

.cab-rubriques__saut:hover .cab-rubriques__fleche,
.cab-rubriques__saut:focus-visible .cab-rubriques__fleche {
	transform: translateY(0.2em);
}

@media (prefers-reduced-motion: reduce) {
	.cab-rubriques__fleche {
		transition: none;
	}

	.cab-rubriques__saut:hover .cab-rubriques__fleche,
	.cab-rubriques__saut:focus-visible .cab-rubriques__fleche {
		transform: none;
	}
}

/*
 * Où le saut s'arrête.
 *
 * L'ancre est sur le titre, et elle y est revenue après un détour. Posée sur
 * la bande, on atterrissait sur le bord vert — puis il fallait lire les 64 px
 * de rembourrage de la bande avant d'atteindre le titre, et le saut donnait
 * l'impression de s'arrêter trop tôt. Or ce qui était demandé, c'est de
 * descendre **sur** le titre.
 *
 * ⚠ La marge doit dégager la barre collante, et celle-ci descend plus bas pour
 * un administrateur — la barre de WordPress la pousse de 32 px. Mesuré : le
 * titre arrivait à 112 px du haut quand la barre s'arrêtait à 123, donc onze
 * pixels dessous. `--wp-admin--admin-bar--height` vaut 32px quand la barre est
 * là et n'existe pas sinon, d'où le repli à zéro : vingt et un pixels d'air
 * dans les deux cas.
 */
#la-liste {
	scroll-margin-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + 7rem);
}

/* --------------------------------------------------------------------------
   Les cartes de la collection : le texte sur la photo

   Pour resserrer les deux rangées, le nom et le compte descendent dans le
   cadre de la photographie, en bas à droite, au lieu de s'écrire dessous.
   Trois lignes de texte par carte disparaissent de la hauteur de chaque
   rangée.

   Le voile est celui des cartes à photo pleine de l'accueil, repris tel quel :
   il tient sa pleine force jusqu'à 82 % puis s'efface, si bien que les mots
   reposent toujours sur la partie sombre et jamais sur le dégradé. Il avait
   été mesuré là-bas — à 62 % le fondu commençait sous le titre et tombait à
   3,94:1 pour les 4,5 qu'il faut.

   La légende est posée DANS le cadre de la photo et non à côté : c'est ce
   cadre qui porte l'arrondi et coupe ce qui dépasse, donc le voile s'arrête
   exactement où les angles s'arrêtent.
   -------------------------------------------------------------------------- */

.cab-rubriques--sur-photo .cab-rubrique__photo {
	position: relative;
}

.cab-rubriques--sur-photo .cab-rubrique__legende {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.55rem;
	/*
	 * Le voile monte haut et s'éteint lentement. Celui des cartes de l'accueil
	 * passait de 0,68 à rien en dix-huit pour cent de sa hauteur : sur une
	 * carte de rubrique, plus large et plus basse, cette marche se voyait comme
	 * un trait en travers de la photo. Il s'éteint ici en quatre temps sur
	 * soixante pour cent, et les mots restent dans le tiers du bas, où il vaut
	 * encore 0,72.
	 */
	padding: 5.5rem 1.1rem 0.95rem;
	text-align: left;
	background: linear-gradient(
		to top,
		rgba(11, 20, 26, 0.75) 0%,
		rgba(11, 20, 26, 0.72) 38%,
		rgba(11, 20, 26, 0.42) 62%,
		rgba(11, 20, 26, 0.16) 82%,
		rgba(11, 20, 26, 0) 100%
	);
}

/*
 * ⚠ `--cab-sur-fond-sombre` et non le blanc de la palette. Celui-là est la
 * SURFACE du site : il bascule au sombre et vaut alors #16202a. Le nom devenait
 * donc noir sur la photographie dès que la page passait à la nuit — la photo,
 * elle, ne bascule pas. Le thème avait déjà nommé les deux blancs et expliqué
 * la différence ; je n'ai pas lu, Cyrille l'a vu.
 *
 * Le compte prend l'encre douce des photos, pour la même raison.
 */
.cab-rubriques--sur-photo .cab-rubrique__nom {
	color: var(--cab-sur-fond-sombre);
	text-decoration-color: transparent;
}

.cab-rubriques--sur-photo .cab-rubrique__lien:hover .cab-rubrique__nom,
.cab-rubriques--sur-photo .cab-rubrique__lien:focus-visible .cab-rubrique__nom {
	color: var(--cab-sur-fond-sombre);
	text-decoration-color: currentColor;
}

.cab-rubriques--sur-photo .cab-rubrique__compte {
	margin: 0;
	color: var(--cab-texte-photo-doux);
}

/* Le voile est déjà la séparation : plus rien à espacer sous la photo. */
.cab-rubriques--sur-photo .cab-rubrique {
	gap: 0;
}

/* --------------------------------------------------------------------------
   Les galeries : deux formes, offertes dans la barre latérale
   -------------------------------------------------------------------------- */

/*
 * MAÇONNERIE. Le cœur pose la galerie en flex et coupe les images à hauteur
 * égale ; les articles, écrits sous Divi avec une galerie en maçonnerie, les
 * laissaient respirer. `column-count` rend cette liberté sans une ligne de
 * JavaScript : chaque image garde ses proportions, la colonne prend ce qu'on
 * lui donne, et l'impression comme les petits écrans suivent d'eux-mêmes.
 *
 * LE SÉLECTEUR VISE L'ABSENCE, pas la présence. Un style de bloc marqué par
 * défaut n'écrit aucune classe dans le balisage : c'est « Grille » qui en pose
 * une. La maçonnerie s'applique donc à toute galerie qui ne l'a pas — ce qui
 * rattrape du même coup les 91 galeries déjà converties, qui n'en portent
 * aucune.
 *
 * ET IL PORTE `:not(#individual-image)`, qui ne désigne rien. C'est le procédé
 * du cœur lui-même : l'identifiant fantôme donne à sa règle un poids
 * d'identifiant, que rien de moins ne peut reprendre. Mesuré : sans lui, la
 * figure restait en flex et l'image montait à 1500 px de haut dans la colonne.
 */
.wp-block-gallery.has-nested-images:not(.is-style-cab-grid):not(.is-style-cab-rows) {
	display: block;
	column-count: 2;
	column-gap: var(--wp--style--block-gap, 1rem);
}

.wp-block-gallery.has-nested-images:not(.is-style-cab-grid):not(.is-style-cab-rows) figure.wp-block-image:not(#individual-image) {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 0 var(--wp--style--block-gap, 1rem);
	/* Une image ne doit jamais être coupée en deux par un saut de colonne. */
	break-inside: avoid;
	page-break-inside: avoid;
}

.wp-block-gallery.has-nested-images:not(.is-style-cab-grid):not(.is-style-cab-rows) figure.wp-block-image:not(#individual-image) img {
	display: block;
	width: 100%;
	height: auto;
	/* Le recadrage du cœur n'a plus lieu d'être : c'est tout le propos. */
	flex: none;
	object-fit: initial;
}

/*
 * PAS DE `aspect-ratio` ICI, et c'est important. Les attributs `width` et
 * `height` du balisage donnent déjà le rapport à l'image, par la feuille du
 * navigateur ; écrire `aspect-ratio: auto` l'effaçait. Or le cœur pose
 * `contain-intrinsic-size: 3000px 1500px` sur les images à `sizes="auto"`,
 * celles qui se chargent en différé : sans rapport pour résoudre la hauteur,
 * chacune réservait ces 1500 px et la colonne devenait une tour. Mesuré :
 * seule la première image de la page, chargée d'emblée, sortait juste.
 */

/* Trois colonnes dès qu'il y a la place, une seule quand il n'y en a plus. */
@media (min-width: 782px) {
	.wp-block-gallery.has-nested-images:not(.is-style-cab-grid):not(.is-style-cab-rows) {
		column-count: 3;
	}
}

@media (max-width: 480px) {
	.wp-block-gallery.has-nested-images:not(.is-style-cab-grid):not(.is-style-cab-rows) {
		column-count: 1;
	}
}

/*
 * LA VIGNETTE DÉCIDE DE LA TAILLE DU TEXTE, PAS LA FENÊTRE. Mesuré sur la
 * page d'exemple : à 768 px de fenêtre la vignette fait 352 px de large, à
 * 1600 px elle en fait 167, et 116 px dans une page à barre latérale — la
 * maçonnerie compte ses colonnes, pas ses pixels d'écran. Une requête de
 * média dirait donc exactement le contraire de ce qu'il faut. C'est la
 * figure qui devient le repère, et le texte se mesure en `cqi` : 1 % de sa
 * largeur à elle.
 *
 * Chaque taille est écrite deux fois : la valeur d'avant, puis la même
 * bornée. Un navigateur qui ignore les conteneurs jette la seconde et garde
 * la première, au lieu de perdre la déclaration entière.
 */
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image),
figure.wp-block-image.cab-survol:not(#individual-image) {
	container: cab-vignette / inline-size;
	/* Le voile se pose en absolu contre elle. */
	position: relative;
}

/*
 * LA LÉGENDE PARAÎT AU SURVOL, sur l'image, telle que le modèle la pose —
 * `divi-construction/style.css`, « position and style the title and caption
 * text container » :
 *
 *   .pa-gallery-text { position: absolute; inset: 0; padding: 20px;
 *                      display: flex; flex-direction: column;
 *                      justify-content: center;
 *                      background: rgba(34,34,34,0.8);
 *                      opacity: 0; transition: all .5s ease-in-out; }
 *   .et_pb_gallery_item:hover .pa-gallery-text { opacity: 1; }
 *
 * Le gris du modèle devient l'encre du thème, à la même densité.
 *
 * CELA REMPLACE LES DEUX COMPORTEMENTS DU CŒUR à la fois : la légende posée en
 * bas sur un voile, et celle qu'il fait passer SOUS l'image dès qu'elle porte
 * un cadre (`.has-custom-border figcaption { position: relative }`). C'est ce
 * qui donnait, dans une même galerie, des légendes tantôt dessus tantôt
 * dessous selon que l'image était encadrée ou non.
 *
 * Le `:not(#individual-image)` reprend le poids d'identifiant que le cœur se
 * donne à lui-même ; sans lui, ses règles gagnent.
 */
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) figcaption,
figure.wp-block-image.cab-survol:not(#individual-image) figcaption {
	display: flex;
	position: absolute;
	/*
	 * Le voile épouse la photographie : il rentre de l'épaisseur du filet et
	 * s'arrondit du même rayon, sinon il carre les angles arrondis. L'éditeur
	 * écrit ce rayon en style en ligne sur l'image elle-même, hors d'atteinte
	 * d'une feuille de style ; `assets/js/lightbox-caption.js` le relève et le
	 * pose ici. Sans lui, le voile est simplement carré.
	 */
	inset: var(--cab-image-filet, 0px);
	border-radius: calc(var(--cab-image-rayon, 0px) - var(--cab-image-filet, 0px));
	box-sizing: border-box;
	max-height: none;
	margin: 0;
	padding: 20px;
	padding: clamp(0.5rem, 6cqi, 20px);
	flex-direction: column;
	justify-content: center;
	background: rgba(20, 35, 43, 0.8);
	color: var(--cab-sur-fond-sombre, #fff);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-size: clamp(0.5625rem, 0.4rem + 2.1cqi, var(--wp--preset--font-size--small, 0.875rem));
	line-height: 1.45;
	text-align: center;
	text-shadow: none;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	/*
	 * Le voile couvre toute l'image, donc il couvrait aussi le bouton qui
	 * l'agrandit : le clic ne passait plus. Il ne prend aucun clic — le survol,
	 * lui, est écouté sur la figure, pas sur lui.
	 */
	pointer-events: none;
}

/*
 * LE FLOU DU CŒUR N'A PLUS D'OBJET. Dès qu'une image de galerie porte une
 * légende, le cœur pose sous elle une bande floue de 3 em —
 * `figure.wp-block-image:has(figcaption)::before { backdrop-filter: blur(3px) }`
 * — pour que son texte blanc se détache. Notre légende ne se montre qu'au
 * survol : la bande, elle, restait au repos et bavait sur le bas de chaque
 * image. Mesurée : 48 px de haut, un flou de 3 px sous un dégradé.
 */
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image)::before {
	content: none;
}

/*
 * « TITRE SEUL » QUAND LA LÉGENDE EST DÉJÀ ÉCRITE. Sur le site, PHP a ramené
 * le voile à son en-tête avant d'imprimer la page. Dans l'éditeur, la légende
 * est un champ que l'on modifie : la couper serait couper le contenu. Elle est
 * donc laissée en place et rendue à zéro — le texte nu hérite de la taille du
 * voile, l'en-tête a la sienne et reste seul visible.
 *
 * Aucune conséquence sur le site, où il ne reste de toute façon que l'en-tête.
 */
.wp-block-gallery.cab-survol--title.has-nested-images figure.wp-block-image:not(#individual-image) figcaption,
figure.wp-block-image.cab-survol.cab-survol--title:not(#individual-image) figcaption {
	font-size: 0;
}

/*
 * Et quand cette légende n'a pas d'en-tête du tout — une phrase écrite pour la
 * page, ou remplie par l'IA — le site lui substitue le titre de la
 * médiathèque. Dans l'éditeur, `assets/js/editor-hover-text.js` pose ce titre
 * à côté ; la vraie légende s'efface pour ne pas doubler le voile.
 */
.wp-block-gallery.cab-survol--title.has-nested-images figure.wp-block-image:not(#individual-image) figcaption:not(.cab-legende--apercu):not(:has(strong)),
figure.wp-block-image.cab-survol.cab-survol--title:not(#individual-image) figcaption:not(.cab-legende--apercu):not(:has(strong)) {
	display: none;
}
/*
 * `:focus-within` autant que `:hover` : au clavier, la loupe de l'image prend
 * le focus et la légende doit se montrer là aussi.
 */
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):hover figcaption,
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):focus-within figcaption,
figure.wp-block-image.cab-survol:not(#individual-image):hover figcaption,
figure.wp-block-image.cab-survol:not(#individual-image):focus-within figcaption {
	opacity: 1;
}

/* Le titre du média, dans le vert que le thème réserve au texte sur photo. */
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption strong,
figure.wp-block-image.cab-survol figcaption strong {
	display: block;
	margin-bottom: 0.35em;
	color: var(--cab-meta-photo);
	font-size: 1rem;
	font-size: clamp(0.625rem, 0.44rem + 2.5cqi, 1rem);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/*
 * SANS SURVOL, PAS DE VOILE. Sur un écran tactile le survol n'existe pas : la
 * légende y resterait invisible pour toujours. Le modèle la masquait
 * carrément sous 767 px ; ici elle repasse sous l'image, où elle se lit — le
 * texte vaut mieux perdu de sa mise en scène que perdu tout court.
 */
@media (hover: none) {
	.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) figcaption,
	figure.wp-block-image.cab-survol:not(#individual-image) figcaption {
		position: static;
		padding: 0.4rem 0 0;
		background: none;
		color: inherit;
		text-align: left;
		opacity: 1;
	}

	.wp-block-gallery.has-nested-images figure.wp-block-image figcaption strong,
	figure.wp-block-image.cab-survol figcaption strong {
		color: inherit;
	}
}

/* --------------------------------------------------------------------------
   La grille dépliante

   Une rangée ouverte, les autres sur demande. Ce que la feuille de style fait
   ici est volontairement petit : cacher une figure, et donner une descente à
   celles qui arrivent. Le repli lui-même est l'affaire de
   `assets/js/gallery-rows.js` — sans lui la galerie est la grille, entière et
   sans bouton, et tout ce qui suit reste vrai.

   La descente est celle de l'agenda, `cab-descente`, aux mêmes durée et
   courbe : les deux gestes font la même chose et doivent se ressembler.
   -------------------------------------------------------------------------- */

.wp-block-gallery.is-style-cab-rows figure.wp-block-image.cab-galerie__cachee {
	display: none;
}

/*
 * DANS L'ÉDITEUR, LE BOUTON SEUL. La galerie y reste entière — replier trente
 * images sur trente-six rendrait impossible de les ranger, et l'éditeur est
 * l'endroit où on les range. Le bouton est donc dessiné pour ce qu'il montre,
 * pas pour ce qu'il fait : rien à déplier, donc rien à presser.
 */
.cab-galerie__repli--apercu .cab-galerie__repli-bouton {
	cursor: default;
	pointer-events: none;
}

/*
 * Chaque image de la rangée attend un peu plus que la précédente : la rangée
 * se lit comme arrivant plutôt que comme s'allumant. Le rang est posé par le
 * script, et le bloc « mouvement réduit » du haut de cette feuille épingle
 * toute animation à un centième de milliseconde.
 */
.wp-block-gallery.is-style-cab-rows figure.wp-block-image.cab-galerie__arrive {
	animation: cab-descente 0.45s cubic-bezier(0.22, 0.68, 0.28, 1) both;
	animation-delay: calc(var(--cab-rang, 0) * 70ms);
}

/*
 * Le bloc du haut épingle la durée mais ne dit rien du délai : une image
 * resterait invisible le temps de son rang. Il tombe avec le reste.
 */
@media (prefers-reduced-motion: reduce) {
	.wp-block-gallery.is-style-cab-rows figure.wp-block-image.cab-galerie__arrive {
		animation-delay: 0s;
	}
}
/*
 * LA BANDE DU MODÈLE RÉDUIT. La fiche a deux moitiés — la machine qui a
 * roulé, et celle qui est sur le réseau — et rien ne le disait : les deux
 * titres se suivaient sur le même fond blanc, à la même hauteur. La seconde
 * moitié passe donc sur le vert pâle de la palette, d'un bord à l'autre, comme
 * l'archive de la collection sépare déjà ses deux listes.
 *
 * La bande doit être FILLE DIRECTE de `main` pour atteindre les bords : dans
 * un groupe intermédiaire, `alignfull` s'arrête à ce groupe. C'est écrit ici
 * parce que le gabarit ne peut pas le dire lui-même.
 */
.cab-fiche__bande {
	margin-block-start: var(--wp--preset--spacing--70);
	padding-block: var(--wp--preset--spacing--60);
	/*
	 * LA COULEUR COMMENCE AU-DESSUS DE LA BARRE. Quand le sommaire mène ici,
	 * le titre se pose sous la gélule : si la bande ne commençait que 48 px
	 * plus haut, sa limite tombait entre la gélule et le titre, et la barre
	 * flottait sur le blanc de la partie qu'on venait de quitter.
	 *
	 * Le haut de la bande a donc exactement la place que la barre prend sous
	 * l'en-tête, plus l'air de l'ancre : la limite arrive alors au bas de
	 * l'en-tête, et la gélule est sur le vert. La valeur est mesurée par le
	 * script ; sans sommaire dans la page, l'espacement ordinaire suffit.
	 */
	padding-block-start: max(
		var(--wp--preset--spacing--60),
		calc(var(--cab-sommaire-place, 0px) + 0.75rem)
	);
}

/*
 * Et de l'autre côté, pour la même raison : ce qui suit la bande a besoin du
 * même dégagement, sinon c'est la frange verte qui passe sous la gélule.
 */
.cab-fiche__apres-bande {
	margin-block-start: max(
		var(--wp--preset--spacing--60),
		calc(var(--cab-sommaire-place, 0px) + 0.75rem)
	);
}
/*
 * LE TITRE D'UNE PARTIE DE LA FICHE, hors carte : « La machine réelle » ouvre
 * le texte, le panneau de mesures et les photographies, qui ne sont pas dans
 * une carte commune. Il porte donc lui-même le décor que les cartes ont —
 * le filet dessous — pour qu'il se lise comme leurs titres.
 */
.cab-fiche__section-titre,
.cab-connexion__section-titre {
	/*
	 * Le vert prairie des titres du site — dit ici plutôt que laissé à l'héritage,
	 * parce que la seconde de ces deux classes vient d'une extension qui peint ses
	 * intertitres de son propre bleu : les deux titres se seraient répondus de deux
	 * couleurs pour un même rôle.
	 */
	color: var(--wp--preset--color--meadow-green);
	/*
	 * DEUX REM SOUS LE FILET, et la boîte qui suit n'en ajoute pas : l'écart se
	 * décide ici, en un seul endroit, plutôt que de dépendre de la marge que
	 * chaque bloc apporte. « La machine réelle » ouvrait à 24 px — la marge de
	 * la bande des chiffres, qui avalait celle du titre — et « Le modèle
	 * réduit » à 10. Les deux titres portent le même décor : ils respirent
	 * pareil.
	 */
	margin-block: 0 2rem;
	padding-bottom: 0.35rem;
	border-bottom: 2px solid currentColor;
	font-size: var(--wp--preset--font-size--large);
	/*
	 * Ce titre est une destination du sommaire : il porte sa propre ancre.
	 * Il s'arrête donc où les cartes du bloc s'arrêtent — juste sous la barre
	 * collante, dont la hauteur est mesurée par le script — faute de quoi on
	 * le demande et il se range derrière elle.
	 */
	scroll-margin-top: calc(
		var(--cab-header-bottom, 127px) + var(--cab-sommaire-place, 0px) + 0.75rem
		- var(--cab-sommaire-bandeau, 0px)
	);
}

/* --------------------------------------------------------------------------
   Le panneau d'un article

   Deux listes sous le panneau bleu pâle de la fiche d'événement : où l'on est,
   et ce qu'on peut lire ensuite. Rien de plus qu'une liste de liens — c'est
   une colonne de 360 px, pas une page.
   -------------------------------------------------------------------------- */

.cab-aside__liste {
	margin: 0 0 var(--wp--preset--spacing--40, 1.5rem);
	padding: 0;
	list-style: none;
}

.cab-aside__liste:last-child {
	margin-block-end: 0;
}

/*
 * Un filet entre les entrées plutôt que des puces : la liste se lit comme un
 * sommaire, et le dernier n'en porte pas, pour ne pas doubler le bord du
 * panneau.
 */
.cab-aside__item {
	margin: 0;
	padding-block: 0.4rem;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--brand-blue, #06668c) 14%, transparent);
	line-height: 1.35;
}

.cab-aside__item:last-child {
	border-block-end: 0;
	padding-block-end: 0;
}

.cab-aside__item:first-child {
	padding-block-start: 0;
}

/*
 * LA RUBRIQUE QU'ON LIT NE SE CLIQUE PAS COMME LES AUTRES. Elle reste un lien
 * — la page de la rubrique existe et vaut le détour — mais elle prend le gras
 * et un repère en marge : on est là.
 *
 * ELLE GARDE LE BLEU DES AUTRES, et c'est mesuré. L'encre du texte courant la
 * faisait passer pour désactivée ; le vert prairie, qui marque l'actif
 * ailleurs sur le site, ne donne que 4,43 contre 1 sur le bleu pâle du
 * panneau, sous les 4,5 qu'un texte de 18 px demande. Le gras et le trait
 * suffisent à dire « ici » sans toucher à la couleur.
 */
.cab-aside__item--ici > a {
	position: relative;
	font-weight: 700;
	text-decoration: none;
}

.cab-aside__item--ici > a::before {
	content: "";
	position: absolute;
	inset-inline-start: -0.75rem;
	inset-block: 0.15em;
	width: 3px;
	border-radius: 2px;
	background: var(--wp--preset--color--meadow-green, #557a2c);
}

/* Le deuxième titre du panneau respire, le premier ouvre. */
.cab-aside .cab-fiche__titre + .cab-aside__liste {
	margin-block-start: 0.4rem;
}

.cab-aside__liste + .cab-fiche__titre {
	margin-block-start: var(--wp--preset--spacing--40, 1.5rem);
}

/*
 * DE L'AIR ENTRE LE TEXTE ET LE PANNEAU. Le cœur sépare deux colonnes de
 * seize pixels — l'écart qu'il met entre deux blocs empilés — et ce n'est pas
 * une gouttière : le panneau touchait presque la dernière lettre de chaque
 * ligne. Trois fois plus, et les deux colonnes se lisent comme deux choses.
 *
 * Sur `cab-colonnes`, donc partout où le thème pose un texte à côté d'un
 * panneau : l'article, la fiche de matériel roulant, et les deux compositions
 * réutilisables. Le défaut venait du réglage par défaut du cœur, il n'y avait
 * pas de raison de le corriger à un seul endroit.
 */
/*
 * LA CLASSE EST ÉCRITE DEUX FOIS À DESSEIN. Les styles globaux posent l'écart
 * des colonnes avec un sélecteur qui pèse autant que celui-ci ; sur le site la
 * feuille du thème passe après eux et gagne, dans l'éditeur ils sont injectés
 * après elle et gagnaient à leur tour. Mesuré : 48 px sur le site, 16 dans le
 * canevas, pour la même page. Répéter la classe tranche dans les deux sens.
 */
.cab-colonnes.cab-colonnes {
	gap: var(--wp--preset--spacing--60, 48px);
}

/*
 * SOUS LE TEXTE, PAS À CÔTÉ, QUAND LA PLACE MANQUE. Les colonnes du cœur
 * s'empilent d'elles-mêmes sous 782 px ; le panneau reprend alors la largeur
 * entière et se contente d'un peu d'air au-dessus.
 */
@media (max-width: 781px) {
	.cab-article__colonnes .cab-aside {
		margin-block-start: var(--wp--preset--spacing--50, 2rem);
	}
}
/* --------------------------------------------------------------------------
   Le site du terme, sous sa description

   Une marque et une compagnie ferroviaire existent hors d'ici : leur archive
   dit ce qu'on en sait et montre ce qu'on en possède, mais la vraie se visite
   ailleurs. Le lien porte l'hôte seul — « limamodel.it » se lit, l'adresse
   entière se déchiffre — précédé d'un globe qui dit qu'on sort du site.
   -------------------------------------------------------------------------- */

.cab-term-lien {
	margin-block: 0.9rem 0;
}

.cab-term-lien__lien {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
}

.cab-term-lien__icone {
	flex: none;
	width: 1.05em;
	height: 1.05em;
	fill: currentColor;
}
/* --------------------------------------------------------------------------
   La bande de sortie, en pied de fiche et d'article

   Deux blocs s'en servent — « Retrouver nos … » sur une fiche de matériel
   roulant, « Vous serez intéressé par » sous les commentaires d'un article —
   et ils portent les mêmes classes à dessein : c'est le même objet, une
   rangée de cartes sur le bleu de la marque, au bout de la lecture.
   -------------------------------------------------------------------------- */

.cab-voisines__titre {
	margin-block: 0 var(--wp--preset--spacing--50, 2rem);
	color: var(--cab-sur-fond-sombre);
	font-size: var(--wp--preset--font-size--large, 1.75rem);
	text-align: center;
	text-wrap: balance;
}

/*
 * Le titre mène à l'archive : il se lit comme un titre, pas comme un lien, et
 * se souligne au survol pour dire qu'il en est un.
 */
.cab-voisines__titre a {
	color: inherit;
	text-decoration: none;
}

/*
 * AU SURVOL, UN VERT QUI SE VOIT SUR LE BLEU. La charte du site fait passer un
 * titre-lien au bleu de la marque au survol — et ce bleu est exactement celui
 * de cette bande : le titre disparaissait purement et simplement.
 *
 * Le vert vif du thème, celui que le pied de page emploie déjà sur un fond
 * sombre, éclairci d'un tiers. Mesuré sur le fond de la bande : 3,93 contre 1,
 * là où le seuil d'un texte de 26 px est de 3 — et le vert vif brut n'y était
 * qu'à 3,00 tout juste. Le repli en dur sert les navigateurs sans `color-mix`.
 */
.cab-voisines__titre a:hover,
.cab-voisines__titre a:focus-visible {
	color: rgb(196, 212, 90);
	color: color-mix(in srgb, var(--wp--preset--color--bright-green, #a4bd01) 65%, #fff);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/*
 * TROIS COLONNES, ET TROIS SEULEMENT.
 *
 * La bande porte trois cartes au plus, jamais une grille ouverte : le nombre
 * de colonnes est donc écrit, pas deviné. Un `minmax()` posait deux problèmes
 * à la fois — sur une tablette la troisième carte tombait seule à la ligne,
 * et sur un très large écran `auto-fill` ouvrait des colonnes vides où les
 * cartes maigrissaient sans raison. Trois parts égales font les deux cas.
 *
 * Une bande de deux cartes (la fiche d'un modèle qui n'a qu'une voisine) garde
 * alors la largeur de colonne des autres et laisse la troisième place vide :
 * c'est ce que faisait déjà `auto-fill`, et deux cartes étirées sur toute la
 * largeur se liraient comme une bande d'un autre genre.
 */
/*
 * L'ENFANT DIRECT, ET PAS N'IMPORTE QUELLE LISTE DE CE NOM.
 *
 * Deux blocs écrivent une `.cab-voisines__liste` : celui-ci, où elle est le
 * contenu même de la bande, et le panneau « Les autres rubriques » de la barre
 * latérale, où chaque rubrique a la sienne. Les deux règles portaient le même
 * sélecteur, à poids égal ; celle-ci, écrite plus bas, gagnait — et le panneau
 * se retrouvait en trois colonnes de 90 px dans 219 px de large, un mot par
 * ligne.
 *
 * Le `>` dit la vraie différence : ici la liste est l'enfant direct du bloc,
 * là-bas elle est rangée sous le nom d'une rubrique.
 */
.cab-voisines > .cab-voisines__liste {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--40, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cab-voisines__case {
	display: flex;
	margin: 0;
}

.cab-voisines__case > .cab-card {
	width: 100%;
}

/*
 * Le titre d'une carte est un `h3` posé à la main, là où la grille des archives
 * le reçoit d'un bloc du cœur : il lui manque donc la mise à zéro des marges
 * que le bloc du cœur apporte, et rien d'autre.
 *
 * IL NE DIT PAS SA COULEUR. Le titre est posé sur la photo, sur le voile
 * sombre, et `.cab-card__photo .wp-block-post-title` le peint déjà en clair —
 * comme sur toutes les grilles du site. Une couleur écrite ici pesait autant
 * (0,2,0) et venait plus bas dans la feuille : elle gagnait, et repeignait en
 * bleu de marque un titre posé sur du noir. Même remarque pour le souligné :
 * la carte le dessine transparent au repos pour pouvoir le faire paraître au
 * survol, et un `text-decoration: none` écrit ici supprimait l'animation.
 */
.cab-voisines .wp-block-post-title {
	margin: 0;
	text-wrap: balance;
}

.cab-voisines .cab-meta {
	margin-block: 0.4rem 0;
}

/*
 * UNE CARTE SANS RUBRIQUE S'ARRÊTE À SA PHOTOGRAPHIE.
 *
 * Quand les trois cartes viennent du même endroit, la ligne qui le nommait est
 * retirée — elle ne distinguait plus rien. Il resterait sinon dix-neuf pixels
 * de blanc sous l'image, un bandeau vide dont personne ne comprendrait la
 * présence. La carte se referme donc sur son image, et les quatre coins de
 * celle-ci s'arrondissent au lieu des deux du haut.
 */
.cab-voisines .cab-card:not(:has(.cab-meta)) {
	padding-bottom: 0;
}

.cab-voisines .cab-card:not(:has(.cab-meta)) .cab-card__photo {
	margin-bottom: 0;
	border-radius: 13px;
}

/*
 * Sous 44rem, on empile.
 *
 * C'est la largeur où une colonne descend sous 13rem — une carte trop étroite
 * pour son titre. Deux colonnes ne sont pas une issue : trois cartes dans deux
 * colonnes laissent toujours la dernière seule sur sa ligne, ce qui déséquilibre
 * la bande bien plus que trois cartes un peu plus étroites.
 */
@media (max-width: 44rem) {
	.cab-voisines > .cab-voisines__liste {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   « Retrouver nos … » — la sortie d'une fiche

   Une bande bleue au pied de la page, sous les commentaires, portant les autres
   modèles de la même catégorie. Le bloc est dans l'extension, qui connaît les
   catégories ; ici ne sont écrits que la bande et sa jonction avec le pied de
   page.

   LA SÉPARATION AVEC LE PIED DE PAGE. Le pied s'ouvre sur un nœud papillon —
   `cab-bowtie` — qui est peint dans la couleur de CE QUI LE PRÉCÈDE, et cette
   couleur est blanche par défaut. Une bande bleue devant lui laissait donc un
   nœud blanc dessiné sur du bleu : une découpe qui ne découpait rien. La page
   qui porte la bande le dit au pied, qui prend la bonne couleur.
   -------------------------------------------------------------------------- */

/*
 * SON BLEU NE BASCULE PAS, comme celui de la bande des nouvelles et pour la
 * même raison : `brand-blue` est ici un FOND, et la palette sombre le retourne
 * en bleu ciel parce qu'il sert ailleurs d'encre de lien. Mesuré avant
 * correction : `#74bfe2` sur une page à `#16202a` — le seul bloc clair d'une
 * page sombre, au bas de chaque article et de chaque fiche.
 *
 * Le fond est donc peint ici et non par un réglage du gabarit : l'attribut
 * `backgroundColor` d'un bloc pose une classe que le cœur écrit avec
 * `!important`, et qui suit la palette. L'encre blanche du titre est figée avec
 * lui, sans quoi elle virerait au bleu nuit sur un fond resté bleu.
 */
.cab-voisines__bande {
	padding-block: var(--wp--preset--spacing--70);
	background-color: var(--cab-fond-bande);
}

body:has(.cab-voisines__bande) .cab-footer__haut {
	--cab-bowtie: var(--cab-fond-bande);
}

/*
 * Et rien entre les deux : `wp-site-blocks` met seize pixels d'écart entre ses
 * enfants, et ce ruban blanc passait entre la bande et le nœud, qui doit mordre
 * dessus pour découper quoi que ce soit.
 */
body:has(.cab-voisines__bande) .wp-site-blocks > footer {
	margin-block-start: 0;
}
/* Ce qui vient juste après le filet ne rajoute pas sa propre marge. */
.cab-fiche__section-titre + *,
.cab-connexion__section-titre + * {
	margin-block-start: 0;
}
/* --------------------------------------------------------------------------
   Les caractéristiques dans le panneau, contre le texte

   Le panneau de la fiche d'événement — `cab-fiche__panneau`, bleu pâle et
   cerclé — sert ici de contenant aux caractéristiques de la machine. C'est
   donc LUI la carte : le groupe qu'il reçoit dépose la sienne, sinon la fiche
   montre une carte blanche dans une carte bleue.

   Le titre y prend la voix du panneau, celle de « Bon à savoir », plutôt que
   le grand corps souligné qu'il a en pleine largeur.
   -------------------------------------------------------------------------- */

.cab-fiche__panneau .cab-spec__group {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.cab-fiche__panneau .cab-spec__title {
	margin-block: 0 1.1rem;
	padding-bottom: 0;
	border-bottom: 0;
	color: var(--wp--preset--color--brand-blue);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
}

/*
 * DANS LE PANNEAU, LES LIGNES DE LA FICHE D'ÉVÉNEMENT — pas les tuiles. Le
 * panneau est déjà une surface : bleu pâle, arrondi, cerclé. Y poser des cases
 * blanches à filet bleu, c'est un cadre dans un cadre, et douze petits blocs
 * blancs empilés dans une colonne de 312 px font une échelle, pas une liste.
 *
 * La fiche d'événement a résolu ça depuis longtemps, deux colonnes plus loin :
 * un filet d'un pixel entre les lignes, l'étiquette en petites capitales à
 * 70 %, la valeur en texte courant. Ce sont ses mesures qui sont reprises ici,
 * `.cab-fiche__ligne` et `.cab-fiche__quoi`, et pas d'autres.
 *
 * Les tuiles restent ce qu'elles sont en pleine largeur, où il y a la place de
 * les aligner et où elles rythment ce qui serait sinon un tableau.
 */
.cab-fiche__panneau .cab-spec__list {
	display: block;
	gap: 0;
	border: 0;
	border-radius: 0;
	background: none;
	overflow: visible;
}

.cab-fiche__panneau .cab-spec__row {
	display: block;
	padding: 0.6rem 0;
	border-block-start: 1px solid color-mix(in srgb, var(--cab-encre) 12%, transparent);
	background: none;
	line-height: 1.4;
	text-align: start;
}

.cab-fiche__panneau .cab-spec__row:first-child {
	padding-block-start: 0;
	border-block-start: 0;
}

.cab-fiche__panneau .cab-spec__row dt {
	color: var(--cab-encre);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	opacity: 0.7;
	text-transform: uppercase;
}

/* La valeur redevient du texte : ni bleue, ni en gras, ni au corps des chiffres. */
.cab-fiche__panneau .cab-spec__row dd,
.cab-fiche__panneau .cab-spec__row--mot dd {
	color: inherit;
	font-size: inherit;
	font-weight: 400;
	line-height: 1.4;
}

.cab-fiche__panneau .cab-spec__unit {
	display: inline;
	font-size: inherit;
}

.cab-fiche__panneau .cab-spec__blocs {
	margin-block-start: 0;
}

.cab-fiche__panneau .cab-spec__bloc {
	padding: 0.6rem 0;
	border-block-start: 1px solid color-mix(in srgb, var(--cab-encre) 12%, transparent);
}

.cab-fiche__panneau .cab-spec__bloc dt {
	color: var(--cab-encre);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	opacity: 0.7;
}

/*
 * LES PARTIES DU PANNEAU PARLENT DE LA MÊME VOIX QUE LUI. « Dimensions »,
 * « Motorisation » sont des titres, pas des étiquettes — et en petites
 * capitales serrées ils se confondaient avec les étiquettes des lignes juste
 * au-dessus d'eux, qui portent exactement ce dessin. Ils prennent donc le
 * dessin de « Ses caractéristiques » : la police des titres, le bleu de la
 * marque, sans graisse.
 *
 * Un cran plus petit tout de même : le titre du panneau reste celui qui ouvre,
 * et ce sont ses parties.
 */
.cab-fiche__panneau .cab-spec__subtitle {
	margin-block: 1.4rem 0.5rem;
	color: var(--wp--preset--color--brand-blue);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/*
 * Une partie qui suit un filet de ligne n'a pas besoin des deux : le titre
 * sépare déjà. La première ligne de la partie reprend donc son filet, que la
 * règle du haut lui enlevait en tant que première du panneau.
 */
.cab-fiche__panneau .cab-spec__subtitle + .cab-spec__list .cab-spec__row:first-child {
	padding-block-start: 0;
	border-block-start: 0;
}

/*
 * LE PANNEAU NE SE COLLE PAS. On peut vouloir qu'il suive la lecture, puisque
 * le texte fait plusieurs milliers de pixels et lui quelques centaines ; mais
 * il en fait 688 sur la DB403 et davantage sur une vapeur, qui a une
 * chaudière. Collé, il se coupait à la hauteur de la fenêtre et se donnait son
 * propre ascenseur — un panneau qu'on doit faire défiler à l'intérieur d'une
 * page qu'on fait déjà défiler. Il suit donc le texte, simplement.
 */
/* --------------------------------------------------------------------------
   L'infobulle du site

   Un composant, pas un cas particulier : n'importe quoi peut en porter une.

       <span class="cab-bulle-hote">
           …ce qu'on survole…
           <span class="cab-bulle">…ce qu'elle dit, texte riche permis…</span>
       </span>

   La bulle est DANS la page : ses mots sont dans le document, donc un lecteur
   sans pointeur les a quand même — sous `hover: none` elle se pose simplement
   à la suite, en clair — et un moteur de recherche aussi.

   Le placement est écrit dans `assets/js/tooltip.js`, et pour une raison : une
   bulle levée au-dessus de son hôte est coupée par le premier ancêtre en
   `overflow: hidden`, et la bande de tuiles de la fiche en est un, pour
   arrondir ses angles. Une position fixe échappe à toutes ces boîtes — mais ne
   peut pas se placer par rapport à son hôte en CSS seul.
   -------------------------------------------------------------------------- */

/*
 * PAS DE `position: relative` ICI, et c'est voulu. La bulle est placée en
 * coordonnées fixes par le script, qui n'a besoin d'aucun ancêtre positionné ;
 * et sous `hover: none` elle se pose dans le flux, ce qui n'en demande pas
 * davantage.
 *
 * Positionner l'hôte cassait en revanche quelque chose : dans une tuile, c'est
 * une couche vide en `inset: 0` qui étire le lien sur la case entière, et elle
 * se mesure contre le premier ancêtre positionné. L'hôte venait s'interposer
 * entre le lien et sa case, et la zone cliquable se réduisait au nom.
 */

@media (hover: hover) {
	.cab-bulle {
		position: fixed;
		z-index: 60;
		max-width: min(22rem, calc(100vw - 2rem));
		padding: 0.7rem 0.9rem;
		border-radius: 12px;
		background: var(--cab-encre, #14232b);
		color: var(--wp--preset--color--white, #fff);
		font-size: var(--wp--preset--font-size--small, 0.875rem);
		font-weight: 400;
		font-style: normal;
		line-height: 1.45;
		text-align: start;
		text-transform: none;
		letter-spacing: 0;
		box-shadow: 0 8px 24px rgba(20, 35, 43, 0.28);
		opacity: 0;
		visibility: hidden;
		transform: translateY(4px);
		transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
		pointer-events: none;
	}

	.cab-bulle--visible {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	/* La pointe, sous la bulle — et au-dessus quand la bulle est passée dessous. */
	.cab-bulle::after {
		content: "";
		position: absolute;
		top: 100%;
		left: var(--cab-bulle-fleche, 50%);
		width: 0;
		height: 0;
		margin-inline-start: -7px;
		border: 7px solid transparent;
		border-block-start-color: var(--cab-encre, #14232b);
	}

	.cab-bulle--dessous::after {
		top: auto;
		bottom: 100%;
		border-block-start-color: transparent;
		border-block-end-color: var(--cab-encre, #14232b);
	}

	.cab-bulle > :first-child {
		margin-block-start: 0;
	}

	.cab-bulle > :last-child {
		margin-block-end: 0;
	}
}

/*
 * SANS SURVOL, PAS DE BULLE. Sur un écran tactile elle ne s'ouvrirait jamais —
 * et si l'hôte est un lien, la toucher mène ailleurs. Elle se pose donc à la
 * suite, en texte, où elle se lit sans rien demander.
 */
@media (hover: none) {
	.cab-bulle {
		display: block;
		margin-block-start: 0.5rem;
		font-size: var(--wp--preset--font-size--small, 0.875rem);
		font-weight: 400;
		line-height: 1.45;
		text-align: start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cab-bulle {
		transition: none;
	}
}
/* --------------------------------------------------------------------------
   Le sommaire d'une fiche, qui suit la lecture

   Les parties de la fiche, réunies dans la gélule des filtres de l'agenda et
   posées sous l'en-tête pendant que la page défile. La partie lue s'y marque.

   `assets/js/sheet-summary.js` construit la barre ; sans lui les sections sont
   toujours là, dans le même ordre, et les ancres marchent.
   -------------------------------------------------------------------------- */

.cab-sommaire {
	position: sticky;
	top: var(--cab-header-bottom, 127px);
	z-index: 15;
	margin-block: var(--wp--preset--spacing--40, 1.5rem);
	/*
	 * La gélule respire au-dessus et au-dessous plutôt que de toucher la
	 * photographie qui la précède quand la page est en haut.
	 */
	padding-block: 0.35rem;
	/*
	 * FOND TRANSPARENT. La barre traversait la bande verte du modèle réduit
	 * en y posant un ruban blanc large comme la page. La gélule, elle, garde
	 * son fond : ce sont ses pavés qu'il faut pouvoir lire, pas la bande
	 * autour d'eux.
	 */
	background: transparent;
	text-align: center;
}

/*
 * La gélule déborde sur un téléphone : elle glisse plutôt que de se casser en
 * deux lignes, et la barre de défilement se cache — le marquage de la section
 * lue la ramène de lui-même dans la vue.
 */
.cab-sommaire__gelule {
	max-width: 100%;
	/*
	 * D'UN SEUL TENANT, quelle que soit la largeur. `inline-flex` passe à la
	 * ligne dès qu'il manque de place : sept parties devenaient quatre rangées
	 * sur un téléphone, et la barre collée sous l'en-tête mangeait la moitié
	 * de l'écran. Elle glisse plutôt qu'elle ne s'empile.
	 */
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-behavior: smooth;
}

.cab-sommaire__gelule::-webkit-scrollbar {
	display: none;
}

.cab-sommaire__pave {
	flex: none;
}

.cab-sommaire__pave:hover,
.cab-sommaire__pave:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--brand-blue) 8%, transparent);
}

/* La partie qu'on lit : la gélule s'y remplit, comme dans les filtres. */
.cab-sommaire__pave--ici {
	background: var(--wp--preset--color--brand-blue);
	color: var(--wp--preset--color--white);
}

.cab-sommaire__pave--ici:hover,
.cab-sommaire__pave--ici:focus-visible {
	background: var(--wp--preset--color--brand-blue);
}
/*
 * LE SOMMAIRE NE SE REPLIE PAS. Sous 40rem, la gélule passe volontairement en
 * deux colonnes — c'est ce qu'il faut pour les filtres de l'agenda, qui sont
 * posés dans le flux de la page. Une barre collée sous l'en-tête, non : sept
 * parties y faisaient quatre rangées et 202 px de haut, la moitié d'un
 * téléphone. Elle reprend donc sa ligne unique et glisse.
 */
@media (max-width: 40rem) {
	.cab-sommaire .cab-segments {
		display: flex;
		grid-template-columns: none;
		width: auto;
	}

	.cab-sommaire .cab-segments > * + * {
		border-inline-start: 1px solid var(--cab-segments-filet);
		border-block-start: 0;
	}

	.cab-sommaire .cab-segments > :last-child:nth-child(odd) {
		grid-column: auto;
	}

	/*
	 * UN SOMMAIRE COURT SE REPLIE PLUTÔT QUE DE GLISSER. La règle « il glisse,
	 * il ne s'empile pas » a été écrite pour sept parties, qui faisaient quatre
	 * rangées et 202 px de haut sous l'en-tête. Une fiche de matériel roulant
	 * en a trois : « Sources » sortait du cadre à droite, coupée au milieu d'un
	 * mot, et rien ne disait qu'on pouvait la faire venir.
	 *
	 * Jusqu'à quatre parties, la capsule passe donc à la ligne. `wrap` ne
	 * replie QUE si la place manque : là où les trois tiennent sur une ligne,
	 * rien ne bouge, et il n'y a aucune largeur à deviner.
	 *
	 * Au-delà de quatre, on retombe sur le glissement, pour la raison qui l'a
	 * fait choisir.
	 */
	.cab-sommaire__gelule:not(:has(> :nth-child(5))) {
		flex-wrap: wrap;
		/* Plus rien ne dépasse : la capsule peut découper ses propres angles. */
		overflow: hidden;
	}

	.cab-sommaire__gelule:not(:has(> :nth-child(5))) > .cab-sommaire__pave {
		/* Chacun remplit sa rangée : pas de blanc au bout de la dernière. */
		flex: 1 1 auto;
		justify-content: center;
		/* Les angles sont ceux de la capsule, qui les coupe pour tout le monde. */
		border-radius: 0;
	}
}
/* La visionneuse dit qu'on peut cliquer : le curseur doit le dire aussi. */
.wp-block-gallery figure.wp-block-image img {
	cursor: zoom-in;
}

/*
 * LA LOUPE PASSE SOUS L'EN-TÊTE. Le cœur pose sa pastille d'agrandissement à
 * `z-index: 100`, la barre collante du thème vit à 20 : une image qui glisse
 * sous le menu y envoyait sa loupe par-dessus. Elle n'a besoin de dominer que
 * sa propre image.
 *
 * Le bouton reste visible après la fermeture de la visionneuse — le focus lui
 * revient, c'est voulu et c'est ce qui permet de continuer au clavier ; il ne
 * doit simplement pas se poser sur le menu.
 */
.wp-lightbox-container button.lightbox-trigger {
	z-index: 10;
}

/* --------------------------------------------------------------------------
   La visionneuse, d'après le modèle de r-terrassements
   -------------------------------------------------------------------------- */

/*
 * LE MODÈLE, lu dans divi-construction/style.css, section « GALLERY LIGHTBOX
 * STYLING » :
 *
 *   .mfp-bg     { background-color: #000 !important; }
 *   img.mfp-img { border: 2px solid #eace2c; }
 *   .mfp-title  { background: rgba(0,0,0,0.5); padding: 20px; font-weight: 700;
 *                 font-size: 20px; margin-left: 2px; margin-right: 2px; }
 *   .mfp-counter{ padding-right: 20px; font-size: 16px; font-weight: 900; }
 *   .mfp-close  { color: #eace2c; padding-top: 20px; padding-right: 24px; }
 *   .mfp-arrow:after   { font-size: 60px; }
 *   .mfp-arrow-left    { left: 50px; }   .mfp-arrow-right { right: 50px; }
 *
 * Le jaune de Divi devient le vert du thème : c'est la même fonction — la
 * couleur d'accent qui encadre l'image et signe la croix.
 */

.wp-lightbox-overlay .scrim {
	/* Le cœur écrit sa couleur en attribut `style` : rien d'autre qu'un
	   `!important` ne passe devant un style en ligne. */
	background-color: #000 !important;
	opacity: 0.92 !important;
}

/*
 * OÙ EST LA PHOTOGRAPHIE. La visionneuse centre l'image dans une boîte qui n'a
 * pas sa forme : une image en largeur dans une fenêtre haute laisse une bande
 * au-dessus et au-dessous. Tout ce qui se pose SUR la photo lit donc les quatre
 * mesures que le script écrit, plutôt que les bords de la boîte.
 */
.wp-lightbox-overlay {
	--cab-photo-haut: 0px;
	--cab-photo-gauche: 0px;
	--cab-photo-largeur: 100%;
	--cab-photo-hauteur: 100%;
	--cab-photo-filet: 0px;
	--cab-photo-rayon: 0px;
	/* Le cœur empile ses conteneurs d'image à 2000001 : tout ce qui doit se
	   voir par-dessus la photographie passe au-dessus de ce nombre. */
	--cab-photo-dessus: 2000002;
	/*
	 * L'accent de la visionneuse : le vert que le thème réserve déjà au texte
	 * posé sur une photographie. Le modèle emploie son jaune pour la même
	 * fonction — encadrer l'image et signer la croix.
	 */
	--cab-photo-accent: var(--cab-meta-photo);
}

/*
 * PAS D'HABILLAGE ICI. Le filet et les angles sont posés sur l'image dans
 * l'article, et la visionneuse en montre une copie : elle en hérite toute
 * seule. Les redire ici, c'était imposer un cadre à des images qui n'en
 * veulent peut-être pas.
 *
 * Ce qui reste à faire, en revanche, c'est que la bande du bas s'y adapte :
 * elle doit rentrer de l'épaisseur du filet et s'arrondir du même rayon, sans
 * quoi elle passe par-dessus et l'interrompt. Le script lit ces deux valeurs
 * sur l'image agrandie et les écrit dans `--cab-photo-filet` et
 * `--cab-photo-rayon` — quel que soit l'habillage choisi dans l'éditeur.
 */

/*
 * UNE SEULE CHOSE À DIRE ICI : que le filet tienne DANS la largeur calculée.
 * La visionneuse mesure la place de l'image puis la lui donne, sans savoir
 * qu'elle porte un cadre ; en `content-box`, les 2 px s'ajoutent de chaque
 * côté et l'image déborde de son conteneur, qui coupe ce qui dépasse. Mesuré :
 * conteneur 486 px de large, image 490 — les filets gauche et droit rognés, le
 * haut et le bas intacts. C'est pour cela que l'adhésif allait et pas l'enduit :
 * quelques pixels d'arrondi les séparaient, pas leur habillage.
 *
 * `box-sizing` y suffit : le cœur déclare une largeur et une hauteur sur
 * l'image agrandie, et sans lui le filet s'ajoutait par-dessus, de sorte que
 * l'image dépassait son conteneur de deux pixels et s'y faisait couper.
 *
 * LE CONTENEUR, LUI, DOIT COUPER. Une image posée avec « Recadrer » —
 * `scale: cover` — est volontairement plus grande que son cadre : c'est ainsi
 * que le cœur reproduit le recadrage dans la visionneuse. Une version de ce
 * fichier lui avait mis `overflow: visible` pour régler le débord de deux
 * pixels d'alors ; l'image s'ouvrait alors entière et débordait de l'écran.
 * Mesuré sur la page d'exemple : sans recadrage le débord est nul, avec
 * recadrage il est de 35 px en haut et en bas. Rien à corriger ici.
 */
.wp-lightbox-overlay .lightbox-image-container img {
	box-sizing: border-box;
}

/*
 * LA BANDE DU BAS. Le modèle pose un aplat — `rgba(0,0,0,0.5)` — et non un
 * dégradé : le texte s'y détache franchement, quelle que soit l'image dessous.
 * Le dégradé de la version précédente est gardé, mais au-dessus de l'aplat,
 * pour que la bande ne coupe pas la photographie d'un trait.
 */
.wp-lightbox-overlay > .cab-visionneuse__legende {
	display: flex;
	box-sizing: border-box;
	position: absolute;
	top: calc(var(--cab-photo-haut) + var(--cab-photo-filet));
	left: calc(var(--cab-photo-gauche) + var(--cab-photo-filet));
	width: calc(var(--cab-photo-largeur) - 2 * var(--cab-photo-filet));
	height: calc(var(--cab-photo-hauteur) - 2 * var(--cab-photo-filet));
	margin: 0;
	padding: 0;
	flex-direction: column;
	justify-content: flex-end;
	color: var(--cab-sur-fond-sombre, #fff);
	text-align: left;
	pointer-events: none;
	z-index: var(--cab-photo-dessus);
	/* La bande s'arrête où l'image s'arrondit, filet déduit. */
	border-radius: calc(var(--cab-photo-rayon) - var(--cab-photo-filet));
	overflow: hidden;
	/*
	 * UN SEUL DÉGRADÉ, sur toute la hauteur de la photographie. Un aplat
	 * surmonté d'un raccord donnait deux surfaces : même en partant de la même
	 * opacité, la cassure de pente se voyait comme un trait. Une seule courbe,
	 * suivie de neuf arrêts qui l'adoucissent, monte de rien à quatre
	 * cinquièmes sur la moitié basse de l'image.
	 */
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.8) 0%,
		rgba(0, 0, 0, 0.74) 6%,
		rgba(0, 0, 0, 0.62) 12%,
		rgba(0, 0, 0, 0.47) 19%,
		rgba(0, 0, 0, 0.32) 26%,
		rgba(0, 0, 0, 0.19) 33%,
		rgba(0, 0, 0, 0.1) 40%,
		rgba(0, 0, 0, 0.04) 47%,
		rgba(0, 0, 0, 0) 55%
	);
}

/*
 * Le texte sous le titre : légende et description, comptées ensemble. Déclaré
 * ICI, avant la requête média qui le coupe sur téléphone — posé après, ce
 * `display: block` reprenait le dessus sur le `-webkit-box` dont la coupe
 * dépend, et la bande gardait ses quatorze lignes.
 */
.cab-visionneuse__corps {
	display: block;
}
/* L'aplat lui-même, à la largeur de l'image, comme `.mfp-title`. */
.cab-visionneuse__texte {
	position: relative;
	padding: 20px;
	font-size: 1rem;
	line-height: 1.4;
}

/* Le voile qui adoucit l'arrivée de la bande sur la photographie. */
/* Le titre du média, en gras comme dans le modèle. */
.cab-visionneuse__legende strong,
.wp-block-gallery figcaption strong {
	display: block;
	font-weight: 700;
}

.cab-visionneuse__legende strong {
	font-size: 1.25rem;
	line-height: 1.25;
}

/* Le compteur, à droite et sur la ligne du titre. */
.cab-visionneuse__rang {
	position: absolute;
	right: 20px;
	bottom: 20px;
	color: var(--cab-photo-accent);
	font-size: 1rem;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
}

/*
 * LA CROIX : le caractère du modèle, pas une icône. Magnific dessine un « × »
 * en Open Sans maigre — `font-size: 64px; font-weight: 200` — et le fait
 * passer de `opacity: .65` à 1 au survol. Rien d'autre ne bouge : ni taille,
 * ni fond.
 */
.wp-lightbox-overlay button.wp-lightbox-close-button {
	position: absolute;
	top: calc(var(--cab-photo-haut) + var(--cab-photo-filet) + 4px);
	right: auto;
	left: calc(var(--cab-photo-gauche) + var(--cab-photo-largeur) - 3.5rem - var(--cab-photo-filet) - 4px);
	width: 3.5rem;
	height: 3.5rem;
	margin: 0;
	padding: 0;
	background: none;
	color: var(--cab-photo-accent);
	opacity: 0.65;
	z-index: var(--cab-photo-dessus);
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.8));
	transition: opacity 0.2s ease;
}

/*
 * Le « × » ne remplace l'icône que si le bouton est une icône seule — même
 * condition que pour les flèches, et pour la même raison : en mode « Texte »
 * ou « Les deux », le cœur écrit « Fermer » dans le bouton, et notre croix
 * viendrait s'y ajouter.
 */
@supports selector(:has(*)) {
	.wp-lightbox-overlay button.wp-lightbox-close-button:has(.wp-lightbox-close-text[hidden]) .wp-lightbox-close-icon {
		display: none;
	}

	.wp-lightbox-overlay button.wp-lightbox-close-button:has(.wp-lightbox-close-text[hidden])::before {
		content: "×";
		font-family: "Open Sans", Arial, sans-serif;
		font-size: 56px;
		font-weight: 200;
		line-height: 1;
	}
}

.wp-lightbox-overlay button.wp-lightbox-close-button:hover,
.wp-lightbox-overlay button.wp-lightbox-close-button:focus-visible {
	opacity: 1;
}

/*
 * LES FLÈCHES SONT CELLES DU MODÈLE, au tracé près. Le thème enfant écrit
 * `.mfp-arrow-left:after { content: "" }` : le glyphe `arrow_left` de la
 * police ETmodules de Divi. Son contour est lisible dans
 * `Divi/core/admin/fonts/modules/all/modules.svg`, et c'est lui qui est repris
 * ici en masque — la police, elle, appartient à Divi et ne se recopie pas.
 *
 * Le reste vient de la feuille de magnific : `opacity: .55` au repos, 1 au
 * survol, à mi-hauteur, et 50 px du bord d'après le thème enfant.
 *
 * MAIS SEULEMENT QUAND LE BOUTON EST UNE ICÔNE SEULE. Le bloc galerie offre
 * depuis WordPress 7 un réglage « Type des boutons de navigation » — Icône,
 * Texte, ou Les deux — et le cœur écrit les deux formes dans le bouton, en
 * masquant celle dont on ne veut pas :
 *
 *   <span class="wp-lightbox-navigation-icon">…svg…</span>
 *   <span class="wp-lightbox-navigation-text" hidden>Suivante</span>
 *
 * Substituer notre flèche sans regarder donnerait « → Suivante ». Le mot caché
 * est donc la condition : là où il l'est, l'icône est seule et nous la
 * remplaçons ; partout ailleurs, le cœur fait comme il l'entend.
 */
.wp-lightbox-overlay button.wp-lightbox-navigation-button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: var(--cab-sur-fond-sombre, #fff);
	opacity: 0.55;
	z-index: var(--cab-photo-dessus);
	transition: opacity 0.2s ease;
}

.wp-lightbox-overlay button.wp-lightbox-navigation-button:hover,
.wp-lightbox-overlay button.wp-lightbox-navigation-button:focus-visible {
	opacity: 1;
}

.wp-lightbox-overlay button.wp-lightbox-navigation-button-prev {
	left: 50px;
	right: auto;
}

.wp-lightbox-overlay button.wp-lightbox-navigation-button-next {
	right: 50px;
	left: auto;
}

/*
 * `:has()` est la seule façon de lire l'état d'un enfant. Là où il manque, le
 * bouton reste celui du cœur : un chevron plutôt qu'une flèche longue, ce qui
 * se voit mais ne casse rien.
 */
@supports selector(:has(*)) {
	.wp-lightbox-overlay button.wp-lightbox-navigation-button:has(.wp-lightbox-navigation-text[hidden]) {
		width: 4rem;
		height: 4rem;
	}

	.wp-lightbox-overlay button.wp-lightbox-navigation-button:has(.wp-lightbox-navigation-text[hidden]) .wp-lightbox-navigation-icon {
		display: none;
	}

	.wp-lightbox-overlay button.wp-lightbox-navigation-button:has(.wp-lightbox-navigation-text[hidden])::before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background-color: var(--cab-sur-fond-sombre, #fff);
		filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.8));
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-size: contain;
		mask-size: contain;
	}

	.wp-lightbox-overlay button.wp-lightbox-navigation-button-prev:has(.wp-lightbox-navigation-text[hidden])::before {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20transform%3D%22translate%280%2C960%29%20scale%281%2C-1%29%22%20d%3D%22M128%20479.872c0-4.096%200.896-8.192%202.496-12.096%201.536-3.776%203.84-7.168%206.656-10.048%200.064-0.128%200.128-0.256%200.192-0.384l192-192c12.48-12.48%2032.768-12.48%2045.248%200s12.48%2032.768%200%2045.248l-137.344%20137.408h626.752c17.664%200%2032%2014.336%2032%2032s-14.336%2032-32%2032h-626.752l137.344%20137.344c12.48%2012.48%2012.48%2032.768%200%2045.248s-32.768%2012.48-45.248%200l-192-192c-0.064-0.064-0.128-0.256-0.192-0.32-2.816-2.88-5.12-6.272-6.656-10.048-1.664-3.904-2.496-8.064-2.496-12.224v0c0-0.064%200-0.064%200-0.128z%22%2F%3E%3C%2Fsvg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20transform%3D%22translate%280%2C960%29%20scale%281%2C-1%29%22%20d%3D%22M128%20479.872c0-4.096%200.896-8.192%202.496-12.096%201.536-3.776%203.84-7.168%206.656-10.048%200.064-0.128%200.128-0.256%200.192-0.384l192-192c12.48-12.48%2032.768-12.48%2045.248%200s12.48%2032.768%200%2045.248l-137.344%20137.408h626.752c17.664%200%2032%2014.336%2032%2032s-14.336%2032-32%2032h-626.752l137.344%20137.344c12.48%2012.48%2012.48%2032.768%200%2045.248s-32.768%2012.48-45.248%200l-192-192c-0.064-0.064-0.128-0.256-0.192-0.32-2.816-2.88-5.12-6.272-6.656-10.048-1.664-3.904-2.496-8.064-2.496-12.224v0c0-0.064%200-0.064%200-0.128z%22%2F%3E%3C%2Fsvg%3E");
	}

	.wp-lightbox-overlay button.wp-lightbox-navigation-button-next:has(.wp-lightbox-navigation-text[hidden])::before {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20transform%3D%22translate%280%2C960%29%20scale%281%2C-1%29%22%20d%3D%22M128%20480c0-17.664%2014.336-32%2032-32h626.752l-137.344-137.344c-12.48-12.48-12.48-32.768%200-45.248s32.768-12.48%2045.248%200l192%20192c2.944%202.944%205.312%206.464%206.912%2010.368%201.536%203.904%202.432%208%202.432%2012.096%200%200.064%200%200.064%200%200.128v0c0%204.16-0.832%208.32-2.496%2012.224-1.6%203.904-3.968%207.424-6.912%2010.368l-192%20192c-12.48%2012.48-32.768%2012.48-45.248%200s-12.48-32.768%200-45.248l137.408-137.344h-626.752c-17.664%200-32-14.336-32-32z%22%2F%3E%3C%2Fsvg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20transform%3D%22translate%280%2C960%29%20scale%281%2C-1%29%22%20d%3D%22M128%20480c0-17.664%2014.336-32%2032-32h626.752l-137.344-137.344c-12.48-12.48-12.48-32.768%200-45.248s32.768-12.48%2045.248%200l192%20192c2.944%202.944%205.312%206.464%206.912%2010.368%201.536%203.904%202.432%208%202.432%2012.096%200%200.064%200%200.064%200%200.128v0c0%204.16-0.832%208.32-2.496%2012.224-1.6%203.904-3.968%207.424-6.912%2010.368l-192%20192c-12.48%2012.48-32.768%2012.48-45.248%200s-12.48-32.768%200-45.248l137.408-137.344h-626.752c-17.664%200-32-14.336-32-32z%22%2F%3E%3C%2Fsvg%3E");
	}
}

@media (max-width: 782px) {
	.wp-lightbox-overlay button.wp-lightbox-navigation-button-prev {
		left: 6px;
	}

	.wp-lightbox-overlay button.wp-lightbox-navigation-button-next {
		right: 6px;
	}

	.cab-visionneuse__texte {
		padding: 14px;
	}

	.cab-visionneuse__rang {
		right: 14px;
		bottom: 14px;
	}

	/*
	 * TROIS LIGNES SUR UN TÉLÉPHONE. Une description écrite pour le
	 * référencement fait six à huit lignes sur 390 px de large : la bande
	 * couvrait alors la photographie qu'elle est censée nommer. Le titre garde
	 * deux lignes, le texte qui suit en a trois — quatre ou cinq en tout au
	 * pire, quelles que soient les cases cochées, puisque la légende et la
	 * description se comptent ensemble.
	 *
	 * `-webkit-line-clamp` coupe à la ligne et pose les points de suspension ;
	 * une hauteur maximale, elle, couperait une ligne par le milieu.
	 */
	.cab-visionneuse__legende strong {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
	}

	.cab-visionneuse__corps {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		overflow: hidden;
	}
}

/*
 * LA LOUPE PASSE SOUS L'EN-TÊTE. Le cœur pose sa pastille d'agrandissement à
 * `z-index: 100`, la barre collante du thème vit à 20 : une image qui glisse
 * sous le menu y envoyait sa loupe par-dessus. Elle n'a besoin de dominer que
 * sa propre image.
 */
.wp-lightbox-container button.lightbox-trigger {
	z-index: 10;
}

/* Chaque partie de la bande sur sa ligne, sous le titre. */
.cab-visionneuse__ligne {
	display: block;
}

/* La description est un commentaire, pas un titre : plus petite et en italique. */
.cab-visionneuse__description {
	margin-top: 0.15rem;
	font-size: 0.8125rem;
	font-style: italic;
	line-height: 1.4;
	opacity: 0.9;
}

/*
 * « Titre seul » et « Rien » : les deux autres réponses du réglage posé sur la
 * galerie. La première ne change que ce que PHP écrit — le voile reste ; la
 * seconde retire le voile entièrement, y compris là où une légende avait été
 * tapée sous l'image, puisque c'est ce que « rien sur l'image » veut dire.
 */
.wp-block-gallery.cab-survol--none.has-nested-images figure.wp-block-image:not(#individual-image) figcaption,
figure.wp-block-image.cab-survol--none figcaption {
	display: none;
}

/*
 * Le bouton qui rouvre le bandeau de cookies.
 *
 * SEOPress le dessine comme ses deux autres boutons — une pastille de 120 px
 * sur 41, avec le mot écrit dedans. Ici il ne porte plus qu'un biscuit, sur un
 * disque à la taille du doigt (44 px, le minimum confortable). Les couleurs
 * restent celles de l'extension : rien n'est repeint, seule la forme change.
 *
 * Le sélecteur monte à (1,1,0) pour passer devant les règles en ligne de
 * l'extension, qui visent l'identifiant seul — et devant sa règle mobile, qui
 * étire tous ses boutons sur toute la largeur sous 480 px.
 */
#seopress-user-consent-edit.cab-cookie {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	min-width: 0;
	padding: 0;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgb(0 0 0 / 0.22);
	opacity: 0.85;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.seopress-edit-choice p {
	margin: 0;
}

/*
 * Quand SEOPress pose aussi son disque d'assistance — 60 px collés au bas de
 * la fenêtre, réservés aux comptes qui écrivent — le biscuit passait dessous.
 * Il monte d'un cran, le temps de la visite de l'atelier.
 */
body.cab-phare-seopress .seopress-edit-choice {
	bottom: 4.75rem;
}

.cab-cookie__dessin {
	display: block;
	width: 1.625rem;
	height: 1.625rem;
}

#seopress-user-consent-edit.cab-cookie:hover,
#seopress-user-consent-edit.cab-cookie:focus-visible {
	opacity: 1;
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {

	#seopress-user-consent-edit.cab-cookie {
		transition: none;
	}

	#seopress-user-consent-edit.cab-cookie:hover,
	#seopress-user-consent-edit.cab-cookie:focus-visible {
		transform: none;
	}
}