/*
Theme Name:   Atelier de Lulu
Theme URI:    https://atelierdecooking.fr
Description:  Thème enfant de Twenty Twenty-Five pour Les saveurs de Chine avec Lulu. Design piloté par theme.json, contenu par compositions. Aucune dépendance tierce.
Author:       cdizign
Template:     twentytwentyfive
Version:      1.16.0
Text Domain:  atelier-lulu
Requires PHP: 8.1
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Presque tout se règle dans theme.json. Ne vivent ici que les rares choses
   que theme.json ne sait pas exprimer. */

/* --- Cachet de section -------------------------------------------------- */
/* Un petit carré cinabre en guise de sceau, posé avant un titre de section.
   S'applique avec la classe « sceau » sur un titre. */

.sceau {
	position: relative;
	padding-left: 1.6rem;
}

.sceau::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.6rem;
	height: 0.6rem;
	background: var( --wp--preset--color--cinabre );
}

/* --- Filet de séparation ------------------------------------------------ */
/* Trait court, aligné à gauche, façon coup de pinceau. */

.wp-block-separator.is-style-trait-court {
	width: 3rem;
	margin-left: 0;
	margin-right: auto;
	border: none;
	border-top: 2px solid var( --wp--preset--color--cinabre );
	opacity: 1;
}

/* --- Jetons partagés ---------------------------------------------------- */
/* --cdz-marque : le caractère du cachet. Le même sert au logo et aux cartes
   d'atelier sans photo. 味 (wèi) : « saveur », comme dans le nom du site.
   Se change depuis l'éditeur de site, CSS supplémentaire, en une ligne. */

:root {
	--cdz-marque: "味";
	--hauteur-entete: 4.75rem;
	--police-cjk: "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC", "Noto Serif SC", serif;
}

/* --- En-tête ------------------------------------------------------------ */
/* Collé en haut sur toutes les pages. Le filet vient d'ici et non du gabarit
   pour pouvoir le faire disparaître sur l'accueil. */

header.wp-block-template-part {
	position: sticky;
	top: var( --wp-admin--admin-bar--height, 0px );
	z-index: 20;
	background-color: var( --wp--preset--color--papier );
	transition: background-color 250ms ease, box-shadow 250ms ease;
}

.entete__barre {
	border-bottom: 1px solid var( --wp--preset--color--celadon-trait );
}

/* Marque : un cachet cinabre devant le nom du site. Le « / "" » masque le
   caractère aux lecteurs d'écran, qui liraient sinon « wèi » avant le nom. */

.wp-block-site-title a {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	text-decoration: none;
}

/* Quand un logo accompagne le nom du site, il tient lieu de marque : le cachet
   s'efface pour ne pas faire doublon. :has() permet de le décider sans classe
   supplémentaire, et sans lui les deux s'afficheraient — encombré, pas cassé. */

.wp-block-group:has( > .wp-block-site-logo ) .wp-block-site-title a::before {
	content: none;
}

/* --- Logo du site ------------------------------------------------------- */

.wp-block-site-logo img {
	display: block;
	border-radius: 50%;
	object-fit: cover;
}

footer .wp-block-site-logo img {
	outline: 1px solid rgba( 251, 250, 247, 0.22 );
	outline-offset: 4px;
}

/* --- Pied de page ------------------------------------------------------- */
/* Fond encre, la couleur des boutons : le pied se détache franchement du
   corps de page. Tout passe par des variables, réglables sans redéploiement
   depuis Éditeur de site → Styles → ⋮ → CSS supplémentaire. */

footer.wp-block-template-part {
	--pied-fond: #23211e;
	--pied-texte: #fbfaf7;
	--pied-texte-doux: rgba( 251, 250, 247, 0.68 );
	--pied-trame: rgba( 166, 51, 42, 0.32 );
	--pied-trame-taille: clamp( 9rem, 26vw, 17rem );
	--pied-trame-droite: 0.2em;
	--pied-trame-bas: 0.05em;
}

/* Le fond et le filet sont posés en style EN LIGNE par le bloc Groupe. Sans
   !important, l'apparence du pied dépendrait de ce qui a été enregistré dans
   la partie de gabarit — et redeviendrait beige au moindre passage dans
   l'éditeur. isolation: isolate confine la trame derrière le texte. */

footer.wp-block-template-part > .wp-block-group {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var( --pied-fond ) !important;
	border-top-color: var( --wp--preset--color--cinabre ) !important;
	color: var( --pied-texte );
}

/* La trame : le même sinogramme que le cachet, en très grand, calé dans le
   coin. Décalages en « em », donc proportionnels à la taille du caractère :
   ils tiennent quelle que soit la largeur d'écran. z-index négatif dans un
   contexte isolé = peint par-dessus le fond, sous le texte. */

footer.wp-block-template-part > .wp-block-group::after {
	content: var( --cdz-marque ) / "";
	position: absolute;
	right: var( --pied-trame-droite );
	bottom: var( --pied-trame-bas );
	z-index: -1;
	color: var( --pied-trame );
	font-family: var( --police-cjk );
	font-size: var( --pied-trame-taille );
	line-height: 0.82;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Les classes de couleur du cœur sont générées avec !important
   (class-wp-theme-json.php, ligne 2716) : « has-encre-doux-color » sur la
   navigation ne se reprend pas autrement. */

footer.wp-block-template-part a {
	color: var( --pied-texte ) !important;
}

footer.wp-block-template-part .wp-block-navigation,
footer.wp-block-template-part .wp-block-navigation a,
footer.wp-block-template-part .wp-block-site-tagline {
	color: var( --pied-texte-doux ) !important;
}

/* Survol en papier plein, pas en cinabre : mesuré à 2,39:1 sur l'encre, il
   serait illisible. Passer de 68 % à 100 % suffit à marquer le survol. */

footer.wp-block-template-part a:hover,
footer.wp-block-template-part a:focus-visible {
	color: var( --pied-texte ) !important;
}

.wp-block-site-title a::before {
	content: var( --cdz-marque ) / "";
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 1.75em;
	height: 1.75em;
	background: var( --wp--preset--color--cinabre );
	color: var( --wp--preset--color--papier );
	font-family: var( --police-cjk );
	font-size: 0.8em;
	font-weight: 400;
	line-height: 1;
	border-radius: 2px;
}

/* Liens : soulignement fin qui se déploie au survol. */

.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.3em;
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform 200ms ease;
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible::after {
	transform: scaleX( 1 );
}

/* Bouton d'appel dans le menu : ajouter la classe « bouton » à une entrée
   (Navigation → l'entrée → Avancé → Classes CSS supplémentaires). */

.wp-block-navigation .bouton > .wp-block-navigation-item__content {
	padding: 0.5em 1.15em;
	background: var( --wp--preset--color--cinabre );
	color: var( --wp--preset--color--papier ) !important;
	border-radius: var( --wp--custom--rayon-bouton, 4px );
	transition: background-color 150ms ease;
}

.wp-block-navigation .bouton > .wp-block-navigation-item__content:hover {
	background: var( --wp--preset--color--encre );
}

.wp-block-navigation .bouton > .wp-block-navigation-item__content::after {
	display: none;
}

/* Menu mobile ouvert : fond papier, grandes entrées en Vollkorn. Les
   !important l'emportent sur la transparence de l'en-tête d'accueil, sans quoi
   le menu ouvert laisserait voir la photo au travers. */

/* Fond encre : le cœur impose #fff avec une spécificité de (0,5,0), d'où les
   !important. Sans eux, le panneau reste un grand aplat blanc. */

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var( --wp--preset--color--encre ) !important;
	color: var( --wp--preset--color--papier ) !important;
}

.is-menu-open .wp-block-navigation-item__content,
.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var( --wp--preset--color--papier ) !important;
}

/* Rappel de la marque, en haut à gauche du panneau. Le bouton de fermeture
   occupe le coin opposé, il n'y a donc pas de collision. Le « / "" » masque
   ces éléments décoratifs aux lecteurs d'écran. */

.is-menu-open .wp-block-navigation__responsive-dialog::before {
	content: var( --cdz-marque ) / "";
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	background: var( --wp--preset--color--cinabre );
	color: var( --wp--preset--color--papier );
	font-family: var( --police-cjk );
	font-size: 1.3rem;
	line-height: 1;
	border-radius: 2px;
}

.a-logo .is-menu-open .wp-block-navigation__responsive-dialog::before {
	content: "" / "";
	background: var( --logo-site ) center / cover no-repeat;
	border-radius: 50%;
}

.is-menu-open .wp-block-navigation__responsive-dialog::after {
	content: var( --nom-site, "" ) / "";
	position: absolute;
	top: 0.35rem;
	left: 3.2rem;
	font-family: var( --wp--preset--font-family--titre );
	font-size: var( --wp--preset--font-size--moyen );
	font-weight: 600;
	color: var( --wp--preset--color--papier );
}

/* Entrées : pleine largeur, séparées d'un filet clair. */

.is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: 0;
}

.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid rgba( 251, 250, 247, 0.16 );
}

.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding-block: 0.9rem;
	font-family: var( --wp--preset--font-family--titre );
	font-size: var( --wp--preset--font-size--grand );
}

/* Le soulignement animé ferait doublon avec le filet. */

.is-menu-open .wp-block-navigation-item__content::after {
	display: none;
}

/* L'entrée en bouton garde son aplat cinabre, mais sans pleine largeur. */

.is-menu-open .bouton {
	border-bottom: none;
	padding-top: 1.25rem;
}

.is-menu-open .bouton > .wp-block-navigation-item__content {
	display: inline-block;
	width: auto;
	font-size: var( --wp--preset--font-size--normal );
}

/* --- En-tête de l'accueil ----------------------------------------------- */
/* Posé en fixe par-dessus la bannière, transparent. Dès que la bannière sort
   de l'écran, entete.js ajoute « est-defile » et l'en-tête devient plein. */

.home header.wp-block-template-part {
	position: fixed;
	inset-inline: 0;
	background-color: transparent;
}

/* L'en-tête fixe sort du flux, mais reste le premier enfant de
   .wp-site-blocks. WordPress pose un écart de blocs sur tout enfant qui n'est
   pas le premier (class-wp-theme-json.php) : <main> le recevait, et c'est lui
   qui creusait l'espace au-dessus de la bannière. */

.home .wp-site-blocks > main {
	margin-block-start: 0;
}

.home .entete__barre {
	border-bottom-color: transparent;
}

.home header.wp-block-template-part a,
.home header.wp-block-template-part .wp-block-navigation__responsive-container-open {
	color: var( --wp--preset--color--papier );
}

/* La couleur est posée sur la NAVIGATION, pas sur ses liens. Le cœur force
   « color: inherit » sur chaque lien avec une spécificité (0,3,0) :
   « .home header a » (0,2,2) perdait, d'où un titre de site clair mais des
   entrées de menu restées sombres. En colorant le conteneur, les liens
   héritent de la bonne teinte au lieu de lutter contre le cœur. */

.home header.wp-block-template-part .wp-block-navigation {
	color: var( --wp--preset--color--papier );
}

/* Le fond flouté est porté par un PSEUDO-ELEMENT, jamais par l'en-tête.
   Un backdrop-filter autre que « none » fait de l'élément un bloc conteneur
   pour ses descendants en position: fixed. Posé sur l'en-tête, il capturait le
   panneau plein écran du menu mobile, qui se repliait dans ses 76 px de haut.
   Sur un pseudo-élément, qui n'a aucun descendant, l'effet est identique et
   le panneau reste fixé au viewport. */

.home header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	background-color: rgba( 251, 250, 247, 0.94 );
	-webkit-backdrop-filter: saturate( 1.4 ) blur( 10px );
	backdrop-filter: saturate( 1.4 ) blur( 10px );
	transition: opacity 250ms ease;
}

.home header.wp-block-template-part.est-defile::before {
	opacity: 1;
}

.home header.wp-block-template-part.est-defile {
	box-shadow: 0 1px 0 var( --wp--preset--color--celadon-trait );
}

.home header.wp-block-template-part.est-defile a,
.home header.wp-block-template-part.est-defile .wp-block-navigation__responsive-container-open,
.home header.wp-block-template-part.est-defile .wp-block-navigation {
	color: var( --wp--preset--color--encre );
}

/* Le contenu placé en haut de la bannière dégage l'en-tête fixe. */

.banniere.is-position-top-left .wp-block-cover__inner-container,
.banniere.is-position-top-center .wp-block-cover__inner-container,
.banniere.is-position-top-right .wp-block-cover__inner-container {
	margin-top: var( --hauteur-entete );
}

/* Sous 600 px, la barre d'administration n'est plus fixe : elle défile avec la
   page (admin-bar.css, #wpadminbar { position: absolute }). Mais la variable
   --wp-admin--admin-bar--height reste à 46 px : l'en-tête restait calé 46 px
   sous le haut de l'écran, au-dessus d'un vide. Ne touche que les comptes
   connectés — un visiteur n'a pas de barre d'administration. */

@media screen and ( max-width: 600px ) {
	header.wp-block-template-part {
		top: 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	header.wp-block-template-part,
	.wp-block-navigation .wp-block-navigation-item__content::after {
		transition: none;
	}
}

/* --- Bannière pleine page ----------------------------------------------- */

/* Deux cibles : la classe posée par la composition, et — en repli — la
   première couverture de l'accueil, pour le cas d'une bannière construite à la
   main sans la classe. */

.wp-block-cover.banniere,
.home .wp-block-post-content > .wp-block-cover:first-child {
	/* !important assumé : une couverture déjà posée garde son min-height en
	   style EN LIGNE, qu'aucune feuille de style ne peut battre autrement. */
	min-height: 100vh !important;
	min-height: 100dvh !important;
	background-color: var( --wp--preset--color--encre );
}

/* Voile de la bannière.
   Les trois valeurs sont exposées en variables : elles se règlent depuis
   l'éditeur de site (Styles → ⋮ → CSS supplémentaire) sans redéploiement.

   Réglage par défaut : sombre en haut, dégagé en bas. Le titre est placé en
   haut à droite, et le bas de la photo — l'assiette — reste net.

   Les !important ne sont pas décoratifs : le bloc Couverture pose une couleur
   de voile en style en ligne et impose une opacité via sa classe
   has-background-dim-NN. Sans les neutraliser, le dégradé serait teinté et
   presque transparent. */

.banniere,
.home .wp-block-post-content > .wp-block-cover:first-child {
	--banniere-voile-haut: 0.88;
	--banniere-voile-milieu: 0.42;
	--banniere-voile-bas: 0.04;
}

.banniere .wp-block-cover__background,
.home .wp-block-post-content > .wp-block-cover:first-child .wp-block-cover__background {
	opacity: 1 !important;
	background-color: transparent !important;
	background-image: linear-gradient(
		180deg,
		rgba( 35, 33, 30, var( --banniere-voile-haut ) ) 0%,
		rgba( 35, 33, 30, var( --banniere-voile-milieu ) ) 40%,
		rgba( 35, 33, 30, var( --banniere-voile-bas ) ) 100%
	) !important;
}

/* La photo couvre toute la hauteur quelle que soit sa taille. */

.banniere .wp-block-cover__image-background,
.home .wp-block-post-content > .wp-block-cover:first-child .wp-block-cover__image-background {
	height: 100%;
	object-fit: cover;
}

.banniere h1 {
	text-wrap: balance;
	max-width: 18ch;
}

/* Le placement du contenu se règle dans l'éditeur (barre d'outils du bloc
   Couverture). Ces règles font suivre l'alignement du texte, quel que soit le
   coin choisi — sans elles, un titre poussé à droite resterait ferré à gauche. */

.banniere .wp-block-cover__inner-container > .wp-block-group {
	max-width: 36rem;
}

.banniere.is-position-top-right,
.banniere.is-position-center-right,
.banniere.is-position-bottom-right {
	text-align: right;
}

.banniere.is-position-top-right .wp-block-cover__inner-container > .wp-block-group,
.banniere.is-position-center-right .wp-block-cover__inner-container > .wp-block-group,
.banniere.is-position-bottom-right .wp-block-cover__inner-container > .wp-block-group {
	margin-inline-start: auto;
	margin-inline-end: 0;
}

.banniere.is-position-top-right h1,
.banniere.is-position-center-right h1,
.banniere.is-position-bottom-right h1 {
	margin-inline-start: auto;
}

.banniere.is-position-top-right .wp-block-buttons,
.banniere.is-position-center-right .wp-block-buttons,
.banniere.is-position-bottom-right .wp-block-buttons {
	justify-content: flex-end;
}

/* --- Bannière au pouce -------------------------------------------------- */
/* Au pouce, la photo paysage est recadrée en une bande verticale : le visage
   de Lulu et le texte posé en haut finissent dans la même colonne. Sous
   782 px, le seuil où WordPress empile les colonnes, le texte descend en bas,
   ferré à gauche, quel que soit le coin choisi dans l'éditeur. Le voile de la
   photo se réduit à un bandeau sous l'en-tête ; le dégradé sous le texte est
   porté par le conteneur du texte lui-même, il le suit donc quelle que soit
   sa hauteur. Le grand écran ne change pas.

   Les deux intensités se règlent comme celles du grand écran, depuis
   l'éditeur de site (Styles → ⋮ → CSS supplémentaire). Ces règles ne visent
   que la classe banniere, pas la couverture de repli. */

.banniere {
	--banniere-voile-pouce-haut: 0.6;  /* bandeau sous l'en-tête */
	--banniere-voile-pouce-bas: 0.75;  /* sous le texte */
}

@media ( max-width: 781px ) {
	/* Remplace le voile du grand écran : même !important, et un second
	   sélecteur plus spécifique que son sélecteur de repli (0,5,0), qui
	   s'applique aussi à cette bannière. Arrêts en rem : le bandeau finit
	   avant le visage, quelle que soit la hauteur de l'écran. */

	.banniere .wp-block-cover__background,
	.home .wp-block-post-content > .wp-block-cover.banniere:first-child .wp-block-cover__background {
		background-image: linear-gradient(
			180deg,
			rgba( 35, 33, 30, var( --banniere-voile-pouce-haut ) ) 0,
			rgba( 35, 33, 30, var( --banniere-voile-pouce-haut ) ) 3rem,
			rgba( 35, 33, 30, 0 ) 9rem
		) !important;
	}

	/* Contenu en bas, à gauche. Deux sélecteurs : sans coin choisi, et avec un
	   coin, que le cœur place en (0,2,0). */

	.wp-block-cover.banniere,
	.wp-block-cover.banniere.has-custom-content-position {
		align-items: flex-end;
		justify-content: flex-start;
		/* Aligné sur le logo : l'en-tête centre son contenu sur 42rem. */
		padding-inline: max( var( --wp--preset--spacing--40 ), calc( ( 100vw - var( --wp--style--global--content-size ) ) / 2 ) );
		text-align: left;
	}

	/* Marge basse posée en style EN LIGNE par le bloc (5rem) : au pouce, elle
	   ferait remonter le texte vers le visage. */

	.wp-block-cover.banniere {
		padding-bottom: var( --wp--preset--spacing--50 ) !important;
	}

	/* Dans un coin, le cœur réduit le conteneur à son contenu, en (0,5,0) :
	   on lui rend toute la largeur pour que le dégradé aille d'un bord à
	   l'autre. isolation place ce dégradé sous le texte, au-dessus de la photo. */

	.wp-block-cover.banniere .wp-block-cover__inner-container,
	.wp-block-cover.banniere.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {
		width: 100%;
		isolation: isolate;
	}

	.banniere .wp-block-cover__inner-container::before {
		content: "";
		position: absolute;
		z-index: -1;
		inset-inline: -50vw; /* jusqu'aux bords : la couverture rogne le reste */
		top: -8rem;
		bottom: calc( var( --wp--preset--spacing--50 ) * -1 );
		background: linear-gradient(
			180deg,
			rgba( 35, 33, 30, 0 ) 0,
			rgba( 35, 33, 30, var( --banniere-voile-pouce-bas ) ) 8rem
		);
		pointer-events: none;
	}

	.banniere.has-custom-content-position .wp-block-cover__inner-container > .wp-block-group {
		margin-inline: 0;
	}

	.banniere.has-custom-content-position .wp-block-buttons {
		justify-content: flex-start;
	}

	/* Bloc de texte resserré, pour qu'il tienne sous le visage même sur un
	   petit téléphone : écarts réduits, paragraphes vides (des espaces pour
	   le grand écran) masqués, retrait droit en ligne inutile une fois le
	   texte à gauche, titre ramené d'environ 42 à 35 px. Les !important
	   battent le style en ligne et la classe de taille du cœur. */

	.banniere .wp-block-cover__inner-container > .wp-block-group > * + * {
		margin-block-start: var( --wp--preset--spacing--20 );
	}

	.banniere .wp-block-cover__inner-container p:empty {
		display: none;
	}

	.banniere .wp-block-cover__inner-container > .wp-block-group > * {
		padding-right: 0 !important;
	}

	/* margin-left : le titre (18ch) est plus étroit que son groupe, et la
	   mise en page « contrainte » du cœur le centre en !important. */

	.banniere .wp-block-cover__inner-container h1 {
		margin-left: 0 !important;
		font-size: clamp( 2rem, 9vw, 2.5rem ) !important;
	}

	/* Bouton en cinabre : en encre, il se fondait dans le dégradé. */

	.banniere .wp-block-button__link {
		background-color: var( --wp--preset--color--cinabre );
		color: var( --wp--preset--color--papier );
	}

	.banniere .wp-block-button__link:hover,
	.banniere .wp-block-button__link:focus-visible {
		background-color: var( --wp--preset--color--papier );
		color: var( --wp--preset--color--encre );
	}
}

/* --- Bande de section --------------------------------------------------- */
/* Un aplat pleine largeur qui coupe la page. Sans filet ni ombre : c'est la
   couleur seule qui marque la rupture. */

/* Double filet d'encadrement : « border-style: double » sur 3 px produit
   exactement deux traits d'1 px séparés d'1 px, la mise en page des livres
   anciens. Une seule déclaration, aucun élément supplémentaire. */

.bande {
	--bande-filet: rgba( 35, 33, 30, 0.18 );

	border-top: 3px double var( --wp--preset--color--celadon-trait );
	border-bottom: 3px double var( --wp--preset--color--celadon-trait );
}

.bande > .wp-block-columns {
	gap: var( --wp--preset--spacing--50 );
	counter-reset: pilier;
}

@media ( min-width: 48em ) {
	.bande > .wp-block-columns {
		gap: var( --wp--preset--spacing--60 );
	}
}

.bande .wp-block-column {
	counter-increment: pilier;
}

/* Numéraux 一 二 三 : le compteur « cjk-decimal » les produit tout seul, sans
   rien écrire dans la page — donc rien à traduire le jour de la version
   anglaise. Le « / "" » les masque aux lecteurs d'écran, qui annonceraient
   sinon un chiffre avant chaque titre. */

.bande .wp-block-column > :is( h2, h3, h4 ):first-child::before {
	content: counter( pilier, cjk-decimal ) / "";
	display: block;
	margin-bottom: 0.35rem;
	color: var( --wp--preset--color--cinabre );
	font-family: var( --police-cjk );
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1;
}

.bande .wp-block-column > p {
	max-width: 34ch;
	line-height: 1.7;
}

/* Filets de séparation, centrés dans l'espace entre colonnes. */

@media ( min-width: 48em ) {
	.bande .wp-block-column + .wp-block-column {
		position: relative;
	}

	.bande .wp-block-column + .wp-block-column::before {
		content: "";
		position: absolute;
		top: 0.2rem;
		bottom: 0.2rem;
		left: calc( var( --wp--preset--spacing--60 ) / -2 );
		width: 1px;
		background: var( --bande-filet );
	}
}

@media ( max-width: 47.99em ) {
	.bande .wp-block-column + .wp-block-column {
		border-top: 1px solid var( --bande-filet );
		padding-top: var( --wp--preset--spacing--40 );
	}
}

/* --- Bande en parallaxe ------------------------------------------------ */
/* Texte centré en CSS plutôt que par l'attribut d'alignement du paragraphe :
   un attribut de plus, c'est un risque de plus de balisage jugé invalide. */

.parallaxe {
	text-align: center;
}

.parallaxe p {
	max-width: 26ch;
	margin-inline: auto;
	text-wrap: balance;
	font-style: italic;
	line-height: 1.35;
}

/* --- Défilement vers les ancres --------------------------------------- */
/* Le bouton de la bannière et le menu pointent vers #a-propos et #ateliers.
   La marge de défilement évite que le titre de section se colle au bord haut
   de la fenêtre à l'arrivée. */

@media ( prefers-reduced-motion: no-preference ) {
	html {
		scroll-behavior: smooth;
	}
}

:where( [id] ) {
	scroll-margin-top: calc( var( --hauteur-entete ) + var( --wp--preset--spacing--30 ) );
}

/* --- Section des ateliers ----------------------------------------------- */
/* Quand la section est passée en large, ses enfants restent sinon centrés à la
   largeur de contenu : le titre se retrouverait rentré de plusieurs rem par
   rapport aux cartes. On les réaligne sur la grille, en gardant une longueur
   de ligne lisible pour le texte. */

#ateliers > *:not( .cdz-ateliers ) {
	max-width: none;
	margin-inline: 0 !important;
}

#ateliers > p {
	max-width: 68ch;
}

/* --- Pied de page ------------------------------------------------------- */
/* Sur un écran étroit, la répartition « espace entre » laisse le logo seul
   d'un côté et le menu de l'autre. On empile et on centre. */

@media ( max-width: 48em ) {
	footer .wp-block-group.is-layout-flex {
		justify-content: center;
		text-align: center;
	}

	footer .wp-block-navigation,
	footer .wp-block-navigation__container {
		justify-content: center;
	}

	footer .wp-block-site-logo {
		margin-inline: auto;
	}
}

/* --- Lisibilité --------------------------------------------------------- */

:where( .entry-content ) p {
	max-width: 68ch;
}

:where( a ):focus-visible {
	outline: 2px solid var( --wp--preset--color--cinabre );
	outline-offset: 2px;
}

/* --- Page d'un atelier -------------------------------------------------- */
/* En-tête en deux colonnes sur grand écran, texte à gauche et photo à droite :
   la photo passe d'environ 1 180 × 665 px (pleine largeur, 16:9) à environ
   500 × 375 px. Au pouce, elle passe devant, en 3:2.

   Toutes les règles partent de .page-atelier : les groupes posent leurs
   propres écarts (« :root :where(.is-layout-flow) > * », spécificité 0,1,0),
   qu'il faut battre sans dépendre de l'ordre de chargement des feuilles. */

.page-atelier .atelier-tete {
	display: grid;
	grid-template-areas: "photo" "texte";
	gap: var( --wp--preset--spacing--40 );
	align-items: center;
}

.page-atelier .atelier-tete > *,
.page-atelier .atelier-corps > *,
.page-atelier .atelier-tete__texte > *,
.page-atelier .atelier-dates > * {
	margin-block: 0;
}

@media ( min-width: 60em ) {
	.page-atelier .atelier-tete {
		grid-template-columns: minmax( 0, 11fr ) minmax( 0, 9fr );
		grid-template-areas: "texte photo";
		column-gap: var( --wp--preset--spacing--60 );
	}
}

/* Colonne de texte. isolation: isolate confine le filigrane derrière le
   texte, comme la trame du pied de page. */

.page-atelier .atelier-tete__texte {
	position: relative;
	grid-area: texte;
	isolation: isolate;
}

.page-atelier .atelier-tete__texte > .wp-block-post-title {
	margin-top: var( --wp--preset--spacing--20 );
	text-wrap: balance;
}

.page-atelier .atelier-tete__texte > .wp-block-separator,
.page-atelier .atelier-tete__texte > .atelier-tete__accroche {
	margin-top: var( --wp--preset--spacing--30 );
}

.page-atelier .atelier-tete__texte > .cdz-fiche {
	margin-top: var( --wp--preset--spacing--40 );
}

/* Retour à la liste, précédé d'un sceau plus petit que celui des titres. */

.page-atelier .atelier-tete__retour {
	padding-left: 1.2rem;
}

.page-atelier .atelier-tete__retour::before {
	top: 0.5em;
	width: 0.45rem;
	height: 0.45rem;
}

.page-atelier .atelier-tete__retour a {
	color: var( --wp--preset--color--encre-doux );
	text-decoration: none;
}

.page-atelier .atelier-tete__retour a:hover,
.page-atelier .atelier-tete__retour a:focus-visible {
	color: var( --wp--preset--color--cinabre );
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.page-atelier .atelier-tete__accroche {
	max-width: 40ch;
	color: var( --wp--preset--color--encre-doux );
	line-height: 1.5;
}

.page-atelier .atelier-tete__accroche p {
	margin: 0;
}

/* Filigrane : le sinogramme de l'atelier, très grand, derrière le titre.
   La variable vient du plugin, seulement si un caractère est saisi ; sans
   elle, « content » est invalide et le pseudo-élément n'existe pas. */

.page-atelier .atelier-tete__texte::before {
	content: var( --cdz-sinogramme ) / "";
	position: absolute;
	top: -0.14em;
	left: -0.06em;
	z-index: -1;
	font-family: var( --police-cjk );
	font-size: clamp( 9rem, 22vw, 18rem );
	line-height: 1;
	color: var( --wp--preset--color--celadon );
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Photo. Le format se règle ici, pas dans le bloc : un format posé en
   attribut sort en style en ligne, impossible à changer au pouce. */

.page-atelier .atelier-tete__photo {
	position: relative;
	grid-area: photo;
}

.page-atelier .atelier-tete__photo .wp-block-post-featured-image {
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var( --wp--custom--rayon, 6px );
}

.page-atelier .atelier-tete__photo .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Sans photo : un aplat céladon au même format, frappé du sinogramme de
   l'atelier ou, à défaut, de celui de la marque — comme une carte sans photo. */

.page-atelier .atelier-tete__photo:not( :has( img ) )::before {
	content: var( --cdz-sinogramme, var( --cdz-marque ) ) / "";
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 2;
	font-family: var( --police-cjk );
	font-size: clamp( 5rem, 14vw, 9rem );
	line-height: 1;
	color: var( --wp--preset--color--celadon-trait );
	background: var( --wp--preset--color--celadon );
	border-radius: var( --wp--custom--rayon, 6px );
}

@media ( min-width: 60em ) {
	.page-atelier .atelier-tete__photo .wp-block-post-featured-image,
	.page-atelier .atelier-tete__photo:not( :has( img ) )::before {
		aspect-ratio: 4 / 3;
	}
}

/* Le cachet de la date, à cheval sur un coin de la photo. Un liseré papier
   le détache de l'image, comme un sceau posé sur une estampe. Seul moment
   animé de la page : il se pose au chargement.
   Au pouce, coin droit : à gauche, il frôlait le lien « Les ateliers », aligné
   à gauche juste dessous. Sur grand écran, coin gauche : il se pose entre les
   deux colonnes. */

.page-atelier .atelier-tete__photo .cdz-cachet {
	position: absolute;
	right: var( --wp--preset--spacing--30 );
	bottom: 0;
	transform: translateY( 35% );
	animation: atelier-cachet 480ms cubic-bezier( 0.2, 0.9, 0.25, 1.15 ) 250ms both;
}

@media ( min-width: 60em ) {
	.page-atelier .atelier-tete__photo .cdz-cachet {
		right: auto;
		left: var( --wp--preset--spacing--30 );
	}
}

.page-atelier .atelier-tete__photo .cdz-atelier__cachet {
	min-width: 4.25rem;
	padding: 0.55rem 0.6rem 0.6rem;
	border-radius: 2px;
	box-shadow: 0 0 0 3px var( --wp--preset--color--papier );
}

.page-atelier .atelier-tete__photo .cdz-atelier__jour {
	font-size: 2.1rem;
}

.page-atelier .atelier-tete__photo .cdz-atelier__mois {
	margin-top: 0.25rem;
	font-size: 0.8rem;
}

@keyframes atelier-cachet {
	from {
		opacity: 0;
		transform: translateY( 35% ) scale( 1.5 ) rotate( -8deg );
	}

	to {
		opacity: 1;
		transform: translateY( 35% );
	}
}

/* Corps : la description à gauche, les dates à droite. La colonne des dates
   reste à l'écran pendant la lecture ; plafonnée à la hauteur de la fenêtre,
   elle défile d'elle-même s'il y a beaucoup de dates. */

.page-atelier .atelier-corps {
	display: grid;
	gap: var( --wp--preset--spacing--50 );
	margin-top: var( --wp--preset--spacing--60 );
}

@media ( min-width: 60em ) {
	.page-atelier .atelier-corps {
		grid-template-columns: minmax( 0, 1fr ) minmax( 18rem, 22rem );
		column-gap: var( --wp--preset--spacing--60 );
		align-items: start;
	}

	.page-atelier .atelier-dates {
		position: sticky;
		top: calc( var( --wp-admin--admin-bar--height, 0px ) + var( --hauteur-entete ) + var( --wp--preset--spacing--30 ) );
		max-height: calc( 100vh - var( --wp-admin--admin-bar--height, 0px ) - var( --hauteur-entete ) - var( --wp--preset--spacing--50 ) );
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

.page-atelier .atelier-corps h2 {
	font-size: var( --wp--preset--font-size--grand );
}

.page-atelier .atelier-dates {
	padding-top: var( --wp--preset--spacing--30 );
	border-top: 3px double var( --wp--preset--color--celadon-trait );
}

.page-atelier .atelier-dates > h2 {
	margin-bottom: var( --wp--preset--spacing--20 );
}

@media ( prefers-reduced-motion: reduce ) {
	.page-atelier .atelier-tete__photo .cdz-cachet {
		animation: none;
	}
}

/* --- Déroulé d'un atelier ----------------------------------------------- */
/* Composition à poser dans la description. Numéraux 一 二 三 produits par le
   compteur « cjk-decimal », comme sur la bande de l'accueil : une étape
   ajoutée ou retirée, la numérotation suit. */

.wp-block-group.deroule {
	counter-reset: etape;
}

.wp-block-group.deroule > *,
.wp-block-group.deroule__etape > * {
	margin-block: 0;
}

.wp-block-group.deroule > h2 {
	margin-bottom: var( --wp--preset--spacing--30 );
}

.wp-block-group.deroule__etape {
	display: grid;
	grid-template-columns: 3rem minmax( 0, 1fr );
	column-gap: var( --wp--preset--spacing--20 );
	align-items: start;
	padding-block: var( --wp--preset--spacing--30 );
	border-top: 1px solid var( --wp--preset--color--celadon-trait );
	counter-increment: etape;
}

.wp-block-group.deroule__etape:last-child {
	border-bottom: 1px solid var( --wp--preset--color--celadon-trait );
}

.wp-block-group.deroule__etape::before {
	content: counter( etape, cjk-decimal ) / "";
	grid-row: 1 / span 9;
	grid-column: 1;
	font-family: var( --police-cjk );
	font-size: 2rem;
	line-height: 1;
	color: var( --wp--preset--color--cinabre );
}

.wp-block-group.deroule__etape > * {
	grid-column: 2;
}

.wp-block-group.deroule__etape > * + * {
	margin-block-start: 0.35rem;
}

.wp-block-group.deroule__etape > h3 {
	font-size: var( --wp--preset--font-size--moyen );
	line-height: 1.3;
}

/* --- Page Contact ------------------------------------------------------- */
/* Gabarit page-contact.html, composition « Page Contact ». Le formulaire a sa
   propre feuille, dans le module cdz-contact ; ici, l'introduction.

   Le filigrane reprend celui des pages atelier : très grand, céladon, derrière
   le titre. 聊 (liáo) : bavarder, échanger — l'écho de « Parlons ». Il se
   change en une ligne, dans le CSS supplémentaire :
   .contact-tete { --contact-sinogramme: "谈"; } */

.contact-tete {
	position: relative;
	isolation: isolate;
}

.contact-tete > .contact-tete__titre {
	position: relative;
	max-width: 13ch;
	font-size: clamp( 2.45rem, 1.5rem + 4vw, var( --wp--preset--font-size--geant ) );
	line-height: 1.05;
	text-wrap: balance;
}

.contact-tete__titre::before {
	content: var( --contact-sinogramme, "聊" ) / "";
	position: absolute;
	top: -0.14em;
	left: -0.06em;
	z-index: -1;
	font-family: var( --police-cjk );
	font-size: clamp( 9rem, 24vw, 18rem );
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	color: var( --wp--preset--color--celadon );
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

.contact-tete > p {
	max-width: 38rem;
	margin-block: 1rem 0;
	text-wrap: pretty;
}

.contact-tete > .contact-tete__accroche {
	max-width: 30ch;
	margin-top: 1.75rem;
	font-family: var( --wp--preset--font-family--titre );
	font-size: clamp( 1.3rem, 1.1rem + 0.8vw, 1.55rem );
	font-style: italic;
	line-height: 1.35;
}

.contact-tete > .contact-tete__invitation {
	margin-top: 1.25rem;
	font-weight: 600;
	line-height: 1.5;
}