/*
 * Mélody Blocquel — version retenue.
 * La base de A (nom, menu, barre de contacts, mises en page, typographie) et, de B, les gestes choisis par Mélody :
 * aplat de couleur derrière les photos, lueur derrière le titre des pages, fil dessiné entre les parties, photo qui
 * reste à l'écran pendant qu'on lit. Sur la page Livres (modèle « Page en vert »), le vert prend la place du rose.
 * Sans animation (mouvement réduit, éditeur, navigateur qui ne les connaît pas), tout est déjà dans son état final.
 */

/* Position de l'aplat derrière les photos (l'animation la fait varier). */
@property --lumiere-x {
	syntax: "<length>";
	inherits: false;
	initial-value: 14px;
}

@property --lumiere-y {
	syntax: "<length>";
	inherits: false;
	initial-value: 14px;
}

:root {
	--melody-filet: color-mix(in srgb, var(--wp--preset--color--encre) 12%, transparent);
	--melody-barre: 3.25rem;
	--melody-fil-marge: clamp(2rem, 5vw, 3.5rem);
}

/* Vert à la place du rose : page Livres, ou toute page réglée sur le modèle « Page en vert » (dans l'éditeur aussi :
 * melody-core pose alors melody-vert sur la zone d'écriture). */
body.page-template-page-vert,
.melody-vert,
.melody-vert body {
	--wp--custom--accent--aplat: var(--wp--preset--color--vert);
	--wp--custom--accent--soutenu: var(--wp--preset--color--vert-soutenu);
	--wp--custom--accent--pale: var(--wp--preset--color--vert-pale);
	--wp--custom--accent--titre: var(--wp--preset--color--vert-fonce);
}

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

/* Place de la barre de défilement toujours réservée : une page courte (accueil, contact) ne se décale pas de
 * quelques pixels par rapport aux pages longues. */
html {
	scrollbar-gutter: stable;
}

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

::selection {
	background: var(--wp--custom--accent--aplat);
	color: var(--wp--preset--color--encre);
}

p,
li {
	text-wrap: pretty;
}

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

strong,
b {
	font-weight: 600;
}

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--encre);
	outline-offset: 3px;
}

:where(.wp-block-post-content, .melody-credits, .melody-pied__mentions) a:where(:not(.wp-element-button)) {
	text-decoration-color: var(--wp--custom--accent--soutenu);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

:where(.wp-block-post-content) a:where(:not(.wp-element-button)):hover {
	text-decoration-color: currentColor;
}

.visuellement-cache {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------- En-tête */

.melody-entete {
	padding-top: clamp(1rem, 2.5vw, 1.75rem);
	padding-bottom: clamp(0.5rem, 1.5vw, 1rem);
}

.melody-entete__barre {
	gap: 1rem 2.5rem;
}

/* Nom : encadré rose aux bords arrondis, sur une seule ligne, en noir. */
.melody-nom {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
}

.melody-nom a {
	display: block;
	padding: 0.6em 0.95em 0.55em;
	white-space: nowrap;
	border-radius: 14px;
	background: var(--wp--custom--accent--aplat);
	color: var(--wp--preset--color--encre);
	text-decoration: none;
	transition: background-color 0.25s ease;
}

.melody-nom a:hover,
.melody-nom a:focus-visible {
	background: var(--wp--custom--accent--soutenu);
	color: var(--wp--preset--color--encre);
}

/* Menu : au survol, l'onglet se remplit de rose (vert sur Livres) ; la page affichée est cerclée. */
.melody-menu.wp-block-navigation {
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.melody-menu.wp-block-navigation .wp-block-navigation__container {
	gap: 0.3rem 0.35rem;
}

.melody-menu.wp-block-navigation .wp-block-navigation-item__content {
	padding: 0.55em 1em 0.5em;
	border-radius: 10px;
	text-decoration: none;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.melody-menu.wp-block-navigation .wp-block-navigation-item__content:hover,
.melody-menu.wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--custom--accent--aplat);
	color: var(--wp--preset--color--encre);
	text-decoration: none;
}

.melody-menu.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	box-shadow: inset 0 0 0 1.5px var(--wp--custom--accent--soutenu);
}

/* ---------------------------------------------------------------- En-tête toujours à portée
 *
 * Le script (melody.js) pose html.entete-fixe : l'en-tête est fixé en haut de l'écran et sa place reste réservée en haut
 * de page (--melody-entete-plein). Dès qu'on défile (entete-replie), il se resserre sur une ligne, sur un fond blanc
 * voilé comme la barre de contacts. Si le menu ne tient pas sur cette ligne (entete-serre : téléphone, tablette
 * étroite), un bouton « Menu » le remplace, et l'en-tête s'efface quand on descend (entete-cache) pour revenir dès
 * qu'on remonte. Sans script, l'en-tête de la version retenue, tel quel.
 */

html.entete-fixe {
	scroll-padding-top: calc(var(--melody-entete, 3.5rem) + 1rem);
}

html.entete-fixe .wp-site-blocks {
	padding-top: var(--melody-entete-plein, 0px);
}

html.entete-fixe .wp-site-blocks > header.wp-block-template-part {
	position: fixed;
	inset: var(--wp-admin--admin-bar--height, 0px) 0 auto;
	z-index: 30;
	transition: transform 0.3s ease;
}

html.entete-fixe .melody-entete {
	transition: padding 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

html.entete-fixe .melody-nom,
html.entete-fixe .melody-menu.wp-block-navigation {
	transition: font-size 0.25s ease;
}

html.entete-mesure .wp-site-blocks > header.wp-block-template-part,
html.entete-mesure .wp-site-blocks > header.wp-block-template-part * {
	transition: none !important;
}

html.entete-replie .melody-entete {
	padding-block: 0.5rem;
	background: rgb(255 255 255 / 0.94);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 1px 0 var(--melody-filet);
}

html.entete-replie .melody-entete__barre {
	gap: 0.5rem 1.5rem;
}

html.entete-replie .melody-nom {
	font-size: 0.875rem;
}

html.entete-replie .melody-nom a {
	padding: 0.5em 0.85em 0.45em;
	border-radius: 11px;
}

html.entete-replie .melody-menu.wp-block-navigation {
	font-size: 0.75rem;
}

html.entete-replie .melody-menu.wp-block-navigation .wp-block-navigation__container {
	gap: 0.25rem;
}

html.entete-replie .melody-menu.wp-block-navigation .wp-block-navigation-item__content {
	padding: 0.5em 0.85em 0.45em;
}

html.entete-cache .wp-site-blocks > header.wp-block-template-part {
	transform: translateY(calc(-100% - 2px));
}

/* Bouton « Menu » : seulement quand le menu ne tient pas sur la ligne resserrée. */
.melody-menu-bouton {
	display: none;
	align-items: center;
	gap: 0.65em;
	margin: 0;
	padding: 0.6em 0.95em 0.55em;
	border: 1.5px solid var(--wp--custom--accent--soutenu);
	border-radius: 10px;
	background: transparent;
	color: var(--wp--preset--color--encre);
	font: inherit;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.melody-menu-bouton:hover,
.melody-menu-bouton:focus-visible,
.melody-menu-bouton[aria-expanded="true"] {
	background: var(--wp--custom--accent--aplat);
}

.melody-menu-bouton:focus-visible {
	outline: 2px solid var(--wp--custom--accent--soutenu);
	outline-offset: 2px;
}

/* Deux traits, une croix quand le menu est ouvert. */
.melody-menu-bouton__icone {
	position: relative;
	display: block;
	width: 1.2em;
	height: 0.8em;
}

.melody-menu-bouton__icone::before,
.melody-menu-bouton__icone::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1.5px;
	border-radius: 1px;
	background: currentColor;
	transition: top 0.2s ease, transform 0.2s ease;
}

.melody-menu-bouton__icone::before {
	top: 0.1em;
}

.melody-menu-bouton__icone::after {
	top: calc(100% - 0.1em - 1.5px);
}

.melody-menu-bouton[aria-expanded="true"] .melody-menu-bouton__icone::before,
.melody-menu-bouton[aria-expanded="true"] .melody-menu-bouton__icone::after {
	top: calc(50% - 0.75px);
	transform: rotate(45deg);
}

.melody-menu-bouton[aria-expanded="true"] .melody-menu-bouton__icone::after {
	transform: rotate(-45deg);
}

html.entete-serre .melody-menu-bouton {
	display: inline-flex;
}

html.entete-serre .melody-menu.wp-block-navigation {
	display: none;
}

/* Menu ouvert : les liens sous la ligne du nom, alignés sur lui. */
html.entete-serre.menu-ouvert .melody-menu.wp-block-navigation {
	--navigation-layout-justify: flex-start;
	display: flex;
	flex-basis: 100%;
	padding-block: 0.25rem 0.35rem;
}

html.entete-serre.menu-ouvert .melody-menu.wp-block-navigation .wp-block-navigation__container {
	justify-content: flex-start;
}

/* ---------------------------------------------------------------- Contenu */

.melody-page {
	padding-top: clamp(0.5rem, 2vw, 1.75rem);
	padding-bottom: clamp(3rem, 7vw, 6rem);
}

/* Titre de la page (« Présentation » sur l'accueil) : petit, en capitales, une lueur de couleur derrière lui. */
.melody-scene {
	position: relative;
	isolation: isolate;
	padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(1.75rem, 4vw, 3rem);
}

.melody-scene::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 0;
	width: min(24rem, 80vw);
	aspect-ratio: 1.8;
	border-radius: 50%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--wp--custom--accent--aplat) 75%, transparent), transparent);
	transform: translate(-16%, -50%);
	pointer-events: none;
}

/* Sur l'accueil, le nom (titre lu par les lecteurs d'écran seulement) précède la scène : même hauteur qu'ailleurs. */
.visuellement-cache + .melody-scene {
	margin-block-start: 0;
}

.melody-scene__titre {
	margin: 0;
	font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* La page commence juste sous son titre. */
.melody-page > .wp-block-post-content {
	margin-block-start: 0;
}

/* Texte courant justifié (coupure des mots sur téléphone, où la colonne est étroite) : les paragraphes sans style
 * particulier, hors poème, agenda et formulaire. */
:where(.wp-block-post-content) p:is(:not([class]), [class="wp-block-paragraph"]):not(:is(.is-style-poeme, .wp-block-melody-agenda, .wp-block-melody-contact) p) {
	text-align: justify;
}

.wp-block-post-content h2:not(:first-child) {
	margin-block-start: 2.75rem;
}

.wp-block-post-content h3:not(:first-child) {
	margin-block-start: 2rem;
}

.wp-block-post-content :is(h2, h3) + * {
	margin-block-start: 0.75rem;
}

.wp-block-post-content .wp-block-columns {
	column-gap: clamp(2rem, 4.5vw, 4.5rem);
	row-gap: 2.75rem;
}

/* Une section en colonnes se détache de ce qui la suit, et de ce qui la précède (sauf de son titre). */
.wp-block-post-content .wp-block-columns + *,
.wp-block-post-content > :not(h2, h3) + .wp-block-columns {
	margin-block-start: clamp(3rem, 7vw, 5.5rem);
}

/* Listes : puces rondes colorées. */
.wp-block-post-content ul {
	padding-inline-start: 1.15em;
}

.wp-block-post-content li::marker {
	color: var(--wp--custom--accent--soutenu);
	font-size: 1.15em;
}

.wp-block-post-content li + li {
	margin-block-start: 0.45em;
}

/* Photos et vidéos : bords arrondis partout. */
.wp-block-image img,
.wp-block-video video {
	border-radius: var(--wp--custom--rayon);
}

/* Aplat : la couleur de la page décalée derrière chaque photo, comme un projecteur posé de biais. */
.wp-block-post-content .wp-block-image img,
.wp-block-post-content .wp-block-video video {
	box-shadow: var(--lumiere-x) var(--lumiere-y) 0 0 var(--wp--custom--accent--aplat);
}

.wp-block-video video {
	display: block;
	width: 100%;
}

.wp-block-post-content :is(.wp-block-image, .wp-block-video) {
	margin-bottom: 0;
}

/* Paragraphes particuliers (classes posées par l'import ; Mélody peut les réutiliser via « Avancé »). */
.melody-chapeau {
	font-size: var(--wp--preset--font-size--moyen);
	line-height: 1.55;
}

.melody-sous-titre {
	color: var(--wp--custom--accent--titre);
	font-style: italic;
}

.melody-fiche {
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 500;
	letter-spacing: 0.02em;
}

.melody-fiche > * + *,
.melody-distribution > * + *,
.melody-colophon > * + *,
.melody-production > * + * {
	margin-block-start: 0.35rem;
}

.melody-annonce {
	padding: 0.9rem 1.15rem;
	border-radius: 14px;
	background: var(--wp--custom--accent--pale);
}

.melody-annonce > :first-child {
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--wp--custom--accent--titre);
}

.melody-annonce > * + * {
	margin-block-start: 0.2rem;
}

/* Citation : à la taille du texte, en italique et en gras (les guillemets sont dans le texte). */
.melody-citation {
	font-style: italic;
	font-weight: 600;
}

.melody-distribution,
.melody-colophon {
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.55;
}

.melody-production {
	color: var(--wp--preset--color--gris);
	font-size: 0.8125rem;
	line-height: 1.55;
}

.melody-accroche {
	color: var(--wp--custom--accent--titre);
}

.melody-prix {
	color: var(--wp--custom--accent--titre);
	font-weight: 500;
	letter-spacing: 0.02em;
}

.melody-dispo > * + * {
	margin-block-start: 0.6rem;
}

.melody-modalites {
	padding-inline-start: 0.9rem;
	border-inline-start: 2px solid var(--wp--custom--accent--aplat);
	font-size: var(--wp--preset--font-size--petit);
	font-style: italic;
}

.melody-lien-collectif {
	text-align: center;
	font-size: var(--wp--preset--font-size--moyen);
	font-weight: 500;
	letter-spacing: 0.06em;
}

.melody-telephone {
	font-size: var(--wp--preset--font-size--moyen);
	font-weight: 500;
	letter-spacing: 0.04em;
}

.melody-ou {
	color: var(--wp--preset--color--gris);
	font-style: italic;
}

/* ---------------------------------------------------------------- Styles de groupe */

/* Encadré : contour fin et sombre, bords arrondis (comme sur le plan). */
.wp-block-group.is-style-encadre {
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--wp--preset--color--encre);
	border-radius: var(--wp--custom--rayon);
}

/* Carte : bord rose (vert sur Livres). */
.wp-block-group.is-style-carte {
	height: 100%;
	padding: clamp(1.25rem, 3vw, 2.25rem);
	border: 2px solid var(--wp--custom--accent--aplat);
	border-radius: var(--wp--custom--rayon);
}

/*
 * Poème : un vers par ligne. assets/js/melody.js règle la taille pour que le plus long vers tienne dans la largeur
 * (entre 17 et 22 px) ; plus étroit, la taille reste à 17 px et un vers trop long ne se coupe qu'après une virgule.
 */
.wp-block-group.is-style-poeme {
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 1.25rem;
	font-style: italic;
	line-height: 1.4;
}

.wp-block-group.is-style-poeme > * + * {
	margin-block-start: 0.3em;
}

/* Avant le script (et sans lui) : une taille qui suit déjà la largeur, proche de celle qu'il calculera ; la page ne
 * bouge pas quand il passe. */
.wp-block-group.is-style-poeme {
	container-type: inline-size;
}

.wp-block-group.is-style-poeme:not([style*="font-size"]) > p {
	font-size: clamp(1.0625rem, 3.25cqi, 1.375rem);
}

.wp-block-group.is-style-poeme > p {
	text-wrap: balance;
}

.wp-block-group.is-style-poeme.est-ajuste > p {
	white-space: nowrap;
}

.wp-block-group.is-style-poeme .vers-morceau:not(.est-libre) {
	white-space: nowrap;
}

/* Grille de photos : deux colonnes dans une colonne de texte, quatre sur toute la largeur. */
.wp-block-group.is-style-grille {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

.wp-block-column > .wp-block-group.is-style-grille {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wp-block-group.is-style-grille > * {
	margin: 0 !important;
}

/* Photo voilée de blanc, « À PARAÎTRE » par-dessus. */
.wp-block-group.is-style-voile {
	position: relative;
}

.wp-block-group.is-style-voile > figure {
	position: relative;
	margin: 0;
}

.wp-block-group.is-style-voile > figure::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--wp--custom--rayon);
	background: rgb(255 255 255 / 0.58);
	pointer-events: none;
}

.wp-block-group.is-style-voile > p {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: max-content;
	max-width: 90%;
	margin: 0 !important;
	transform: translate(-50%, -50%);
	color: var(--wp--custom--accent--titre);
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-align: center;
}

/* Colonne de photos ; en bandeau à faire glisser sur téléphone. */
.wp-block-group.is-style-photos {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.5rem;
	height: 100%;
}

.wp-block-group.is-style-photos > * {
	margin: 0 !important;
}

/* Visionneuse : grande image, miniatures à gauche (dessous quand la place manque). */
.wp-block-group.is-style-visionneuse {
	container-type: inline-size;
}

.wp-block-group.is-style-visionneuse :is(img, video) {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--wp--custom--rayon);
}

.wp-block-group.is-style-visionneuse figure {
	margin: 0 !important;
}

.wp-block-group.is-style-visionneuse:not(.est-pret) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}

.visionneuse__corps {
	display: grid;
	grid-template-columns: 5.25rem minmax(0, 1fr);
	gap: 0.9rem;
	align-items: start;
}

.visionneuse__vignettes {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	align-self: stretch;
	contain: size;
	overflow-y: auto;
	overscroll-behavior: contain;
	scroll-snap-type: y proximity;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--custom--accent--aplat) transparent;
}

.visionneuse__vignette {
	position: relative;
	flex: 0 0 auto;
	display: block;
	width: 100%;
	aspect-ratio: 1;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 10px;
	background: var(--wp--custom--accent--pale);
	cursor: pointer;
	opacity: 0.6;
	scroll-snap-align: start;
	transition: opacity 0.2s ease;
}

.visionneuse__vignette img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.visionneuse__vignette:hover,
.visionneuse__vignette[aria-pressed="true"] {
	opacity: 1;
}

.visionneuse__vignette[aria-pressed="true"]::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	box-shadow: inset 0 0 0 2.5px var(--wp--custom--accent--soutenu);
}

.visionneuse__vignette:focus-visible {
	outline: 3px solid var(--wp--preset--color--encre);
	outline-offset: -3px;
	opacity: 1;
}

.visionneuse__vignette--video::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.9rem;
	height: 1.9rem;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgb(255 255 255 / 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231d1b1b' d='M8 5v14l11-7z'/%3E%3C/svg%3E") 55% 50% / 0.95rem no-repeat;
	box-shadow: 0 1px 4px rgb(0 0 0 / 0.2);
}

.visionneuse__scene > [hidden] {
	display: none !important;
}

.visionneuse__scene > figure {
	animation: melody-fondu 0.35s ease both;
}

@keyframes melody-fondu {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@container (max-width: 30rem) {
	.visionneuse__corps {
		grid-template-columns: minmax(0, 1fr);
	}

	.visionneuse__vignettes {
		order: 2;
		flex-direction: row;
		contain: none;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x proximity;
	}

	.visionneuse__vignette {
		width: 4.25rem;
	}
}

/* ---------------------------------------------------------------- Fil : séparateur dessiné (comme dans B) */

/* Sans script (et dans l'éditeur) : une ligne ondulée. Avec le script, un tracé à la main remplace la ligne. */
.wp-block-separator.is-style-fil {
	width: auto;
	height: clamp(2.5rem, 5vw, 3.5rem);
	border: 0;
	background: currentColor;
	color: var(--wp--custom--accent--soutenu);
	opacity: 1;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpath d='M1 30C80 14 160 46 240 30S400 14 480 30 640 46 720 30 880 14 960 30 1120 46 1199 30' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpath d='M1 30C80 14 160 46 240 30S400 14 480 30 640 46 720 30 880 14 960 30 1120 46 1199 30' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.wp-block-post-content > .wp-block-separator.is-style-fil,
.wp-block-post-content > .fil__trace {
	margin-block: var(--melody-fil-marge);
}

.wp-block-post-content > :is(.wp-block-separator.is-style-fil, .fil__trace) + * {
	margin-block-start: var(--melody-fil-marge);
}

.wp-block-separator.is-style-fil.a-un-fil {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip-path: inset(50%);
}

.fil__trace {
	display: block;
	width: 100%;
	height: clamp(2.5rem, 5vw, 3.5rem);
	overflow: visible;
	color: var(--wp--custom--accent--soutenu);
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}

/* ---------------------------------------------------------------- Plans : photo à gauche, texte à droite */

/* La photo reste à l'écran pendant qu'on lit un texte plus long qu'elle, sous l'en-tête resserré quand il reste affiché. */
html.entete-fixe:not(.entete-serre) {
	--melody-entete-colle: var(--melody-entete, 0px);
}

@media (min-width: 782px) {
	.melody-plan > .wp-block-column:has(> :is(.wp-block-image, .wp-block-video, .wp-block-group):only-child) {
		position: sticky;
		top: calc(var(--melody-entete-colle, 0px) + clamp(1rem, 4vh, 2.5rem));
		align-self: flex-start;
	}
}

/* ---------------------------------------------------------------- Accueil */

/* Tailles harmonisées : le texte s'arrête à peu près au bas de la photo. */
.melody-accueil p {
	font-size: 1rem;
	line-height: 1.6;
}

.melody-accueil .wp-block-column > p + p {
	margin-block-start: 1rem;
}

/* ---------------------------------------------------------------- Médiation */

/* En haut : le texte et les photos à gauche, les projets à droite ; l'un sous l'autre tant que la place manque. */
@media (max-width: 1099px) {
	.wp-block-post-content .wp-block-columns.melody-haut {
		flex-wrap: wrap !important;
	}

	.melody-haut > .wp-block-column {
		flex-basis: 100% !important;
	}
}

.melody-haut .is-style-poeme {
	margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
}

/* Formules et structures, sous la rangée de photos des ateliers sur mesure : de l'air au-dessus, l'aplat des photos
 * déborde vers le bas. */
.wp-block-column > .melody-formules {
	margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
}

/* Une ligne de quatre photos, deux carrées puis deux en hauteur, toutes à la même hauteur (largeurs 4, 4, 3, 3). */
.wp-block-group.is-style-grille.melody-ligne {
	grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr);
}

/* ---------------------------------------------------------------- Agenda */

.wp-block-melody-agenda .agenda__titre-archives {
	padding-top: 2.5rem;
	border-top: 1px solid var(--melody-filet);
}

.wp-block-melody-agenda .agenda__archives .agenda__date {
	font-size: 0.9688rem;
}

.wp-block-melody-agenda .agenda__vide {
	color: var(--wp--preset--color--gris);
	font-style: italic;
}

/* ---------------------------------------------------------------- Pied de page */

.melody-pied {
	margin-top: 0;
}

.melody-pied__ligne {
	gap: 0.5rem 2rem;
	padding-block: 1.25rem;
	border-top: 1px solid var(--melody-filet);
	color: var(--wp--preset--color--gris);
	font-size: 0.8125rem;
}

.melody-pied__ligne p {
	margin-block: 0;
}

/* Lien discret : couleur du texte, souligné au survol seulement. */
.melody-pied__mentions a {
	color: inherit;
	text-decoration: none;
}

.melody-pied__mentions a:hover,
.melody-pied__mentions a:focus-visible {
	text-decoration: underline;
}

/* Sans photo (page des mentions), le lien reste à droite. */
.melody-pied__mentions {
	margin-inline-start: auto;
}

.melody-barre {
	padding-block: 0.7rem;
	border-top: 1px solid var(--melody-filet);
	background: var(--wp--preset--color--blanc);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.melody-barre p {
	margin: 0;
}

.melody-barre__contenu {
	gap: 0.5rem 2rem;
}

.melody-barre__contacts {
	gap: 0.35rem 1.4rem;
}

.melody-barre a {
	text-decoration: none;
}

.melody-barre a:hover,
.melody-barre a:focus-visible {
	color: var(--wp--custom--accent--titre);
	text-decoration: underline;
	text-decoration-color: var(--wp--custom--accent--soutenu);
	text-underline-offset: 0.3em;
}

.melody-barre .wp-block-social-links.is-style-logos-only .wp-social-link {
	color: currentColor;
}

.melody-barre .wp-block-social-links.is-style-logos-only .wp-social-link a {
	padding: 0.2em;
}

.melody-barre .wp-block-social-links.is-style-logos-only .wp-social-link:hover {
	color: var(--wp--custom--accent--titre);
	transform: none;
}

/* Barre de contacts fixée en bas de l'écran (« comme un second menu fixe ») dès qu'elle tient sur une ligne. */
@media (min-width: 1024px) {
	.melody-barre {
		position: fixed;
		inset: auto 0 0;
		z-index: 20;
		margin: 0 !important;
		background: rgb(255 255 255 / 0.94);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}

	.melody-pied {
		padding-bottom: var(--melody-barre);
	}
}

@media (max-width: 781px) {
	/* Menu sur deux lignes, aligné sur le nom. */
	.melody-menu.wp-block-navigation {
		--navigation-layout-justify: flex-start;
	}

	.melody-menu.wp-block-navigation .wp-block-navigation__container {
		justify-content: flex-start;
	}

	.melody-barre {
		padding-block: 1rem 1.25rem;
	}

	:where(.wp-block-post-content) p:is(:not([class]), [class="wp-block-paragraph"]):not(.is-style-poeme p) {
		-webkit-hyphens: auto;
		hyphens: auto;
	}

	.wp-block-group.is-style-grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wp-block-group.is-style-grille.melody-ligne {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.melody-barre__contenu,
	.melody-barre__contacts {
		justify-content: center;
		text-align: center;
	}

	/* Colonnes de photos : bandeau horizontal, de bord à bord. */
	.wp-block-group.is-style-photos {
		flex-direction: row;
		justify-content: flex-start;
		gap: 0.75rem;
		height: auto;
		margin-inline: calc(var(--wp--style--root--padding-left) * -1) calc(var(--wp--style--root--padding-right) * -1) !important;
		padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
		padding-block-end: 1.25rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-padding-inline: var(--wp--style--root--padding-left);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.wp-block-group.is-style-photos::-webkit-scrollbar {
		display: none;
	}

	.wp-block-group.is-style-photos > figure {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	.wp-block-group.is-style-photos > figure img {
		width: auto;
		max-width: none;
		height: 15rem;
	}
}

/* ---------------------------------------------------------------- Effets (sauf si le mouvement réduit est demandé) */

@media (prefers-reduced-motion: no-preference) {
	/* Sans animations liées au défilement, le fil se dessine une fois, à l'arrivée (assets/js/melody.js). */
	.fil__trace.est-cache path {
		stroke-dashoffset: var(--longueur);
	}

	.fil__trace.est-anime path {
		transition: stroke-dashoffset 2s cubic-bezier(0.45, 0.1, 0.2, 1);
	}

	@supports (animation-timeline: view()) {
		/* L'aplat glisse jusqu'à sa place quand la photo arrive. */
		.wp-block-post-content .wp-block-image img,
		.wp-block-post-content .wp-block-video video {
			animation: melody-lumiere linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 45%;
		}

		/* Le fil se dessine au défilement. */
		.fil__trace {
			view-timeline: --fil block;
		}

		.fil__trace path {
			animation: melody-fil linear both;
			animation-timeline: --fil;
			animation-range: entry 15% cover 55%;
		}
	}
}

@keyframes melody-lumiere {
	from {
		--lumiere-x: -14px;
		--lumiere-y: 30px;
	}
}

@keyframes melody-fil {
	from {
		stroke-dashoffset: var(--longueur);
	}

	to {
		stroke-dashoffset: 0;
	}
}

/* ---------------------------------------------------------------- Mouvement réduit, impression */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}

@media print {
	html.entete-fixe .wp-site-blocks {
		padding-top: 0;
	}

	html.entete-fixe .wp-site-blocks > header.wp-block-template-part {
		position: static;
		transform: none;
	}

	.melody-menu-bouton,
	.melody-menu,
	.melody-barre,
	.melody-scene::before,
	.fil__trace {
		display: none;
	}
}