/**
 * Contenu éditorial : mise en page des blocs dans les pages et les articles.
 * Chargé sur les pages de contenu et dans l'éditeur.
 *
 * Sommaire
 * 1. Largeurs et rythme vertical
 * 2. Titres et textes
 * 3. Boutons
 * 4. Bannière (bloc Bannière / cover)
 * 5. Sections sombres
 * 6. Média et texte
 * 7. Témoignages
 * 8. Cartes d'articles
 * 9. Listes d'articles
 * 10. Article
 * 11. Impression et PDF
 * 12. Pages : bannière, frise, vidéos
 */

/* 1. Largeurs et rythme vertical ----------------------------------------- */

.entry-content > * {
	width: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
}

.entry-content > .alignwide {
	width: min(100% - 2 * var(--gutter), var(--wp--style--global--wide-size));
}

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

/* Dans une section pleine largeur, le contenu reprend la largeur du site. */
.entry-content > .alignfull.wp-block-group:not(.slideshow) > * {
	width: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
}

.section {
	padding-block: 64px;
}

/* Un bloc « média et texte » posé directement dans la page forme une section à lui seul. */
.entry-content > .wp-block-media-text {
	margin-block: 64px;
}

@media (min-width: 1024px) {
	.section {
		padding-block: 105px;
	}

	.entry-content > .wp-block-media-text {
		margin-block: 96px;
	}
}

/* En-tête des pages ordinaires (titre seul, sans bannière). */
.entry__header {
	padding-block: 48px 32px;
}

.entry__title {
	margin: 0;
	font-size: clamp(32px, 5vw, 44px);
}

.entry-content {
	padding-bottom: 72px;
}

.home .entry-content {
	padding-bottom: 0;
}

/* 2. Titres et textes ---------------------------------------------------- */

.entry-content h1,
.entry-content h2,
.entry-content h3 {
	margin-block: 0 0.6em;
	margin-block: 0 round(0.6em, 1px);
	text-wrap: balance;
}

.entry-content h1 {
	font-size: clamp(36px, 6vw, var(--wp--preset--font-size--xx-large));
}

.entry-content h2 {
	font-size: clamp(26px, 4vw, var(--wp--preset--font-size--x-large));
}

.entry-content h2.is-large {
	font-size: clamp(32px, 5vw, 48px);
}

.entry-content p {
	margin-block: 0 1.1em;
	margin-block: 0 round(1.1em, 1px);
}

.entry-content mark {
	background: none;
	color: var(--c-red);
}

/* Sur-titre rouge suivi d'un filet. */
.is-style-kicker,
.is-style-kicker-wide {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 40px;
	color: var(--c-red);
	font-family: var(--f-display);
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
}

.is-style-kicker::after,
.is-style-kicker-wide::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--c-line);
}

.is-style-kicker-wide {
	font-family: var(--f-body);
	font-size: 18px;
	letter-spacing: 0.3em;
}

/* Sur fond clair : texte noir, filet gris. Sur fond sombre : texte rouge, filet blanc. */
.is-style-kicker-wide {
	color: var(--c-black);
}

.has-ink-background-color .is-style-kicker-wide,
.has-black-background-color .is-style-kicker-wide,
.has-graphite-background-color .is-style-kicker-wide {
	color: var(--c-red);
}

.has-ink-background-color .is-style-kicker-wide::after,
.has-black-background-color .is-style-kicker-wide::after,
.has-graphite-background-color .is-style-kicker-wide::after {
	background: var(--c-white);
}

/* 3. Boutons ------------------------------------------------------------- */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 30px;
	/* 18 px et non 17 : avec une hauteur totale paire, le texte se centre au pixel près. */
	line-height: 18px;
	letter-spacing: 0;
	text-decoration: none;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.wp-block-button__link:hover {
	background: var(--c-ink);
	color: var(--c-white);
}

.is-style-white .wp-block-button__link,
.is-style-black .wp-block-button__link,
.is-style-gray .wp-block-button__link {
	border-radius: 0;
	font-weight: 400;
}

/* Flèche des boutons carrés : dessinée en CSS, rien à saisir dans l'éditeur. */
.has-arrow .wp-block-button__link::after {
	content: "";
	width: 12px;
	height: 12px;
	background: currentColor;
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 42% 92%, 76% 56%, 0 56%, 0 44%, 76% 44%, 42% 8%);
}

.is-style-white .wp-block-button__link {
	background: var(--c-white);
	color: var(--c-black);
}

.is-style-white .wp-block-button__link:hover {
	background: var(--c-red);
	color: var(--c-white);
}

.is-style-black .wp-block-button__link {
	background: var(--c-black);
	color: var(--c-white);
	font-weight: 700;
	/* 14 px comme les autres boutons : en 13 px, le texte ne peut pas être centré au pixel. */
	font-size: 14px;
	padding: 10px 23px;
}

.is-style-black .wp-block-button__link:hover,
.is-style-gray .wp-block-button__link:hover {
	background: var(--c-red);
}

.is-style-gray .wp-block-button__link {
	background: var(--c-gray);
	color: var(--c-white);
}

.is-style-outline .wp-block-button__link {
	padding: 12px 29px;
	border: 1px solid var(--c-black);
	background: transparent;
	color: var(--c-black);
	font-weight: 400;
}

.is-style-outline .wp-block-button__link:hover {
	background: var(--c-black);
	color: var(--c-white);
}

/* 4. Bannière ------------------------------------------------------------ */

.wp-block-cover.is-hero {
	min-height: clamp(380px, 60vw, 540px);
	padding: 0;
}

.wp-block-cover.is-hero .wp-block-cover__inner-container {
	width: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
	color: var(--c-white);
}

.wp-block-cover.is-hero h1 {
	margin-bottom: 0.9em;
	margin-bottom: round(0.9em, 1px);
	color: var(--c-white);
}

.wp-block-cover.is-hero .wp-block-buttons {
	gap: 16px 42px;
}

/* 5. Sections sombres ---------------------------------------------------- */

.has-ink-background-color,
.has-black-background-color,
.has-graphite-background-color {
	color: var(--c-white);
}

.has-ink-background-color :is(h1, h2, h3),
.has-black-background-color :is(h1, h2, h3),
.has-graphite-background-color :is(h1, h2, h3) {
	color: var(--c-white);
}

/* 6. Média et texte ------------------------------------------------------ */

.wp-block-media-text {
	gap: 32px 48px;
}

.wp-block-media-text > .wp-block-media-text__content {
	padding: 0;
}

.wp-block-media-text .wp-block-media-text__media img {
	width: 100%;
}

.wp-block-media-text.is-portrait .wp-block-media-text__media {
	aspect-ratio: 2 / 3;
	overflow: hidden;
}

.wp-block-media-text.is-portrait .wp-block-media-text__media img {
	height: 100%;
	object-fit: cover;
	object-position: 62% 50%;
}

@media (max-width: 767px) {
	.wp-block-media-text.is-stacked-on-mobile {
		grid-template-columns: 100% !important;
	}

	.wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__media {
		max-width: 420px;
	}
}

.has-text-align-justify {
	text-align: justify;
	hyphens: auto;
}

@media (max-width: 767px) {
	/* Le texte justifié fait des trous sur petit écran (audit mobile, page History). */
	.has-text-align-justify {
		text-align: left;
		hyphens: manual;
	}
}

/* 7. Témoignages --------------------------------------------------------- */

.wp-block-columns {
	gap: 40px 72px;
	margin-block: 0;
}

.wp-block-quote.is-style-testimonial {
	margin: 0 0 48px;
	padding: 0 12px;
	border: 0;
}

.wp-block-quote.is-style-testimonial p {
	margin-bottom: 16px;
	font-size: 19px;
	font-style: italic;
	line-height: 31px;
	letter-spacing: 0;
}

.wp-block-quote.is-style-testimonial cite {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 16px;
	font-size: 13px;
	font-style: normal;
	line-height: 1.5;
	line-height: round(1.5em, 1px);
	letter-spacing: 0;
	text-transform: uppercase;
}

/* Témoignage avec portrait : la photo ronde à gauche, la citation et le lien vers l'article à droite. */
.testimonial {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 0 20px;
	margin-bottom: 48px;
}

.testimonial > * {
	grid-column: 2;
	margin-block-start: 0;
}

.testimonial .testimonial__portrait {
	grid-column: 1;
	grid-row: 1 / span 2;
	margin: 0;
}

.testimonial .testimonial__portrait img {
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
}

.testimonial .wp-block-quote.is-style-testimonial {
	margin: 0;
	padding: 0;
}

.entry-content .testimonial__link {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 20px;
}

.testimonial__link a {
	color: inherit;
	text-underline-offset: 3px;
	transition: color var(--transition);
}

.testimonial__link a:hover {
	color: var(--c-red);
}

/* Sans portrait (version d'origine de l'accueil) : la citation reprend toute la largeur. */
.testimonial:not(:has(.testimonial__portrait)) {
	display: block;
}

@media (max-width: 599px) {
	.testimonial {
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 0 14px;
	}

	.testimonial .testimonial__portrait img {
		width: 48px;
		height: 48px;
	}
}

/* 8. Cartes d'articles --------------------------------------------------- */

.wp-block-post-template.is-layout-grid {
	gap: 22px 30px;
	margin: 0;
	padding: 0;
}

.post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 25px;
	border-radius: var(--wp--custom--radius--card);
	background: var(--c-white);
	box-shadow: var(--shadow-card);
	transition: box-shadow var(--transition), transform var(--transition);
}

.post-card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

.post-card {
	container-type: inline-size;
}

.post-card .wp-block-post-featured-image {
	margin: 0 0 30px;
	aspect-ratio: 4 / 3;
	/* Hauteur arrondie au pixel, comme pour les cartes produit. */
	height: round(75cqw, 1px);
	overflow: hidden;
	background: var(--c-mist);
}

.post-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-card .wp-block-post-title {
	margin: 0 20px 18px;
	font-family: var(--f-body);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	line-height: round(1.5em, 1px);
	letter-spacing: 0;
}

.post-card .wp-block-post-title a {
	display: -webkit-box;
	overflow: hidden;
	color: var(--c-black);
	text-decoration: none;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.post-card .wp-block-post-title a:hover {
	color: var(--c-red);
}

.post-card .wp-block-post-excerpt {
	margin: 0 20px 10px;
	font-size: 16px;
	line-height: 28px;
	letter-spacing: 0;
}

.post-card .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
}

@media (max-width: 1023px) {
	.wp-block-post-template.is-layout-grid.columns-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.wp-block-post-template.is-layout-grid.columns-3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

.post-card__date {
	margin: -10px 20px 12px;
	color: var(--c-gray);
	font-size: 13px;
	letter-spacing: 0;
}

/* 9. Listes d'articles ---------------------------------------------------- */

.page-banner {
	padding-block: 56px;
	background: var(--c-graphite);
	color: var(--c-white);
}

/* Avec photo : même gabarit que le bandeau des catégories de la boutique. */
.page-banner.has-image {
	position: relative;
	display: grid;
	align-items: center;
	min-height: clamp(220px, 32vw, 395px);
	background: var(--c-ink);
}

.page-banner__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.85;
}

.page-banner.has-image .page-banner__inner {
	position: relative;
	text-shadow: 0 1px 12px rgb(0 0 0 / 0.5);
}

.page-banner__title {
	margin: 0;
	color: var(--c-white);
	font-size: clamp(32px, 5vw, 44px);
	overflow-wrap: anywhere;
}

.page-banner__text {
	max-width: 640px;
	margin-top: 12px;
}

.page-banner__text p {
	margin: 0;
}

/* « .container » obligatoire : WordPress pose aussi la classe « archive » sur le body des rubriques. */
.container.archive {
	padding-block: 40px 80px;
}

.archive__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 40px;
}

.archive__filter {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 6px 20px;
	border: 1px solid var(--c-black);
	border-radius: var(--wp--custom--radius--button);
	color: var(--c-black);
	font-size: 14px;
	letter-spacing: 0;
	text-decoration: none;
	transition: background-color var(--transition), color var(--transition);
}

.archive__filter:hover,
.archive__filter.is-current {
	background: var(--c-black);
	color: var(--c-white);
}

.post-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 22px 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.post-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 48px;
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--c-line);
	border-radius: var(--wp--custom--radius--field);
	color: var(--c-black);
	font-size: 15px;
	letter-spacing: 0;
	text-decoration: none;
}

.pagination .page-numbers.current {
	border-color: var(--c-ink);
	background: var(--c-ink);
	color: var(--c-white);
}

/* 10. Article ------------------------------------------------------------- */

.container--narrow,
.entry-content--narrow > * {
	width: min(100% - 2 * var(--gutter), 860px);
}

.entry-content--narrow > .alignwide,
.entry-content--narrow > .alignfull {
	width: min(100% - 2 * var(--gutter), var(--container));
}

.entry__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
	color: var(--c-gray);
	font-size: 14px;
	letter-spacing: 0;
}

.entry__meta a {
	text-decoration: none;
}

.entry--post .entry-content img {
	margin-block: 8px;
}

.entry--post .entry-content .aligncenter {
	margin-inline: auto;
}

.entry--post .entry-content h2,
.entry--post .entry-content h3 {
	margin-top: 1.6em;
	margin-top: round(1.6em, 1px);
}

.entry--post .entry-content h3 {
	color: var(--c-black);
	font-size: 20px;
}

.entry--post .entry-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

.entry--post .entry-content td,
.entry--post .entry-content th {
	padding: 8px 12px;
	border: 1px solid var(--c-line);
	vertical-align: top;
}

.entry--post .entry-content blockquote {
	margin-block: 0 1.1em;
	margin-block: 0 round(1.1em, 1px);
	padding-left: 20px;
	border-left: 3px solid var(--c-red);
	font-style: italic;
}

.entry--post .entry-content iframe {
	max-width: 100%;
}

.has-text-align-center {
	text-align: center;
}

.has-text-align-right {
	text-align: right;
}

.entry__footer {
	padding-bottom: 80px;
}

.button-outline {
	display: inline-flex;
	align-items: center;
	/* 45 px et un pixel de moins en haut : seule combinaison qui centre le texte au demi-pixel. */
	min-height: 45px;
	padding: 9px 28px 10px;
	line-height: 18px;
	border: 1px solid var(--c-black);
	border-radius: var(--wp--custom--radius--button);
	background: transparent;
	color: var(--c-black);
	font-size: 14px;
	letter-spacing: 0;
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition);
}

.button-outline:hover {
	background: var(--c-black);
	color: var(--c-white);
}

.entry__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px 32px;
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--c-line);
	font-size: 15px;
	letter-spacing: 0;
}

.entry__nav a {
	color: var(--c-black);
	text-decoration: none;
}

.entry__nav a:hover {
	color: var(--c-red);
}

.entry__nav-next {
	margin-left: auto;
	text-align: right;
}

/* 11. Impression et PDF ---------------------------------------------------- */

@media print {
	.site-header,
	.site-footer,
	.entry__footer,
	.skip-link {
		display: none !important;
	}

	body {
		font-size: 11pt;
		line-height: 1.5;
		line-height: round(1.5em, 1px);
	}

	/* En-tête imprimé : le nom de la marque, dans sa police. */
	.entry--post::before {
		content: "SONOSAX";
		display: block;
		width: min(100% - 2 * var(--gutter), 860px);
		margin: 0 auto 16pt;
		padding-bottom: 8pt;
		border-bottom: 1pt solid #000;
		font-family: var(--f-display);
		font-size: 20pt;
	}

	.entry__header {
		padding-block: 0 12pt;
	}

	.entry-content {
		padding-bottom: 0;
	}

	.entry-content a {
		color: #000;
	}

	img,
	figure,
	blockquote,
	table {
		break-inside: avoid;
	}

	h1,
	h2,
	h3 {
		break-after: avoid;
	}
}

/* 12. Pages : bannière, frise, vidéos ------------------------------------- */

/* Bannière d'en-tête de page (bloc Bannière, classe « is-banner »). */
.wp-block-cover.is-banner {
	min-height: clamp(240px, 32vw, 450px);
	padding: 40px 0;
}

.wp-block-cover.is-banner .wp-block-cover__inner-container {
	width: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
	color: var(--c-white);
	text-shadow: 0 1px 12px rgb(0 0 0 / 0.55);
}

.wp-block-cover.is-banner :is(h1, h2) {
	margin-bottom: 0.5em;
	margin-bottom: round(0.5em, 1px);
	color: var(--c-white);
	font-size: clamp(28px, 4.2vw, 44px);
	overflow-wrap: anywhere;
}

.wp-block-cover.is-banner p:last-child {
	margin-bottom: 0;
}

/* Les sections d'une page se suivent sans double marge. */
.entry-content > .section:not(.has-background) + .section:not(.has-background) {
	padding-top: 0;
}

/* Une page sans bannière commence par un peu d'air sous l'en-tête. */
.entry-content > .section:first-child:not(.has-background) {
	padding-top: 56px;
}

.entry-content > .wp-block-cover + .section {
	padding-top: 64px;
}

/* Frise chronologique : grande année à gauche, filet vertical continu avec un repère rouge, texte à droite. */
.is-style-timeline {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 4px 0;
	padding: 0 0 40px 28px;
	border-left: 2px solid var(--c-line);
}

/* WordPress espace les blocs d'un groupe : ici la grille s'en charge. */
.is-style-timeline > * {
	margin-block-start: 0;
}

.is-style-timeline .timeline__year {
	position: relative;
	margin: 0;
	color: var(--c-red);
	font-size: 36px;
	line-height: 1.1;
	line-height: round(1.1em, 1px);
}

/* Repère de l'étape, posé sur le filet. */
.is-style-timeline .timeline__year::before {
	content: "";
	position: absolute;
	top: 0.5em;
	left: -36px;
	width: 14px;
	height: 14px;
	border: 3px solid var(--c-white);
	border-radius: 50%;
	background: var(--c-red);
	transform: translateY(-50%);
}

.is-style-timeline .timeline__body > :last-child {
	margin-bottom: 0;
}

.is-style-timeline h3 {
	margin: 0 0 13px;
	color: var(--c-black);
	font-size: 22px;
}

.is-style-timeline .is-style-kicker-wide {
	margin-bottom: 12px;
	font-size: 13px;
}

/* Les étapes se suivent sans la marge d'une section ordinaire : le filet reste continu. */
.entry-content > .section:has(> .is-style-timeline:only-child) {
	padding-block: 0;
}

.entry-content > .section:has(> .is-style-timeline:only-child):not(.section:has(> .is-style-timeline:only-child) + *) {
	padding-top: 64px;
}

.entry-content > .wp-block-cover + .section:has(> .is-style-timeline:only-child) {
	padding-top: 72px;
}

@media (min-width: 768px) {
	.is-style-timeline {
		grid-template-columns: 220px minmax(0, 640px);
		gap: 0;
		padding: 0;
		border-left: 0;
	}

	.is-style-timeline .timeline__year {
		padding-right: 48px;
		font-size: clamp(44px, 5vw, 64px);
		text-align: right;
	}

	.is-style-timeline .timeline__year::before {
		top: 0.5em;
		right: -8px;
		left: auto;
		z-index: 1;
	}

	.is-style-timeline .timeline__body {
		padding: 10px 0 72px 56px;
		border-left: 2px solid var(--c-line);
	}
}

/* Long texte (six paragraphes ou plus dans une section) : lignes limitées à une largeur lisible. */
.entry-content > .section:has(> p:nth-of-type(6)) > :is(p, h2, h3, ul, ol, figure) {
	max-width: 760px;
}

/* Photo dans un long texte : à la largeur de la colonne, coins arrondis comme les cartes. */
.entry-content > .section:has(> p:nth-of-type(6)) > .wp-block-image {
	margin-block: 40px 0;
}

.entry-content > .section:has(> p:nth-of-type(6)) > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--card);
}

.entry-content > .section:has(> p:nth-of-type(6)) > h2:not(:first-child) {
	margin-top: 1.6em;
	margin-top: round(1.6em, 1px);
}

/* Vidéos intégrées : toujours au format 16:9, jamais plus larges que leur colonne. */
.wp-block-embed {
	margin-block: 0 24px;
}

.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
}

.wp-block-embed.wp-has-aspect-ratio iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Repère provisoire pour un élément pas encore construit. */
.a-construire {
	padding: 20px;
	border: 2px dashed var(--c-red);
	color: var(--c-red);
	font-size: 15px;
	text-align: center;
}

.entry-content .wp-block-list {
	margin-block: 0 1.1em;
	margin-block: 0 round(1.1em, 1px);
	padding-left: 1.4em;
	padding-left: round(1.4em, 1px);
}

.entry-content .wp-block-image {
	margin-block: 0 24px;
}

.wp-block-column > .wp-block-buttons:only-child {
	justify-content: center;
}

/* Longues listes d'adresses (distributeurs) : deux colonnes sur grand écran, une seule sur mobile. */
@media (min-width: 900px) {
	.is-style-two-columns {
		column-count: 2;
		column-gap: 72px;
	}

	.is-style-two-columns > * {
		break-inside: avoid;
	}

	/* Les titres de région occupent toute la largeur : chaque région a ses distributeurs sous elle. */
	.is-style-two-columns > :is(h2, h3, h4) {
		column-span: all;
		margin-top: 1.2em;
		margin-top: round(1.2em, 1px);
	}
}

.entry-content a {
	overflow-wrap: anywhere;
}

/* Une rangée de boutons ne colle pas au bloc suivant. */
.entry-content .wp-block-buttons {
	margin-bottom: 40px;
}

.wp-block-cover .wp-block-buttons,
.is-style-overlay .wp-block-buttons,
.wp-block-media-text .wp-block-buttons {
	margin-bottom: 0;
}

/* Dans une page, un sur-titre qui ouvre une nouvelle partie prend de l'air au-dessus de lui. */
.section > .is-style-kicker-wide:not(:first-child) {
	margin-top: 72px;
}

/* 13. Formulaires (Forminator, sans son habillage) ------------------------- */

/* Couleurs du formulaire : valeurs pour fond clair, puis pour fond sombre. */
.forminator-ui {
	--field-bg: var(--c-mist);
	--field-border: var(--c-line);
	--field-border-strong: #b5b5b5;
	--field-text: var(--c-black);
	--field-muted: var(--c-gray);
	--chip-on-bg: var(--c-ink);
	--chip-on-text: var(--c-white);
	color: var(--field-text);
	font-size: 16px;
	letter-spacing: 0;
}

.has-graphite-background-color .forminator-ui,
.has-ink-background-color .forminator-ui,
.has-black-background-color .forminator-ui {
	--field-bg: rgb(255 255 255 / 0.06);
	--field-border: rgb(255 255 255 / 0.16);
	--field-border-strong: rgb(255 255 255 / 0.45);
	--field-text: var(--c-white);
	--field-muted: rgb(255 255 255 / 0.62);
	--chip-on-bg: var(--c-white);
	--chip-on-text: var(--c-black);
}

.forminator-ui .forminator-row {
	margin-bottom: 22px;
}

/* Deux champs côte à côte sur grand écran, l'un sous l'autre sur mobile. */
@media (min-width: 700px) {
	.forminator-ui .forminator-row {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: 20px;
	}
}

@media (max-width: 699px) {
	.forminator-ui .forminator-col + .forminator-col {
		margin-top: 22px;
	}
}

.forminator-ui .forminator-label {
	display: block;
	margin-bottom: 8px;
	color: var(--field-muted);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	line-height: round(1.3em, 1px);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.forminator-ui .forminator-required {
	color: var(--c-red);
}

.forminator-ui .forminator-input,
.forminator-ui .forminator-textarea,
.forminator-ui select {
	width: 100%;
	min-height: 52px;
	padding: 12px 16px;
	border: 1px solid var(--field-border);
	border-radius: var(--wp--custom--radius--field);
	background-color: var(--field-bg);
	color: var(--field-text);
	font: inherit;
	/* Hauteur de ligne entière : le champ mesure un nombre entier de pixels. */
	line-height: 28px;
	transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}

/* En bloc : sans cela, la zone de texte laisse sous elle l'espace d'un jambage, à virgule. */
.forminator-ui .forminator-textarea {
	display: block;
}

.forminator-ui .forminator-input:hover,
.forminator-ui .forminator-textarea:hover,
.forminator-ui select:hover {
	border-color: var(--field-border-strong);
}

.forminator-ui .forminator-textarea {
	min-height: 150px;
	resize: vertical;
}

.forminator-ui select {
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px;
	appearance: none;
}

.forminator-ui select option {
	color: var(--c-black);
}

.forminator-ui .forminator-input:focus,
.forminator-ui .forminator-textarea:focus,
.forminator-ui select:focus {
	border-color: var(--c-red);
	outline: 0;
	box-shadow: 0 0 0 3px rgb(200 16 46 / 0.3);
}

/* Type de demande : des pastilles à choisir plutôt que des boutons radio. */
.forminator-ui .forminator-field-radio .forminator-field,
.forminator-ui [role="radiogroup"] {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.forminator-ui .forminator-field-radio .forminator-label {
	flex-basis: 100%;
	margin-bottom: 0;
}

.forminator-ui .forminator-radio {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 45px;
	margin: 0;
	padding: 8px 18px;
	border: 1px solid var(--field-border-strong);
	border-radius: var(--wp--custom--radius--button);
	color: var(--field-text);
	font-size: 15px;
	/* Texte de 15 px centré au pixel : ligne de 27 px dans une pastille de 45 px. */
	line-height: 27px;
	cursor: pointer;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.forminator-ui .forminator-radio:hover {
	border-color: var(--c-red);
}

.forminator-ui .forminator-radio input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.forminator-ui .forminator-radio-bullet,
.forminator-ui .forminator-checkbox-box {
	display: none;
}

.forminator-ui .forminator-radio:has(input:checked) {
	border-color: var(--chip-on-bg);
	background: var(--chip-on-bg);
	color: var(--chip-on-text);
}

.forminator-ui .forminator-radio:has(input:focus-visible) {
	outline: 2px solid var(--c-red);
	outline-offset: 2px;
}

/* Consentement : toute la ligne est cliquable. */
.forminator-ui .forminator-field-consent .forminator-label {
	display: none;
}

.forminator-ui .forminator-checkbox__wrapper {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 14px;
	line-height: 1.5;
	line-height: round(1.5em, 1px);
	color: var(--field-muted);
}

.forminator-ui .forminator-checkbox {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	cursor: pointer;
}

.forminator-ui .forminator-checkbox input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--c-red);
}

.forminator-ui .forminator-checkbox__label p {
	margin: 0;
}

.forminator-ui .forminator-checkbox__label a {
	color: var(--field-text);
}

/* Zone de dépôt des pièces jointes. */
.forminator-ui .forminator-multi-upload {
	position: relative;
	display: grid;
	/* La colonne ne s'élargit pas au-delà de la zone : le champ de fichier se tasse sur petit écran. */
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: 10px;
	padding: 26px 20px;
	border: 2px dashed var(--field-border-strong);
	border-radius: var(--wp--custom--radius--card);
	background: var(--field-bg);
	text-align: center;
	transition: border-color var(--transition), background-color var(--transition);
}

.forminator-ui .forminator-multi-upload:hover,
.forminator-ui .forminator-multi-upload:focus-within {
	border-color: var(--c-red);
}

/* Pictogramme « envoyer un fichier ». */
.forminator-ui .forminator-multi-upload::before {
	content: "";
	width: 28px;
	height: 28px;
	background: var(--field-muted);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4m0 0L7.5 8.5M12 4l4.5 4.5M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.forminator-ui .forminator-multi-upload input[type="file"] {
	display: block;
	max-width: 100%;
	line-height: 22px;
	color: var(--field-muted);
	font-size: 14px;
	cursor: pointer;
}

.forminator-ui .forminator-multi-upload input[type="file"]::file-selector-button {
	margin-right: 14px;
	padding: 9px 18px;
	border: 1px solid var(--field-border-strong);
	border-radius: var(--wp--custom--radius--button);
	background: transparent;
	color: var(--field-text);
	font: inherit;
	cursor: pointer;
}

.forminator-ui .forminator-uploaded-files {
	margin: 12px 0 0;
	padding: 0;
	font-size: 14px;
	list-style: none;
}

.forminator-ui .forminator-description {
	display: block;
	margin-top: 8px;
	color: var(--field-muted);
	font-size: 13px;
	line-height: 22px;
}

.forminator-ui .forminator-error-message {
	display: block;
	margin-top: 6px;
	color: #ff6b81;
	font-size: 13px;
}

.forminator-ui .forminator-has_error .forminator-input,
.forminator-ui .forminator-has_error .forminator-textarea,
.forminator-ui .forminator-has_error select {
	border-color: #ff6b81;
}

.forminator-ui .forminator-response-message {
	margin-bottom: 20px;
	padding: 14px 18px;
	border-left: 4px solid var(--c-red);
	border-radius: 0 var(--wp--custom--radius--field) var(--wp--custom--radius--field) 0;
	background: var(--field-bg);
}

.forminator-ui .forminator-response-message:empty {
	display: none;
}

.forminator-ui .forminator-response-message p {
	margin: 0;
}

/* Bouton d'envoi, avec sa flèche. */
.forminator-ui .forminator-button-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	/* Une ligne de 21 px centre le texte de 17 px dans les 60 px du bouton. */
	min-height: 60px;
	padding: 0 28px;
	border: 0;
	border-radius: var(--wp--custom--radius--button);
	background: var(--c-red);
	color: var(--c-white);
	font-size: 17px;
	font-weight: 700;
	line-height: 21px;
	cursor: pointer;
	transition: background-color var(--transition), transform var(--transition);
}

.forminator-ui .forminator-button-submit::after {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 42% 92%, 76% 56%, 0 56%, 0 44%, 76% 44%, 42% 8%);
	transition: transform var(--transition);
}

.forminator-ui .forminator-button-submit:hover {
	background: #a90d27;
}

.forminator-ui .forminator-button-submit:hover::after {
	transform: translateX(4px);
}

.forminator-ui .forminator-button-submit:active {
	transform: translateY(1px);
}

/* Champ invisible qui piège les robots. */
.forminator-ui .forminator-hidden {
	display: none !important;
}

.has-graphite-background-color a,
.has-ink-background-color a {
	color: var(--c-white);
}

/* Page Contact : texte et coordonnées à gauche, formulaire dans un panneau à droite. */
.contact-panel .wp-block-columns {
	gap: 40px 72px;
	align-items: flex-start;
}

.contact-panel h2 {
	margin-bottom: 0.5em;
	margin-bottom: round(0.5em, 1px);
	font-size: clamp(32px, 4.4vw, 52px);
	line-height: 1.02;
	line-height: round(1.02em, 1px);
}

.contact-panel .contact-panel__lead {
	max-width: 30em;
	color: rgb(255 255 255 / 0.75);
}

.contact-panel .contact-list {
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

.contact-panel .contact-list li {
	padding: 18px 0;
	border-top: 1px solid rgb(255 255 255 / 0.14);
	font-size: 17px;
	line-height: 1.5;
	line-height: round(1.5em, 1px);
}

.contact-panel .contact-list li:last-child {
	border-bottom: 1px solid rgb(255 255 255 / 0.14);
}

/* Libellé de chaque coordonnée (mis en gras dans l'éditeur). */
.contact-panel .contact-list strong {
	display: block;
	margin-bottom: 2px;
	color: var(--c-red);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.contact-panel .contact-list a {
	text-decoration: none;
}

.contact-panel .contact-list a:hover {
	color: var(--c-red);
}

.contact-panel .contact-panel__form {
	padding: 24px 20px;
	border: 1px solid rgb(255 255 255 / 0.1);
	border-radius: var(--wp--custom--radius--card);
	background: rgb(255 255 255 / 0.035);
}

@media (min-width: 782px) {
	.contact-panel .contact-panel__form {
		padding: 40px;
	}

	/* Le texte de gauche reste visible pendant qu'on remplit le formulaire. */
	.contact-panel .wp-block-column:first-child {
		position: sticky;
		top: calc(var(--header-height) + 32px);
	}
}

/* 14. Schéma de l'écosystème (groupe, style « Ecosystem diagram ») ---------- */

/* Mobile : l'appareil central, puis ses modules reliés par un filet vertical. */
.is-style-ecosystem {
	--eco-line: var(--c-black);
	display: grid;
	gap: 20px;
	margin-block: 0 80px;
}

.is-style-ecosystem > * {
	margin-block-start: 0;
}

.is-style-ecosystem :is(.ecosystem__core, .ecosystem__module) {
	position: relative;
	padding: 20px;
	border-radius: var(--wp--custom--radius--card);
	background: var(--c-white);
	box-shadow: var(--shadow-card);
}

.is-style-ecosystem .ecosystem__core {
	border: 2px solid var(--c-red);
	text-align: center;
}

.is-style-ecosystem .wp-block-image {
	margin: 0 0 12px;
}

.is-style-ecosystem .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

.is-style-ecosystem :is(h2, h3) {
	margin: 0 0 6px;
	color: var(--c-black);
	font-size: 22px;
	/* Une référence ne se coupe jamais en deux (audit MOB-013). */
	white-space: nowrap;
}

.is-style-ecosystem .ecosystem__core h2 {
	font-size: 30px;
}

.is-style-ecosystem :is(h2, h3) a {
	color: inherit;
	text-decoration: none;
}

.is-style-ecosystem :is(h2, h3) a:hover {
	color: var(--c-red);
}

.is-style-ecosystem p {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	line-height: round(1.5em, 1px);
	letter-spacing: 0;
}

.is-style-ecosystem .ecosystem__module {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 0 16px;
	align-items: center;
	margin-left: 24px;
}

.is-style-ecosystem .ecosystem__module .wp-block-image {
	grid-row: span 2;
	margin: 0;
}

/* Filet qui relie chaque module au précédent, jusqu'à l'appareil central. */
.is-style-ecosystem .ecosystem__module::before {
	content: "";
	position: absolute;
	top: -20px;
	bottom: 50%;
	left: -24px;
	width: 24px;
	border-bottom: 2px solid var(--eco-line);
	border-left: 2px solid var(--eco-line);
}

.is-style-ecosystem .ecosystem__module + .ecosystem__module::before {
	top: calc(-50% - 20px);
}

/* Grand écran : schéma en étoile, modules à gauche et à droite de l'appareil central. */
@media (min-width: 900px) {
	/* Trois rangées : jusqu'à six modules, trois de chaque côté. */
	.is-style-ecosystem {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
		grid-template-rows: repeat(3, auto);
		gap: 28px 72px;
		align-items: center;
	}

	/* L'appareil central occupe toute la hauteur : chaque filet le rejoint. */
	.is-style-ecosystem .ecosystem__core {
		display: flex;
		flex-direction: column;
		justify-content: center;
		grid-column: 2;
		grid-row: 1 / -1;
		align-self: stretch;
		padding: 32px;
	}

	.is-style-ecosystem .ecosystem__module {
		display: block;
		margin-left: 0;
	}

	.is-style-ecosystem .ecosystem__module .wp-block-image {
		margin: 0 0 12px;
	}

	.is-style-ecosystem .ecosystem__module .wp-block-image img {
		aspect-ratio: 16 / 9;
	}

	/* Modules pairs à gauche, impairs à droite (l'appareil central est le premier bloc). */
	.is-style-ecosystem .ecosystem__module:nth-child(even) {
		grid-column: 1;
	}

	.is-style-ecosystem .ecosystem__module:nth-child(odd) {
		grid-column: 3;
	}

	.is-style-ecosystem .ecosystem__module::before,
	.is-style-ecosystem .ecosystem__module + .ecosystem__module::before {
		top: 50%;
		bottom: auto;
		width: 72px;
		border: 0;
		border-top: 2px solid var(--eco-line);
	}

	.is-style-ecosystem .ecosystem__module:nth-child(even)::before {
		right: -72px;
		left: auto;
	}

	.is-style-ecosystem .ecosystem__module:nth-child(odd)::before {
		left: -72px;
	}
}

/* 15. Distributeurs : cartes par région -------------------------------------- */

.distributors h2 {
	margin-bottom: 28px;
	font-size: clamp(30px, 4vw, 44px);
}

/* Accès direct à chaque région. */
.entry-content .distributors__nav {
	gap: 10px;
	margin-bottom: 8px;
}

.distributors__nav .wp-block-button__link {
	min-height: 44px;
	padding: 8px 20px;
}

.distributors .distributors__region {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 56px 0 24px;
	color: var(--c-black);
	font-size: 24px;
	scroll-margin-top: calc(var(--header-height) + 24px);
}

.distributors .distributors__region::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--c-line);
}

.distributor-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 20px;
}

.distributor-grid > * {
	margin-block-start: 0;
}

.distributor-card {
	display: flex;
	flex-direction: column;
	padding: 25px;
	border-radius: var(--wp--custom--radius--card);
	background: var(--c-white);
	box-shadow: var(--shadow-card);
	font-size: 15px;
	line-height: 1.6;
	line-height: round(1.6em, 1px);
	letter-spacing: 0;
	transition: box-shadow var(--transition), transform var(--transition);
}

.distributor-card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

.distributor-card > * {
	margin-block-start: 0;
}

.entry-content .distributor-card p {
	margin: 0 0 12px;
}

.entry-content .distributor-card .distributor-card__country {
	margin-bottom: 6px;
	color: var(--c-red);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.entry-content .distributor-card h4 {
	margin: 0 0 10px;
	font-family: var(--f-body);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	line-height: round(1.3em, 1px);
	letter-spacing: 0;
}

.distributor-card .distributor-card__address {
	color: var(--c-gray);
}

.distributor-card a {
	color: var(--c-black);
	text-decoration-color: var(--c-line);
	text-underline-offset: 3px;
}

.distributor-card a:hover {
	color: var(--c-red);
	text-decoration-color: currentColor;
}

/* Lien vers le site du distributeur, toujours en bas de la carte. */
.entry-content .distributor-card .distributor-card__site {
	margin: auto 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--c-line);
	font-weight: 700;
}

.distributor-card__site a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

.distributor-card__site a::after {
	content: "";
	width: 11px;
	height: 11px;
	background: currentColor;
	clip-path: polygon(20% 0, 100% 0, 100% 80%, 86% 80%, 86% 24%, 10% 100%, 0 90%, 76% 14%, 20% 14%);
}

/* Galeries d'images des articles (shortcode natif [gallery]). */
.entry-content .gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-block: 0 24px;
}

.entry-content .gallery br {
	display: none;
}

.entry-content .gallery .gallery-item {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

.entry-content .gallery img {
	width: 100%;
	height: auto;
	margin: 0;
	border: 0 !important;
}

.entry-content .gallery-caption {
	margin: 6px 0 0;
	color: var(--c-gray);
	font-size: 13px;
	letter-spacing: 0;
}

/* 16. PDF affichés dans les articles (plugin sonosax-core) -------------------- */

.entry-content--narrow > .pdf-viewer {
	width: min(100% - 2 * var(--gutter), var(--container));
	margin-block: 40px 0;
}

.pdf-viewer {
	overflow: hidden;
	border: 1px solid var(--c-line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--c-mist);
}

.pdf-viewer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--c-line);
	background: var(--c-white);
	font-size: 15px;
	letter-spacing: 0;
}

.pdf-viewer__title {
	font-weight: 700;
}

.pdf-viewer__actions {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pdf-viewer__open {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 3px 12px;
	color: var(--c-black);
	font-size: 13px;
}

.pdf-viewer .download-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 3px 12px;
	border: 1px solid var(--c-red);
	border-radius: var(--wp--custom--radius--button);
	color: var(--c-red);
	font-size: 13px;
	line-height: 20px;
	text-decoration: none;
}

.pdf-viewer .download-button:hover {
	background: var(--c-red);
	color: var(--c-white);
}

/* Mobile : aperçu de la première page. Les navigateurs mobiles n'affichent pas un PDF dans une page. */
.pdf-viewer__frame {
	display: none;
	width: 100%;
	height: min(85vh, 1100px);
	border: 0;
}

.pdf-viewer__poster {
	position: relative;
	display: block;
}

.entry--post .entry-content .pdf-viewer__poster img {
	width: 100%;
	height: auto;
	margin: 0;
}

.pdf-viewer__poster span {
	position: absolute;
	right: 12px;
	bottom: 12px;
	padding: 8px 16px;
	border-radius: var(--wp--custom--radius--button);
	background: rgb(0 0 0 / 0.78);
	color: var(--c-white);
	font-size: 13px;
	letter-spacing: 0;
}

/* Ordinateur (écran large et souris) : lecteur intégré. */
@media (min-width: 900px) and (hover: hover) {
	.pdf-viewer__frame {
		display: block;
	}

	.pdf-viewer__poster {
		display: none;
	}
}

@media print {
	.pdf-viewer {
		display: none;
	}
}

/* Sécurité : aucun bloc de premier niveau ne perd son centrage, quelle que soit la règle qui le style. */
.entry-content > :is(figure, ul, ol, dl, table, blockquote, pre, .wp-block-image, .wp-block-embed, .wp-block-list, .gallery) {
	margin-inline: auto;
}

/* 17. Image encadrée (bloc Image, style « Framed ») ---------------------------- */

/* Toutes les photos occupent le même cadre, quelle que soit leur taille ou leur format :
   les blocs image et texte s'alignent d'une rangée à l'autre. */
.wp-block-image.is-style-framed {
	--cadre-marge: clamp(20px, 4vw, 48px);
	position: relative;
	aspect-ratio: 4 / 3;
	margin: 0;
	border-radius: var(--wp--custom--radius--card);
	background: var(--c-mist);
}

/* La photo tient entièrement dans le cadre, qu'elle soit large ou haute. */
.wp-block-image.is-style-framed img {
	position: absolute;
	inset: var(--cadre-marge);
	width: calc(100% - 2 * var(--cadre-marge));
	height: calc(100% - 2 * var(--cadre-marge));
	object-fit: contain;
	/* Le fond blanc des photos produit se fond dans le cadre gris clair. */
	mix-blend-mode: multiply;
}

/* Rangées image + texte : centrées en hauteur, séparées par un filet. */
.wp-block-columns:has(> .wp-block-column > .is-style-framed) {
	align-items: center;
	gap: 32px 72px;
	padding-block: 56px;
	border-top: 1px solid var(--c-line);
}

/* WordPress impose l'alignement des colonnes en haut : on centre chaque colonne elle-même. */
.wp-block-columns:has(> .wp-block-column > .is-style-framed) > .wp-block-column {
	align-self: center;
}

.wp-block-columns:has(> .wp-block-column > .is-style-framed) .wp-block-column > :last-child {
	margin-bottom: 0;
}

.wp-block-columns:has(> .wp-block-column > .is-style-framed) h2 {
	font-size: clamp(24px, 3vw, 32px);
}

/* 18. Page introuvable ---------------------------------------------------- */

.error-404 {
	/* Durée d'un temps : le script l'aligne sur le tempo quand la musique joue. */
	--beat: 0.55s;
	max-width: 760px;
	padding-block: clamp(56px, 10vw, 128px);
	text-align: center;
}

/* La scène : les chiffres en décor, posés sur une ligne de sol, et le preneur de son qui passe devant. */
.error-404__scene {
	position: relative;
	cursor: pointer;
	container-type: inline-size;
	margin-bottom: 16px;
	border-bottom: 3px solid var(--c-black);
	font-size: clamp(96px, 20vw, 168px);
	overflow: hidden;
	/* Le personnage apparaît et disparaît en fondu sur les bords. */
	mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.error-404__code {
	display: flex;
	justify-content: center;
	margin: 0;
	padding-top: 0.62em;
	color: var(--c-line);
	font-size: 1em;
	line-height: 0.82;
}

.error-404__digit {
	display: inline-block;
	transform-origin: 50% 100%;
}

.error-404__walker {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 1.5em;
	color: var(--c-black);
	/* Traversée de la scène, de gauche à droite, en seize pas. */
	transform: translateX(-100%);
	animation: walker-cross calc(var(--beat) * 32) linear infinite;
}

/* Bouton de la musique, sous la scène. */
.error-404__listener {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	margin-bottom: 28px;
	padding: 8px 16px;
	border: 1px solid var(--c-line);
	border-radius: var(--wp--custom--radius--button);
	background: var(--c-white);
	color: var(--c-black);
	font-size: 14px;
	line-height: 18px;
	cursor: pointer;
	transition: border-color var(--transition), background-color var(--transition), color var(--transition);
}

.error-404__listener:hover,
.error-404__listener[aria-pressed="true"] {
	border-color: var(--c-black);
	background: var(--c-black);
	color: var(--c-white);
}

.error-404__listener:focus-visible {
	outline: 2px solid var(--c-red);
	outline-offset: 2px;
}

.walker {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* Cycle de marche : un pas par temps, le corps monte à chaque appui. */
.walker__body {
	animation: walker-bob var(--beat) ease-in-out infinite;
}

.walker__leg {
	transform-origin: 80px 142px;
	animation: walker-thigh calc(var(--beat) * 2) ease-in-out infinite;
}

.walker__shin {
	transform-origin: 80px 180px;
	animation: walker-shin calc(var(--beat) * 2) ease-in-out infinite;
}

.walker__leg--back,
.walker__leg--back .walker__shin {
	animation-delay: calc(var(--beat) * -1);
}

.walker__boom {
	transform-origin: 80px 19px;
	animation: walker-boom calc(var(--beat) * 2) ease-in-out infinite;
}

.walker__head {
	transform-origin: 84px 80px;
	animation: walker-look calc(var(--beat) * 8) ease-in-out infinite;
}

.walker__note,
.walker__wave {
	opacity: 0;
}

.walker__cup,
.walker__waves {
	transform-origin: 78px 60px;
}

.error-404__title {
	margin: 0 0 12px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}

.error-404 .wp-block-button {
	margin-top: 24px;
}

/* Musique lancée : il s'arrête où il est et danse, les chiffres aussi. */
.error-404.is-playing .error-404__walker {
	animation-play-state: paused;
}

/* L'écouteur bat au rythme, les ondes s'en échappent. */
.error-404.is-playing .walker__cup {
	animation: walker-cup var(--beat) ease-out infinite;
}

.error-404.is-playing .walker__wave {
	animation: walker-wave var(--beat) ease-out infinite;
}

.error-404.is-playing .walker__wave--2 {
	animation-delay: calc(var(--beat) * 0.2);
}

.error-404.is-playing .walker__body {
	animation-name: walker-bounce;
}

.error-404.is-playing .walker__leg {
	animation-name: walker-dance-leg;
	animation-duration: var(--beat);
}

.error-404.is-playing .walker__shin {
	animation-name: walker-dance-shin;
	animation-duration: var(--beat);
}

.error-404.is-playing .walker__leg--back {
	animation-name: walker-dance-leg-back;
}

/* Les genoux plient l'un après l'autre. */
.error-404.is-playing .walker__leg--back,
.error-404.is-playing .walker__leg--back .walker__shin {
	animation-delay: calc(var(--beat) * -0.5);
}

.error-404.is-playing .walker__boom {
	animation-name: walker-boom-dance;
	animation-duration: var(--beat);
}

.error-404.is-playing .walker__head {
	animation-name: walker-nod;
	animation-duration: var(--beat);
}

.error-404.is-playing .walker__mouth {
	d: path("M94 63q4.5 7 9 0z");
	fill: currentColor;
}

.error-404.is-playing .walker__note {
	animation: walker-note calc(var(--beat) * 2) ease-out infinite;
}

.error-404.is-playing .walker__note--2 {
	animation-delay: var(--beat);
}

.error-404.is-playing .error-404__digit {
	animation: walker-digit var(--beat) ease-in-out infinite;
}

.error-404.is-playing .error-404__digit:nth-child(2) {
	animation-delay: calc(var(--beat) * -0.33);
}

.error-404.is-playing .error-404__digit:nth-child(3) {
	animation-delay: calc(var(--beat) * -0.66);
}

@keyframes walker-cross {
	to {
		transform: translateX(100cqw);
	}
}

@keyframes walker-bob {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-5px);
	}
}

/* Angle négatif : la jambe part vers l'avant. */
@keyframes walker-thigh {
	0%,
	100% {
		transform: rotate(-30deg);
	}

	50% {
		transform: rotate(26deg);
	}
}

/* Le genou plie pendant que la jambe revient vers l'avant. */
@keyframes walker-shin {
	0%,
	100% {
		transform: rotate(4deg);
	}

	45% {
		transform: rotate(14deg);
	}

	72% {
		transform: rotate(62deg);
	}
}

@keyframes walker-boom {
	0%,
	100% {
		transform: rotate(-2deg);
	}

	50% {
		transform: rotate(2.5deg);
	}
}

/* Il cherche : un regard vers le haut, un regard vers le bas. */
@keyframes walker-look {
	0%,
	35%,
	100% {
		transform: rotate(0deg);
	}

	45%,
	60% {
		transform: rotate(-14deg);
	}

	72%,
	88% {
		transform: rotate(12deg);
	}
}

@keyframes walker-bounce {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(9px);
	}
}

@keyframes walker-dance-leg {
	0%,
	100% {
		transform: rotate(-6deg);
	}

	50% {
		transform: rotate(-24deg);
	}
}

/* La jambe de derrière danse écartée de l'autre. */
@keyframes walker-dance-leg-back {
	0%,
	100% {
		transform: rotate(12deg);
	}

	50% {
		transform: rotate(30deg);
	}
}

@keyframes walker-dance-shin {
	0%,
	100% {
		transform: rotate(6deg);
	}

	50% {
		transform: rotate(46deg);
	}
}

@keyframes walker-boom-dance {
	0%,
	100% {
		transform: rotate(-9deg);
	}

	50% {
		transform: rotate(5deg);
	}
}

@keyframes walker-nod {
	0%,
	100% {
		transform: rotate(-6deg);
	}

	50% {
		transform: rotate(10deg);
	}
}

@keyframes walker-note {
	0% {
		opacity: 0;
		transform: translate(0, 18px) rotate(-8deg);
	}

	25% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translate(10px, -30px) rotate(14deg);
	}
}

@keyframes walker-cup {
	0% {
		transform: scale(1.18);
	}

	60%,
	100% {
		transform: scale(1);
	}
}

@keyframes walker-wave {
	0% {
		opacity: 0;
		transform: translateX(6px);
	}

	30% {
		opacity: 0.9;
	}

	100% {
		opacity: 0;
		transform: translateX(-7px);
	}
}

@keyframes walker-digit {
	0%,
	100% {
		transform: scale(1, 1);
	}

	20% {
		transform: scale(1.06, 0.9);
	}

	55% {
		transform: scale(0.96, 1.07) rotate(-3deg);
	}
}

/* Mouvement réduit demandé par le visiteur : le personnage reste debout à gauche, la musique reste possible. */
@media (prefers-reduced-motion: reduce) {
	.error-404 * {
		animation: none !important;
	}

	.error-404__walker {
		transform: translateX(10cqw);
	}
}

/* 19. Apparitions au défilement -------------------------------------------- */

/*
 * Accueil : chaque section monte doucement en entrant dans l'écran, les cartes l'une après l'autre.
 * Tout est en CSS, piloté par le défilement (animation-timeline). Un navigateur qui ne connaît pas
 * cette fonction, ou un visiteur qui demande moins de mouvement, voit la page sans animation.
 */
@supports (animation-timeline: view()) {
	@media screen and (prefers-reduced-motion: no-preference) {
		.home .entry-content > :is(.wp-block-group, .wp-block-media-text) > :is(p, h2, h3, .wp-block-buttons, .wp-block-media-text__media, .wp-block-media-text__content),
		.home .entry-content :is(ul.products > li, .testimonial, .wp-block-post) {
			animation: reveal-up linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 55%;
		}

		/* Frise : chaque étape arrive en entrant dans l'écran, son repère grossit. */
		.is-style-timeline :is(.timeline__year, .timeline__body > *) {
			animation: reveal-up linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 60%;
		}

		/* Dans une rangée, les cartes arrivent l'une après l'autre. */
		.home .entry-content :is(ul.products > li, .wp-block-post):nth-child(3n + 2) {
			animation-range: entry 12% entry 67%;
		}

		.home .entry-content :is(ul.products > li, .wp-block-post):nth-child(3n) {
			animation-range: entry 24% entry 79%;
		}

		/* Bandeau : la photo recule lentement, le titre et les boutons montent à l'arrivée sur la page. */
		.wp-block-cover.is-hero .wp-block-cover__image-background {
			animation: hero-settle 7s cubic-bezier(0.2, 0.6, 0.2, 1) both;
		}

		.wp-block-cover.is-hero .wp-block-cover__inner-container > * {
			animation: hero-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
		}

		.wp-block-cover.is-hero .wp-block-cover__inner-container > :nth-child(2) {
			animation-delay: 0.15s;
		}
	}
}

@keyframes reveal-up {
	from {
		opacity: 0;
		transform: translateY(36px);
	}

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

@keyframes hero-settle {
	from {
		transform: scale(1.08);
	}

	to {
		transform: none;
	}
}

/* Sans fondu : le titre reste visible dès la première image, pour ne pas retarder l'affichage mesuré. */
@keyframes hero-rise {
	from {
		transform: translateY(28px);
	}

	to {
		transform: none;
	}
}


/* 20. Article protégé par mot de passe --------------------------------------- */

/* Le formulaire natif de WordPress, aux champs et boutons du site. */
.post-password-form p:last-of-type {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin-top: 24px;
}

.post-password-form label {
	display: grid;
	flex: 1 1 220px;
	gap: 6px;
	max-width: 360px;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
}

.post-password-form input[type="password"] {
	width: 100%;
	height: 52px;
	padding: 0 16px;
	border: 1px solid #b5b5b5;
	border-radius: var(--wp--custom--radius--field);
	background: var(--c-mist);
	font-size: 16px;
	font-weight: 400;
}

.post-password-form input[type="submit"] {
	height: 52px;
	padding: 0 28px;
	border: 0;
	border-radius: var(--wp--custom--radius--button);
	background: var(--c-red);
	color: var(--c-white);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color var(--transition);
}

.post-password-form input[type="submit"]:hover {
	background: #a90d27;
}