/*
Theme Name: Studio Yami Child
Theme URI: https://studioyami.fr
Description: Thème enfant de Twenty Twenty-Five pour le site Studio Yami.
Author: Mat (Easify)
Author URI: https://agence-easify.com
Template: twentytwentyfive
Version: 1.18.1
Text Domain: studioyami-child
*/

/* =========================================================
   CONVENTION DE NOMMAGE
   Préfixe `sy-` sur tout ce qui est propre au projet.
   Bloc : .sy-header        Élément : .sy-header__inner
   Variante : .sy-cta--clair
   Les couleurs passent par les variables de la palette
   (var(--wp--preset--color--…)) : si la palette change dans
   theme.json, tout suit automatiquement.

   ANCRES DE SECTION
   #approches #seances #collectif #stage #alexia #entreprises #cadeau #lettre
   ========================================================= */

/* Gras dans le texte courant (qui reste en 300, hérité du parent).
   Par défaut, « bolder » ne donnait que 400 : trop proche du texte.
   On monte de deux crans, à 600. */
strong,
b {
	font-weight: 600;
}

:root {
	--sy-wrap: min(1440px, 90vw);
	--sy-air: clamp(4rem, 8.5vw, 7rem);
	--sy-air-mince: clamp(3rem, 6vw, 4.4rem);
}

/* ---------------------------------------------------------
   FOCUS
   Twenty Twenty-Five trace un contour sur tout élément qui a le focus
   (:focus), y compris après un simple clic : le lien cliqué restait
   encadré. On ne garde le contour que pour la navigation au clavier
   (:focus-visible), qui reste donc accessible.
   --------------------------------------------------------- */
.wp-site-blocks a:focus:not(:focus-visible),
.wp-site-blocks button:focus:not(:focus-visible),
.wp-site-blocks summary:focus:not(:focus-visible) {
	outline: none;
}

/* ---------------------------------------------------------
   EN-TÊTE
   --------------------------------------------------------- */
/* En-tête collant. Le collant se pose sur l'enveloppe <header> de la
   partie de modèle, et non sur .sy-header : un élément sticky ne colle
   qu'à l'intérieur de son parent, et ce parent (<header>) a exactement
   la hauteur de l'en-tête, il n'y avait donc aucune marge pour coller.
   La variable de la barre d'admin décale l'en-tête quand on est connecté. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 30;
}

.sy-header {
	/* Couleurs inversées : fond Violet nuit, textes Crème. */
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 95%, transparent);
	color: var(--wp--preset--color--base);
	backdrop-filter: blur(10px);
	transition: box-shadow 0.25s ease;
}

.sy-header__inner {
	width: var(--sy-wrap);
	margin-inline: auto;
	padding-block: 0.55rem;
	gap: 1.5rem;
	transition: padding 0.25s ease;
}

/* État réduit, posé par sy-scroll.js dès qu'on quitte le haut de page :
   barre plus fine, logo plus petit, léger filet d'ombre. On revient à
   la taille normale une fois de retour tout en haut. */
.sy-header__brand img {
	transition: width 0.25s ease;
}

.sy-header.est-reduit {
	box-shadow: 0 1px 0 color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent), 0 8px 24px color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
}

.sy-header.est-reduit .sy-header__inner {
	padding-block: 0.3rem;
}

.sy-header.est-reduit .sy-header__brand img {
	width: 56px !important;
	height: auto;
}

@media (prefers-reduced-motion: reduce) {
	.sy-header,
	.sy-header__inner,
	.sy-header__brand img {
		transition: none;
	}
}

.sy-header__brand {
	margin-right: auto;
	/* Le logo est un bloc Image (figure) : on neutralise sa marge basse
	   par défaut pour qu'il reste centré verticalement dans la barre. */
	margin-block: 0;
}

.sy-header__brand img {
	height: auto;
}

.sy-header__brand img {
	display: block;
}

.sy-header__nav a,
.sy-header__utils-nav a {
	font-size: 0.76rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

.sy-header__nav a {
	color: var(--wp--preset--color--base);
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
}

.sy-header__nav a:hover {
	border-bottom-color: var(--wp--preset--color--accent-3);
}

.sy-header__utils {
	gap: 1.1rem;
	padding-left: 1.3rem;
	border-left: 1px solid var(--wp--preset--color--accent-6);
}

.sy-header__utils-nav a {
	color: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
}

.sy-header__utils-nav a:hover {
	color: var(--wp--preset--color--base);
}

/* Bouton « Réserver » de l'en-tête : inversé lui aussi (fond Crème,
   texte Violet nuit) pour rester visible sur la barre violette. Le
   survol reste géré par la règle générale des boutons pleins. */
.sy-header__cta .wp-block-button__link {
	--sy-btn-fond: var(--wp--preset--color--base);
	--sy-btn-texte: var(--wp--preset--color--contrast);
	background-color: var(--sy-btn-fond);
	color: var(--sy-btn-texte);
}

@media (max-width: 1080px) {
	.sy-header__utils {
		padding-left: 0;
		border-left: 0;
	}

	.sy-header__utils-nav {
		display: none;
	}
}

/* Menu burger (« .sy-header__menu ») : un 3e bloc Navigation, en
   superposition « toujours », qui reprend tous les liens. Affiché
   seulement sous 1080px, à la place du menu principal. À l'ouverture :
   plein écran violet nuit, liens au style du menu desktop empilés à la
   verticale, croix de fermeture en haut à droite. */
@media (min-width: 1081px) {
	.sy-header .sy-header__menu {
		display: none;
	}
}

@media (max-width: 1080px) {
	.sy-header .sy-header__nav {
		display: none;
	}
}

.sy-header__menu .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--base);
	padding: 0.45rem 0.2rem;
}

.sy-header__menu .wp-block-navigation__responsive-container-open svg {
	width: 28px;
	height: 28px;
}

/* Le flou d'arrière-plan de l'en-tête fait de lui le repère des éléments
   « fixed » : sans cette ligne, le plein écran serait enfermé dans la
   hauteur de la barre. On le coupe le temps que le menu est ouvert. */
.sy-header:has(.is-menu-open) {
	backdrop-filter: none;
}

/* Spécificité renforcée (5 classes) ici et dans les règles suivantes :
   le bloc Navigation impose ses propres fond, couleur, marges et
   alignements avec des sélecteurs à 3 ou 4 classes. */
.sy-header .wp-block-navigation.sy-header__menu .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed;
	animation: none;
	inset: var(--wp-admin--admin-bar--height, 0px) 0 0 0;
	width: 100%;
	height: auto;
	padding: 0;
	overflow-y: auto;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	z-index: 100000;
}

.sy-header .wp-block-navigation.sy-header__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.sy-header .wp-block-navigation.sy-header__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	max-width: none;
	width: 100%;
	height: 100%;
	margin: 0;
}

.sy-header .wp-block-navigation.sy-header__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	position: relative;
	min-height: 100%;
	display: flex;
	flex-direction: column;
}

/* Croix : alignée sur la position du burger, en haut à droite. */
.sy-header .wp-block-navigation.sy-header__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: 1.4rem;
	right: 5vw;
	padding: 0.3rem;
	color: var(--wp--preset--color--base);
}

.sy-header .wp-block-navigation.sy-header__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	width: 30px;
	height: 30px;
}

.sy-header .wp-block-navigation.sy-header__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	flex: 1;
	justify-content: center;
	align-items: center;
	padding: 5.5rem 5vw 3rem;
	gap: 0;
}

.sy-header .wp-block-navigation.sy-header__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex: 0 0 auto;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1.6rem;
}

/* Liens : même style que le menu desktop (capitales espacées, crème,
   soulignement safran au survol), un peu plus grands pour le doigt. */
.sy-header .wp-block-navigation.sy-header__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 0.95rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--base);
	padding: 0.2rem 0 3px;
	border-bottom: 1px solid transparent;
}

.sy-header .wp-block-navigation.sy-header__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.sy-header .wp-block-navigation.sy-header__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	border-bottom-color: var(--wp--preset--color--accent-3);
}

.sy-header .wp-block-navigation.sy-header__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible,
.sy-header .wp-block-navigation.sy-header__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-3);
	outline-offset: 4px;
}

/* Dernier lien du menu mobile (« Réserver », classe sy-menu__cta posée
   sur l'élément de navigation) : même bouton plein que dans l'en-tête
   desktop, survol inversé comme les autres boutons du site. */
.sy-header .wp-block-navigation.sy-header__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.sy-menu__cta {
	margin-top: 0.8rem;
}

.sy-header .wp-block-navigation.sy-header__menu .wp-block-navigation__responsive-container.is-menu-open .sy-menu__cta .wp-block-navigation-item__content {
	display: inline-block;
	padding: 1rem 2.25rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.17em;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 0;
	border-radius: 3px;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.sy-header .wp-block-navigation.sy-header__menu .wp-block-navigation__responsive-container.is-menu-open .sy-menu__cta .wp-block-navigation-item__content:hover,
.sy-header .wp-block-navigation.sy-header__menu .wp-block-navigation__responsive-container.is-menu-open .sy-menu__cta .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--contrast);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--base);
}

/* ---- Sous-menu « Mes approches » (bloc Sous-menu de navigation) ----
   Entrée sans page : un libellé, pas un lien. Elle ouvre au survol
   (ou au clavier via la petite flèche) une liste Reiki / Sonothérapie /
   Massage. Le bloc Navigation donne par défaut un sous-menu blanc à
   texte noir : on le passe en violet nuit, comme la barre. */
.sy-header__nav a:not([href]) {
	cursor: default;
}

.sy-header__nav .wp-block-navigation-submenu > a:not([href]):hover {
	border-bottom-color: transparent;
}

.sy-header .sy-header__nav .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--base);
	margin-left: 0.35em;
	padding: 0;
	background: none;
}

.sy-header .wp-block-navigation.sy-header__nav .wp-block-navigation__submenu-container {
	min-width: 220px;
	margin-top: 0.9rem;
	padding: 0.55rem 0;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 16%, transparent);
	border-radius: 3px;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
}

/* Pont invisible entre le libellé et la liste : le survol ne se perd
   pas dans l'espace qui les sépare. */
.sy-header .wp-block-navigation.sy-header__nav .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 1rem;
}

.sy-header .wp-block-navigation.sy-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 0.6rem 1.3rem;
	border-bottom: 0;
	color: var(--wp--preset--color--base);
	white-space: nowrap;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.sy-header .wp-block-navigation.sy-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.sy-header .wp-block-navigation.sy-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--accent-3);
	background: color-mix(in srgb, var(--wp--preset--color--base) 6%, transparent);
}

/* Menu mobile : le sous-menu est déplié d'office par le bloc Navigation.
   Libellé au style des autres entrées ; les trois pages juste dessous,
   plus petites et adoucies, centrées comme le reste. */
.sy-header .wp-block-navigation.sy-header__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu {
	align-items: center;
}

.sy-header .wp-block-navigation.sy-header__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu > a:not([href]) {
	border-bottom-color: transparent;
}

.sy-header .wp-block-navigation.sy-header__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	align-items: center;
	gap: 0.7rem;
	padding: 0.9rem 0 0;
	background: transparent;
	border: 0;
}

.sy-header .wp-block-navigation.sy-header__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.1rem 0 3px;
	font-size: 0.8rem;
	color: color-mix(in srgb, var(--wp--preset--color--base) 72%, transparent);
}

.sy-header .wp-block-navigation.sy-header__menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--base);
}

@media (prefers-reduced-motion: reduce) {
	.sy-header .wp-block-navigation.sy-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		transition: none;
	}
}

/* ---------------------------------------------------------
   LA LETTRE D'YAMI  (section 11)
   --------------------------------------------------------- */
.sy-newsletter {
	/* Bas réduit de moitié : la newsletter et le pied de page (même fond
	   violet) se suivent, l'écart cumulé entre les deux était trop grand. */
	padding-block: var(--sy-air-mince) calc(var(--sy-air-mince) / 2);
}

.sy-newsletter__inner {
	width: var(--sy-wrap);
	margin-inline: auto;
	gap: clamp(2rem, 5vw, 4rem);
}

.sy-newsletter .sy-eyebrow {
	color: var(--wp--preset--color--accent-3);
}

.sy-newsletter__field {
	display: flex;
	gap: 0.7rem;
	flex-wrap: wrap;
}

.sy-newsletter__field input {
	flex: 1 1 14rem;
	font-family: inherit;
	font-size: 0.98rem;
	font-weight: 300;
	padding: 1em 1.1em;
	color: var(--wp--preset--color--base);
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 28%, transparent);
	border-radius: 3px;
}

.sy-newsletter__field input::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--base) 60%, transparent);
}

.sy-newsletter__submit {
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	padding: 1em 2em;
	cursor: pointer;
	color: var(--wp--preset--color--accent-1);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--base);
	border-radius: 3px;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Survol inversé, comme les autres boutons pleins : le fond prend la
   couleur de la bande (contrast, identique au pied de page), le texte
   passe en crème, et la bordure crème reste visible pour garder la
   forme du bouton sur la bande sombre. */
.sy-newsletter__submit:hover,
.sy-newsletter__submit:focus-visible {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
}

/* Formulaire MailPoet dans la bande newsletter (et dans le tiroir
   « La Lettre de YAMI », .sy-lettre, même rendu).
   MailPoet injecte ses propres styles (balise <style> ciblant
   #mailpoet_form_N, et attributs style="" sur les champs) : les
   !important sont nécessaires pour reprendre la main. Champ et bouton
   ont une hauteur fixe commune (3.4rem) pour rester alignés même
   quand un message d'erreur s'affiche sous le champ. Le rendu
   reproduit le champ et le bouton .sy-newsletter__field ci-dessus :
   champ transparent à filet crème, bouton crème plein, sur une ligne,
   qui passent l'un sous l'autre quand la place manque. */
:is(.sy-newsletter, .sy-lettre) .mailpoet_form,
:is(.sy-newsletter, .sy-lettre) .mailpoet_form form.mailpoet_form {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

:is(.sy-newsletter, .sy-lettre) .mailpoet_form form.mailpoet_form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.7rem;
}

:is(.sy-newsletter, .sy-lettre) .mailpoet_form .mailpoet_paragraph {
	margin: 0 !important;
	flex: 0 0 auto;
	line-height: normal !important;
}

/* Le paragraphe du champ e-mail prend toute la place restante. */
:is(.sy-newsletter, .sy-lettre) .mailpoet_form .mailpoet_paragraph:has(.mailpoet_text) {
	flex: 1 1 14rem;
}

/* Libellé placé au-dessus du champ dans MailPoet : masqué à l'œil,
   gardé pour les lecteurs d'écran (le texte d'exemple suffit à voir). */
:is(.sy-newsletter, .sy-lettre) .mailpoet_form .mailpoet_text_label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

:is(.sy-newsletter, .sy-lettre) .mailpoet_form input.mailpoet_text {
	width: 100% !important;
	height: 3.4rem !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	font-family: inherit !important;
	font-size: 0.98rem !important;
	font-weight: 300 !important;
	line-height: 1.4 !important;
	padding: 0 1.1em !important;
	color: var(--wp--preset--color--base) !important;
	background: transparent !important;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 28%, transparent) !important;
	border-radius: 3px !important;
	box-shadow: none !important;
}

:is(.sy-newsletter, .sy-lettre) .mailpoet_form input.mailpoet_text::placeholder {
	color: color-mix(in srgb, var(--wp--preset--color--base) 60%, transparent);
	opacity: 1;
}

:is(.sy-newsletter, .sy-lettre) .mailpoet_form input.mailpoet_text:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-3);
	outline-offset: 2px;
}

:is(.sy-newsletter, .sy-lettre) .mailpoet_form input.mailpoet_submit {
	width: auto !important;
	height: 3.4rem !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	font-family: inherit !important;
	font-size: 0.75rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.17em !important;
	text-transform: uppercase;
	line-height: 1.4 !important;
	padding: 0 2em !important;
	cursor: pointer;
	color: var(--wp--preset--color--accent-1) !important;
	background: var(--wp--preset--color--base) !important;
	border: 1px solid var(--wp--preset--color--base) !important;
	border-radius: 3px !important;
	box-shadow: none !important;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

:is(.sy-newsletter, .sy-lettre) .mailpoet_form input.mailpoet_submit:hover,
:is(.sy-newsletter, .sy-lettre) .mailpoet_form input.mailpoet_submit:focus-visible {
	color: var(--wp--preset--color--base) !important;
	background: var(--wp--preset--color--contrast) !important;
}

/* Petite animation de chargement de MailPoet pendant l'envoi. */
:is(.sy-newsletter, .sy-lettre) .mailpoet_form .mailpoet_form_loading {
	margin: 0.6rem 0 0;
}

:is(.sy-newsletter, .sy-lettre) .mailpoet_form .mailpoet_form_loading > span {
	background-color: var(--wp--preset--color--base);
}

/* Messages de retour (succès, erreur) : pleine largeur sous la ligne,
   couleurs lisibles sur le violet à la place du vert et du rouge
   par défaut de MailPoet. */
:is(.sy-newsletter, .sy-lettre) .mailpoet_form .mailpoet_message {
	flex: 1 1 100%;
	margin: 0 !important;
	padding: 0 !important;
}

:is(.sy-newsletter, .sy-lettre) .mailpoet_form .mailpoet_validate_success,
:is(.sy-newsletter, .sy-lettre) .mailpoet_form .mailpoet_validate_error {
	margin: 0.4rem 0 0 !important;
	font-size: 0.95rem;
	line-height: 1.5;
}

:is(.sy-newsletter, .sy-lettre) .mailpoet_form .mailpoet_validate_success {
	color: var(--wp--preset--color--accent-3) !important;
}

:is(.sy-newsletter, .sy-lettre) .mailpoet_form .mailpoet_validate_error,
:is(.sy-newsletter, .sy-lettre) .mailpoet_form .parsley-errors-list {
	color: #f3b7a8 !important;
}

:is(.sy-newsletter, .sy-lettre) .mailpoet_form .parsley-errors-list {
	margin: 0.4rem 0 0 !important;
	padding: 0 !important;
	list-style: none;
	font-size: 0.85rem;
}

:is(.sy-newsletter, .sy-lettre) .mailpoet_form input.parsley-error {
	border-color: #f3b7a8 !important;
}

:is(.sy-newsletter, .sy-lettre) .mailpoet_form input.parsley-success {
	color: var(--wp--preset--color--base) !important;
}

/* ---------------------------------------------------------
   PAGE CONTACT — FORMULAIRE JETPACK (.sy-contact)
   Classe ajoutée sur le bloc « Formulaire » de Jetpack. Libellés en
   petites capitales espacées comme les sur-titres, champs blancs à
   filet fin, bouton du site. Les messages arrivent par e-mail à
   l'adresse de l'autrice de la page et dans Jetpack > Formulaires.
   --------------------------------------------------------- */
.sy-contact {
	gap: 1.4rem;
	max-width: 40rem;
	margin-top: 1.8rem;
}

.sy-contact .grunion-field-wrap {
	width: 100%;
}

.sy-contact .grunion-field-label {
	display: block;
	margin: 0 0 0.55rem;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

.sy-contact .grunion-label-required {
	margin-left: 0.5em;
	font-weight: 300;
	letter-spacing: 0;
	text-transform: none;
	font-size: 0.85rem;
	color: var(--wp--preset--color--accent-4);
}

.sy-contact .grunion-field {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.5;
	padding: 0.85em 1em;
	color: var(--wp--preset--color--contrast);
	background: #ffffff;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 22%, transparent);
	border-radius: 3px;
	box-shadow: none;
	transition: border-color 0.2s ease;
}

.sy-contact textarea.grunion-field {
	min-height: 11rem;
	resize: vertical;
}

.sy-contact .grunion-field:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 40%, transparent);
}

.sy-contact .grunion-field:focus,
.sy-contact .grunion-field:focus-visible {
	border-color: var(--wp--preset--color--accent-1);
	outline: 2px solid color-mix(in srgb, var(--wp--preset--color--accent-1) 35%, transparent);
	outline-offset: 1px;
}

.sy-contact .wp-block-button {
	margin-top: 0.4rem;
}

.sy-contact__note {
	margin-top: 1.4rem;
	max-width: 40rem;
	font-size: 0.85rem;
	color: var(--wp--preset--color--accent-4);
}

/* ---------------------------------------------------------
   PAGE CONTACT — PLAN GOOGLE MAPS (.sy-plan)
   Carte Google intégrée sans clé d'API : elle ne se personnalise
   pas, on la teinte donc aux couleurs du site par-dessus.
   1. La carte passe en niveaux de gris (filtre sur l'iframe).
   2. ::after, en mode « screen », éclaircit les noirs jusqu'au
      violet (contrast) : routes, textes et repère deviennent violets.
   3. ::before, en mode « multiply », fonce les blancs jusqu'au
      crème (base) : le fond de carte prend la couleur des bandes.
   Les deux calques laissent passer la souris (pointer-events: none),
   la carte reste utilisable (zoom, déplacement, liens Google).
   --------------------------------------------------------- */
.sy-plan {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	max-height: 420px;
	margin-top: 2.2rem;
	overflow: hidden;
	border-radius: 4px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
	background: var(--wp--preset--color--base);
}

.sy-plan iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(1) contrast(1.05) brightness(1.02);
}

.sy-plan::after,
.sy-plan::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.sy-plan::after {
	z-index: 1;
	background: var(--wp--preset--color--contrast);
	mix-blend-mode: screen;
}

.sy-plan::before {
	z-index: 2;
	background: var(--wp--preset--color--base);
	mix-blend-mode: multiply;
}

@media (max-width: 600px) {
	.sy-plan {
		aspect-ratio: 4 / 5;
	}
}

.sy-plan__lien {
	margin-top: 1.1rem;
}

/* ---------------------------------------------------------
   RÉSERVATION — FENÊTRE ACUITY (#sy-resa)
   <dialog> ajouté en pied de page par functions.php, ouvert par
   assets/js/sy-resa.js au clic sur tout lien Acuity. Cadre crème,
   bandeau violet, voile violet sur la page. Plein écran sur mobile.
   --------------------------------------------------------- */
.sy-resa {
	width: min(980px, 94vw);
	height: min(88vh, 920px);
	max-width: none;
	max-height: none;
	margin: auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	overflow: visible;
}

.sy-resa::backdrop {
	background: rgba(24, 16, 44, 0.72);
	backdrop-filter: blur(3px);
}

.sy-resa[open] {
	animation: sy-resa-entree 0.25s ease-out;
}

@keyframes sy-resa-entree {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sy-resa[open] {
		animation: none;
	}
}

/* La page ne défile plus derrière la fenêtre ouverte. */
html.sy-resa-ouverte {
	overflow: hidden;
}

.sy-resa__cadre {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: 6px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 30px 80px rgba(24, 16, 44, 0.35);
}

.sy-resa__tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.8rem 0.9rem 0.8rem 1.6rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.sy-resa__titre {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.sy-resa__fermer {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	padding: 0;
	cursor: pointer;
	color: var(--wp--preset--color--base);
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 40%, transparent);
	border-radius: 50%;
	transition: background 0.2s ease, color 0.2s ease;
}

.sy-resa__fermer:hover,
.sy-resa__fermer:focus-visible {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.sy-resa__fermer:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-3);
	outline-offset: 2px;
}

.sy-resa__corps {
	position: relative;
	flex: 1;
	background: #ffffff;
}

.sy-resa__corps iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Message visible le temps que le calendrier se charge. */
.sy-resa__charge {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	margin: 0;
	font-size: 0.9rem;
	color: var(--wp--preset--color--accent-4);
}

.sy-resa.est-charge .sy-resa__charge {
	display: none;
}

@media (max-width: 600px) {
	.sy-resa {
		width: 100vw;
		height: 100dvh;
		margin: 0;
	}

	.sy-resa__cadre {
		border-radius: 0;
	}
}

/* ---------------------------------------------------------
   PIED DE PAGE
   --------------------------------------------------------- */
.sy-footer {
	/* Haut réduit de moitié, pendant du bas de .sy-newsletter. */
	padding-block: calc(var(--sy-air-mince) / 2) 2.8rem;
	font-size: 0.9rem;
}

.sy-footer__cols {
	width: var(--sy-wrap);
	margin-inline: auto;
	gap: clamp(2.2rem, 4.5vw, 3.6rem);
}

.sy-footer__logo {
	margin: 0.4rem 0 2rem;
}

.sy-footer__logo img {
	width: clamp(120px, 12vw, 148px) !important;
	height: auto;
}

.sy-footer__logo a {
	border: 0;
}

/* Entre 561 et 900px : deux colonnes (WordPress passe les colonnes
   en pleine largeur dès 781px). */
@media (min-width: 561px) and (max-width: 900px) {
	.sy-footer__cols {
		flex-wrap: wrap !important;
	}

	.sy-footer__cols > .wp-block-column {
		flex-basis: calc(50% - clamp(2.2rem, 4.5vw, 3.6rem) / 2) !important;
		flex-grow: 0 !important;
	}
}

.sy-footer__name {
	font-size: 1.02rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 0.8rem;
}

.sy-footer__title {
	/* Étiquette, pas un titre : Allura est illisible en capitales espacées. */
	font-family: var(--wp--preset--font-family--jost);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	margin: 0 0 1rem;
	color: var(--wp--preset--color--accent-3);
}

.sy-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sy-footer__list li {
	margin-bottom: 0.5rem;
}

.sy-footer__list a {
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 22%, transparent);
}

.sy-footer__list a:hover {
	border-bottom-color: var(--wp--preset--color--accent-3);
}

/* Pictogramme Instagram blanc devant @studio_yami : classe « sy-insta » posée
   sur l'élément de liste. Le pictogramme vient de la police Dashicons livrée
   avec WordPress (chargée sur le site par functions.php) ; il est placé sur le
   <li> et non dans le lien, pour que le soulignement reste sous le texte. */
.sy-footer__list .sy-insta {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.sy-footer__list .sy-insta::before {
	content: "\f12d";
	content: "\f12d" / "";
	font-family: dashicons;
	font-size: 1.1rem;
	width: 1.1rem;
	height: 1.1rem;
	line-height: 1;
	color: #fff;
	-webkit-font-smoothing: antialiased;
}

.sy-footer__legal {
	width: var(--sy-wrap);
	margin-inline: auto;
	margin-top: clamp(2.4rem, 5vw, 3.2rem);
	padding-top: 1.7rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 20%, transparent);
	font-size: 0.78rem;
	line-height: 1.7;
	opacity: 0.78;
	max-width: 82ch;
}

/* ---------------------------------------------------------
   ÉLÉMENTS PARTAGÉS
   --------------------------------------------------------- */

/* Sur-titre : petite capitale espacée au-dessus des H2 */
.sy-eyebrow {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
	margin: 0 0 1.1rem;
	max-width: none;
}

/* Trait fin devant le sur-titre. Il prend la couleur du texte
   (currentColor) : canard sur fond clair, safran sur fond sombre
   (--sur-fonce), sur la photo (--sur-photo) et dans la newsletter,
   sans règle à dupliquer par fond. */
.sy-eyebrow::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 1px;
	background-color: currentColor;
	vertical-align: middle;
	margin: -0.15em 0.75em 0 0;
}

/* Sur-titre centré : un trait de chaque côté pour garder l'équilibre.
   L'espacement des lettres ajoute un blanc après la dernière lettre,
   déduit ici pour que les deux traits soient à égale distance du texte. */
.sy-eyebrow.has-text-align-center::after {
	content: "";
	display: inline-block;
	width: 24px;
	height: 1px;
	background-color: currentColor;
	vertical-align: middle;
	margin: -0.15em 0 0 calc(0.75em - 0.16em);
}

@media (max-width: 820px) {
	.sy-eyebrow {
		font-size: 0.9rem;
	}
}

/* Chapô : paragraphe d'introduction (même taille que le texte courant) */
.sy-lede {
	margin-top: 1.3rem;
}

/* Liens dans un chapô : soulignés. La couleur (accent-1) est réglée
   sur le bloc lui-même (Couleur > Lien), donc modifiable dans l'éditeur. */
.sy-lede a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

.sy-lede a:hover,
.sy-lede a:focus-visible {
	text-decoration-thickness: 2px;
}

/* Mobile : on regroupe le menu et le bouton à droite du logo,
   et on allège le bouton pour qu'il ne mange pas la barre.
   Repère : sy-header__inner--mobile-fix */
@media (max-width: 600px) {
	.sy-header__inner {
		gap: 0.75rem;
		/* space-between écartait le menu au milieu : on colle menu + bouton à droite,
		   le logo restant à gauche grâce à sa marge auto. */
		justify-content: flex-end;
	}

	/* Spécificité renforcée : les règles du bloc Site Logo annulent une classe seule. */
	.sy-header .sy-header__brand {
		margin-right: auto;
	}

	.sy-header__cta .wp-block-button__link {
		padding: 0.95em 1.3em;
		font-size: 0.7rem;
		letter-spacing: 0.12em;
	}
}

/* Signature manuscrite — seul endroit où Allura intervient */
.sy-signature {
	font-family: var(--wp--preset--font-family--allura);
	font-size: 2.1rem;
	line-height: 1;
	letter-spacing: normal;
	color: var(--wp--preset--color--accent-2);
	margin-top: 1.2rem;
}


/* ---------------------------------------------------------
   SECTIONS JOINTIVES
   Chaque bande porte sa propre respiration verticale via
   padding-block. L'espacement de blocs de TT5
   (:root :where(.is-layout-flow) > *, soit 1.2rem) glissait
   un liseré de fond de page entre deux bandes censées être
   collées. Deux classes pour passer devant.
   --------------------------------------------------------- */
.wp-site-blocks .sy-hero,
.wp-site-blocks .sy-bande,
.wp-site-blocks .sy-newsletter,
.wp-site-blocks .sy-footer,
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* ---------------------------------------------------------
   BANDES DE SECTION
   Les groupes de section sont en pleine largeur ; ce sont
   leurs conteneurs internes qui portent la largeur de page.
   --------------------------------------------------------- */
.sy-bande {
	padding-block: var(--sy-air);
}

.sy-bande--mince {
	padding-block: var(--sy-air-mince);
}

.sy-intro,
.sy-duo,
.sy-cartes,
.sy-apres-cartes,
.sy-exps,
.sy-temps,
.sy-pro,
.sy-bande > .sy-tags {
	width: var(--sy-wrap);
	margin-inline: auto;
}

.sy-intro--centre {
	width: min(720px, 90vw);
	text-align: center;
}

/* Section « Les formats » (#formats) des pages Massage, Reiki et
   Sonothérapie : l'intro colle au bord gauche de la page, dans
   l'alignement de la liste des offres juste en dessous. La mise en
   page « constrained » de WordPress centre ses enfants (marges auto
   en !important) et ajoute un padding latéral global : on neutralise
   les deux, la largeur maximale de lecture reste inchangée.
   Même traitement pour l'intro « Les séances individuelles » de
   l'accueil (#seances). */
#formats > .sy-intro,
#seances > .sy-intro {
	padding-inline: 0;
}

#formats > .sy-intro > *,
#seances > .sy-intro > * {
	margin-inline: 0 !important;
}

/* ---------------------------------------------------------
   SECTION 1 — L'ACCROCHE
   --------------------------------------------------------- */
.sy-hero {
	color: var(--wp--preset--color--base);
}

/* Le bloc Couverture est en mise en page « constrained » : ses enfants
   reçoivent max-width = content-size (645px). Sélecteur plus spécifique
   pour rendre au texte du héros la pleine largeur de page. */
.sy-hero .wp-block-cover__inner-container > .sy-hero__texte {
	width: var(--sy-wrap);
	max-width: var(--sy-wrap);
	margin-inline: auto;
	padding-block: clamp(3rem, 7vw, 5rem) clamp(3.4rem, 7vw, 5.6rem);
}

.sy-hero__titre {
	color: var(--wp--preset--color--base);
	max-width: 17ch;
}

/* Sur-titre posé sur une photo : safran pour ressortir du dégradé. */
.sy-eyebrow--sur-photo {
	color: var(--wp--preset--color--accent-3);
}

.sy-hero__chapo {
	margin-top: 1.5rem;
	max-width: 40ch;
	font-size: 1.12rem;
	color: color-mix(in srgb, var(--wp--preset--color--base) 95%, transparent);
}


/* Allura sur photo : les pleins du script sont fins, le dégradé seul ne
   suffit pas sur le haut du titre. Ombre douce, invisible à l'œil, qui
   décolle le texte des zones claires de l'image. */
.sy-hero .sy-eyebrow {
	text-shadow: 0 1px 20px rgba(20, 13, 38, 0.5);
}

.sy-hero__titre {
	text-shadow: 0 2px 34px rgba(20, 13, 38, 0.4);
}

.sy-hero__chapo {
	text-shadow: 0 1px 24px rgba(20, 13, 38, 0.45);
}

.sy-actions {
	margin-top: 2.1rem;
	gap: 0.8rem;
}

@media (max-width: 820px) {
	.sy-hero {
		min-height: 80vh !important;
	}

	/* Sur mobile le texte occupe toute la largeur : le dégradé latéral
	   (réglé sur le bloc Couverture) laisse place à un dégradé vertical. */
	.sy-hero .wp-block-cover__background {
		background: linear-gradient(to top, rgba(24, 16, 44, 0.88) 0%, rgba(24, 16, 44, 0.66) 32%, rgba(24, 16, 44, 0.3) 58%, rgba(24, 16, 44, 0.12) 80%, rgba(24, 16, 44, 0.06) 100%) !important;
	}

	.sy-hero__chapo {
		max-width: 32ch;
	}
}

/* Vidéo du héros (ordinateur) : le logo Studio Yami est incrusté en
   haut à droite de la vidéo (16:9). Les rognages de « cover » se font
   donc depuis le bas et la gauche, jamais depuis le haut ou la droite :
   - écran plus large que 16:9 → seul le bas est rogné (sous le dégradé) ;
   - écran plus étroit → seule la gauche est rognée.
   Mobile (≤ 820px) : cadrage centré d'origine, inchangé. */
@media (min-width: 821px) {
	.sy-hero .wp-block-cover__video-background {
		object-position: 100% 0;
	}
}

/* ---------------------------------------------------------
   SECTION 2 — L'INTENTION
   --------------------------------------------------------- */
.sy-duo {
	gap: clamp(2.4rem, 6vw, 5rem);
}

.sy-duo__visuel img {
	width: 100%;
}

/* Recadrage vers le haut d'une image recadrée (format carré, etc.) :
   classe « sy-cadrage-haut » à ajouter sur le bloc Image (Avancé >
   Classes CSS additionnelles). Par défaut le recadrage est centré (50 %),
   ce qui coupait le haut de la tête sur les portraits verticaux. */
.sy-cadrage-haut img {
	object-position: 50% 20%;
}

/* Section duo inversée sur ordinateur seulement : classe « sy-duo--inverse »
   ajoutée sur le bloc Colonnes (à côté de sy-duo). Dans le contenu, le texte
   reste en premier : sur mobile (colonnes empilées, sous 782px, seuil de
   WordPress) on garde donc texte puis image ; au-delà, l'image passe à gauche. */
@media (min-width: 782px) {
	.sy-duo--inverse {
		flex-direction: row-reverse;
	}
}

/* ---------------------------------------------------------
   SECTION 3 — LES TROIS APPROCHES
   --------------------------------------------------------- */
.sy-cartes {
	gap: clamp(1.4rem, 3vw, 2.4rem);
	margin-top: clamp(2.6rem, 5vw, 3.8rem);
}

.sy-carte {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 4px;
	/* Teinte de surface, pas une couleur de marque : les cartes doivent
	   se détacher de la bande ivoire sur laquelle elles reposent. */
	background: #ffffff;
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.sy-carte:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent);
}

.sy-carte__photo {
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--wp--preset--color--base);
}

.sy-carte__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sy-carte__texte {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.5rem 1.6rem 1.8rem;
}

.sy-carte__texte h3 {
	margin-bottom: 0.1rem;
}

/* Accueil, « Trois approches » (#approches) : numéro 1, 2, 3 devant le
   titre de chaque carte. Généré par un compteur CSS : rien à saisir dans
   l'éditeur, la numérotation suit l'ordre des cartes si on les déplace.
   Jost fin, dans la couleur du titre, suivi d'un petit rond en guise
   de tiret avant le titre : « 1 • Le Reiki ». */
#approches .sy-cartes {
	counter-reset: sy-approche;
}

#approches .sy-carte__texte h3::before {
	counter-increment: sy-approche;
	content: counter(sy-approche) "\2002\2022";
	font-family: var(--wp--preset--font-family--jost);
	font-size: 0.8em;
	font-weight: 300;
	color: currentColor;
	margin-right: 0.5em;
}

.sy-carte__verbe {
	font-size: 0.95rem;
	font-style: italic;
	color: var(--wp--preset--color--accent-1);
	margin: 0 0 0.8rem;
}

.sy-carte__texte p:not(.sy-carte__verbe):not(.sy-lien) {
	font-size: 0.94rem;
	margin: 0 0 1.4rem;
}

.sy-lien {
	margin-top: auto;
	margin-bottom: 0;
}

.sy-lien a {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--accent-1);
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
	display: inline-block;
}

.sy-apres-cartes {
	margin-top: clamp(2.2rem, 4vw, 3rem);
	max-width: 62ch;
	text-align: center;
}

@media (max-width: 880px) {
	.sy-cartes {
		gap: 1.6rem;
	}
}

/* ---------------------------------------------------------
   SECTION 4 — À QUI JE M'ADRESSE
   --------------------------------------------------------- */
.sy-peutetre {
	width: var(--sy-wrap);
	margin-inline: auto;
	gap: clamp(1.6rem, 4vw, 3rem);
	margin-top: clamp(2.4rem, 5vw, 3.4rem);
}

.sy-pe {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 28%, transparent);
	padding-top: 1.3rem;
}

.sy-pe__n {
	font-family: var(--wp--preset--font-family--jost);
	font-size: 1.5rem;
	font-weight: 300;
	color: var(--wp--preset--color--accent-3);
	margin: 0 0 0.6rem;
}

/* Sur fond sombre, le sur-titre passe en safran : le canard n'y ressort pas. */
.sy-eyebrow--sur-fonce {
	color: var(--wp--preset--color--accent-3);
}

/* ---------------------------------------------------------
   SECTION 5 — LES SÉANCES INDIVIDUELLES
   --------------------------------------------------------- */
.sy-offres {
	width: var(--sy-wrap);
	margin-inline: auto;
	margin-top: clamp(2.4rem, 5vw, 3.4rem);
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

.sy-offre {
	display: grid;
	grid-template-columns: 9rem 1fr auto;
	gap: 0.6rem 2.4rem;
	align-items: baseline;
	padding: 1.8rem 0;
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

.sy-offre__prix {
	font-family: var(--wp--preset--font-family--jost);
	font-size: 1.04rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	white-space: nowrap;
	color: var(--wp--preset--color--accent-2);
	margin: 0;
}

.sy-offre__texte h3 {
	margin-bottom: 0.3rem;
}

.sy-offre__texte p {
	margin: 0;
	font-size: 0.98rem;
	max-width: 52ch;
}

.sy-hesitez {
	width: var(--sy-wrap);
	margin-inline: auto;
	margin-top: 2.4rem;
	border-left: 2px solid var(--wp--preset--color--accent-3);
	padding: 1.6rem 1.9rem;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 1rem 2.4rem;
	align-items: center;
}

.sy-hesitez p {
	margin: 0;
	font-size: 1rem;
}

.sy-hesitez strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

.sy-bande > .sy-actions {
	width: var(--sy-wrap);
	margin-inline: auto;
}

@media (max-width: 760px) {
	.sy-offre {
		grid-template-columns: 1fr;
		gap: 0.4rem;
	}

	.sy-hesitez {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------
   SECTION 6 — LES EXPÉRIENCES COLLECTIVES
   --------------------------------------------------------- */
.sy-collectif {
	gap: clamp(1.6rem, 4vw, 3rem);
	margin-top: clamp(2.4rem, 5vw, 3.4rem);
}

.sy-col-carte {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 28%, transparent);
	padding-top: 1.4rem;
}

.sy-col-carte h3 {
	margin-bottom: 0.7rem;
}

.sy-col-carte p {
	font-size: 0.98rem;
	margin: 0;
}

/* ---------------------------------------------------------
   SECTION 7 — LES STAGES REIKI
   --------------------------------------------------------- */
.sy-infos {
	margin-top: 2rem;
	max-width: 34rem;
	font-size: 0.95rem;
}

.sy-infos__ligne {
	display: flex;
	gap: 1.1rem;
	padding: 0.7rem 0;
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

.sy-infos__ligne:last-child {
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

.sy-infos__cle {
	flex: 0 0 8rem;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4);
	padding-top: 0.35rem;
	margin: 0;
}

.sy-infos__valeur {
	margin: 0;
}

@media (max-width: 880px) {
	.sy-duo--stage .sy-duo__visuel {
		order: -1;
	}
}

/* ---------------------------------------------------------
   SECTION 8 — QUI JE SUIS
   --------------------------------------------------------- */
.sy-yami {
	font-size: 1.04rem;
	font-style: italic;
	color: var(--wp--preset--color--accent-1);
}

/* ---------------------------------------------------------
   SECTION 9 — LES TÉMOIGNAGES
   --------------------------------------------------------- */
.sy-avis {
	width: var(--sy-wrap);
	margin-inline: auto;
	gap: clamp(1.6rem, 4vw, 3rem);
	margin-top: clamp(2.4rem, 5vw, 3.4rem);
}

/* Variante en grille (home, 6 témoignages sur 2 rangées) :
   un groupe plutôt que des colonnes, pour que les rangées s'alignent. */
.sy-avis--grille {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.8rem, 4vw, 3rem) clamp(1.6rem, 4vw, 3rem);
}

.sy-avis--grille > .sy-avis__item {
	margin: 0;
}

@media (max-width: 820px) {
	.sy-avis--grille {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

/* Le bloc Citation de TT5 arrive avec un filet à gauche ; la maquette
   veut un filet en haut, comme les autres listes de cette page. */
.sy-avis__item {
	margin: 0;
	padding: 1.4rem 0 0;
	border: 0;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 28%, transparent);
}

.sy-avis__item p {
	font-size: 1.06rem;
	line-height: 1.65;
	font-style: italic;
	margin: 0 0 1rem;
}

.sy-avis__item cite {
	font-style: normal;
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-3);
}

/* ---------------------------------------------------------
   SECTION 10 — CARTES CADEAUX
   --------------------------------------------------------- */

/* Bouton secondaire : contour violet, qui se remplit au survol. */
.sy-cta--sec .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
}

.sy-cta--sec .wp-block-button__link:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* ---------------------------------------------------------
   BOUTONS PLEINS — COULEURS INVERSÉES AU SURVOL
   Au survol, le fond prend la couleur du texte et le texte
   celle du fond. Un filet de 1px, dans l'ancienne couleur de
   fond, garde la forme du bouton lisible quand le nouveau fond
   se confond avec celui de la section (ex. bouton crème sur
   bande canard, qui devient canard au survol).
   Le filet est un box-shadow intérieur : la taille du bouton
   ne change pas, donc aucun saut de mise en page.
   Les deux couleurs passent par --sy-btn-fond / --sy-btn-texte,
   renseignées par les classes de palette que Gutenberg pose
   sur le bouton : toute nouvelle combinaison choisie dans
   l'éditeur s'inverse correctement, sans CSS supplémentaire.
   Les boutons contour (.is-style-outline, dont .sy-cta--sec)
   ont leur propre survol, qui se remplit déjà.
   --------------------------------------------------------- */

/* Valeurs par défaut : bouton sans couleur choisie (Violet nuit / Crème) */
.wp-block-button__link {
	--sy-btn-fond: var(--wp--preset--color--contrast);
	--sy-btn-texte: var(--wp--preset--color--base);
}

/* Variations de section du thème (theme.json) */
.is-style-section-2 .wp-block-button__link {
	--sy-btn-fond: var(--wp--preset--color--base);
	--sy-btn-texte: var(--wp--preset--color--accent-2);
}

.is-style-section-3 .wp-block-button__link {
	--sy-btn-fond: var(--wp--preset--color--base);
	--sy-btn-texte: var(--wp--preset--color--accent-1);
}

.is-style-section-4 .wp-block-button__link {
	--sy-btn-fond: var(--wp--preset--color--contrast);
	--sy-btn-texte: var(--wp--preset--color--base);
}

/* Couleurs choisies dans l'éditeur (classes de palette) */
.wp-block-button__link.has-base-background-color { --sy-btn-fond: var(--wp--preset--color--base); }
.wp-block-button__link.has-contrast-background-color { --sy-btn-fond: var(--wp--preset--color--contrast); }
.wp-block-button__link.has-accent-1-background-color { --sy-btn-fond: var(--wp--preset--color--accent-1); }
.wp-block-button__link.has-accent-2-background-color { --sy-btn-fond: var(--wp--preset--color--accent-2); }
.wp-block-button__link.has-accent-3-background-color { --sy-btn-fond: var(--wp--preset--color--accent-3); }
.wp-block-button__link.has-accent-4-background-color { --sy-btn-fond: var(--wp--preset--color--accent-4); }
.wp-block-button__link.has-accent-5-background-color { --sy-btn-fond: var(--wp--preset--color--accent-5); }
.wp-block-button__link.has-accent-6-background-color { --sy-btn-fond: var(--wp--preset--color--accent-6); }

.wp-block-button__link.has-base-color { --sy-btn-texte: var(--wp--preset--color--base); }
.wp-block-button__link.has-contrast-color { --sy-btn-texte: var(--wp--preset--color--contrast); }
.wp-block-button__link.has-accent-1-color { --sy-btn-texte: var(--wp--preset--color--accent-1); }
.wp-block-button__link.has-accent-2-color { --sy-btn-texte: var(--wp--preset--color--accent-2); }
.wp-block-button__link.has-accent-3-color { --sy-btn-texte: var(--wp--preset--color--accent-3); }
.wp-block-button__link.has-accent-4-color { --sy-btn-texte: var(--wp--preset--color--accent-4); }
.wp-block-button__link.has-accent-5-color { --sy-btn-texte: var(--wp--preset--color--accent-5); }
.wp-block-button__link.has-accent-6-color { --sy-btn-texte: var(--wp--preset--color--accent-6); }

.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* !important : les classes de palette de WordPress sont elles-mêmes
   en !important, c'est le seul moyen de les dépasser au survol. */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus-visible {
	background-color: var(--sy-btn-texte) !important;
	color: var(--sy-btn-fond) !important;
	border-color: var(--sy-btn-fond);
	box-shadow: inset 0 0 0 1px var(--sy-btn-fond);
}

/* ---------------------------------------------------------
   GABARIT DES PAGES INTÉRIEURES (hors accueil)
   Introduit avec la page Carte cadeau ; réutilisé tel quel
   par les prochaines pages issues des mêmes maquettes.
   --------------------------------------------------------- */

/* Fil d'Ariane */
.sy-ariane {
	width: var(--sy-wrap);
	margin-inline: auto;
	padding-top: 1.6rem;
	font-size: 0.8rem;
}

.sy-ariane ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sy-ariane li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--accent-4);
}

.sy-ariane li + li::before {
	content: "/";
	opacity: 0.5;
}

.sy-ariane a {
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.sy-ariane a:hover {
	border-bottom-color: var(--wp--preset--color--accent-1);
}

.sy-ariane [aria-current] {
	color: var(--wp--preset--color--contrast);
	font-weight: 400;
}

/* En-tête de page (« .tete » côté maquette) */
.sy-tete {
	padding: clamp(2.4rem, 5vw, 3.8rem) 0 var(--sy-air);
}

.sy-tete__verbe {
	font-size: 1.28rem;
	font-style: italic;
	color: var(--wp--preset--color--accent-1);
	margin: 0.3rem 0 1.2rem;
}

@media (max-width: 880px) {
	.sy-tete .sy-duo__visuel {
		order: -1;
	}
}

/* Juste après l'en-tête de page : la bande suivante n'a pas
   besoin de reprendre tout son padding-top, .sy-tete a déjà
   respiré en bas. */
.sy-tete + .sy-bande {
	padding-top: clamp(2.2rem, 4.5vw, 3.4rem);
}

.sy-tete + .sy-bande.sy-bande--mince {
	padding-top: clamp(1.8rem, 3.5vw, 2.6rem);
	padding-bottom: clamp(1.8rem, 3.5vw, 2.6rem);
}

/* Cartes sans photo (« .exps » / « .exp ») */
.sy-exps {
	gap: clamp(1.4rem, 3vw, 2.4rem);
	margin-top: clamp(2.2rem, 4vw, 3.2rem);
}

.sy-exp {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 4px;
	padding: clamp(1.6rem, 3vw, 2rem);
}

.sy-exp h3 {
	font-size: 1.24rem;
	margin-bottom: 0.25rem;
}

.sy-exp p:not(.sy-exp__duree):not(.sy-exp__envie):not(.sy-lien) {
	font-size: 0.95rem;
	margin: 0 0 0.9em;
}

.sy-exp__duree {
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent-2);
	margin: 0 0 1rem;
}

.sy-exp__envie {
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--accent-6);
	font-size: 0.82rem;
	color: var(--wp--preset--color--accent-4);
}

/* Lien « Découvrir… » en pied de carte : la ligne « Pour une envie
   de » reste poussée en bas (margin-top: auto), le lien se colle juste
   dessous au lieu de partager l'espace libre avec elle. */
.sy-exp .sy-lien {
	margin-top: 1.2rem;
}

/* Cartes « .exp » sur fond violet ou canard : surface translucide
   plutôt que le blanc plein, qui jurerait sur un fond de couleur. */
.has-contrast-background-color .sy-exp,
.has-accent-1-background-color .sy-exp {
	background: color-mix(in srgb, var(--wp--preset--color--base) 7%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--base) 28%, transparent);
}

.has-contrast-background-color .sy-exp__duree,
.has-accent-1-background-color .sy-exp__duree {
	color: var(--wp--preset--color--accent-3);
}

.has-contrast-background-color .sy-exp__envie,
.has-accent-1-background-color .sy-exp__envie {
	border-color: color-mix(in srgb, var(--wp--preset--color--base) 28%, transparent);
	color: color-mix(in srgb, var(--wp--preset--color--base) 70%, transparent);
}

/* Prix mis en avant (bande « Immersion »), à côté d'un visuel plutôt
   que dans une carte. */
.sy-prix-gros {
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	font-weight: 400;
	color: var(--wp--preset--color--accent-3);
	margin: 0 0 1.2rem;
}

@media (max-width: 900px) {
	.sy-exps {
		gap: 1.4rem;
	}
}

/* Étapes numérotées avec titre (« .temps » / « .tp »)
   Distinctes de .sy-pe (section 4) : ici chaque étape a un h3. */
.sy-temps {
	gap: clamp(1.6rem, 4vw, 3rem);
	margin-top: clamp(2.4rem, 5vw, 3.4rem);
}

.sy-tp {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 28%, transparent);
	padding-top: 1.3rem;
}

.sy-tp__n {
	font-family: var(--wp--preset--font-family--jost);
	font-size: 1.4rem;
	font-weight: 300;
	color: var(--wp--preset--color--accent-3);
	margin: 0 0 0.5rem;
}

.sy-tp h3 {
	margin-bottom: 0.5rem;
}

.sy-tp p {
	margin: 0;
	font-size: 0.98rem;
}

@media (max-width: 820px) {
	.sy-temps {
		gap: 1.8rem;
	}
}

/* Colonne étroite alignée à gauche (« .etroit » côté maquette).
   Largeur seule, sans centrage : distincte de .sy-intro--centre,
   qui combine déjà cette même largeur de 720px avec un centrage
   du texte — inutile de dupliquer cette variante-là. */
.sy-etroit {
	width: min(720px, 90vw);
	margin-inline: auto;
}

/* Liste d'étapes numérotées (« .etapes »), avec compteur CSS.
   Distincte de .sy-peutetre (grille, sans titre) : ici une liste
   verticale simple, avec un numéro en accent-3. */
.sy-etapes {
	list-style: none;
	padding: 0;
	margin: 1.8rem 0 0;
	counter-reset: e;
}

.sy-etapes li {
	counter-increment: e;
	position: relative;
	padding-left: 2.6rem;
	margin-bottom: 1rem;
	font-size: 1rem;
}

.sy-etapes li::before {
	content: counter(e, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.05em;
	font-size: 0.95rem;
	color: var(--wp--preset--color--accent-3);
	font-weight: 500;
}

/* Liste à puces sobre (« .puce ») : un simple tiret. */
.sy-puce {
	list-style: none;
	padding: 0;
	margin: 1.4rem 0 0;
}

.sy-puce li {
	padding-left: 1.3rem;
	position: relative;
	margin-bottom: 0.7rem;
	font-size: 1rem;
}

.sy-puce li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.8em;
	width: 7px;
	height: 1px;
	background: var(--wp--preset--color--accent-3);
}

/* Rubrique professionnelle (« .pro », home) : texte à gauche,
   trois axes à droite, pastilles en dessous. */
.sy-pro {
	gap: clamp(2rem, 5vw, 4rem);
}

.sy-pro-axes {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 1.2rem;
}

.sy-pro-axes li {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 28%, transparent);
	padding-top: 1rem;
	font-size: 0.94rem;
	line-height: 1.65;
	color: color-mix(in srgb, currentColor 86%, transparent);
}

.sy-pro-axes strong {
	display: block;
	font-weight: 500;
	font-size: 1.04rem;
	margin-bottom: 0.35rem;
	color: var(--wp--preset--color--base);
}

/* Liste de mots-clés en pastilles (« .tags »). Bordure claire par
   défaut (pensée pour un fond sombre) ; inversée sur fond clair. */
.sy-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.6rem 0 0;
	padding: 0;
	list-style: none;
}

.sy-intro--centre .sy-tags {
	justify-content: center;
}

.sy-tags li {
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.5em 1.05em;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 28%, transparent);
	border-radius: 100px;
	color: inherit;
}

.has-accent-5-background-color .sy-tags li,
.has-base-background-color .sy-tags li {
	border-color: var(--wp--preset--color--accent-6);
}

/* Accordéon de questions (« .faq »), en HTML natif details/summary. */
.sy-faq {
	margin-top: clamp(1.6rem, 3vw, 2.2rem);
}

.sy-faq details {
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

.sy-faq details:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}

.sy-faq summary {
	list-style: none;
	cursor: pointer;
	padding: 1.3rem 2.6rem 1.3rem 0;
	position: relative;
	font-size: 1.1rem;
	color: var(--wp--preset--color--contrast);
}

.sy-faq summary::-webkit-details-marker {
	display: none;
}

.sy-faq summary::after {
	content: "";
	position: absolute;
	right: 0.5rem;
	top: 50%;
	width: 11px;
	height: 11px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.2s ease;
}

.sy-faq details[open] summary::after {
	transform: translateY(-30%) rotate(225deg);
}

.sy-faq__rep {
	padding: 0 0 1.5rem;
	/* Pour l'animation d'ouverture (sy-scroll.js, section 1 bis) : la hauteur
	   animée inclut la marge du bas, et rien ne dépasse pendant l'animation. */
	box-sizing: border-box;
	overflow: hidden;
}

/* Réponse à la même taille de texte que la question (summary, 1.1rem). */
.sy-faq__rep,
.sy-faq__rep p {
	font-size: 1.1rem;
}

.sy-faq__rep p:last-child {
	margin-bottom: 0;
}

/* Cartes-liens vers les approches sœurs (« .soeurs » / « .soeur »). */
.sy-soeurs {
	width: var(--sy-wrap);
	margin-inline: auto;
	gap: clamp(1.6rem, 4vw, 3rem);
	margin-top: clamp(2.2rem, 4vw, 3rem);
}

.sy-soeur {
	display: block;
	text-decoration: none;
	color: inherit;
	border-top: 1px solid var(--wp--preset--color--accent-6);
	padding-top: 1.4rem;
}

.sy-soeur h3 {
	margin-bottom: 0.2rem;
}

.sy-soeur__verbe {
	font-size: 0.98rem;
	font-style: italic;
	color: var(--wp--preset--color--accent-3);
	margin: 0 0 0.7rem;
}

.sy-soeur p:not(.sy-soeur__verbe) {
	font-size: 0.96rem;
	margin: 0 0 1rem;
}

.sy-soeur__aller {
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-3);
}

/* ---------------------------------------------------------
   BLOC TARIF MIS EN AVANT (stage de transmission)
   --------------------------------------------------------- */
.sy-tarif {
	background: var(--wp--preset--color--accent-5);
	border-left: 2px solid var(--wp--preset--color--accent-2);
	padding: clamp(1.6rem, 3vw, 2.2rem);
	margin-top: 2rem;
}

.sy-tarif__gros {
	font-family: var(--wp--preset--font-family--jost);
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent-2);
	margin: 0 0 0.4rem;
}

.sy-tarif p {
	margin: 0 0 0.5em;
	font-size: 0.96rem;
}

.sy-tarif p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------
   DÉFILEMENT
   --------------------------------------------------------- */

/* Défilement doux pour les ancres du menu, avec un décalage qui
   tient compte de l'en-tête collant — sans lui, une section visée
   par une ancre se retrouve sous la barre. */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 5.5rem;
}

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

/* ---- Bouton retour en haut ----
   Masqué tant que le script ne l'a pas activé : sans JavaScript il
   ne s'affiche jamais, plutôt que de s'afficher sans rien faire. */
.sy-haut {
	position: fixed;
	right: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 40;
	display: grid;
	place-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	cursor: pointer;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 50%;
	box-shadow: 0 8px 24px color-mix(in srgb, var(--wp--preset--color--contrast) 26%, transparent);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s, background 0.2s ease;
}

.sy-haut.est-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.sy-haut:hover {
	background: var(--wp--preset--color--accent-3);
	border-color: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--contrast);
}

.sy-haut:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-3);
	outline-offset: 3px;
}

/* ---- Révélation au défilement ----
   L'attribut data-sy-anim est posé par le script, jamais dans le
   balisage : si le JavaScript ne s'exécute pas, rien n'est masqué. */
[data-sy-anim] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: opacity, transform;
}

[data-sy-anim].sy-vu {
	opacity: 1;
	transform: none;
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	[data-sy-anim] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.sy-haut {
		transition: none;
	}
}

/* ---------------------------------------------------------
   CARROUSELS MOBILES (accueil)
   « Trois approches » (#approches .sy-cartes) et témoignages
   (.sy-avis--grille) : sous 820px, les cartes ne s'empilent plus,
   elles défilent à l'horizontale, une par une, avec aimantation.
   La carte suivante dépasse au bord droit pour inviter au glissé.
   Défilement natif (CSS) : fluide au doigt, aucun script nécessaire ;
   les points de pagination sont ajoutés par assets/js/sy-slider.js.
   Au-delà de 820px, rien ne change.
   --------------------------------------------------------- */
@media (max-width: 820px) {
	#approches .sy-cartes,
	.sy-avis--grille {
		position: relative;
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 1rem;
		width: auto;
		margin-inline: 0;
		/* Le carrousel va d'un bord à l'autre de l'écran ; le retrait
		   aligne la première carte sur la marge du reste de la page. */
		padding-inline: 5vw;
		scroll-padding-inline: 5vw;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	#approches .sy-cartes::-webkit-scrollbar,
	.sy-avis--grille::-webkit-scrollbar {
		display: none;
	}

	#approches .sy-cartes > .sy-carte,
	.sy-avis--grille > .sy-avis__item {
		flex: 0 0 84% !important;
		max-width: 360px;
		scroll-snap-align: start;
	}

	/* Pas d'effet de survol au doigt : il serait rogné par le carrousel. */
	#approches .sy-carte:hover {
		transform: none;
		box-shadow: none;
	}
}

/* Points de pagination (créés par sy-slider.js, mobile uniquement).
   Couleur héritée du texte de la bande : violet sur ivoire pour les
   approches, ivoire sur fond sombre pour les témoignages. */
.sy-points {
	display: none;
}

@media (max-width: 820px) {
	.sy-points {
		display: flex;
		justify-content: center;
		gap: 0.25rem;
		margin-top: 1.4rem;
	}

	.sy-points button {
		position: relative;
		width: 28px;
		height: 28px;
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		cursor: pointer;
	}

	.sy-points button::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: currentColor;
		opacity: 0.3;
		transform: translate(-50%, -50%);
		transition: opacity 0.25s ease, width 0.25s ease, border-radius 0.25s ease;
	}

	.sy-points button[aria-current="true"]::before {
		width: 18px;
		border-radius: 4px;
		opacity: 1;
	}

	.sy-points button:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: -2px;
		border-radius: 50%;
	}

	#approches .sy-points {
		color: var(--wp--preset--color--accent-1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sy-points button::before {
		transition: none;
	}
}

/* ---------------------------------------------------------
   LETTRE DE YAMI — LANGUETTE ET TIROIR (#sy-lettre)
   Inscription à la newsletter sans pop-up : rien ne s'ouvre tout seul.
   Ordinateur : languette verticale au bord droit, à mi-hauteur.
   Mobile (≤ 781px) : pastille enveloppe en bas à droite, au-dessus du
   bouton « retour en haut ». La languette se retire quand le formulaire
   du pied de page est à l'écran. Au clic : tiroir qui glisse depuis la
   droite (<dialog>, ajouté par functions.php, piloté par sy-lettre.js).
   --------------------------------------------------------- */
.sy-lettre-onglet {
	position: fixed;
	z-index: 35;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0;
	cursor: pointer;
	font-family: inherit;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--contrast);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 18%, transparent);
	/* Réapparition immédiate (focus possible dès la fermeture du tiroir) ;
	   à la disparition, visibility attend la fin du fondu. */
	transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s, background 0.2s ease, color 0.2s ease;
}

.sy-lettre-onglet[hidden] {
	display: none;
}

.sy-lettre-onglet__icone {
	flex: 0 0 auto;
	color: var(--wp--preset--color--accent-3);
}

.sy-lettre-onglet:hover,
.sy-lettre-onglet:focus-visible {
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--contrast);
}

.sy-lettre-onglet:hover .sy-lettre-onglet__icone,
.sy-lettre-onglet:focus-visible .sy-lettre-onglet__icone {
	color: currentColor;
}

.sy-lettre-onglet:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-3);
	outline-offset: 3px;
}

/* Retirée (formulaire du pied de page visible, ou tiroir ouvert). */
.sy-lettre-onglet.est-cache {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s, background 0.2s ease, color 0.2s ease;
}

/* Ordinateur : languette verticale, texte lu de bas en haut. */
@media (min-width: 782px) {
	.sy-lettre-onglet {
		top: 50%;
		right: 0;
		flex-direction: column;
		padding: 1.1rem 0.6rem;
		border-right: 0;
		border-radius: 4px 0 0 4px;
		box-shadow: -6px 8px 24px rgba(24, 16, 44, 0.22);
		transform: translateY(-50%);
	}

	.sy-lettre-onglet__texte {
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		font-size: 0.7rem;
		font-weight: 500;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		white-space: nowrap;
	}


	.sy-lettre-onglet.est-cache {
		transform: translate(100%, -50%);
	}
}

/* Mobile : pastille ronde, empilée au-dessus de « retour en haut ». */
@media (max-width: 781px) {
	.sy-lettre-onglet {
		right: clamp(1rem, 3vw, 2rem);
		bottom: calc(clamp(1rem, 3vw, 2rem) + 2.75rem + 0.7rem);
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		border-radius: 50%;
		box-shadow: 0 8px 24px color-mix(in srgb, var(--wp--preset--color--contrast) 26%, transparent);
	}

	/* Texte gardé pour les lecteurs d'écran, masqué à l'œil. */
	.sy-lettre-onglet__texte {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.sy-lettre-onglet.est-cache {
		transform: translateY(8px);
	}
}

/* ---- Le tiroir ---- */
.sy-lettre {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(440px, 100vw);
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

.sy-lettre::backdrop {
	background: rgba(24, 16, 44, 0.45);
}

.sy-lettre__panneau {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	overflow-y: auto;
	padding: 4.5rem clamp(1.6rem, 6vw, 2.8rem) 2.5rem;
	box-sizing: border-box;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--contrast);
	box-shadow: -20px 0 60px rgba(24, 16, 44, 0.35);
}

.sy-lettre[open] .sy-lettre__panneau {
	animation: sy-lettre-entree 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sy-lettre[open]::backdrop {
	animation: sy-lettre-voile 0.35s ease;
}

.sy-lettre.se-ferme .sy-lettre__panneau {
	animation: sy-lettre-sortie 0.25s ease-in forwards;
}

.sy-lettre.se-ferme::backdrop {
	animation: sy-lettre-voile 0.25s ease reverse forwards;
}

@keyframes sy-lettre-entree {
	from { transform: translateX(100%); }
}

@keyframes sy-lettre-sortie {
	to { transform: translateX(100%); }
}

@keyframes sy-lettre-voile {
	from { opacity: 0; }
}

html.sy-lettre-ouverte {
	overflow: hidden;
}

.sy-lettre__fermer {
	position: absolute;
	top: 1.2rem;
	right: 1.2rem;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	cursor: pointer;
	color: var(--wp--preset--color--base);
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 40%, transparent);
	border-radius: 50%;
	transition: background 0.2s ease, color 0.2s ease;
}

.sy-lettre__fermer:hover,
.sy-lettre__fermer:focus-visible {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.sy-lettre__fermer:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-3);
	outline-offset: 2px;
}

.sy-lettre .sy-eyebrow {
	margin: 0 0 0.9rem;
	color: var(--wp--preset--color--accent-3);
}

.sy-lettre__titre {
	margin: 0 0 1rem;
	color: var(--wp--preset--color--base);
}

.sy-lettre__texte {
	margin: 0 0 1.8rem;
	color: color-mix(in srgb, var(--wp--preset--color--base) 82%, transparent);
}

/* Dans le tiroir étroit, le bouton passe sous le champ, pleine largeur. */
.sy-lettre .mailpoet_form .mailpoet_paragraph {
	flex: 1 1 100% !important;
}

.sy-lettre .mailpoet_form input.mailpoet_submit {
	width: 100% !important;
}

.sy-lettre__note {
	margin: 1.4rem 0 0;
	font-size: 0.82rem;
	color: color-mix(in srgb, var(--wp--preset--color--base) 60%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.sy-lettre-onglet {
		transition: none;
	}

	.sy-lettre[open] .sy-lettre__panneau,
	.sy-lettre[open]::backdrop,
	.sy-lettre.se-ferme .sy-lettre__panneau,
	.sy-lettre.se-ferme::backdrop {
		animation: none;
	}
}

/* ---------------------------------------------------------
   AGENDA (/agenda/) — cartes de dates (.sy-agenda)
   Classe « sy-agenda » sur le bloc Colonnes des dates (à côté de
   sy-exps). Le bloc Colonnes de WordPress garde toutes ses colonnes
   sur une seule rangée : une 4e date dupliquée écraserait les autres.
   Ici, les cartes ont une largeur fixe et passent à la ligne :
   - 1100px et plus : 3 cartes par rangée ;
   - de 782 à 1099px : 2 cartes par rangée ;
   - sous 782px : empilées (comportement normal du bloc).
   Pour ajouter une date : dupliquer une carte (colonne), la modifier,
   et la placer au bon endroit avec les flèches de la barre d'outils.
   --------------------------------------------------------- */
.wp-block-columns.sy-agenda {
	--sy-agenda-ecart: clamp(1.4rem, 3vw, 2.4rem);
	flex-wrap: wrap !important;
	gap: var(--sy-agenda-ecart) !important;
}

/* Largeur calculée bordure et marges intérieures comprises. */
.wp-block-columns.sy-agenda > .wp-block-column {
	box-sizing: border-box;
}

@media (min-width: 782px) {
	.wp-block-columns.sy-agenda > .wp-block-column {
		flex: 0 0 calc((100% - var(--sy-agenda-ecart)) / 2) !important;
		max-width: calc((100% - var(--sy-agenda-ecart)) / 2);
	}
}

@media (min-width: 1100px) {
	.wp-block-columns.sy-agenda > .wp-block-column {
		flex-basis: calc((100% - 2 * var(--sy-agenda-ecart)) / 3) !important;
		max-width: calc((100% - 2 * var(--sy-agenda-ecart)) / 3);
	}
}

/* ---------------------------------------------------------
   QUI SUIS-JE (/qui-suis-je/) — frise « Mon chemin » (.sy-chemin)
   Groupe « sy-chemin » contenant un groupe « sy-chemin__etape » par
   date : paragraphe « sy-chemin__annee », titre (h3), puis texte.
   Pour ajouter une étape : dupliquer un groupe sy-chemin__etape.
   Le visuel à côté (colonne « sy-chemin-visuel ») reste en place
   pendant la lecture de la frise sur ordinateur.
   --------------------------------------------------------- */
.sy-chemin {
	position: relative;
	margin-top: clamp(1.8rem, 4vw, 2.6rem);
	padding-left: 1.9rem;
	border-left: 1px solid var(--wp--preset--color--accent-6);
}

.sy-chemin__etape {
	position: relative;
	padding-bottom: clamp(1.6rem, 3vw, 2.2rem);
}

.sy-chemin__etape:last-child {
	padding-bottom: 0;
}

/* Pastille sur le fil, à hauteur de l'année. */
.sy-chemin__etape::before {
	content: "";
	position: absolute;
	top: 0.35rem;
	left: calc(-1.9rem - 5px);
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-1);
	box-shadow: 0 0 0 4px var(--wp--preset--color--accent-5);
}

.sy-chemin__annee {
	margin: 0 0 0.3rem;
	font-family: var(--wp--preset--font-family--jost);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
}

.sy-chemin__etape h3 {
	margin: 0 0 0.5rem;
	font-size: 1.18rem;
}

.sy-chemin__etape p:not(.sy-chemin__annee) {
	margin: 0 0 0.6rem;
	font-size: 0.97rem;
}

.sy-chemin__etape p:last-child {
	margin-bottom: 0;
}

@media (min-width: 782px) {
	.sy-chemin-visuel {
		position: sticky;
		top: 7rem;
		align-self: flex-start;
	}
}

/* Schéma de la lignée Reiki : jamais plus large que nécessaire. */
.sy-lignee img {
	width: 100%;
	max-width: 520px;
	height: auto;
	margin-inline: auto;
	display: block;
}

/* ---------------------------------------------------------
   BLOG
   Accueil du blog (/blog/, gabarit home.html), archives
   (archive.html) et article seul (single.html). Les cartes
   d'articles reprennent .sy-carte (accueil, « Trois approches »).
   --------------------------------------------------------- */

/* Accueil du blog : en-tête centré, sans visuel. */
.sy-tete--blog {
	padding-bottom: clamp(2.6rem, 5vw, 3.6rem);
}

.sy-tete--blog h1 {
	margin-top: 0;
}

/* Grille des articles : 3 colonnes, 2 sur tablette, 1 sur mobile.
   Spécificité renforcée pour passer devant la grille générée par
   le bloc Modèle de publication. */
.sy-blog {
	width: var(--sy-wrap);
	margin-inline: auto;
}

.wp-site-blocks .sy-blog .sy-blog__grille {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.4rem, 3vw, 2.4rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1000px) {
	.wp-site-blocks .sy-blog .sy-blog__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.wp-site-blocks .sy-blog .sy-blog__grille {
		grid-template-columns: minmax(0, 1fr);
	}
}

.sy-blog__grille > li {
	display: flex;
	margin: 0;
}

.sy-billet {
	flex: 1;
	width: 100%;
	margin: 0;
}

/* Photo de la carte : format 4/3 (la photo des cartes de l'accueil est en 4/5). */
.sy-carte.sy-billet .sy-billet__photo {
	aspect-ratio: 4 / 3;
	margin: 0;
}

.sy-billet__photo a {
	display: block;
	height: 100%;
}

.sy-billet__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.sy-billet:hover .sy-billet__photo img {
	transform: scale(1.03);
}

.sy-carte.sy-billet .sy-carte__texte > * {
	margin-block: 0;
}

/* Date de publication (cartes et en-tête d'article). */
.sy-billet__date {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4);
}

.sy-carte.sy-billet .sy-billet__titre {
	font-size: clamp(1.55rem, 1.35rem + 0.6vw, 1.9rem);
	line-height: 1.25;
	margin: 0.5rem 0 0.8rem;
}

.sy-billet__titre a {
	color: inherit;
	text-decoration: none;
}

.sy-billet__titre a:hover,
.sy-billet__titre a:focus-visible {
	color: var(--wp--preset--color--accent-1);
}

.sy-billet__extrait p {
	font-size: 0.94rem;
	margin: 0 0 1.4rem;
}

/* « Lire l'article » : même lien que .sy-lien, poussé en pied de carte. */
.sy-carte.sy-billet .sy-billet__lire {
	margin-top: auto;
	align-self: flex-start;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--accent-1);
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
}

/* Pagination de la liste. */
.sy-blog__pages {
	margin-top: clamp(2.4rem, 4vw, 3.2rem);
	gap: 1.2rem;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
}

.sy-blog__pages a {
	text-decoration: none;
	color: var(--wp--preset--color--accent-1);
}

.sy-blog__pages .current {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* ---- Article seul ---- */

/* Fil d'Ariane de l'article : le titre courant est un bloc Titre
   (dynamique), d'où une structure en paragraphes plutôt qu'en liste. */
.wp-site-blocks .sy-ariane--billet {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	color: var(--wp--preset--color--accent-4);
}

.sy-ariane--billet > * {
	margin: 0 !important;
	font-size: inherit;
	line-height: 1.6;
}

.sy-ariane--billet > * + *::before {
	content: "/";
	opacity: 0.5;
	margin-right: 0.5rem;
}

.sy-ariane--billet .sy-ariane__courant {
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 400;
	letter-spacing: normal;
	color: var(--wp--preset--color--contrast);
}

/* En-tête de l'article : le titre est long, on le tient sur 3-4 lignes. */
.sy-tete .sy-billet-page__titre {
	font-size: clamp(2.3rem, 1.5rem + 2.4vw, 3.6rem);
	line-height: 1.15;
	margin: 0;
}

.sy-billet-page__chapo p {
	margin: 0;
}

.sy-tete .sy-billet__date {
	margin-top: 1.6rem;
}

.sy-billet-page__visuel {
	margin: 0;
}

.sy-billet-page__visuel img {
	width: 100%;
	object-fit: cover;
	object-position: 50% 30%;
	border-radius: 4px;
}

/* Corps de l'article : colonne de lecture de 720px, images en
   « Large » jusqu'à 1040px (largeurs posées sur le bloc Contenu). */
.wp-site-blocks .sy-article.has-global-padding {
	padding-inline: 5vw;
}

.sy-article > p,
.sy-article li {
	font-size: 1.06rem;
	line-height: 1.75;
}

.sy-article > p {
	margin-block: 1rem 0;
}

.sy-article > :first-child {
	margin-top: 0;
}

.sy-article h2 {
	font-size: clamp(2rem, 1.6rem + 1.4vw, 2.7rem);
	line-height: 1.2;
	margin-top: clamp(3rem, 6vw, 4.2rem);
	margin-bottom: 0;
	color: var(--wp--preset--color--contrast);
}

.sy-article h3 {
	margin-top: 2.6rem;
	margin-bottom: 0;
	color: var(--wp--preset--color--contrast);
}

.sy-article h2 + *,
.sy-article h3 + * {
	margin-top: 0.8rem;
}

.sy-article p a,
.sy-article li a {
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

.sy-article p a:hover,
.sy-article li a:hover {
	text-decoration-thickness: 2px;
}

.sy-article .sy-puce {
	margin-top: 1rem;
}

.sy-article .sy-puce li {
	margin-bottom: 0.35rem;
}

/* Phrase mise en avant : italique canard, filet safran. */
.sy-article .sy-phrase {
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	font-style: italic;
	line-height: 1.5;
	color: var(--wp--preset--color--accent-1);
	border-left: 1px solid var(--wp--preset--color--accent-3);
	padding-left: 1.3rem;
	margin-block: 1.8rem;
}

/* Photos dans l'article. */
.sy-article > .wp-block-image,
.sy-article > .sy-article__duo {
	margin-block: clamp(2rem, 4vw, 2.8rem);
}

.sy-article .wp-block-image img {
	width: 100%;
	border-radius: 4px;
}

.sy-article__duo {
	gap: clamp(0.8rem, 2vw, 1.4rem);
}

.sy-article__duo .wp-block-image {
	margin: 0;
}

/* Liens de fin d'article (« Découvrir… »). */
.sy-article > .sy-article__suite {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.1rem;
	margin-top: clamp(2.4rem, 4vw, 3rem);
	padding-top: 1.8rem;
	border-top: 1px solid var(--wp--preset--color--accent-6);
}

.sy-article__suite .sy-lien {
	margin: 0;
	line-height: 1.9;
}

/* Le soulignement vient de la bordure de .sy-lien : on retire celui
   des liens de l'article (.sy-article p a), sinon il est doublé. */
.sy-article .sy-lien a {
	display: inline;
	text-decoration: none;
}

/* Bas d'article : article précédent / suivant et retour au blog. */
.sy-billet-nav__liens {
	width: var(--sy-wrap);
	margin-inline: auto;
	gap: 2rem;
	align-items: flex-start;
}

.sy-billet-nav .wp-block-post-navigation-link {
	max-width: 46%;
	font-size: 1.02rem;
	line-height: 1.5;
}

.sy-billet-nav .post-navigation-link-next {
	margin-left: auto;
	text-align: right;
}

.sy-billet-nav .wp-block-post-navigation-link a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.sy-billet-nav .wp-block-post-navigation-link a:hover {
	color: var(--wp--preset--color--accent-1);
}

.sy-billet-nav [class*="navigation-link__label"] {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
}

.sy-billet-nav [class*="__arrow"] {
	color: var(--wp--preset--color--accent-1);
}

.sy-billet-nav__retour {
	margin-top: 2.2rem;
}

@media (max-width: 640px) {
	.sy-billet-nav__liens {
		flex-direction: column;
	}

	.sy-billet-nav .wp-block-post-navigation-link {
		max-width: none;
	}

	.sy-billet-nav .post-navigation-link-next {
		margin-left: 0;
		text-align: left;
	}
}