/*
Theme Name: Laurent Berguerand thérapeute
Description: Site of a therapist's practice. No CSS framework: the raw templates of the block bank, dressed here. Design decisions: sites/berguerand/DESIGN.md.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.2
Text Domain: berguerand
*/

:root {
	--lb-radius: var(--wp--custom--bank--radius);
	--lb-pill: 999px;
}

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

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

img {
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
h4 {
	text-wrap: balance;
}

p,
li {
	text-wrap: pretty;
}

a {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.skip-link {
	position: absolute;
	top: var(--wp--preset--spacing--20);
	left: var(--wp--preset--spacing--20);
	z-index: 100;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	border-radius: var(--lb-pill);
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	transform: translateY(-300%);
}

.skip-link:focus {
	transform: none;
}

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

/*
 * The header stays at the top of the screen, so the appointment button is always in reach. Its height, a
 * little above the measured one (77 to 87 px up to a tablet, 93 px at most on a wide screen), keeps a link to an
 * anchor and the sticky headings of the written sections clear of it.
 */
:root {
	--lb-header-height: 5.5rem;
	scroll-padding-top: var(--lb-header-height);
}

@media (min-width: 48em) {
	:root {
		--lb-header-height: 6rem;
	}
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--base);
}

/* Where the browser follows the scroll, the rule under the header only shows once the page has moved. */
@supports (animation-timeline: scroll()) {
	.site-header {
		border-bottom-color: transparent;
		animation: lb-header-rule linear both;
		animation-timeline: scroll();
		animation-range: 0 4rem;
	}

	@keyframes lb-header-rule {
		to {
			border-bottom-color: var(--wp--preset--color--border);
		}
	}
}

/* Signed in, under the bar of WordPress; on a phone that bar scrolls away with the page. */
.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 0);
}

@media (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--40);
}

/* The brand takes what the row leaves and wraps inside itself: with a wider fallback font, before the web font
   arrives, the row never breaks in two (the whole page would jump down, then up again). */
.site-brand {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	min-width: 0;
	margin-right: auto;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.site-brand__logo {
	display: block;
	width: auto;
	height: 2.25rem;
}

.site-brand__text {
	display: grid;
	line-height: 1.2;
}

.site-brand__name {
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.site-brand__tagline {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
}

.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav a {
	display: block;
	padding-block: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--contrast);
	font-size: 1rem;
	font-weight: 500;
	text-decoration: none;
	background: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) left bottom / 0 2px no-repeat;
	transition: background-size 0.2s ease;
}

.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a {
	background-size: 100% 2px;
}

.site-menu-toggle {
	display: none;
	align-items: center;
	min-height: 2.75rem;
	padding-inline: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--lb-pill);
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* The telephone and the button of the header. */
.site-actions {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.site-phone {
	display: none;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--lb-pill);
	color: var(--wp--preset--color--primary);
}

.site-header__action-short {
	display: none;
}

@media (max-width: 64em) {
	.site-menu-toggle:not([hidden]) {
		display: inline-flex;
	}

	/* One row: the logo, then the telephone, the button (short label) and the menu button on the right. The
	   navigation opens under them. */
	.site-actions {
		order: 1;
	}

	.site-menu-toggle {
		order: 2;
	}

	.site-phone {
		display: inline-flex;
	}

	/* Hidden from the eye only: it stays the name of the link for screen readers (the short one is not read). */
	.site-header__action-long {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.site-header__action-short {
		display: inline;
	}

	.site-nav {
		order: 3;
		width: 100%;
	}

	.site-menu-toggle[aria-expanded="false"] + .site-nav {
		display: none;
	}

	/* The open navigation scrolls inside the header when it is taller than the screen. */
	.site-header:has(.site-menu-toggle[aria-expanded="true"]) .site-header__inner {
		max-height: 100vh;
		max-height: 100dvh;
		overflow-y: auto;
	}

	.site-nav ul {
		flex-direction: column;
		gap: 0;
	}

	.site-nav a {
		padding-block: var(--wp--preset--spacing--30);
		border-top: 1px solid var(--wp--preset--color--border);
		background: none;
	}
}

/* Between the menu button and a wide screen, the row is tight: the tagline leaves, the gaps close up, and the
   button of the header stays on the row of the logo and the menu. */
@media (min-width: 64.0625em) and (max-width: 74.99em) {
	.site-brand__tagline {
		display: none;
	}

	.site-header__inner,
	.site-nav ul {
		column-gap: var(--wp--preset--spacing--40);
	}
}

@media (max-width: 30em) {
	.site-brand__tagline {
		display: none;
	}

	.site-brand__logo {
		height: 1.6rem;
	}

	.site-brand__name {
		font-size: 1.0625rem;
	}

	.site-header__inner {
		gap: var(--wp--preset--spacing--20);
	}

	.site-actions {
		gap: var(--wp--preset--spacing--20);
	}

	.site-header .site-header__action {
		min-height: 2.75rem;
		padding-inline: var(--wp--preset--spacing--40);
		font-size: 0.9375rem;
	}
}

/*
 * On a phone the appointment button leaves the header for a bar fixed at the bottom of the screen, where the
 * thumb is, at full width and with its long label; the header keeps the logo, the telephone and the menu.
 * The page gets the height of the bar at its end, so the bar never hides the bottom of the footer.
 */
@media (max-width: 47.99em) {
	:root {
		--lb-booking-bar: calc(4.25rem + env(safe-area-inset-bottom, 0px));
	}

	body {
		padding-bottom: var(--lb-booking-bar);
	}

	/* A field focused near the bottom of the screen scrolls above the bar, not behind it. */
	:root {
		scroll-padding-bottom: var(--lb-booking-bar);
	}

	/* On the appointment page itself the bar would only reload it: it leaves, and so does its room. */
	.site-header__booking--here {
		display: none;
	}

	body:has(.site-header__booking--here) {
		padding-bottom: 0;
	}

	:root:has(.site-header__booking--here) {
		scroll-padding-bottom: 0;
	}

	/* The confirmation of an appointment at full width, like the bar it replaces on that page. */
	.booking__form > .booking__button {
		width: 100%;
	}

	.site-header__booking {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 50;
		padding: 0.625rem var(--wp--preset--spacing--40) calc(0.625rem + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--wp--preset--color--border);
		background-color: var(--wp--preset--color--base);
	}

	.site-header .site-header__booking .site-header__action {
		display: flex;
		justify-content: center;
		width: 100%;
		min-height: 3rem;
		font-size: 1.0625rem;
	}

	.site-header__booking .site-header__action-long {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}

	.site-header__booking .site-header__action-short {
		display: none;
	}

	/* The open navigation stops above the bar. */
	.site-header:has(.site-menu-toggle[aria-expanded="true"]) .site-header__inner {
		max-height: calc(100dvh - var(--lb-booking-bar));
	}
}

/* The small header on one row, measured from 320 to 1024 px: the tagline goes first, then, below 390 px, the
   name splits on two lines. With the appointment button in the bottom bar, the mark and the telephone always fit. */
@media (max-width: 47.99em) {
	.site-brand__tagline {
		display: none;
	}
}

@media (max-width: 389px) {
	.site-brand {
		gap: var(--wp--preset--spacing--20);
	}

	.site-brand__name {
		max-width: min-content;
		line-height: 1.1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-nav a {
		transition: none;
	}
}

/* ---------- Buttons: pills ---------- */

.bank-button {
	padding-inline: 1.6em;
	border-radius: var(--lb-pill);
	font-size: 1.0625rem;
	font-weight: 600;
}

.bank-button--secondary {
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent);
	color: var(--wp--preset--color--primary);
}

.bank-button--secondary:hover {
	border-color: var(--wp--preset--color--primary);
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 7%, transparent);
}

/* On the dark grounds the action is the colour of the armchairs. */
:root .bank-is-dark .bank-button--primary,
:root .bank-cta--boxed .bank-button--primary {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

:root .bank-is-dark .bank-button--primary:hover,
:root .bank-cta--boxed .bank-button--primary:hover {
	background-color: var(--wp--preset--color--base);
}

:root .bank-is-dark .bank-button--secondary,
:root .bank-cta--boxed .bank-button--secondary {
	border-color: color-mix(in srgb, currentColor 50%, transparent);
	color: inherit;
}

:root .bank-is-dark .bank-button--secondary:hover,
:root .bank-cta--boxed .bank-button--secondary:hover {
	border-color: currentColor;
	background-color: color-mix(in srgb, currentColor 10%, transparent);
}

/* ---------- Sections ---------- */

.entry-content > .alignfull,
.entry-content > .bank-debug {
	width: 100%;
}

.bank-section__header {
	max-width: 46rem;
}

.bank-section__intro {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}

/* Photographs and illustrations share one shape. */
.bank-hero__media img,
.bank-media-text__media img,
.bank-page-header__media img {
	display: block;
	width: 100%;
	border-radius: var(--lb-radius);
}

/* Lists inside written content: a dot the colour of the parquet. */
.bank-prose ul {
	padding-left: 0;
	list-style: none;
}

.bank-prose ul > li {
	position: relative;
	margin-block: 0 0.6em;
	padding-left: 1.5em;
	break-inside: avoid;
}

.bank-prose ul > li::before {
	content: "";
	position: absolute;
	top: 0.62em;
	left: 0.15em;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
}

.bank-prose strong {
	font-weight: 600;
}

/* ---------- Hero: the room ---------- */

.bank-hero {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70);
}

.bank-hero__eyebrow {
	display: inline-block;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 0.35em 1em;
	border-radius: var(--lb-pill);
	background-color: var(--wp--preset--color--sage);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.bank-hero__title {
	max-width: 12em;
}

.bank-hero__text {
	max-width: 32em;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}

.bank-hero__media {
	position: relative;
}

/* The tint below runs past the photograph on the right: between 1000 and 1100 px it would pass the edge of
   the screen and let the page scroll sideways. */
.bank-hero--split {
	overflow-x: clip;
}

/* A flat tint slips out from behind the photograph, like the rug under the armchairs. */
.bank-hero--split .bank-hero__media::before {
	content: "";
	position: absolute;
	inset: 12% -0.5rem -0.9rem 14%;
	z-index: 0;
	border-radius: var(--lb-radius);
	background-color: var(--wp--preset--color--honey);
}

.bank-hero--split .bank-hero__media img {
	position: relative;
	z-index: 1;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

@media (min-width: 56em) {
	.bank-hero--split .bank-hero__media::before {
		inset: 12% -1.5rem -1.75rem 14%;
	}

	.bank-hero--split .bank-hero__inner {
		grid-template-columns: 5fr 6fr;
		gap: var(--wp--preset--spacing--70);
	}
}

/* ---------- Page header ---------- */

.bank-page-header {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.bank-page-header__title {
	margin: 0;
}

.bank-page-header__intro {
	max-width: 38rem;
	margin-top: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}

.bank-page-header__intro > * {
	margin: 0;
}

.bank-page-header + .bank-section,
.bank-page-header + .bank-testimonials--featured {
	padding-top: var(--wp--preset--spacing--40);
}

/* ---------- Quotations (block "testimonials", layout "featured") ---------- */

.bank-testimonials--featured {
	padding-block: var(--wp--preset--spacing--50);
}

.bank-testimonials--featured .bank-testimonials__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bank-testimonials--featured .bank-testimonials__item:first-child .bank-testimonials__figure {
	max-width: none;
	margin: 0;
	padding: var(--wp--preset--spacing--60);
	border-radius: var(--lb-radius);
	background-color: var(--wp--preset--color--sage);
}

.bank-testimonials--featured .bank-testimonials__item:first-child .bank-testimonials__quote {
	max-width: 24em;
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--wp--preset--font-family--quote);
	font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.875rem);
	font-style: italic;
	line-height: 1.18;
	letter-spacing: -0.005em;
}

.bank-testimonials--featured .bank-testimonials__quote p {
	margin: 0;
}

.bank-testimonials--featured .bank-testimonials__quote p::before {
	content: "«\00a0";
	color: var(--wp--preset--color--accent);
}

.bank-testimonials--featured .bank-testimonials__quote p::after {
	content: "\00a0»";
	color: var(--wp--preset--color--accent);
}

.bank-testimonials--featured .bank-testimonials__author {
	margin-top: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--medium);
}

.bank-testimonials--featured .bank-testimonials__name {
	color: inherit;
	font-weight: 500;
}

.bank-testimonials--featured .bank-testimonials__name::before {
	content: "— ";
}

/* ---------- Written sections: the heading on the left, the text on the right ---------- */

@media (min-width: 62em) {
	.bank-text--normal .bank-text__inner:has(> .bank-text__title) {
		display: grid;
		grid-template-columns: 4fr 7fr;
		gap: var(--wp--preset--spacing--60);
		align-items: start;
	}

	.bank-text--normal .bank-text__title {
		position: sticky;
		top: calc(var(--lb-header-height) + var(--wp--preset--spacing--50));
		margin: 0;
	}

	.bank-text--normal .bank-text__title + .bank-text__content {
		margin-top: 0.35em;
	}
}

.bank-text__content > p:first-child {
	margin-top: 0;
}

.bank-text__content h3,
html .bank-text__content :is(h1,h2,h3,h4,h5,h6):where(.bank-h3) {
	margin-top: var(--wp--preset--spacing--50);
}

@media (min-width: 40em) {
	.bank-text--normal .bank-text__content > ul {
		columns: 2;
		column-gap: var(--wp--preset--spacing--50);
	}
}

/* A passage still to be completed, marked as such. */
.bank-prose mark {
	padding: 0.15em 0.5em;
	border-radius: 0.5em;
	background-color: var(--wp--preset--color--honey);
	color: inherit;
}

/* A quotation inside a text. */
.bank-prose blockquote {
	margin: var(--wp--preset--spacing--50) 0;
	padding: var(--wp--preset--spacing--50);
	border: 0;
	border-radius: var(--lb-radius);
	background-color: var(--wp--preset--color--sage);
}

.bank-prose blockquote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--quote);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	font-style: italic;
	line-height: 1.22;
}

.bank-prose blockquote p::before {
	content: "«\00a0";
	color: var(--wp--preset--color--accent);
}

.bank-prose blockquote p::after {
	content: "\00a0»";
	color: var(--wp--preset--color--accent);
}

.bank-prose blockquote cite {
	display: block;
	margin-top: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
}

.bank-prose blockquote cite::before {
	content: "— ";
}

/* ---------- Cards ---------- */

.bank-cards__title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
}

.bank-cards__text {
	font-size: 1.0625rem;
	line-height: 1.6;
}

/* Audience tiles: the illustration carries its own pastel. */
.bank-cards--plain.bank-cards--media-image .bank-cards__media img {
	aspect-ratio: 45 / 32;
}

@media (min-width: 48em) {
	.bank-cards--plain.bank-cards--media-image .bank-cards__list[style*="--bank-columns:2"] .bank-cards__item {
		flex-direction: row;
		gap: var(--wp--preset--spacing--40);
		align-items: flex-start;
	}

	.bank-cards--plain.bank-cards--media-image .bank-cards__list[style*="--bank-columns:2"] .bank-cards__media {
		flex: 0 0 34%;
		margin-bottom: 0;
	}

	.bank-cards--plain.bank-cards--media-image .bank-cards__list[style*="--bank-columns:2"] .bank-cards__media img {
		aspect-ratio: 1;
	}

	.bank-cards--plain.bank-cards--media-image .bank-cards__list[style*="--bank-columns:2"] {
		--bank-gap: var(--wp--preset--spacing--50);
	}
}

/* Commitments: flat tiles, a dot before the title. */
.bank-cards--filled .bank-cards__body {
	padding: var(--wp--preset--spacing--50);
}

/* The dot sits on the first line of the title, like a bullet; a title on two lines goes on beside it. */
.bank-cards--filled .bank-cards__title {
	display: flex;
	gap: 0.6em;
	align-items: flex-start;
}

.bank-cards--filled .bank-cards__title::before {
	content: "";
	flex: none;
	width: 0.55em;
	height: 0.55em;
	margin-top: calc((1.25em - 0.55em) / 2);
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
}

.has-surface-background-color .bank-cards--filled .bank-cards__item,
.has-surface-background-color.bank-cards--filled .bank-cards__item {
	background-color: var(--wp--preset--color--base);
}

/* Where: a pictogram in a pastel disc. */
.bank-cards--media-icon .bank-cards__media {
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--mist);
}

.bank-cards--media-icon .bank-cards__item:nth-child(3n + 2) .bank-cards__media {
	background-color: var(--wp--preset--color--honey);
}

.bank-cards--media-icon .bank-cards__item:nth-child(3n) .bank-cards__media {
	background-color: var(--wp--preset--color--sage);
}

.bank-cards--media-icon .bank-cards__media img {
	width: 2.75rem;
	height: 2.75rem;
}

.bank-cards__link a {
	font-weight: 600;
}

/* On a phone, the pictogram beside its title and text: the three places read as a short list. */
@media (max-width: 47.99em) {
	.bank-cards--media-icon.bank-cards--plain .bank-cards__item {
		flex-direction: row;
		gap: var(--wp--preset--spacing--40);
		align-items: flex-start;
	}

	.bank-cards--media-icon.bank-cards--plain .bank-cards__media {
		flex: none;
		width: 3.5rem;
		height: 3.5rem;
		margin-bottom: 0;
	}

	.bank-cards--media-icon.bank-cards--plain .bank-cards__media img {
		width: 2.125rem;
		height: 2.125rem;
	}
}

/* A card without frame or background has nothing to clip; clipped, the first letter of a line lost its edge. */
.bank-cards--plain .bank-cards__item {
	overflow: visible;
}


/* ---------- Media and text ---------- */

@media (min-width: 56em) {
	.bank-media-text__inner {
		gap: var(--wp--preset--spacing--70);
	}
}

.bank-media-text__text {
	color: var(--wp--preset--color--contrast);
}

/* A logo shown as a medium (the training institute): a white card, not a full-width picture. */
.bank-media-text__media img[src*="logo"] {
	width: auto;
	max-width: min(100%, 22rem);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--50);
	background-color: #fff;
}

/* ---------- Key figures: the prices ---------- */

.bank-stats__list {
	gap: var(--wp--preset--spacing--40);
}

.bank-stats__item {
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--lb-radius);
	background-color: var(--wp--preset--color--surface);
	text-align: left;
}

.has-surface-background-color .bank-stats__item {
	background-color: var(--wp--preset--color--base);
}

.bank-stats__value {
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
}

.bank-stats__label {
	margin: var(--wp--preset--spacing--30) 0 0;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
}

/* On a phone, the prices one per line, the amount beside what it is for: a short price list to compare at a glance. */
@media (max-width: 47.99em) {
	.bank-stats .bank-stats__list {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--30);
	}

	.bank-stats__item {
		display: flex;
		gap: var(--wp--preset--spacing--40);
		align-items: center;
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	}

	.bank-stats__value {
		flex: none;
		min-width: 3.4ch;
		font-size: 2.25rem;
	}

	.bank-stats__label {
		margin: 0;
	}
}

@media (max-width: 389px) {
	.bank-stats__item {
		gap: var(--wp--preset--spacing--30);
		padding-inline: var(--wp--preset--spacing--40);
	}

	.bank-stats__value {
		font-size: 2rem;
	}
}

/* ---------- Diagram: the three attitudes ---------- */

.bank-diagram__center {
	border-radius: var(--lb-radius);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

.bank-diagram__node {
	padding: var(--wp--preset--spacing--50);
	border: 0;
	border-radius: var(--lb-radius);
	background-color: var(--wp--preset--color--mist);
}

.bank-diagram__node:nth-child(3n + 2) {
	background-color: var(--wp--preset--color--honey);
}

.bank-diagram__node:nth-child(3n) {
	background-color: var(--wp--preset--color--sage);
}

.bank-diagram__node-title {
	font-size: var(--wp--preset--font-size--large);
}

.bank-diagram__node-text {
	color: var(--wp--preset--color--contrast);
	font-size: 1.0625rem;
}

@media (min-width: 56em) {
	:root .bank-diagram--hub .bank-diagram__canvas {
		grid-template-columns: 1fr;
		row-gap: var(--lb-diagram-gap);
		justify-items: center;
	}

	:root .bank-diagram--hub .bank-diagram__center {
		grid-column: 1;
		grid-row: auto;
		align-self: auto;
		width: min(100%, 26rem);
	}

	:root .bank-diagram--hub .bank-diagram__nodes {
		display: grid;
		grid-template-columns: repeat(var(--bank-count), minmax(0, 1fr));
		gap: var(--wp--preset--spacing--40);
		width: 100%;
		margin: 0;
		padding: 0;
		border: 0;
	}

	:root .bank-diagram--hub .bank-diagram__node:nth-child(n) {
		grid-column: auto;
	}

	/*
	 * The link to the centre, drawn as a tree: a stem under the centre, a bar
	 * from the first attitude to the last, a short stroke down to each one.
	 * Opaque colour, so the strokes do not darken where they meet.
	 */
	:root .bank-diagram--hub {
		--lb-diagram-gap: var(--wp--preset--spacing--50);
		--lb-diagram-line: color-mix(in srgb, var(--wp--preset--color--accent) 60%, var(--wp--preset--color--base));
	}

	:root .bank-diagram--hub .bank-diagram__center,
	:root .bank-diagram--hub .bank-diagram__nodes {
		position: relative;
	}

	:root .bank-diagram--hub .bank-diagram__center::after,
	:root .bank-diagram--hub .bank-diagram__nodes::before {
		content: "";
		position: absolute;
		background-color: var(--lb-diagram-line);
	}

	:root .bank-diagram--hub .bank-diagram__center::after {
		top: 100%;
		left: calc(50% - 1px);
		width: 2px;
		height: calc(var(--lb-diagram-gap) / 2);
	}

	:root .bank-diagram--hub .bank-diagram__nodes::before {
		top: calc(var(--lb-diagram-gap) / -2);
		right: calc((100% - (var(--bank-count) - 1) * var(--wp--preset--spacing--40)) / var(--bank-count) / 2 - 1px);
		left: calc((100% - (var(--bank-count) - 1) * var(--wp--preset--spacing--40)) / var(--bank-count) / 2 - 1px);
		height: 2px;
	}

	:root .bank-diagram--hub .bank-diagram__node:nth-child(n)::after {
		top: calc(var(--lb-diagram-gap) / -2);
		right: auto;
		left: calc(50% - 1px);
		width: 2px;
		height: calc(var(--lb-diagram-gap) / 2);
		border-top: 0;
		background-color: var(--lb-diagram-line);
	}
}

/* ---------- Call to action: a tile inside the page ---------- */

.bank-cta--boxed .bank-cta__box {
	padding: var(--wp--preset--spacing--60);
	border: 0;
	border-radius: var(--lb-radius);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

.bank-cta--boxed .bank-section__intro {
	color: inherit;
	opacity: 0.9;
}

.bank-cta--boxed .bank-button:focus-visible {
	outline-color: currentColor;
}

.bank-section + .bank-cta--boxed {
	padding-top: var(--wp--preset--spacing--40);
}

/* A tinted section before the call: the call needs its own air. */
[class*="-background-color"] + .bank-cta--boxed {
	padding-top: var(--wp--preset--spacing--70);
}

/* ---------- FAQ ---------- */

.bank-faq__item {
	border-color: var(--wp--preset--color--border);
}

.bank-faq__title {
	font-size: 1.1875rem;
	font-weight: 600;
}

/* ---------- Contact ---------- */

/* The details are written with their own headings: the generic label of the block is not needed. */
.bank-contact__label {
	display: none;
}

.bank-contact__details {
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--lb-radius);
	background-color: var(--wp--preset--color--surface);
}

.bank-contact__line p {
	margin: 0 0 var(--wp--preset--spacing--40);
}

.bank-contact__line p:last-child {
	margin-bottom: 0;
}

.bank-contact__line strong {
	display: block;
	font-weight: 600;
}

.bank-contact__line a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.bank-contact__form :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"]), select, textarea) {
	border-radius: 14px;
	background-color: #fff;
	font: inherit;
}

.bank-contact__form textarea {
	min-height: 10rem;
}

.bank-contact__form label {
	font-size: 1rem;
}

.bank-contact__form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.bank-contact__form .wpcf7-acceptance label {
	display: flex;
	gap: 0.6em;
	align-items: flex-start;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

.bank-contact__form .wpcf7-acceptance input {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.2em 0 0;
	accent-color: var(--wp--preset--color--primary);
}

.lb-form-row {
	display: grid;
	gap: 0 var(--wp--preset--spacing--40);
}

@media (min-width: 40em) {
	.lb-form-row {
		grid-template-columns: 1fr 1fr;
	}
}

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

.site-footer {
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--on-dark);
	font-size: 1rem;
}

.site-footer a {
	color: inherit;
}

.site-footer__grid {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--60);
}

@media (min-width: 48em) {
	.site-footer__grid {
		grid-template-columns: 5fr 4fr 3fr;
		gap: var(--wp--preset--spacing--60);
	}
}

.site-footer__name {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
}

.site-footer__about p:last-child {
	max-width: 24rem;
	margin: 0;
	opacity: 0.85;
}

.site-footer__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	opacity: 0.7;
}

.site-footer address {
	margin-bottom: var(--wp--preset--spacing--40);
	font-style: normal;
	line-height: 1.5;
}

.site-footer address strong {
	font-weight: 600;
}

.site-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer li {
	margin-block: 0.35em;
}

.site-footer__contact a {
	white-space: nowrap;
}

.site-footer__contact li span:first-child {
	display: inline-block;
	min-width: 4.2em;
	opacity: 0.7;
}

.site-footer__nav {
	margin-top: var(--wp--preset--spacing--50);
}

.site-footer__legal {
	border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	font-size: var(--wp--preset--font-size--small);
}

.site-footer__legal p {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em 1.6em;
	margin-block: 0;
	padding-block: var(--wp--preset--spacing--40);
	opacity: 0.85;
}

/* From a tablet up, the copyright on the left, the credits on the right. */
@media (min-width: 48em) {
	.site-footer__legal p > span:first-child {
		margin-right: auto;
	}
}

/* Small screen: one column, centred. */
@media (max-width: 47.99em) {
	.site-footer__grid,
	.site-footer__legal p {
		text-align: center;
	}

	.site-footer__about p:last-child {
		margin-inline: auto;
	}

	.site-footer__contact li span:first-child {
		min-width: 0;
		margin-right: 0.4em;
	}

	.site-footer__legal p {
		justify-content: center;
	}
}

/* ---------- Fallback (page not found) ---------- */

.lb-fallback {
	padding-block: var(--wp--preset--spacing--70);
}

.lb-fallback__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--50);
}

.lb-fallback__list {
	padding: 0;
	list-style: none;
}

/*
 * Phone header on one row (feedback of 2026-10-04, examples/README.md): on a phone the word of the menu
 * button leaves the screen and three bars stay, so that the logo, the action and the menu share one line.
 * The word is still read by screen readers.
 */
.site-menu-toggle__bars {
	display: none;
}

@media (max-width: 479px) {
	button.site-menu-toggle:not([hidden]) {
		display: inline-flex;
		flex: none;
		align-items: center;
		justify-content: center;
		gap: 0;
		width: 2.75rem;
		min-width: 0;
		height: 2.75rem;
		min-height: 0;
		margin-left: 0;
		padding: 0;
	}

	.site-menu-toggle__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	button.site-menu-toggle .site-menu-toggle__icon {
		margin: 0;
	}

	.site-menu-toggle__bars {
		display: block;
		width: 1.25rem;
		height: 2px;
		border-radius: 1px;
		background-color: currentColor;
		box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;
	}
}

/*
 * Menu button: three bars alone wherever it shows (feedback of 2026-10-06): the header keeps its room for
 * the logo and the action. The word stays in the button for screen readers, hidden from the eye only.
 */
button.site-menu-toggle:not([hidden]) {
	position: relative;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: 2.75rem;
	min-width: 0;
	height: 2.75rem;
	min-height: 0;
	padding: 0;
}

.site-menu-toggle__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

button.site-menu-toggle .site-menu-toggle__icon {
	margin: 0;
}

/* Centred whatever the display of the button; the two other bars are its shadows. */
.site-menu-toggle__bars {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 1.25rem;
	height: 2px;
	border-radius: 1px;
	background-color: currentColor;
	box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;
	translate: -50% -50%;
}

/* A word or an address longer than its line breaks instead of pushing the page wider than the screen. */
body {
	overflow-wrap: break-word;
}

/* A price in a card (Analyse de pratiques et supervision): the large figure of DESIGN.md, in Bleu pétrole. */
.lb-price {
	color: var(--wp--preset--color--muted);
}

.lb-price strong {
	display: block;
	color: var(--wp--preset--color--primary);
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
}