/*
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.15.6
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);
}

/* ---------------------------------------------------------
   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.
   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. */
.sy-newsletter .mailpoet_form,
.sy-newsletter .mailpoet_form form.mailpoet_form {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
}

.sy-newsletter .mailpoet_form form.mailpoet_form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.7rem;
}

.sy-newsletter .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. */
.sy-newsletter .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). */
.sy-newsletter .mailpoet_form .mailpoet_text_label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.sy-newsletter .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;
}

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

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

.sy-newsletter .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;
}

.sy-newsletter .mailpoet_form input.mailpoet_submit:hover,
.sy-newsletter .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. */
.sy-newsletter .mailpoet_form .mailpoet_form_loading {
	margin: 0.6rem 0 0;
}

.sy-newsletter .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. */
.sy-newsletter .mailpoet_form .mailpoet_message {
	flex: 1 1 100%;
	margin: 0 !important;
	padding: 0 !important;
}

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

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

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

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

.sy-newsletter .mailpoet_form input.parsley-error {
	border-color: #f3b7a8 !important;
}

.sy-newsletter .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;
	}
}