/*
 * Studio Vivant 2026 : règles de mise en page.
 *
 * Les valeurs (couleurs, tailles, espacements) viennent de theme.json via les
 * variables --wp--preset--* et --wp--custom--*. Ici, uniquement des règles
 * qui les utilisent, et les ajustements par point de rupture.
 * Points de rupture repris d'Elementor : 1024px (tablette) et 767px (mobile).
 */

/* ---------- Tokens par point de rupture ---------- */

/*
 * Tailles de texte, espacements et gouttière sont fluides (clamp() dans
 * theme.json) : pas de redéfinition ici. La gouttière vaut 10vw à partir de
 * 1400px, descend vite jusqu'à 4vw vers 1170px, puis reste à 4vw (minimum
 * spacing--20 sur mobile). Sur très grand écran, elle s'élargit pour que le
 * contenu ne dépasse pas --wp--custom--largeur-max (centré, fonds pleine largeur
 * inchangés).
 */

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

/* Lissage des polices : WebKit/Blink sur macOS, et Firefox sur macOS. */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Défilement doux vers les ancres de la page, sauf si l'animation est réduite. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/*
 * Retours à la ligne : paragraphes sans mot seul en dernière ligne, titres et
 * sous-titres équilibrés (pas de longue ligne suivie d'un mot orphelin). Complète
 * les insécables ajoutées au rendu (studiovivant_typo_blocs dans functions.php).
 * Suspendu tant que la police charge (classe polices-en-attente, functions.php).
 * Les navigateurs qui ne les gèrent pas reviennent au retour à la ligne normal.
 */
:root:not(.polices-en-attente) :where(p, li, figcaption) {
	text-wrap: pretty;
}

:root:not(.polices-en-attente) :where(h1, h2, h3, h4, h5, h6, .titre-compose, .wp-block-post-excerpt__excerpt) {
	text-wrap: balance;
}

p:empty {
	display: none;
}

/*
 * Contenu réservé au papier (ex. adresse mail à la place de « Prendre contact ») :
 * masqué à l'écran, affiché par print.css. Reste visible dans l'éditeur (body
 * .editor-styles-wrapper) pour pouvoir le modifier.
 */
@media screen {
	body:not(.editor-styles-wrapper) .impression-seulement {
		display: none;
	}
}

.pas-de-decoration a {
	color: inherit;
	text-decoration: none;
}

.lire-la-suite {
	margin-block-start: var(--wp--preset--spacing--50);
}

/*
 * Flèche des gros liens, ajoutée ici et non dans le texte : → vers une page du site,
 * ↗ vers un site externe (toute adresse absolue sans « studiovivant », en local comme
 * en ligne).
 * Le soulignement s'arrête au texte : la flèche est sortie du flux (position absolue),
 * calée en bas à droite de la dernière ligne du lien, dans la marge réservée par
 * padding-inline-end (--fleche--lien : écart + flèche). C'est un ::before, pas un
 * ::after : un élément absolu en fin de lien crée une coupure possible, et la flèche
 * passerait seule à la ligne.
 * Texte de remplacement pour les lecteurs d'écran (« Site externe : », lu avant le
 * libellé), ignoré par les navigateurs qui ne le gèrent pas.
 */
.lire-la-suite a {
	position: relative;
	padding-inline-end: var(--wp--custom--fleche--lien);
}

.lire-la-suite a::before {
	content: "→";
	content: "→" / "";
	position: absolute;
	inset-inline-end: 0;
	inset-block-end: 0;
}

.lire-la-suite a[href^="http"]:not([href*="studiovivant"])::before {
	content: "↗";
	content: "↗" / "Site externe : ";
}

/*
 * Séparateurs : les marges par défaut sont dans theme.json (pas 60).
 * WordPress annule la marge haute du premier enfant d'un groupe ; un séparateur
 * placé en tête de groupe (ex. « Appel à prendre contact ») garde la sienne.
 */
:root :where(.is-layout-constrained, .is-layout-flow) > .wp-block-separator:first-child {
	margin-block-start: var(--wp--preset--spacing--60);
}

/*
 * Rythme vertical du contenu : écart « texte » (blockGap de theme.json) entre deux
 * blocs de texte, écart « blocs » dès qu'un des deux voisins est autre chose
 * (image, colonnes, groupe…). Les séparateurs gardent leurs marges de theme.json.
 * Même spécificité que la règle WordPress, placée
 * avant les règles de classe pour qu'elles gardent la main.
 */
:root :where(.wp-block-post-content, .wp-block-post-content :is(.is-layout-flow, .is-layout-constrained))
	> :where(:not(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote)) + :where(:not(hr)),
:root :where(.wp-block-post-content, .wp-block-post-content :is(.is-layout-flow, .is-layout-constrained))
	> * + :where(:not(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, hr)) {
	margin-block-start: var(--wp--custom--espace--blocs);
}

/* Un titre qui suit du texte prend un peu plus d'air (écart « titre »). */
:root :where(.wp-block-post-content, .wp-block-post-content :is(.is-layout-flow, .is-layout-constrained))
	> :where(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote) + :where(h1, h2, h3, h4, h5, h6) {
	margin-block-start: var(--wp--custom--espace--titre);
}

/* Un titre au format « texte » prend l'interlignage du texte, pas celui des titres. */
:root :where(h1, h2, h3, h4, h5, h6).has-texte-font-size {
	line-height: var(--wp--custom--interligne--texte);
}

/*
 * Petits visuels d'appoint (maquette, schéma de principe) : une image redimensionnée
 * dans l'éditeur, ni large ni pleine largeur, reste au plus près du texte (écart
 * « texte » avant et après).
 */
:root :where(.wp-block-post-content, .wp-block-post-content :is(.is-layout-flow, .is-layout-constrained))
	> .wp-block-image.is-resized:not(.alignwide, .alignfull),
:root :where(.wp-block-post-content, .wp-block-post-content :is(.is-layout-flow, .is-layout-constrained))
	> .wp-block-image.is-resized:not(.alignwide, .alignfull) + * {
	margin-block-start: var(--wp--custom--espace--texte);
}

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

.site-header {
	min-height: var(--wp--custom--hauteur-entete);
	padding-inline: var(--wp--custom--gouttiere);
}

.site-header .logo {
	margin: 0;
}

.site-header .logo img {
	display: block;
	width: var(--wp--custom--logo);
	height: auto;
}

/*
 * Liens dans le texte (paragraphes et listes de contenu, pas les menus) :
 * couleur du texte autour, soulignement plus clair. Ces sélecteurs passent
 * devant la couleur des liens de theme.json (0,0,1), mais aussi devant leur
 * survol (:root :where(), 0,0,0) : le noir au survol est donc repris ici.
 */
p a,
.wp-block-list a {
	color: inherit;
	text-decoration-color: var(--wp--custom--soulignement);
}

p a:hover,
.wp-block-list a:hover {
	color: var(--wp--preset--color--noir);
}

/*
 * Liens : surlignage vert d'accent au survol. Un dégradé uni, de hauteur
 * --wp--custom--surlignage centrée sur le texte, dont la largeur passe de 0 à
 * 100 %. Ancré à gauche au survol, il apparaît de gauche à droite ; ancré à
 * droite au repos (la position ne s'anime pas, elle bascule), il repart vers la
 * droite. Sur un lien qui court sur plusieurs lignes, il les parcourt l'une
 * après l'autre.
 * Dans le menu (lien en bloc avec padding), il est porté par le libellé.
 * .is-retenu (posée par front.js) prolonge le survol quand la souris sort
 * avant la fin du remplissage : le surlignage va au bout avant de repartir.
 * Exclus : les liens qui portent une image ou une icône (logo, image à la
 * une, réseaux sociaux), où il ferait un pavé autour du visuel.
 */
a,
.wp-block-navigation-item__label {
	background-image: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent));
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 0 var(--wp--custom--surlignage);
	transition: background-size var(--wp--custom--duree);
}

a:is(:hover, .is-retenu),
.wp-block-navigation-item__content:is(:hover, .is-retenu) .wp-block-navigation-item__label {
	background-position: left center;
	background-size: 100% var(--wp--custom--surlignage);
}

.wp-block-navigation-item__content,
.site-header .logo a,
.menu-principal__logo,
.marque-pied a,
.wp-block-post-featured-image a,
.wp-block-social-link a {
	background-image: none;
}

/*
 * Logo V! : noir, passé au vert d'accent comme d'un coup de marqueur au survol
 * et au focus (en-tête, menu mobile, pied de page). Le logo est dessiné par un
 * calque masqué par le même SVG que l'image ; l'image, transparente, reste pour
 * l'alternative. Dans le pied, le calque ne couvre que la largeur du logo.
 *
 * Trois étapes, chacune une zone verte (un dégradé net) dont les deux bords
 * sont des propriétés animables (@property) :
 * 1. la coche, balayée en rotation autour de son centre (dégradé conique,
 *    sens inverse des aiguilles d'une montre : la branche gauche d'abord),
 * 2. la barre du « ! », glissée de haut en bas,
 * 3. le point du « ! », de haut en bas.
 * Au survol, un bord bascule et l'autre avance : le trait se trace. Au repos,
 * le bord qui suit avance à son tour, puis l'autre bascule : le trait continue
 * et sort. Durées : --wp--custom--marqueur--coche, --barre et --point, avec
 * une pause avant la barre et avant le point (--pause-avant-barre, -point).
 *
 * Deux calques par logo : ::before porte la coche, ::after le « ! ». Chacun
 * est découpé par le SVG et par une demi-zone (masques combinés) : la limite
 * est inclinée comme la barre du « ! », dans l'espace vide entre les deux.
 * Calage sur le dessin actuel de logo.svg (variables --marqueur-* ci-dessous) :
 * à recaler si le dessin change.
 */
@property --marqueur-coche-debut {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@property --marqueur-coche-fin {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@property --marqueur-barre-debut {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 0%;
}

@property --marqueur-barre-fin {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 0%;
}

@property --marqueur-point-debut {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 0%;
}

@property --marqueur-point-fin {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 0%;
}

/*
 * Zone de survol élargie autour du logo de l'en-tête : une bordure transparente
 * compensée par une marge négative, la mise en page ne bouge pas. Les calques
 * (plus bas) se placent à l'intérieur de la bordure, sur la boîte du dessin.
 */
.site-header .logo a {
	display: block;
	width: fit-content;
	border: var(--wp--custom--logo-survol) solid transparent;
	margin: calc(-1 * var(--wp--custom--logo-survol));
}

.site-header .logo a,
.menu-principal__logo,
.marque-pied a {
	/* Calage sur le dessin, en % de la boîte du logo. */
	--marqueur-limite: linear-gradient(102deg, var(--wp--preset--color--noir) 61%, transparent 61%);
	--marqueur-limite-inverse: linear-gradient(102deg, transparent 61%, var(--wp--preset--color--noir) 61%);
	--marqueur-centre-coche: 33.8% 50.2%;
	--marqueur-barre-haut: 3%;
	--marqueur-barre-bas: 71%;
	--marqueur-point-haut: 71%;
	--marqueur-point-bas: 97%;

	/* Enchaînement des étapes. */
	--marqueur-coche: var(--wp--custom--marqueur--coche);
	--marqueur-barre: var(--wp--custom--marqueur--barre);
	--marqueur-point: var(--wp--custom--marqueur--point);
	--marqueur-fin-coche: var(--marqueur-coche);
	--marqueur-debut-barre: calc(var(--marqueur-fin-coche) + var(--wp--custom--marqueur--pause-avant-barre));
	--marqueur-fin-barre: calc(var(--marqueur-debut-barre) + var(--marqueur-barre));
	--marqueur-debut-point: calc(var(--marqueur-fin-barre) + var(--wp--custom--marqueur--pause-avant-point));
	--marqueur-fin-point: calc(var(--marqueur-debut-point) + var(--marqueur-point));

	position: relative;
}

.site-header .logo a::before,
.site-header .logo a::after,
.menu-principal__logo::before,
.menu-principal__logo::after,
.marque-pied a::before,
.marque-pied a::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--wp--preset--color--noir);
	/*
	 * Le SVG couvre la boîte (100 % 100 %), qui a les proportions du logo (dans
	 * le pied, tant que le logo est plus haut que la ligne de texte). Avec
	 * contain, Safari arrondit mal la taille du SVG sur écran Retina et laisse
	 * passer une rangée de pixels en haut de la boîte.
	 */
	mask-position: center;
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
	mask-composite: intersect;
	pointer-events: none;
}

/* Coche. Repos : zone vide (début après la fin). */
.site-header .logo a::before,
.menu-principal__logo::before,
.marque-pied a::before {
	--marqueur-coche-debut: 360deg;
	--marqueur-coche-fin: 0deg;

	background-image: conic-gradient(from 0deg at var(--marqueur-centre-coche), transparent var(--marqueur-coche-debut), var(--wp--preset--color--accent) var(--marqueur-coche-debut) var(--marqueur-coche-fin), transparent var(--marqueur-coche-fin));
	mask-image: url("../images/logo.svg"), var(--marqueur-limite);

	/* Sortie : la fin tourne à son tour, puis le début bascule. */
	transition:
		--marqueur-coche-fin var(--marqueur-coche) ease-in-out,
		--marqueur-coche-debut 0s var(--marqueur-fin-coche);
}

/* « ! ». Repos : zones vides (début après la fin). */
.site-header .logo a::after,
.menu-principal__logo::after,
.marque-pied a::after {
	--marqueur-barre-debut: var(--marqueur-barre-bas);
	--marqueur-barre-fin: var(--marqueur-barre-haut);
	--marqueur-point-debut: var(--marqueur-point-bas);
	--marqueur-point-fin: var(--marqueur-point-haut);

	background-image:
		linear-gradient(to bottom, transparent var(--marqueur-barre-debut), var(--wp--preset--color--accent) var(--marqueur-barre-debut) var(--marqueur-barre-fin), transparent var(--marqueur-barre-fin)),
		linear-gradient(to bottom, transparent var(--marqueur-point-debut), var(--wp--preset--color--accent) var(--marqueur-point-debut) var(--marqueur-point-fin), transparent var(--marqueur-point-fin));
	mask-image: url("../images/logo.svg"), var(--marqueur-limite-inverse);

	/* Sortie : chaque début descend, puis sa fin bascule ; après la coche. */
	transition:
		--marqueur-barre-debut var(--marqueur-barre) ease-in var(--marqueur-debut-barre),
		--marqueur-barre-fin 0s var(--marqueur-fin-barre),
		--marqueur-point-debut var(--marqueur-point) ease-out var(--marqueur-debut-point),
		--marqueur-point-fin 0s var(--marqueur-fin-point);
}

.site-header .logo img,
.menu-principal__logo img,
.marque-pied img {
	opacity: 0;
}

.marque-pied a::before,
.marque-pied a::after {
	right: auto;
	width: var(--wp--custom--logo-pied);
}

.site-header .logo a:is(:hover, :focus-visible)::before,
.menu-principal__logo:is(:hover, :focus-visible)::before,
.marque-pied a:is(:hover, :focus-visible)::before {
	--marqueur-coche-debut: 0deg;
	--marqueur-coche-fin: 360deg;

	/* Tracé : la fin bascule, puis le début tourne. */
	transition:
		--marqueur-coche-fin 0s,
		--marqueur-coche-debut var(--marqueur-coche) ease-in-out;
}

.site-header .logo a:is(:hover, :focus-visible)::after,
.menu-principal__logo:is(:hover, :focus-visible)::after,
.marque-pied a:is(:hover, :focus-visible)::after {
	--marqueur-barre-debut: var(--marqueur-barre-haut);
	--marqueur-barre-fin: var(--marqueur-barre-bas);
	--marqueur-point-debut: var(--marqueur-point-haut);
	--marqueur-point-fin: var(--marqueur-point-bas);

	/* Tracé : chaque début bascule, puis sa fin descend ; après la coche. */
	transition:
		--marqueur-barre-debut 0s,
		--marqueur-barre-fin var(--marqueur-barre) ease-in var(--marqueur-debut-barre),
		--marqueur-point-debut 0s,
		--marqueur-point-fin var(--marqueur-point) ease-out var(--marqueur-debut-point);
}

/* Mouvement réduit : le logo passe au vert d'un coup. */
@media (prefers-reduced-motion: reduce) {
	.site-header .logo a::before,
	.site-header .logo a::after,
	.menu-principal__logo::before,
	.menu-principal__logo::after,
	.marque-pied a::before,
	.marque-pied a::after {
		transition: none !important; /* l'emporte sur les transitions du survol */
	}
}

/*
 * Secours : les fonds ne s'impriment pas par défaut et sont remplacés en mode
 * contraste élevé ; on revient alors à l'image.
 */
@media print, (forced-colors: active) {
	.site-header .logo img,
	.menu-principal__logo img,
	.marque-pied img {
		opacity: 1;
	}

	.site-header .logo a::before,
	.site-header .logo a::after,
	.menu-principal__logo::before,
	.menu-principal__logo::after,
	.marque-pied a::before,
	.marque-pied a::after {
		display: none;
	}
}

/*
 * Même secours pour les navigateurs sans masques CSS non préfixés (Chrome et Edge
 * avant la version 120, fin 2023) : les calques y resteraient des carrés noirs.
 * Le logo s'affiche alors sans l'effet de marqueur (testé dans Chrome 104 et 116).
 */
@supports not (mask-composite: intersect) {
	.site-header .logo img,
	.menu-principal__logo img,
	.marque-pied img {
		opacity: 1;
	}

	.site-header .logo a::before,
	.site-header .logo a::after,
	.menu-principal__logo::before,
	.menu-principal__logo::after,
	.marque-pied a::before,
	.marque-pied a::after {
		display: none;
	}
}

.site-header__actions {
	gap: var(--wp--preset--spacing--30);
}

.menu-pied {
	gap: var(--wp--custom--ecart-menu);
}

/*
 * Menu principal (hors menu mobile ouvert) : l'écart entre les liens est porté
 * par le padding de chaque lien, pas par le gap. La zone cliquable s'agrandit
 * et, quand le menu passe sur deux lignes, l'interligne reste resserré.
 * L'écart visible entre deux mots reste ecart-menu (deux demi-paddings) ; la
 * marge négative de la liste annule le demi-padding des extrémités pour garder
 * l'alignement à droite et l'écart avec les icônes.
 */
.menu-principal .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
	gap: 0;
	margin-inline: calc(var(--wp--custom--ecart-menu) / -2);
}

.menu-principal .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
	display: block;
	padding-block: calc(var(--wp--preset--spacing--10) / 2);
	padding-inline: calc(var(--wp--custom--ecart-menu) / 2);
}

.menu-principal a:hover,
.menu-pied a:hover {
	text-decoration: underline;
	text-decoration-thickness: var(--wp--custom--trait);
}

/*
 * Menu du pied : souligné au repos, comme les liens dans le texte (trait plus
 * clair), pour qu'on le lise comme des liens hors du contexte de l'en-tête.
 * Au survol, le trait passe au noir et s'épaissit (règle ci-dessus).
 */
.menu-pied a {
	text-decoration: underline;
	text-decoration-color: var(--wp--custom--soulignement);
}

.menu-pied a:hover {
	text-decoration-color: currentColor;
}

/*
 * Item de la page affichée (href retiré dans functions.php) : plus gras, sans
 * soulignement ni surlignage, au repos comme au survol.
 */
.menu-principal a[aria-current="page"],
.menu-pied a[aria-current="page"] {
	font-weight: 700;
	text-decoration: none;
	cursor: default;
}

.wp-block-navigation-item__content[aria-current="page"] .wp-block-navigation-item__label {
	background-image: none;
}

.site-header .wp-block-social-links {
	--wp--style--block-gap: 0;
	font-size: var(--wp--custom--icone);
}

/* Menu mobile plein écran (remplace la popup Elementor). */
.menu-principal .wp-block-navigation__responsive-container.is-menu-open {
	padding-inline: var(--wp--custom--gouttiere);
}

/*
 * Logo V! dans le menu ouvert (lien ajouté dans functions.php), à la place
 * exacte de celui de l'en-tête : même hauteur de bande, même gouttière, centré
 * verticalement, sous la barre d'admin si elle est affichée.
 */
.menu-principal__logo {
	display: none;
}

.menu-principal .is-menu-open .menu-principal__logo {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: var(--wp--custom--gouttiere);
	display: flex;
	align-items: center;
	height: var(--wp--custom--hauteur-entete);
}

.menu-principal__logo img {
	display: block;
	width: var(--wp--custom--logo);
	height: auto;
}

/* Interligne resserré : « Comment je travaille » passe sur deux lignes. */
.menu-principal .is-menu-open .wp-block-navigation__responsive-container-content {
	font-size: var(--wp--custom--menu-mobile);
	line-height: var(--wp--custom--interligne--titre);
}

.menu-principal .is-menu-open .wp-block-navigation-item a {
	color: var(--wp--preset--color--texte);
}

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

/*
 * Les marges hautes et basses sont portées par le pied de page lui-même : sur
 * grand écran, la hauteur minimale l'emporte (rendu inchangé) ; quand le contenu
 * passe sur plusieurs lignes (mobile), le padding garde l'air autour du trait.
 * Lignes repliées resserrées : l'écart vertical (row-gap) est plus petit que
 * l'écart horizontal entre les liens.
 */
.site-footer {
	min-height: var(--wp--custom--hauteur-entete);
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block: var(--wp--preset--spacing--20);
	padding-inline: var(--wp--custom--gouttiere);
	border-top: var(--wp--custom--trait) solid var(--wp--preset--color--subtil);
	align-items: center;
	row-gap: var(--wp--preset--spacing--10);
}

.site-footer .menu-pied {
	row-gap: var(--wp--preset--spacing--10);
}

/*
 * Sur mobile, titre et menu passent à la suite, ferrés à gauche et repliés au
 * besoin, avec le même écart qu'entre les liens du menu ; les liens légaux
 * gardent leur ligne, ferrés à gauche eux aussi. Double classe pour l'emporter sur le space-between
 * généré par la mise en page.
 */
@media (max-width: 767px) {
	.site-footer.is-layout-flex {
		justify-content: flex-start;
		column-gap: var(--wp--custom--ecart-menu);
	}

	.site-footer .menu-pied {
		--navigation-layout-justify: flex-start;
	}

	.site-footer .menu-pied,
	.site-footer .menu-pied .wp-block-navigation__container {
		justify-content: flex-start;
	}

	.site-footer .mentions-pied {
		justify-content: flex-start;
	}
}

/*
 * Logo et nom du site : un seul lien vers l'accueil, un cran plus marqué que
 * les liens du menu. Seul le nom se souligne au survol.
 */
.marque-pied {
	margin: 0;
	font-weight: 500;
}

.marque-pied a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--noir);
	text-decoration: none;
}

.marque-pied img {
	display: block;
	width: var(--wp--custom--logo-pied);
	height: auto;
}

.marque-pied a:hover span {
	text-decoration: underline;
	text-decoration-thickness: var(--wp--custom--trait);
}

/* Ligne légale (© et liens) : à part sous le titre et le menu, à droite, en petit et en retrait. */
.mentions-pied {
	display: flex;
	flex-wrap: wrap;
	flex-basis: 100%;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--10) var(--wp--custom--ecart-menu);
	margin: 0;
	margin-block-start: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--secondaire);
}

.mentions-pied a {
	color: inherit;
	text-decoration: none;
}

.mentions-pied a:hover {
	text-decoration: underline;
	text-decoration-thickness: var(--wp--custom--trait);
}

/* ---------- Fil d'Ariane (bloc natif core/breadcrumbs) ---------- */

.fil-ariane {
	margin-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--secondaire);
}

/* ---------- Titres de page ---------- */

.titre-page {
	margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

/*
 * Titre aligné sur la colonne de contenu des sections titrées (modèle « Page avec titre ») :
 * décalé de la colonne de titre et de l'écart entre colonnes. À gauche quand les colonnes
 * s'empilent (point de rupture du bloc Colonnes du cœur, 782px).
 */
.titre-colonne {
	margin-inline-start: calc(var(--wp--custom--colonne-titre) + var(--wp--custom--espace--colonnes)) !important;
}

@media (width < 782px) {
	.titre-colonne {
		margin-inline-start: 0 !important;
	}
}

/* ---------- Cartes cliquables (projets, actualités) ---------- */

/*
 * Toute la carte est cliquable : le lien du titre s'étend sur la carte par un
 * pseudo-élément. Survoler la carte, c'est survoler ce lien, d'où le surlignage
 * du titre (voir « Liens ») où que soit le pointeur. L'image n'est plus un lien à part :
 * un seul lien par carte au clavier et pour les lecteurs d'écran.
 * Le pseudo-élément est ::before : ::after porte les deux points du titre composé.
 */
.wp-block-post-template .wp-block-post:has(.wp-block-post-title a) {
	position: relative;
}

.wp-block-post-template .wp-block-post-title a::before {
	content: "";
	position: absolute;
	inset: 0;
}

.wp-block-post-template .wp-block-post-title a:focus-visible {
	outline: none;
}

.wp-block-post-template .wp-block-post-title a:focus-visible::before {
	outline: var(--wp--custom--trait) solid currentColor;
	outline-offset: var(--wp--preset--spacing--10);
	border-radius: var(--wp--custom--rayon);
}

/* Images des cartes : coins arrondis et zoom au survol de la carte. */
.wp-block-post-template .wp-block-post-featured-image {
	overflow: hidden;
	border-radius: var(--wp--custom--rayon);
}

.wp-block-post-template .wp-block-post-featured-image img {
	transition: transform var(--wp--custom--duree) ease-out;
}

.wp-block-post-template .wp-block-post:is(:hover, :focus-within) .wp-block-post-featured-image img {
	transform: scale(var(--wp--custom--zoom-image));
}

/* ---------- Titre composé (cartes projet, page projet) ---------- */

/*
 * Titre et sous-titre sur la même ligne, dans la même taille (« UNCPIE : Un jeu de
 * rôle… ») : le titre en gras, le sous-titre en maigre. La taille est celle du groupe
 * (texte sur les cartes, très grand sur la page projet). Les deux points sont ajoutés
 * ici, après une espace insécable, et seulement s'il y a un sous-titre.
 */
.titre-compose {
	line-height: var(--wp--custom--interligne--titre);
}

.titre-compose .wp-block-post-title,
.titre-compose .sous-titre,
.titre-compose .wp-block-post-excerpt__excerpt {
	display: inline;
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.titre-compose .wp-block-post-title {
	font-weight: 600;
}

.titre-compose .sous-titre {
	font-weight: 300;
}

/*
 * L'espace qui sépare les deux blocs dans le HTML suit les deux points. Sur les cartes,
 * ils sont dans le lien du titre : placés après, Safari les rejetait à la ligne
 * malgré l'insécable en équilibrant les lignes (text-wrap: balance).
 */
.titre-compose:has(.sous-titre) .wp-block-post-title:not(:has(a))::after,
.titre-compose:has(.sous-titre) .wp-block-post-title a::after {
	content: "\00a0:";
}

/* ---------- Cartes projet ---------- */

/*
 * La carte est la composition synchronisée « Carte projet » (wp_block 4395, en base),
 * appelée par <!-- wp:block {"ref":4395} /--> dans chaque boucle de projets.
 * L'identifiant est à vérifier si le site est reconstruit par import plutôt que copié.
 * Image, puis titre et sous-titre sur la même ligne (« UNCPIE : Un jeu de rôle… »),
 * puis la période. Le ratio de l'image est réglé ici selon la grille. Toute la carte
 * est cliquable par le lien du titre (voir « Cartes cliquables »), l'image n'est donc
 * pas un lien.
 */

/* Titre et sous-titre en noir sur les cartes. */
.wp-block-post-template .carte-titre {
	margin-block-start: var(--wp--preset--spacing--10);
}

.carte-titre .wp-block-post-title,
.carte-titre .wp-block-post-title a,
.carte-titre .sous-titre {
	color: var(--wp--preset--color--noir);
}

/* Sur les cartes, deux crans plus gras que le titre composé de la page projet. */
.carte-titre .wp-block-post-title {
	font-weight: 800;
}

.carte-titre .sous-titre {
	font-weight: 500;
}

.wp-block-post-template .periode {
	margin-block-start: var(--wp--custom--carte--ecart);
	line-height: var(--wp--custom--interligne--titre);
	font-weight: 400;
	color: var(--wp--preset--color--secondaire);
}

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

/* Grilles : 2 colonnes (travaux), 3 colonnes (autres travaux, actualités). */
.grille-travaux .wp-block-post-template,
.grille-actualites .wp-block-post-template {
	gap: var(--wp--preset--spacing--50);
}

/* Image des cartes projet au même ratio (accueil : seulement sur mobile, voir plus bas). */
.grille-travaux .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: var(--wp--custom--carte--ratio);
	object-fit: cover;
}

@media (max-width: 1024px) {
	.grille-autres .wp-block-post-template,
	.grille-actualites .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.grille-travaux .wp-block-post-template,
	.grille-actualites .wp-block-post-template,
	.travaux-accueil .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
	}
}

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

.accueil-intro {
	min-height: var(--wp--custom--hauteur-intro);
	margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

.accueil-intro .accroche {
	margin-block-start: var(--wp--preset--spacing--60);
	line-height: var(--wp--custom--interligne--titre);
}

.section-travaux {
	margin-block-end: var(--wp--preset--spacing--80);
}

.travaux-accueil .wp-block-post-template {
	gap: var(--wp--preset--spacing--60);
}

/* Taille des cartes : grille en 3 colonnes où « Grand » occupe toute la ligne,
   « Moyen » deux colonnes et « Petit » une seule (sans réglage : comme « Moyen »).
   Le placement « dense » remplit les trous avec les cartes suivantes. */
@media (min-width: 768px) {
	.travaux-accueil .wp-block-post-template {
		grid-template-columns: repeat(var(--wp--custom--carte--colonnes), minmax(0, 1fr));
		grid-auto-flow: row dense;
		align-items: start;
	}

	.travaux-accueil .wp-block-post {
		grid-column: auto / span var(--wp--custom--carte--moyen);
	}

	.travaux-accueil .affichage-grand {
		grid-column: auto / span var(--wp--custom--carte--grand);
	}

	.travaux-accueil .affichage-petit {
		grid-column: auto / span var(--wp--custom--carte--petit);
	}

	/* Première ligne : le « Petit » voisin d'un « Moyen » s'aligne sur son bas.
	   Cas 1 : la ligne commence par un « Moyen », le premier « Petit » de la liste
	   vient la compléter (placement dense).
	   Cas 2 : la ligne commence par un « Petit » qui n'est pas suivi d'un autre
	   « Petit », un « Moyen » vient la compléter. */
	.travaux-accueil .wp-block-post:first-child:not(.affichage-grand, .affichage-petit) ~ .affichage-petit:not(.affichage-petit ~ .affichage-petit),
	.travaux-accueil .affichage-petit:first-child:not(:has(+ .affichage-petit)):has(~ :not(.affichage-grand, .affichage-petit)) {
		align-self: end;
	}
}

@media (max-width: 767px) {
	.travaux-accueil .wp-block-post-featured-image img {
		aspect-ratio: var(--wp--custom--carte--ratio);
		object-fit: cover;
	}
}

/* Citation et photo qui se chevauchent. */
.accueil-presentation {
	margin-block-end: var(--wp--preset--spacing--80);
}

@media (min-width: 768px) {
	.accueil-presentation {
		gap: 0;
	}

	.accueil-presentation__texte {
		position: relative;
		z-index: 1;
		margin-inline-end: calc(-1 * var(--wp--preset--spacing--60));
	}
}

.accueil-presentation .wp-block-image img {
	width: 100%;
}

.accueil-expertise {
	gap: var(--wp--custom--espace--colonnes);
	margin-block-end: var(--wp--preset--spacing--80);
}

.accueil-expertise__domaines {
	gap: var(--wp--custom--espace--colonnes);
}

.accueil-expertise h3 {
	margin-block-end: var(--wp--preset--spacing--20);
}

@media (max-width: 1024px) {
	.accueil-expertise {
		flex-direction: column;
	}

	.accueil-expertise > .wp-block-column {
		flex-basis: 100% !important; /* annule la largeur en ligne des colonnes */
	}
}

/* Appel à prendre contact. */
.appel-contact {
	margin-block-end: var(--wp--preset--spacing--60);
}

.appel-contact h2 {
	font-weight: 500;
}

.appel-contact h2 strong {
	font-weight: 600;
}

.appel-contact .lire-la-suite {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* ---------- Fiche projet ---------- */

.travail-entete {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

/*
 * Titre composé (titre : sous-titre, voir « Titre composé ») aligné sur la colonne de
 * texte du contenu ; pleine largeur au même point de rupture que lui (« @tablet » du
 * cœur, 782px). Ses marges s'ajoutent à l'écart de l'en-tête au-dessus et à la marge du
 * contenu en dessous : l'espace de part et d'autre du titre vaut le double de cet écart.
 */
.travail-entete .titre-page {
	width: var(--wp--custom--colonne-texte);
	margin-block: var(--wp--preset--spacing--40);
	margin-inline-start: auto;
}

/* Légende de la couverture (ajoutée par functions.php) : sur la colonne de texte, elle aussi. */
.travail-couverture figcaption {
	width: var(--wp--custom--colonne-texte);
	margin-block: var(--wp--custom--ecart-legende) 0;
	margin-inline-start: auto;
}

@media (width <= 782px) {
	.travail-entete .titre-page,
	.travail-couverture figcaption {
		width: auto;
		margin-inline-start: 0;
	}
}

.travail-contenu {
	margin-block-start: var(--wp--preset--spacing--40);
}

.travail-intro {
	gap: var(--wp--custom--espace--colonnes);
	margin-block-end: var(--wp--preset--spacing--50);
}

/*
 * Petits visuels d'appoint (image redimensionnée, ni large ni pleine largeur, voir
 * « Rythme vertical ») : sur grand écran, dans la marge de gauche, en face du bloc qui
 * les suit. Les placer dans l'éditeur juste avant le paragraphe qu'ils illustrent.
 * Les titres et les blocs larges passent dessous.
 */
@media (width > 782px) {
	.travail-contenu > .wp-block-image.is-resized:not(.alignwide, .alignfull) {
		display: block;
		float: left;
		clear: left;
		width: var(--wp--custom--colonne-marge);
	}

	/* En bloc : le cœur la passe en légende de tableau pour « Centré », ce qui la tasse. */
	.travail-contenu > .wp-block-image.is-resized:not(.alignwide, .alignfull) figcaption {
		display: block;
		text-align: start;
	}

	.travail-contenu > :is(h2, h3, .alignwide, .alignfull) {
		clear: left;
	}
}

/* Les grandes images remplissent leur colonne, même en taille « large » (1024px).
   Sauf les portraits, qui gardent leur taille fixe quelle que soit la taille choisie. */
.travail-contenu :is(.size-large, .size-full):not(.temoignage__portrait) img {
	width: 100%;
	height: auto;
}

.travail-intro .lire-la-suite {
	margin-block-start: var(--wp--preset--spacing--20);
}

/*
 * Colonne de métadonnées : rythme de fiche technique, serré dans une rubrique, aéré entre deux.
 * Intitulés : paragraphe au style « Étiquette » (h6 encore reconnu pour les anciennes fiches).
 */
.travail-metadonnees > * + * {
	margin-block-start: var(--wp--custom--espace--texte);
}

.travail-metadonnees > :is(h6, .is-style-etiquette) + * {
	margin-block-start: var(--wp--preset--spacing--10);
}

/* Plusieurs lignes dans une rubrique (ex. une précision sous la période) : à la suite, sans écart. */
.travail-metadonnees > :not(h6, .is-style-etiquette) + :not(h6, .is-style-etiquette) {
	margin-block-start: 0;
}

/*
 * Colonnes empilées (seuil du cœur WP : 781px) : les métadonnées, posées au-dessus du
 * contenu, passent sur deux colonnes, lues ligne par ligne. Les rubriques n'ont pas
 * d'enveloppe : étiquettes impaires à gauche, paires à droite, et chaque ligne suit
 * l'étiquette qui la précède (jusqu'à trois lignes par rubrique). « dense » remonte
 * chaque élément dans la première ligne libre de sa colonne. Un filet au-dessus et
 * au-dessous les détache du titre et du contenu.
 * À l'impression aussi, quelle que soit la largeur du papier.
 */
@media print, (width < 782px) {
	.travail-metadonnees {
		--filet-metadonnees: var(--wp--custom--trait) solid var(--wp--preset--color--subtil);
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-flow: dense;
		align-content: start;
		column-gap: var(--wp--custom--espace--colonnes);
		padding-block: var(--wp--preset--spacing--20);
		border-block: var(--filet-metadonnees);
	}

	.travail-metadonnees > * {
		grid-column: 1;
	}

	.travail-metadonnees > :nth-child(even of h6, .is-style-etiquette),
	.travail-metadonnees > :nth-child(even of h6, .is-style-etiquette) + :not(h6, .is-style-etiquette),
	.travail-metadonnees > :nth-child(even of h6, .is-style-etiquette) + :not(h6, .is-style-etiquette) + :not(h6, .is-style-etiquette),
	.travail-metadonnees > :nth-child(even of h6, .is-style-etiquette) + :not(h6, .is-style-etiquette) + :not(h6, .is-style-etiquette) + :not(h6, .is-style-etiquette) {
		grid-column: 2;
	}

	/* La deuxième étiquette ouvre la première ligne, à côté de la première. */
	.travail-metadonnees > :nth-child(2 of h6, .is-style-etiquette) {
		margin-block-start: 0;
	}
}

/*
 * Crédits en fin de contenu : après le témoignage, avant la ligne sur moi,
 * pour séparer la parole du client de ma signature.
 */
.credits {
	clear: left;
	margin-block-start: var(--wp--preset--spacing--60);
}

.credits > * {
	margin-block: 0;
}

.credits > .is-style-etiquette + * {
	margin-block-start: var(--wp--preset--spacing--10);
}

.travail-visuels {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--60);
}

.travail-visuels .wp-block-image {
	margin: 0;
}

/*
 * Style d'image « Cadre » : large marge autour de l'image, colorée par l'arrière-plan
 * choisi dans l'éditeur (Styles › Couleur), reçu en variable --cadre-couleur.
 * Posé sur <img> et non sur <figure> : la légende reste hors du cadre.
 * Marge en %, donc proportionnelle à la largeur.
 */
.wp-block-image.is-style-cadre img {
	padding: var(--wp--custom--cadre);
	background-color: var(--cadre-couleur, transparent);
}

/*
 * Légende d'un média seul (image, vidéo…) : même écart que dans les galeries
 * (le cœur met 0,5em au-dessus et 1em au-dessous).
 */
:is(.wp-block-image, .wp-block-video, .wp-block-embed, .wp-block-audio) > figcaption {
	margin-block: var(--wp--custom--ecart-legende) 0;
}

/* ---------- Galeries ---------- */

/*
 * Grille à la place du flex du cœur. Chaque image est une sous-grille (subgrid) sur
 * deux rangées, l'image puis sa légende : les images d'une rangée restent alignées
 * même si une seule a une légende. En sous-grille, la figure ignore aussi les
 * largeurs que le cœur calcule pour chaque nombre de colonnes.
 * Colonnes : réglage du bloc (classe columns-N) ; par défaut 3, ou moins s'il y a
 * moins d'images, comme le cœur. Sur mobile, 2 au plus (le cœur le fait sous 600px).
 * Écarts : entre rangées, celui du bloc (réglage de la galerie, sinon blockGap) ;
 * entre images côte à côte, ce même écart multiplié par --wp--custom--galerie-ecart-colonnes.
 */
.wp-block-gallery.has-nested-images {
	--galerie-colonnes: 3;
	--galerie-piste: minmax(0, 1fr);
	--galerie-ecart: var(--wp--style--unstable-gallery-gap, var(--wp--style--block-gap));
	--galerie-ecart-colonnes: calc(var(--wp--custom--galerie-ecart-colonnes) * var(--galerie-ecart));
	display: grid;
	grid-template-columns: repeat(var(--galerie-colonnes), var(--galerie-piste));
	column-gap: var(--galerie-ecart-colonnes);
}

.wp-block-gallery.has-nested-images.columns-1 { --galerie-colonnes: 1; }
.wp-block-gallery.has-nested-images.columns-2 { --galerie-colonnes: 2; }
.wp-block-gallery.has-nested-images.columns-4 { --galerie-colonnes: 4; }
.wp-block-gallery.has-nested-images.columns-5 { --galerie-colonnes: 5; }
.wp-block-gallery.has-nested-images.columns-6 { --galerie-colonnes: 6; }
.wp-block-gallery.has-nested-images.columns-7 { --galerie-colonnes: 7; }
.wp-block-gallery.has-nested-images.columns-8 { --galerie-colonnes: 8; }

.wp-block-gallery.has-nested-images.columns-default:has(> figure:nth-of-type(2):last-of-type) {
	--galerie-colonnes: 2;
}

.wp-block-gallery.has-nested-images.columns-default:has(> figure:only-of-type) {
	--galerie-colonnes: 1;
}

@media (max-width: 767px) {
	.wp-block-gallery.has-nested-images:not(.columns-1) {
		--galerie-colonnes: 2;
	}
}

.wp-block-gallery.has-nested-images figure.wp-block-image {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
	grid-template-columns: subgrid;
	row-gap: 0;
}

.wp-block-gallery.has-nested-images figure.wp-block-image > :not(figcaption) {
	grid-row: 1;
}

/*
 * Secours sans sous-grille (Chrome et Edge avant la version 117, Safari avant 16) :
 * la figure reprendrait les largeurs du cœur, calculées pour son flex, et les images
 * deviendraient minuscules. Image puis légende en colonne, sans alignement d'une
 * figure à l'autre (testé dans Chrome 104 et 116).
 */
@supports not (grid-template-columns: subgrid) {
	.wp-block-gallery.has-nested-images figure.wp-block-image {
		display: flex;
		flex-direction: column;
		grid-row: auto;
		width: auto !important; /* l'emporte sur les largeurs du cœur (sélecteur avec :not(#individual-image)) */
	}
}

/*
 * Légende d'image sous l'image, comme pour une image seule (le cœur la pose en
 * surimpression, sur un dégradé). Couleur et taille : celles des légendes dans
 * theme.json (styles.elements.caption), que les règles du cœur écrasent ici.
 */
.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
	content: none;
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	grid-row: 2;
	position: static;
	max-height: none;
	overflow: visible;
	margin: var(--wp--custom--ecart-legende) 0 0;
	padding: 0;
	background: none;
	color: var(--wp--preset--color--secondaire);
	font-size: var(--wp--preset--font-size--petit);
	text-align: start;
	text-shadow: none;
	will-change: auto;
}

/*
 * Légende de la galerie : sur toute la largeur, à la même distance des images
 * qu'une légende d'image (l'écart entre rangées est retiré).
 */
.wp-block-gallery.has-nested-images > .blocks-gallery-caption {
	grid-column: 1 / -1;
	margin-block: calc(var(--wp--custom--ecart-legende) - var(--galerie-ecart)) 0;
	text-align: start;
}

/*
 * Style de galerie « Cadre » : comme pour une image, large marge colorée par
 * l'arrière-plan choisi dans l'éditeur (--cadre-couleur), ici autour de toutes les
 * images d'une rangée. Les légendes restent sous le cadre ; avec plusieurs rangées,
 * chaque rangée a son cadre, pour que ses légendes restent sous ses images.
 *
 * Épaisseur : 8 % de la largeur de la galerie (--wp--custom--cadre), réservés sur les
 * côtés par des colonnes plus étroites, centrées. En haut et en bas, même valeur en
 * cqi (--wp--custom--cadre-galerie), la galerie servant de conteneur : 1cqi = 1 %.
 * Le fond est peint par un pseudo-élément sous chaque image, étendu sur toute la
 * largeur et coupé aux bords de la galerie.
 * Pas d'écart entre rangées : les cadres se suivent en un seul aplat, avec une seule
 * épaisseur entre deux rangées, comme sur les côtés. Chaque image n'a de marge qu'en
 * bas ; la bande du haut est le pseudo-élément de la galerie, sur sa propre rangée.
 * Si des images ont une légende, chaque rangée retrouve son cadre complet et l'écart
 * entre rangées (voir plus bas).
 */
.wp-block-gallery.has-nested-images.is-style-cadre {
	--galerie-piste: calc((100% - 2 * var(--wp--custom--cadre) - (var(--galerie-colonnes) - 1) * var(--galerie-ecart-colonnes)) / var(--galerie-colonnes));
	row-gap: 0;
	container-type: inline-size;
	isolation: isolate;
	overflow-x: clip;
	justify-content: center;
}

.wp-block-gallery.has-nested-images.is-style-cadre::before {
	content: "";
	grid-column: 1 / -1;
	height: var(--wp--custom--cadre-galerie);
	margin-inline: -100cqi;
	background-color: var(--cadre-couleur, transparent);
}

.wp-block-gallery.has-nested-images.is-style-cadre figure.wp-block-image::before {
	content: "";
	grid-area: 1 / 1;
	z-index: -1;
	position: static;
	height: auto;
	max-height: none;
	margin-inline: -100cqi;
	background-color: var(--cadre-couleur, transparent);
	backdrop-filter: none;
	mask-image: none;
}

/* #individual-image : même spécificité que les règles du cœur qui fixent la hauteur. */
.wp-block-gallery.has-nested-images.is-style-cadre figure.wp-block-image:not(#individual-image) > :not(figcaption) {
	margin-block: 0 var(--wp--custom--cadre-galerie);
}

/* Avec des légendes d'images : cadre complet par rangée, écart entre rangées rétabli. */
.wp-block-gallery.has-nested-images.is-style-cadre:has(> figure figcaption) {
	row-gap: var(--galerie-ecart);
}

.wp-block-gallery.has-nested-images.is-style-cadre:has(> figure figcaption)::before {
	content: none;
}

.wp-block-gallery.has-nested-images.is-style-cadre:has(> figure figcaption) figure.wp-block-image:not(#individual-image) > :not(figcaption) {
	margin-block: var(--wp--custom--cadre-galerie);
}

.wp-block-gallery.has-nested-images.is-style-cadre.is-cropped figure.wp-block-image:not(#individual-image) > :not(figcaption) {
	height: auto;
	align-self: stretch;
}

/* Légende de la galerie alignée sur le bord du cadre, comme sous une image seule. */
.wp-block-gallery.has-nested-images.is-style-cadre > .blocks-gallery-caption {
	margin-block-start: var(--wp--custom--ecart-legende);
	margin-inline: calc(-1 * var(--wp--custom--cadre-galerie));
}

.wp-block-gallery.has-nested-images.is-style-cadre:has(> figure figcaption) > .blocks-gallery-caption {
	margin-block-start: calc(var(--wp--custom--ecart-legende) - var(--galerie-ecart));
}

/*
 * Secours sans sous-grille (voir les galeries plus haut) : les bandes du cadre ne
 * se placent plus. Un seul aplat coloré autour de toute la galerie, légendes comprises.
 */
@supports not (grid-template-columns: subgrid) {
	.wp-block-gallery.has-nested-images.is-style-cadre {
		--galerie-piste: minmax(0, 1fr);
		row-gap: var(--galerie-ecart);
		padding: var(--wp--custom--cadre);
		background-color: var(--cadre-couleur, transparent);
	}

	.wp-block-gallery.has-nested-images.is-style-cadre::before,
	.wp-block-gallery.has-nested-images.is-style-cadre figure.wp-block-image::before {
		content: none;
	}

	.wp-block-gallery.has-nested-images.is-style-cadre figure.wp-block-image:not(#individual-image) > :not(figcaption) {
		margin-block: 0 !important; /* l'emporte sur la variante :has(), plus spécifique */
	}

	.wp-block-gallery.has-nested-images.is-style-cadre > .blocks-gallery-caption {
		margin-inline: 0;
	}
}

.autres-travaux {
	margin-block-start: var(--wp--preset--spacing--70);
}

.autres-travaux h2 {
	margin-block-end: var(--wp--preset--spacing--50);
}

/* ---------- Témoignage ---------- */

.temoignage {
	gap: var(--wp--preset--spacing--30);
}

/* Portrait commun au témoignage et à la ligne sur Nicolas : un seul style à modifier. */
.temoignage__portrait,
.ligne-auteur__portrait {
	flex-shrink: 0;
	margin: 0;
}

.temoignage__portrait img,
.ligne-auteur__portrait img {
	width: var(--wp--custom--portrait);
	height: var(--wp--custom--portrait);
	object-fit: cover;
}

/* Citation : texte en italique (theme.json), signature en romain,
 * même style avec ou sans portrait. */
.wp-block-quote cite {
	display: block;
	margin-block-start: var(--wp--custom--espace--citation);
	font-size: var(--wp--preset--font-size--legende);
	font-style: normal;
	font-weight: 400;
}

/* Le témoignage garde sa propre mise en forme : pas de filet ni d'italique de la citation. */
.wp-block-quote.temoignage__citation {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
}

/* Mobile : portrait au-dessus de la citation (ordre du HTML). */
@media (max-width: 767px) {
	.temoignage {
		flex-direction: column;
	}
}

/* ---------- Ligne sur Nicolas (fin de page projet) ---------- */

.ligne-auteur {
	margin-block: var(--wp--preset--spacing--60);
}

.ligne-auteur__corps {
	gap: var(--wp--preset--spacing--30);
}

.ligne-auteur__texte > * {
	margin-block: 0;
}

.ligne-auteur__texte > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Mobile : portrait au-dessus du texte, comme le témoignage. */
@media (max-width: 767px) {
	.ligne-auteur__corps {
		flex-direction: column;
	}
}

/* ---------- Articles ---------- */

.auteur {
	gap: var(--wp--preset--spacing--10);
	align-items: center;
	color: var(--wp--preset--color--secondaire);
}

.auteur img {
	border-radius: 50%;
}

.meta {
	color: var(--wp--preset--color--secondaire);
}

/* ---------- Pages en sections titrées (« Studio Vivant ? », « Comment je travaille ») ---------- */

/* Chapeau : le paragraphe d'introduction, sous le titre de la page. */
.chapeau {
	/* Pas de max-width : la mise en page contrainte recentrerait le bloc. */
	padding-inline-end: 34%;
	margin-block-start: var(--wp--preset--spacing--60);
	font-weight: 500;
}

@media (max-width: 767px) {
	.chapeau {
		padding-inline-end: 0;
	}
}

/* Titre de section à gauche (33 %), contenu à droite (60 %).
   La première ligne du contenu s'aligne sur la ligne de base du titre ;
   éviter de commencer la colonne de droite par une image (pas de ligne de base). */
.section-titree {
	gap: var(--wp--custom--espace--colonnes);
}

.wp-block-columns.section-titree {
	align-items: first baseline !important; /* annule le align-items: initial !important du cœur */
}

.section-titree h2 {
	margin-block-start: 0;
}

/* Colonnes empilées (seuil du cœur WP : 781px) : le titre, posé au-dessus
   du contenu, revient au fer à gauche. */
@media (max-width: 781px) {
	.section-titree h2.has-text-align-right {
		text-align: left;
	}
}

.section-titree > .wp-block-column:last-child {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.section-titree > .wp-block-column:last-child > * {
	margin-block: 0;
}

/* Intertitres dans le contenu (prestations, étapes) : un peu d'air au-dessus. */
.section-titree > .wp-block-column:last-child > h3:not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--30);
}

.section-titree h3 {
	font-weight: 600;
}

.section-titree .wp-block-image {
	margin: 0;
}

/* Valeur par défaut, sans poids (:where) : les composants placés dans la section
   (portraits des témoignages, par exemple) gardent leur propre taille. */
:where(.section-titree .wp-block-image) img {
	width: 100%;
	height: auto;
}

.section-titree .portrait {
	width: 50%;
	margin-block: var(--wp--preset--spacing--30);
}

/* Étapes de la méthode, en trois colonnes. */
.etapes {
	gap: var(--wp--custom--espace--colonnes);
	margin-block-start: var(--wp--preset--spacing--50);
}

.etapes .wp-block-image {
	margin: 0;
}

.etapes .wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 7 / 5;
	object-fit: cover;
}

.etapes h3 {
	margin-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--10);
	font-weight: 600;
}

.etapes ul {
	margin: 0;
}

/* Questions dépliables (FAQ) : un filet entre deux questions, réponse au plus près. */
.wp-block-details + .wp-block-details {
	margin-block-start: var(--wp--preset--spacing--20);
	padding-block-start: var(--wp--preset--spacing--20);
	border-top: var(--wp--custom--trait) solid var(--wp--preset--color--subtil);
}

.wp-block-details > summary + * {
	margin-block-start: var(--wp--preset--spacing--10);
}

/*
 * Flèche dessinée à la place du marqueur natif (▸ / ▾ n'ont pas la même largeur et
 * décalaient la question) : on la tourne, sa place dans la ligne ne change pas.
 */
.wp-block-details > summary {
	list-style: none;
}

.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details > summary::before {
	content: "";
	display: inline-block;
	width: var(--wp--custom--fleche--largeur);
	height: var(--wp--custom--fleche--hauteur);
	margin-inline-end: var(--wp--custom--fleche--ecart);
	background: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	transition: transform var(--wp--custom--duree);
}

.wp-block-details[open] > summary {
	font-weight: 700;
}

.wp-block-details[open] > summary::before {
	transform: rotate(90deg);
}

/* Réseau : vignette carrée, nom et rôle. */
.reseau {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

/* Alignement vertical : réglé dans l'éditeur (option native du groupe). */
.reseau__personne {
	gap: var(--wp--preset--spacing--20);
}

.reseau__personne .wp-block-image {
	flex-shrink: 0;
	margin: 0;
}

.reseau__personne .wp-block-image img {
	width: var(--wp--custom--avatar);
	height: var(--wp--custom--avatar);
	object-fit: cover;
}

.reseau__texte p {
	margin: 0;
}

.reseau__nom {
	font-weight: 500;
}