/*
Theme Name: Atelier Psyché
Theme URI: http://latelier-psych.local
Author: L'Atelier Psyché
Author URI: http://latelier-psych.local
Description: Thème bloc sur mesure pour une psychopraticienne recevant en visioconférence. Palette crème, terracotta, turquoise et lavande, typographie Cormorant Garamond / Nunito, formes organiques et illustrations aquarelle. Conçu pour respirer : beaucoup d'espace, peu de bruit, une ambiance chaleureuse et intime.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: atelier-psyche
Tags: block-templates, full-site-editing, one-column, custom-colors, custom-menu, editor-style, wide-blocks, blog, portfolio
*/

/* --------------------------------------------------------------------------
   Sommaire
   1.  Réglages de base
   2.  Texture & fonds organiques
   3.  En-tête et navigation
   4.  Formes organiques (galet, pétale)
   5.  Styles de blocs personnalisés
   6.  Cartes et listes de prestations
   7.  Articles du blog
   8.  Formulaire de contact
   9.  Pied de page
   10. Apparitions au défilement
   11. Accessibilité & impression
   -------------------------------------------------------------------------- */


/* 1. Réglages de base
   -------------------------------------------------------------------------- */

/* Les champs de formulaire ont une largeur de 100 % et du rembourrage : sans
   cette règle, ils dépassent de leur colonne et font déborder la page. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	/* Compense l'en-tête collant lors des ancres internes. */
	scroll-padding-top: 6rem;
}

/* Aucune césure automatique : elle hache la lecture en français. */
* {
	hyphens: none;
	-webkit-hyphens: none;
}

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

/* Ligature typographique douce sur les titres sérif. */
h1, h2, h3,
.wp-block-post-title,
.wp-block-site-title {
	font-variant-ligatures: common-ligatures;
	text-wrap: balance;
}

p, li {
	text-wrap: pretty;
}

/* Les mots trop longs se coupent plutôt que de déborder — sans césure. */
.wp-block-post-content p,
.entry-content p {
	overflow-wrap: break-word;
	word-break: normal;
}

/* Focus visible et cohérent avec la palette. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--terracotta-profond);
	outline-offset: 3px;
	border-radius: 4px;
}

::selection {
	background-color: var(--wp--preset--color--turquoise-voile);
	color: var(--wp--preset--color--encre);
}

/* Soulignement fin qui se dessine sur les liens de contenu. */
.wp-block-post-content a:where(:not(.wp-element-button):not(.wp-block-button__link)),
.entry-content a:where(:not(.wp-element-button):not(.wp-block-button__link)) {
	background-image: linear-gradient(var(--wp--preset--color--terracotta), var(--wp--preset--color--terracotta));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 1px;
	transition: background-size var(--wp--custom--transition--douce);
}

.wp-block-post-content a:where(:not(.wp-element-button):not(.wp-block-button__link)):hover,
.entry-content a:where(:not(.wp-element-button):not(.wp-block-button__link)):hover {
	background-size: 100% 2px;
}

/* Les boutons se soulèvent très légèrement. */
.wp-element-button,
.wp-block-button__link {
	transition:
		background-color var(--wp--custom--transition--douce),
		border-color var(--wp--custom--transition--douce),
		transform var(--wp--custom--transition--douce),
		box-shadow var(--wp--custom--transition--douce);
	will-change: transform;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--pose);
}

/* Variante « contour » : bouton discret sur fond clair. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	border-color: rgba(61, 43, 31, 0.28);
	color: var(--wp--preset--color--encre);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--encre);
	border-color: var(--wp--preset--color--encre);
	color: var(--wp--preset--color--creme-clair);
}


/* 2. Texture & fonds organiques
   -------------------------------------------------------------------------- */

/* Grain papier très léger sur toute la page : donne la matière « aquarelle ». */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.5;
	mix-blend-mode: multiply;
	background-image: url('assets/images/grain.svg');
	background-size: 220px 220px;
}

.wp-site-blocks {
	position: relative;
	z-index: 1;
}

/* Section avec un halo aquarelle diffus derrière le contenu. */
.est-halo {
	position: relative;
	isolation: isolate;
}

.est-halo::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -10% -5%;
	background-image: url('assets/images/halo-aquarelle.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	opacity: 0.85;
	pointer-events: none;
}

/*
 * Sur mobile, le halo débordait sur la section suivante.
 *
 * Un `inset` vertical en pourcentage se calcule sur la hauteur du bloc. Une
 * fois les colonnes empilées, la section devient bien plus haute et le
 * débordement grandit avec elle : le halo terracotta descendait jusque sous
 * le titre suivant, qui paraissait mordre dedans. On passe donc à un
 * débordement fixe, qui ne suit plus la hauteur.
 *
 * 16 px restent largement à l'intérieur des 32 px de respiration que la
 * section suivante réserve au-dessus d'elle sur cette largeur.
 */
@media (max-width: 781px) {
	.est-halo::before {
		inset: -16px -5%;
	}
}

/* Filet ondulé en séparateur de section. */
.wp-block-separator.is-style-ondule {
	border: none;
	height: 14px;
	max-width: 190px;
	opacity: 1;
	background-color: currentColor;
	color: var(--wp--preset--color--turquoise);
	-webkit-mask-image: url('assets/images/vague.svg');
	mask-image: url('assets/images/vague.svg');
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-size: auto 14px;
	mask-size: auto 14px;
}

/* Séparateur « point » minimal. */
.wp-block-separator.is-style-trois-points {
	border: none;
	height: auto;
	max-width: none;
	opacity: 1;
	background: none;
	text-align: center;
}

.wp-block-separator.is-style-trois-points::before {
	content: "· · ·";
	display: block;
	font-size: 1.5rem;
	letter-spacing: 0.4em;
	color: var(--wp--preset--color--terracotta);
	line-height: 1;
}


/* 3. En-tête et navigation
   -------------------------------------------------------------------------- */

.en-tete-site {
	position: sticky;
	top: 0;
	z-index: 40;
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	background-color: rgba(245, 239, 224, 0.82);
	border-bottom: 1px solid transparent;
	transition:
		background-color var(--wp--custom--transition--douce),
		border-color var(--wp--custom--transition--douce),
		box-shadow var(--wp--custom--transition--douce);
}

.en-tete-site.est-defile {
	background-color: rgba(251, 248, 241, 0.94);
	border-bottom-color: rgba(61, 43, 31, 0.08);
	box-shadow: 0 8px 28px -20px rgba(61, 43, 31, 0.4);
}

/* Logo du site : le papillon aquarelle et le nom du cabinet. */
.marque-site {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.marque-site .wp-block-site-logo {
	flex: 0 0 auto;
	line-height: 0;
}

.marque-site .wp-block-site-logo img {
	display: block;
	height: auto;
	transition: opacity var(--wp--custom--transition--douce);
}

.marque-site .wp-block-site-logo a:hover img {
	opacity: 0.78;
}

.marque-site .wp-block-site-tagline {
	font-size: var(--wp--preset--font-size--x-small);
	font-style: italic;
	color: var(--wp--preset--color--encre-doux);
	letter-spacing: 0.04em;
	margin: 0.1rem 0 0;
}

/* Lien de navigation : trait aquarelle qui se déploie. */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.35rem;
}

.wp-block-navigation
	:where(.wp-block-navigation-item:not(.has-child))
	.wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background-color: var(--wp--preset--color--turquoise);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--wp--custom--transition--douce);
}

.wp-block-navigation
	:where(.wp-block-navigation-item:not(.has-child))
	.wp-block-navigation-item__content:hover::after,
.wp-block-navigation
	:where(.wp-block-navigation-item.current-menu-item)
	.wp-block-navigation-item__content::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--encre);
}

/* Menu plein écran sur mobile : fond crème plutôt que noir. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--creme) !important;
	color: var(--wp--preset--color--encre) !important;
	padding: clamp(2rem, 8vw, 4rem);
}

.wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 1.9rem;
	font-weight: 400;
}

/*
 * Le menu plein écran doit couvrir l'écran, pas l'en-tête.
 *
 * WordPress ouvre ce menu en `position: fixed`, donc relativement à la
 * fenêtre. Mais un `backdrop-filter` fait de l'élément qui le porte un bloc
 * conteneur pour ses descendants en position fixe : l'en-tête devenait la
 * référence, et le menu se retrouvait haut de quelques dizaines de pixels.
 * On ne voyait que le premier lien, le reste demandait de faire défiler.
 *
 * Le flou est donc retiré tant que le menu est ouvert. Il n'y est de toute
 * façon plus visible, puisque le menu recouvre l'en-tête. `has-modal-open`
 * est posée par WordPress sur `<html>` à l'ouverture.
 *
 * Ne pas réintroduire de `backdrop-filter`, `transform`, `filter`,
 * `perspective`, `contain` ou `will-change` sur `.en-tete-site` sans
 * reprendre cette règle : le défaut reviendrait, et en silence.
 */
html.has-modal-open .en-tete-site {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--encre);
}

/* Bouton d'appel dans l'en-tête. */
.en-tete-site .wp-block-button__link {
	padding: 0.7rem 1.35rem;
	font-size: var(--wp--preset--font-size--x-small);
}


/* 4. Formes organiques (galet, pétale)
   -------------------------------------------------------------------------- */

/* Image en galet : bord irrégulier qui s'anime doucement au survol. */
.wp-block-image.is-style-galet img {
	border-radius: var(--wp--custom--rayon--galet);
	transition: border-radius 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wp-block-image.is-style-galet:hover img {
	border-radius: var(--wp--custom--rayon--petale);
}

.wp-block-image.is-style-petale img {
	border-radius: var(--wp--custom--rayon--petale);
}

/* Arche : le haut de l'image est arrondi comme une niche. */
.wp-block-image.is-style-arche img {
	border-radius: 50vw 50vw var(--wp--custom--rayon--doux) var(--wp--custom--rayon--doux);
}

/* Cadre aquarelle : halo coloré diffus derrière l'image. */
.wp-block-image.is-style-aquarelle {
	position: relative;
	isolation: isolate;
}

.wp-block-image.is-style-aquarelle::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -12%;
	background: radial-gradient(
			circle at 25% 20%,
			rgba(126, 200, 200, 0.55),
			rgba(126, 200, 200, 0) 60%
		),
		radial-gradient(
			circle at 78% 72%,
			rgba(195, 177, 212, 0.5),
			rgba(195, 177, 212, 0) 62%
		),
		radial-gradient(
			circle at 60% 15%,
			rgba(193, 122, 90, 0.35),
			rgba(193, 122, 90, 0) 58%
		);
	filter: blur(14px);
	pointer-events: none;
}


/* 4 bis. Illustrations de Betty
   --------------------------------------------------------------------------
   Aquarelles fournies par la praticienne. Elles sont posées sans ombre ni
   cadre : le fond blanc du papier se fond dans le crème de la page. */

.illu {
	margin-inline: auto;
}

/*
 * Les aquarelles sont des JPEG sur fond blanc. Sur le crème de la page, ce
 * blanc formait un rectangle visible — ce que l'on prenait pour une bordure
 * grise. « multiply » laisse passer le fond de page à travers le blanc : le
 * lavis se pose sur le papier au lieu d'être posé dans un cadre.
 */
.illu img {
	display: block;
	width: 100%;
	height: auto;
	border: none;
	box-shadow: none;
	border-radius: 12px;
	mix-blend-mode: multiply;
}

/* Bandeau d'accueil : à droite du titre, au-dessus sur mobile.
   Le lavis est posé sur un fond crème clair pour que les angles arrondis se
   voient : sans lui, « multiply » ferait disparaître le blanc du papier et le
   cadre avec. */
.illu-hero {
	max-width: 480px;
	border-radius: var(--wp--custom--rayon--ample);
	background-color: var(--wp--preset--color--creme-clair);
	border: var(--wp--custom--trait--voile);
	overflow: hidden;
	isolation: isolate;
}

.illu-hero img {
	border-radius: var(--wp--custom--rayon--ample);
}

/* Bandeau de la page À propos. */
.illu-portrait {
	max-width: 400px;
}

/* Présentation « Qui vous reçoit », alignée à gauche sur desktop. */
.illu-presentation {
	max-width: 320px;
	margin-inline: 0 auto;
}

/* Carte de prestation : centrée au-dessus du texte. */
.illu-carte {
	max-width: 280px;
}

/* Cercles de femmes : à droite du texte sur grand écran, au-dessus une fois
   les colonnes empilées. */
.illu-cercles {
	max-width: 220px;
}

/* Page Contact : médaillon posé sous la colonne « Me joindre ». */
.illu-contact {
	max-width: 240px;
}

/* Vignettes des cartes « On vient ici pour », sur l'accueil. */
.illu-vignette {
	max-width: 150px;
	margin-bottom: 1.1rem;
}

/* Médaillons des trois temps de l'approche, sur l'accueil. */
.illu-approche {
	max-width: 180px;
	margin-bottom: 1.35rem;
}

/*
 * Médaillon : cadre rond, jamais un carré aux angles adoucis. Les fichiers
 * `*-rond.jpg` sont déjà carrés et tous de la même taille (440 × 440) : le
 * disque n'a plus qu'à les découper, et deux illustrations voisines occupent
 * exactement la même place. Le filet tient lieu de cadre ; « isolation »
 * enferme le « multiply » de l'image dans le disque, pour que le blanc du
 * papier se fonde dans le crème du médaillon et non dans celui de la page.
 */
.illu-medaillon {
	/* WordPress passe les figures « aligncenter » en display:table, qui ignore
	   aspect-ratio : on revient à un bloc. */
	display: block;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--wp--preset--color--creme-clair);
	border: var(--wp--custom--trait--discret);
	overflow: hidden;
	isolation: isolate;
}

.illu-medaillon img {
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

/* Illustration posée seule, après un bloc de texte. Comme le bandeau
   d'accueil, elle a besoin d'un fond opaque pour que ses angles arrondis se
   voient : « multiply » ferait sinon disparaître le blanc du papier, et le
   cadre avec. */
.illu-signature {
	max-width: 250px;
	margin: var(--wp--preset--spacing--40) auto 0;
	border-radius: var(--wp--custom--rayon--ample);
	background-color: var(--wp--preset--color--creme-clair);
	border: var(--wp--custom--trait--voile);
	overflow: hidden;
	isolation: isolate;
}

.illu-signature img {
	border-radius: var(--wp--custom--rayon--ample);
}


/* 5. Styles de blocs personnalisés
   -------------------------------------------------------------------------- */

/* Titre souligné d'un coup de pinceau. */
.is-style-pinceau {
	position: relative;
	display: inline-block;
}

.is-style-pinceau::after {
	content: "";
	position: absolute;
	left: -0.12em;
	right: -0.12em;
	bottom: -0.06em;
	height: 0.34em;
	z-index: -1;
	background-color: var(--wp--preset--color--turquoise);
	opacity: 0.42;
	border-radius: 60% 40% 55% 45% / 100% 100% 60% 70%;
	pointer-events: none;
}

/* Surtitre : petite étiquette au-dessus des titres de section. */
.is-style-surtitre {
	font-family: var(--wp--preset--font-family--nunito);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta-profond);
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: 0.6rem;
}

.is-style-surtitre::before {
	content: "";
	flex: 0 0 auto;
	width: 2.2rem;
	height: 1px;
	background-color: currentColor;
	opacity: 0.6;
}

.has-text-align-center.is-style-surtitre {
	justify-content: center;
}

.has-text-align-center.is-style-surtitre::after {
	content: "";
	flex: 0 0 auto;
	width: 2.2rem;
	height: 1px;
	background-color: currentColor;
	opacity: 0.6;
}

/* Lettrine sérif pour ouvrir un long texte. */
.wp-block-paragraph.has-drop-cap:not(:focus)::first-letter {
	font-family: var(--wp--preset--font-family--cormorant);
	font-weight: 400;
	color: var(--wp--preset--color--terracotta-profond);
	font-size: 4.2em;
	line-height: 0.76;
	margin: 0.08em 0.12em 0 0;
}

/* Citation posée sur un fond voilé, sans filet. */
.wp-block-quote.is-style-souffle {
	border: none;
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--creme-clair);
	border-radius: var(--wp--custom--rayon--ample);
	position: relative;
}

.wp-block-quote.is-style-souffle::before {
	content: "\201C";
	position: absolute;
	top: -0.12em;
	left: 0.3em;
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 6rem;
	line-height: 1;
	color: var(--wp--preset--color--lavande);
	opacity: 0.55;
	pointer-events: none;
}

.wp-block-quote.is-style-souffle cite {
	display: block;
	margin-top: 1.2rem;
	font-family: var(--wp--preset--font-family--nunito);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--encre-doux);
}


/* 6. Cartes et listes de prestations
   -------------------------------------------------------------------------- */

/* Carte douce : groupe posé sur un fond clair, coins généreux. */
.wp-block-group.is-style-carte {
	background-color: var(--wp--preset--color--creme-clair);
	border-radius: var(--wp--custom--rayon--ample);
	padding: var(--wp--preset--spacing--40);
	border: var(--wp--custom--trait--voile);
	transition:
		transform var(--wp--custom--transition--douce),
		box-shadow var(--wp--custom--transition--douce);
	height: 100%;
}

.wp-block-group.is-style-carte:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--pose);
}

/*
 * Carte des cercles de femmes : la même carte que les autres prestations,
 * posée sur un voile de lavande. Le préréglage « Lavande voilé » est un aplat
 * opaque ; ici on veut les 15 % de lavande demandés, sous lesquels le crème de
 * la page continue de transparaître.
 */
.wp-block-group.is-style-carte.carte-cercles {
	background-color: rgba(195, 177, 212, 0.15);
}

/*
 * Carte de prise de rendez-vous, page Contact. Posée dans un bloc large, elle
 * serait trop étalée : les deux options se liraient comme deux colonnes alors
 * qu'elles se succèdent. On la ramène à une largeur de lecture confortable.
 */
.wp-block-group.is-style-carte.carte-reservation {
	max-width: 44rem;
	margin-inline: auto;
}

/*
 * Les trois temps du règlement par virement. C'était un paragraphe compact,
 * difficile à parcourir : chaque étape est isolée et numérotée. La pétale
 * terracotta des listes du thème cède la place au numéro, dans une pastille
 * de la même famille. La liste reste alignée à gauche, seul son conteneur est
 * centré : une liste à puces centrée désaligne chaque puce.
 */
.wp-block-list.is-style-petales.etapes-virement {
	counter-reset: etape;
}

.wp-block-list.is-style-petales.etapes-virement > li {
	counter-increment: etape;
	padding-left: 2.8rem;
	margin-bottom: 1rem;
}

.wp-block-list.is-style-petales.etapes-virement > li::before {
	content: counter(etape);
	top: -0.1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--terracotta-voile);
	color: var(--wp--preset--color--terracotta-profond);
	font-size: 0.85rem;
	font-weight: 600;
}

/* Carte contour : plus légère, juste un filet. */
.wp-block-group.is-style-carte-contour {
	background-color: transparent;
	border: var(--wp--custom--trait--discret);
	border-radius: var(--wp--custom--rayon--ample);
	padding: var(--wp--preset--spacing--40);
	height: 100%;
}

/* Les colonnes d'une grille de cartes s'étirent à la même hauteur. */
.wp-block-columns.est-grille-cartes {
	align-items: stretch;
}

.wp-block-columns.est-grille-cartes > .wp-block-column {
	display: flex;
	flex-direction: column;
}

/* Pastille numérotée / icône ronde en tête de carte. */
.pastille {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: var(--wp--custom--rayon--galet);
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--wp--preset--color--encre);
	background-color: var(--wp--preset--color--turquoise-voile);
	margin-bottom: 1.1rem;
}

.pastille.est-terracotta {
	background-color: var(--wp--preset--color--terracotta-voile);
}

.pastille.est-lavande {
	background-color: var(--wp--preset--color--lavande-voile);
}

/* Liste à puces « pétale » plutôt que disque. */
.wp-block-list.is-style-petales {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-petales > li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: 0.7rem;
}

.wp-block-list.is-style-petales > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: var(--wp--custom--rayon--petale);
	background-color: var(--wp--preset--color--terracotta);
}

/*
 * Bibliothèque de lectures, page Ressources. Chaque puce porte le titre et
 * l'auteur, puis la phrase qui dit de quoi le livre parle. Le bloc Liste ne
 * permet pas de régler la taille d'un fragment de puce : la phrase est donc
 * un span à qui l'on donne le corps et la couleur des textes secondaires.
 * Les puces sont plus espacées qu'ailleurs, chacune tenant sur deux lignes.
 */
.wp-block-list.is-style-petales.liste-lectures > li {
	margin-bottom: 1.15rem;
}

/*
 * Nom de l'auteur, quand il signe plusieurs livres de la même carte : ses
 * titres se rangent dessous et cessent de répéter son nom. Les livres isolés
 * gardent le leur sur la ligne du titre, sans intertitre.
 */
.auteur-lectures {
	margin-top: 1.7rem;
	margin-bottom: 0.7rem;
}

.liste-lectures .lecture-theme {
	display: block;
	margin-top: 0.15rem;
	color: var(--wp--preset--color--encre-doux);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

/* Bloc Détails (FAQ) épuré. */
.wp-block-details {
	border-bottom: var(--wp--custom--trait--discret);
	padding: 1.25rem 0;
}

.wp-block-details summary {
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: var(--wp--preset--font-size--large);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	transition: color var(--wp--custom--transition--douce);
}

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

.wp-block-details summary:hover {
	color: var(--wp--preset--color--terracotta-profond);
}

.wp-block-details summary::after {
	content: "+";
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--nunito);
	font-size: 1.4rem;
	font-weight: 300;
	line-height: 1;
	color: var(--wp--preset--color--terracotta-profond);
	transition: transform var(--wp--custom--transition--douce);
}

.wp-block-details[open] summary::after {
	transform: rotate(45deg);
}

.wp-block-details > *:not(summary) {
	margin-top: 0.9rem;
	color: var(--wp--preset--color--encre-doux);
	max-width: 60ch;
}

/*
 * Dépliant de la bibliothèque, page Ressources. Six cartes de onze livres à la
 * suite faisaient une page qu'on parcourait sans la lire : chaque carte garde
 * son titre et sa phrase, et range ses livres derrière une flèche. Le bloc
 * Détails du cœur fait cela sans une ligne de JavaScript, et continue de
 * s'ouvrir si la feuille de style ne charge pas.
 *
 * Les règles de la FAQ, juste au-dessus, posent un filet sous le bloc et un
 * « + » qui se croise. Ici la carte tient déjà lieu de cadre, et la flèche dit
 * mieux que le contenu se déplie dessous.
 */
.wp-block-details.depliant-lectures {
	border-bottom: none;
	padding: 0;
	margin-top: 1.4rem;
}

.wp-block-details.depliant-lectures > summary {
	justify-content: flex-start;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--wp--preset--font-family--nunito);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--terracotta-profond);
}

/*
 * La flèche : deux bords d'un carré vide, pivotés. Fermée elle pointe à
 * droite, ouverte elle pointe vers le bas. Dessinée plutôt que posée en
 * caractère, pour ne dépendre d'aucune police de secours.
 */
.wp-block-details.depliant-lectures > summary::after {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transform-origin: 65% 65%;
}

.wp-block-details.depliant-lectures[open] > summary::after {
	transform: rotate(45deg);
}

/*
 * Le contenu déplié reprend les couleurs et la largeur de la carte : la règle
 * de la FAQ le ramènerait à 60ch et le passerait tout entier en encre douce,
 * ce qui effacerait les titres de livres.
 */
.wp-block-details.depliant-lectures > *:not(summary) {
	margin-top: 1.4rem;
	color: inherit;
	max-width: none;
}

.wp-block-details.depliant-lectures > .auteur-lectures {
	margin-top: 1.7rem;
}


/* 7. Articles du blog
   -------------------------------------------------------------------------- */

.liste-articles .wp-block-post {
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: var(--wp--custom--trait--voile);
}

.liste-articles .wp-block-post:last-child {
	border-bottom: none;
}

.liste-articles .wp-block-post-featured-image img {
	border-radius: var(--wp--custom--rayon--ample);
	transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.liste-articles .wp-block-post-featured-image {
	overflow: hidden;
	border-radius: var(--wp--custom--rayon--ample);
}

.liste-articles .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.035);
}

.wp-block-post-title a {
	transition: color var(--wp--custom--transition--douce);
}

/* Métadonnées d'article : petite ligne discrète. */
.meta-article {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--encre-doux);
}

/*
 * Partage d'un article. Des liens, pas des boutons de plateforme : voir le
 * commentaire de `atelier_psyche_partage()` dans functions.php. Rien à charger,
 * donc rien à styler d'autre qu'une ligne de liens.
 */
.partage-article {
	margin-top: 1.6rem;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}

.partage-titre {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--encre-doux);
}

.partage-liens {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Chaque service porte sa couleur, mais seulement dans la pastille de l'icône :
 * un aplat de bleu Facebook en pleine page jurerait avec les aquarelles. La
 * couleur ne prend toute la pastille qu'au survol, où elle devient une réponse
 * au geste plutôt qu'un bruit de fond.
 */
.partage-lien {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0.9rem 0.25rem 0.3rem;
	border: var(--wp--custom--trait--discret);
	border-radius: 999px;
	background: none;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
	text-decoration: none;
	color: var(--wp--preset--color--encre-doux);
	cursor: pointer;
	transition:
		color var(--wp--custom--transition--douce),
		border-color var(--wp--custom--transition--douce);
}

.partage-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 999px;
	color: var(--partage-teinte);
	/* Repli d'abord, pour les navigateurs sans color-mix. */
	background-color: var(--wp--preset--color--creme-clair);
	background-color: color-mix(in srgb, var(--partage-teinte) 14%, transparent);
	transition:
		background-color var(--wp--custom--transition--douce),
		color var(--wp--custom--transition--douce);
}

.partage-icone svg {
	width: 1rem;
	height: 1rem;
	display: block;
}

.partage-lien:hover,
.partage-lien:focus-visible {
	color: var(--partage-teinte);
	border-color: var(--partage-teinte);
}

.partage-lien:hover .partage-icone,
.partage-lien:focus-visible .partage-icone {
	background-color: var(--partage-teinte);
	color: #fff;
}

.partage-lien.est-facebook {
	--partage-teinte: #1877F2;
}

.partage-lien.est-whatsapp {
	--partage-teinte: #1FA855;
}

.partage-lien.est-email {
	--partage-teinte: var(--wp--preset--color--terracotta-profond);
}

.partage-lien.est-copie {
	--partage-teinte: #7A5EA8;
}

/* Confirmation de la copie, annoncée aussi par les lecteurs d'écran. */
.partage-retour {
	flex-basis: 100%;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--terracotta-profond);
}

.partage-retour:empty {
	display: none;
}

/* Note sur l'approche, au pied de chaque article. */
.note-approche {
	max-width: 60ch;
}

/* Pagination sobre. */
.wp-block-query-pagination {
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-query-pagination .page-numbers {
	padding: 0.4rem 0.75rem;
	border-radius: 999px;
	transition: background-color var(--wp--custom--transition--douce);
}

.wp-block-query-pagination .page-numbers.current {
	background-color: var(--wp--preset--color--terracotta-voile);
	color: var(--wp--preset--color--encre);
}


/* 8. Formulaire de contact
   -------------------------------------------------------------------------- */

/* Colonnes de la page contact : jamais superposées, jamais collées.
   Sous 782 px, WordPress les empile déjà — on garde le même écart. */
.wp-block-columns {
	min-width: 0;
}

.wp-block-column {
	min-width: 0;
}

.bloc-contact.wp-block-columns {
	gap: 40px;
}

@media (max-width: 781px) {
	.bloc-contact.wp-block-columns {
		flex-direction: column;
		gap: 40px;
	}
}

.formulaire-atelier {
	display: grid;
	gap: 1.35rem;
	min-width: 0;
}

.formulaire-atelier .champ-double {
	display: grid;
	gap: 1.35rem;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.formulaire-atelier .champ-double {
		grid-template-columns: 1fr 1fr;
	}
}

.formulaire-atelier label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.03em;
	margin-bottom: 0.45rem;
	color: var(--wp--preset--color--encre);
}

.formulaire-atelier :where(input[type="text"], input[type="email"], input[type="tel"], textarea, select) {
	width: 100%;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 300;
	color: var(--wp--preset--color--encre);
	background-color: var(--wp--preset--color--creme-clair);
	border: var(--wp--custom--trait--discret);
	border-radius: var(--wp--custom--rayon--doux);
	padding: 0.9rem 1.1rem;
	transition:
		border-color var(--wp--custom--transition--douce),
		box-shadow var(--wp--custom--transition--douce),
		background-color var(--wp--custom--transition--douce);
}

.formulaire-atelier :where(input, textarea, select):focus {
	outline: none;
	background-color: var(--wp--preset--color--blanc);
	border-color: var(--wp--preset--color--turquoise);
	box-shadow: 0 0 0 4px rgba(126, 200, 200, 0.28);
}

.formulaire-atelier textarea {
	min-height: 10rem;
	resize: vertical;
}

.formulaire-atelier .mention-rgpd {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--encre-doux);
	line-height: 1.6;
}

.formulaire-atelier .case-consentement {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
}

.formulaire-atelier .case-consentement input {
	margin-top: 0.32rem;
	width: 1.05rem;
	height: 1.05rem;
	accent-color: var(--wp--preset--color--terracotta-profond);
	flex: 0 0 auto;
}

.formulaire-atelier .case-consentement label {
	margin-bottom: 0;
	font-weight: 300;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--encre-doux);
}

/* Champ anti-spam : invisible pour l'humain, atteignable par les robots. */
.formulaire-atelier .champ-pot-de-miel {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.formulaire-atelier button[type="submit"] {
	justify-self: start;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--nunito);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--creme-clair);
	background-color: var(--wp--preset--color--terracotta-profond);
	border: 1px solid var(--wp--preset--color--terracotta-profond);
	border-radius: 999px;
	padding: 1rem 2.2rem;
	transition:
		background-color var(--wp--custom--transition--douce),
		transform var(--wp--custom--transition--douce),
		box-shadow var(--wp--custom--transition--douce);
}

.formulaire-atelier button[type="submit"]:hover {
	background-color: var(--wp--preset--color--encre);
	border-color: var(--wp--preset--color--encre);
	transform: translateY(-2px);
	box-shadow: var(--wp--preset--shadow--pose);
}

/*
 * Lettre d'information. L'encart reste sobre : un aplat crème clair et un
 * filet, sans dégradé, pour ne pas rivaliser avec l'appel à rendez-vous qui
 * le précède sur l'accueil.
 */
.encart-newsletter {
	border: var(--wp--custom--trait--discret);
}

/* Le champ et le bouton sur une même ligne dès qu'il y a la place. Le bouton
   s'aligne sur le bas du champ, pas sur son étiquette. */
.formulaire-newsletter .ligne-newsletter {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	align-items: end;
}

@media (min-width: 480px) {
	.formulaire-newsletter .ligne-newsletter {
		grid-template-columns: 1fr auto;
	}
}

.formulaire-newsletter button[type="submit"] {
	justify-self: stretch;
	white-space: nowrap;
	padding: 0.9rem 1.9rem;
}

@media (min-width: 480px) {
	.formulaire-newsletter button[type="submit"] {
		justify-self: start;
	}
}

/* Tant que Brevo n'est pas branché, le formulaire s'affiche mais n'accepte
   rien : il faut que cela se voie. */
.formulaire-newsletter :disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.formulaire-newsletter button[type="submit"]:disabled:hover {
	background-color: var(--wp--preset--color--terracotta-profond);
	border-color: var(--wp--preset--color--terracotta-profond);
	transform: none;
	box-shadow: none;
}

.message-formulaire {
	border-radius: var(--wp--custom--rayon--doux);
	padding: 1rem 1.25rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.message-formulaire.est-succes {
	background-color: var(--wp--preset--color--turquoise-voile);
	color: var(--wp--preset--color--encre);
	border: 1px solid rgba(62, 140, 140, 0.4);
}

.message-formulaire.est-erreur {
	background-color: var(--wp--preset--color--terracotta-voile);
	color: var(--wp--preset--color--encre);
	border: 1px solid rgba(168, 95, 63, 0.45);
}

/* Coordonnées : liste à icônes discrètes. */
.liste-coordonnees {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 1.1rem;
}

.liste-coordonnees li {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	line-height: 1.55;
}

.liste-coordonnees .puce {
	flex: 0 0 auto;
	width: 2.35rem;
	height: 2.35rem;
	border-radius: var(--wp--custom--rayon--galet);
	background-color: var(--wp--preset--color--lavande-voile);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.95rem;
}

/* L'adresse e-mail et le téléphone tiennent sur une ligne : ce sont des
   valeurs courtes, qu'une coupure rendrait illisibles. La ligne « Séances »
   n'est pas un lien et continue de se replier normalement. */
.liste-coordonnees a {
	white-space: nowrap;
}


/* 9. Pied de page
   -------------------------------------------------------------------------- */

.pied-site {
	border-top: var(--wp--custom--trait--voile);
}

.pied-site .wp-block-navigation {
	font-size: var(--wp--preset--font-size--small);
}

.pied-site .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--terracotta-profond);
}

.mentions-bas {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--encre-doux);
	letter-spacing: 0.03em;
}


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

/* Les éléments marqués montent doucement quand ils entrent dans le champ.
   Sans JavaScript actif, ils restent simplement visibles. */
.js-apparition:not(.est-visible) {
	opacity: 0;
	transform: translateY(22px);
}

.js-apparition {
	transition:
		opacity 720ms cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* 11. Accessibilité & impression
   -------------------------------------------------------------------------- */

/* Lien d'évitement produit par WordPress pour les thèmes bloc. */
.skip-link:focus {
	background-color: var(--wp--preset--color--creme-clair);
	color: var(--wp--preset--color--encre);
	font-family: var(--wp--preset--font-family--nunito);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: 0.9rem 1.4rem;
	border-radius: var(--wp--custom--rayon--doux);
	box-shadow: var(--wp--preset--shadow--pose);
	z-index: 100;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.js-apparition:not(.est-visible) {
		opacity: 1;
		transform: none;
	}

	.wp-element-button:hover,
	.wp-block-button__link:hover,
	.wp-block-group.is-style-carte:hover {
		transform: none;
	}
}

@media (prefers-contrast: more) {
	body {
		--wp--preset--color--encre-doux: #4A3728;
	}

	.wp-block-group.is-style-carte,
	.wp-block-group.is-style-carte-contour {
		border-color: rgba(61, 43, 31, 0.3);
	}
}

@media print {
	body::before,
	.en-tete-site,
	.pied-site,
	.wp-block-query-pagination,
	.formulaire-atelier {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	.js-apparition {
		opacity: 1 !important;
		transform: none !important;
	}

	/*
	 * Les dépliants s'impriment ouverts. Une bibliographie est de celles qu'on
	 * imprime, et un navigateur n'imprime par défaut que les blocs Détails
	 * déjà dépliés : la page serait sortie réduite à six titres.
	 *
	 * Deux règles parce que les navigateurs replient le contenu de deux façons
	 * selon leur âge : les récents par le pseudo-élément ::details-content, les
	 * autres en masquant les enfants. Celle que le navigateur ne comprend pas
	 * est ignorée sans toucher à l'autre. Sans effet à l'écran.
	 */
	.depliant-lectures::details-content {
		content-visibility: visible !important;
	}

	.depliant-lectures > *:not(summary) {
		display: block !important;
	}

	/* La flèche ne veut rien dire sur du papier. */
	.depliant-lectures > summary::after {
		display: none;
	}
}