/* ==================================================================
   Wakatoo : styles du site, repris de la maquette validée (12/09/2026).
   Couleurs, polices et espacements : theme.json (--wp--preset--…).
   Mode sombre : il suit le réglage du téléphone ou de l'ordinateur
   (palette dark de l'app, lib/core/theme/app_colors.dart).
   Décors : îles de l'app désaturées (BreathCardBackgroundImages),
   posées en fond par les classes decor-g-* (gauche) et decor-d-* (droite).
   ================================================================== */

:root {
	color-scheme: light;
	--sable-rgb: 239, 234, 226;
	--trait: rgba(57, 41, 29, .2);
	--placeholder: #9A8D82;
	--cadre: #FFFFFF;
	--pied-fond: #E6DCCF;
	--logo-filtre: none;
	--or-survol: #A66C29;
	--details-fond: rgba(250, 247, 244, .72);
	--details-bord: rgba(255, 255, 255, .85);
	--verre-fond: linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .16)), rgba(239, 234, 226, .42);
	--verre-bord: rgba(255, 255, 255, .75);
	--verre-ombre: 0 25px 50px -12px rgba(57, 41, 29, .25), inset 0 1px 0 rgba(255, 255, 255, .8);
	--ombre-douce: 0 18px 40px rgba(57, 41, 29, .18), 0 3px 8px rgba(57, 41, 29, .1);
	--largeur: 70rem;
}
@media (prefers-color-scheme: dark) {
	/* html:root l'emporte sur le :root des réglages globaux de WordPress. */
	html:root {
		color-scheme: dark;
		--wp--preset--color--sable: #1C1C1E;
		--wp--preset--color--sable-fonce: #252527;
		--wp--preset--color--creme: #2C2C2E;
		--wp--preset--color--ecorce: #F2F2F7;
		--wp--preset--color--taupe: #8E8E93;
		--wp--preset--color--or-texte: #E3A862;
		--wp--preset--color--sauge: #346D58;
		--wp--preset--color--ambre: #A26C35;
		--wp--preset--color--terracotta: #974E34;
		--wp--preset--color--terracotta-texte: #E88A66;
		--wp--preset--color--erreur: #FF6B5E;
		--sable-rgb: 28, 28, 30;
		--trait: rgba(255, 255, 255, .16);
		--placeholder: #8E8E93;
		--cadre: #3A3A3C;
		--pied-fond: #252527;
		--logo-filtre: brightness(0) invert(95%);
		--details-fond: rgba(44, 44, 46, .8);
		--details-bord: rgba(255, 255, 255, .1);
		--verre-fond: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)), rgba(58, 58, 60, .55);
		--verre-bord: rgba(255, 255, 255, .12);
		--verre-ombre: 0 25px 50px -12px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
		--ombre-douce: 0 18px 40px rgba(0, 0, 0, .45), 0 3px 8px rgba(0, 0, 0, .3);
	}
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1rem; }
body {
	margin: 0;
	background: var(--wp--preset--color--sable);
	color: var(--wp--preset--color--ecorce);
	font-family: var(--wp--preset--font-family--poppins);
	font-size: var(--wp--preset--font-size--m);
	font-weight: 500;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
.wp-site-blocks > * { margin-block: 0; }
/* Page courte (contact, 404…) : le contenu occupe toute la hauteur de l'écran, le pied de page reste en bas. */
.wp-site-blocks { display: flex; flex-direction: column; min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px)); }
.wp-site-blocks > main { flex: 1 0 auto; }
main.accueil { overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
figure.wp-block-image { margin: 0; }
picture { display: contents; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--wp--preset--color--or); }
:focus-visible { outline: 3px solid var(--wp--preset--color--or); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; line-height: 1.1; text-wrap: balance; letter-spacing: -0.02em; }
p { margin: 0; text-wrap: pretty; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Avant / après la sortie (classe posée par l'extension convertkit-for-wakatoo) ---------- */
body:not(.wakatoo-apres-sortie) .etat-apres,
body.wakatoo-apres-sortie .etat-avant { display: none !important; }

/* ---------- Verre ---------- */
.verre {
	background: var(--verre-fond);
	-webkit-backdrop-filter: blur(24px) saturate(1.1);
	backdrop-filter: blur(24px) saturate(1.1);
	border: 1.5px solid var(--verre-bord);
	box-shadow: var(--verre-ombre);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.verre, .telephone { background: var(--wp--preset--color--creme); }
}

/* ---------- Décors : deux îles en fond (::before à gauche, ::after à droite) ---------- */
.decor-g-prairie { --decor-g: url("../images/prairie.webp"); }
.decor-g-montagne { --decor-g: url("../images/montagne.webp"); }
.decor-g-jungle { --decor-g: url("../images/jungle.webp"); }
.decor-g-plage { --decor-g: url("../images/plage.webp"); }
.decor-g-coline { --decor-g: url("../images/coline.webp"); }
.decor-g-desert { --decor-g: url("../images/desert.webp"); }
.decor-d-prairie { --decor-d: url("../images/prairie.webp"); }
.decor-d-montagne { --decor-d: url("../images/montagne.webp"); }
.decor-d-jungle { --decor-d: url("../images/jungle.webp"); }
.decor-d-plage { --decor-d: url("../images/plage.webp"); }
.decor-d-coline { --decor-d: url("../images/coline.webp"); }
.decor-d-desert { --decor-d: url("../images/desert.webp"); }
@media (prefers-color-scheme: dark) {
	.decor-g-prairie { --decor-g: url("../images/prairie-darkmode.webp"); }
	.decor-g-montagne { --decor-g: url("../images/montagne-darkmode.webp"); }
	.decor-g-jungle { --decor-g: url("../images/jungle-darkmode.webp"); }
	.decor-g-plage { --decor-g: url("../images/plage-darkmode.webp"); }
	.decor-g-coline { --decor-g: url("../images/coline-darkmode.webp"); }
	.decor-g-desert { --decor-g: url("../images/desert-darkmode.webp"); }
	.decor-d-prairie { --decor-d: url("../images/prairie-darkmode.webp"); }
	.decor-d-montagne { --decor-d: url("../images/montagne-darkmode.webp"); }
	.decor-d-jungle { --decor-d: url("../images/jungle-darkmode.webp"); }
	.decor-d-plage { --decor-d: url("../images/plage-darkmode.webp"); }
	.decor-d-coline { --decor-d: url("../images/coline-darkmode.webp"); }
	.decor-d-desert { --decor-d: url("../images/desert-darkmode.webp"); }
}
.a-decor { position: relative; isolation: isolate; }
.a-decor::before, .a-decor::after {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	width: auto; aspect-ratio: 800 / 533;
	background: center / 100% 100% no-repeat;
	opacity: calc(.7 * var(--vu, 1)); filter: saturate(.45);
}
.a-decor::before {
	background-image: var(--decor-g, none);
	-webkit-mask-image: linear-gradient(to right, #000 55%, transparent); mask-image: linear-gradient(to right, #000 55%, transparent);
}
.a-decor::after {
	background-image: var(--decor-d, none);
	-webkit-mask-image: linear-gradient(to left, #000 55%, transparent); mask-image: linear-gradient(to left, #000 55%, transparent);
}
/* Île retournée : le fondu est inversé pour rester côté intérieur. */
.decor-g-retourne::before { transform: scaleX(-1); -webkit-mask-image: linear-gradient(to left, #000 55%, transparent); mask-image: linear-gradient(to left, #000 55%, transparent); }
.decor-d-retourne::after { transform: scaleX(-1); -webkit-mask-image: linear-gradient(to right, #000 55%, transparent); mask-image: linear-gradient(to right, #000 55%, transparent); }

/* ---------- Structure ---------- */
.section { position: relative; isolation: isolate; padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50); }
.contenu { max-width: var(--largeur); margin-inline: auto; }
.pile { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); }
.surtitre {
	font-size: var(--wp--preset--font-size--xs); font-weight: 800;
	letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--taupe);
}
.surtitre--or { color: var(--wp--preset--color--or-texte); }
h2.wp-block-heading { font-size: var(--wp--preset--font-size--xl); font-weight: 800; }
h3.wp-block-heading { font-size: var(--wp--preset--font-size--l); font-weight: 700; letter-spacing: -0.01em; }
.chapeau { font-size: var(--wp--preset--font-size--m); color: var(--wp--preset--color--taupe); max-width: 34rem; }
.titre-centre { text-align: center; margin-bottom: var(--wp--preset--spacing--50); }

/* ---------- Boutons (plats) ---------- */
.wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	min-height: 3.5rem; padding: 0 1.75rem;
	border: 0; border-radius: 16px; cursor: pointer;
	font: 700 var(--wp--preset--font-size--m)/1 var(--wp--preset--font-family--poppins);
	text-decoration: none;
	transition: background-color .15s ease;
}
.is-style-plein .wp-block-button__link, .wp-block-button__link.is-style-plein {
	background: var(--wp--preset--color--or); color: var(--wp--preset--color--sur-or);
}
.is-style-plein .wp-block-button__link:hover, .wp-block-button__link.is-style-plein:hover { background: var(--or-survol); }
.wp-block-button__link:active { background: var(--wp--preset--color--or-bord); }

/* ---------- Formulaire d'inscription (bloc wakatoo/inscription) ---------- */
.inscription { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); width: 100%; }
.inscription__ligne { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); }
.inscription .wp-block-button, .inscription .wp-block-button__link { width: 100%; }
.inscription input[type="email"] {
	width: 100%; min-height: 3.5rem; padding: 0 1.25rem;
	border-radius: 16px; border: 1px solid var(--trait);
	background: var(--wp--preset--color--creme); color: var(--wp--preset--color--ecorce);
	font: 500 var(--wp--preset--font-size--m) var(--wp--preset--font-family--poppins);
}
.inscription input[type="email"]::placeholder { color: var(--placeholder); }
.inscription input[type="email"]:focus-visible { outline: 3px solid var(--wp--preset--color--or); outline-offset: 1px; }
.inscription input[aria-invalid="true"] { border-color: var(--wp--preset--color--erreur); }
.inscription__piege { position: absolute; left: -9999px; }
.inscription__erreur { color: var(--wp--preset--color--erreur); font-size: var(--wp--preset--font-size--s); font-weight: 600; }
.inscription__mention { font-size: var(--wp--preset--font-size--xs); font-style: italic; color: var(--wp--preset--color--taupe); text-align: center; line-height: 1.5; }
.zone-formulaire { width: 100%; }

.merci {
	display: flex; gap: var(--wp--preset--spacing--40); align-items: flex-start; text-align: left;
	padding: var(--wp--preset--spacing--50); width: 100%;
	background: var(--wp--preset--color--creme); border-radius: 16px;
}
.merci img { width: 4.5rem; flex: none; }
.merci__titre { font-size: var(--wp--preset--font-size--l); font-weight: 800; line-height: 1.2; }
.merci__texte { font-size: var(--wp--preset--font-size--s); margin-top: var(--wp--preset--spacing--20); }
.merci__partage { margin-top: var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--s); font-weight: 700; }
.pilules { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); margin-top: var(--wp--preset--spacing--20); }
.pilule {
	font: 700 var(--wp--preset--font-size--xs) var(--wp--preset--font-family--poppins);
	padding: 0.5rem 0.9rem; border-radius: 100px; cursor: pointer; text-decoration: none;
	background: var(--wp--preset--color--sable); color: var(--wp--preset--color--ecorce);
	border: 1.5px solid var(--trait);
}

/* ---------- Badges des stores (bloc wakatoo/stores) ---------- */
.badges { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); align-items: center; justify-content: center; }
.badges img { height: 3.25rem; width: auto; }

/* ---------- En-tête ---------- */
.entete {
	display: flex; align-items: center; justify-content: space-between;
	max-width: var(--largeur); margin-inline: auto;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) 0;
}
.entete__marque { display: flex; align-items: flex-end; gap: 0.3rem; }
/* Maître Towaki en buste (version recadrée de l'app), tourné vers le logo. */
.entete__towaki { width: 3.4rem; flex: none; margin-bottom: -0.15rem; }
.entete__towaki img { width: 100%; }
.entete__logo { width: 7.5rem; }
.entete__logo img { width: 100%; filter: var(--logo-filtre); }
.langue {
	display: inline-block; padding: 0.45rem 0.9rem; border-radius: 100px; text-decoration: none;
	font-size: var(--wp--preset--font-size--xs); font-weight: 800; letter-spacing: 0.06em;
}

/* ---------- Haut de page : texte + téléphone, îles derrière ---------- */
.hero { position: relative; isolation: isolate; padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) 0; }
.hero__grille { max-width: var(--largeur); margin-inline: auto; display: grid; gap: var(--wp--preset--spacing--50); }
.hero__texte.pile { gap: var(--wp--preset--spacing--30); }
.hero h1 { font-size: clamp(2rem, 1.1rem + 4.4vw, 3.75rem); font-weight: 900; line-height: 1.02; letter-spacing: -0.035em; }
.hero h1 em { font-style: normal; color: var(--wp--preset--color--or-texte); }
.hero .chapeau { font-size: var(--wp--preset--font-size--s); }
.hero .inscription { max-width: 30rem; margin-top: var(--wp--preset--spacing--20); }
.hero .inscription__mention { text-align: left; }
.hero__dispo { color: var(--wp--preset--color--terracotta-texte); font-weight: 700; font-size: var(--wp--preset--font-size--s); }
.hero .badges { justify-content: flex-start; }

.scene { position: relative; isolation: isolate; display: flex; justify-content: center; padding: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--60); }
.scene__appareil { position: relative; isolation: isolate; flex: none; width: min(100%, 21rem); }
.scene__appareil .telephone { width: 100%; }
/* Îles accrochées au téléphone : elles en dépassent de 50 % (jungle à gauche, montagne plus grande à droite). */
.scene__appareil::before, .scene__appareil::after { bottom: 10%; opacity: calc(.85 * var(--vu, 1)); -webkit-mask-image: none; mask-image: none; }
.scene__appareil::before { left: 0; translate: -50% 0; height: 55%; }
.scene__appareil::after { right: 0; translate: 50% 0; height: 66%; }
/* Preuve sociale : deux chiffres entre deux branches de laurier, posés sur le fond (motif des récompenses d'app). */
.confiance-zone { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0 var(--wp--preset--spacing--40); text-align: center; }
.confiance { display: flex; align-items: center; justify-content: center; gap: 1.1rem; }
.confiance::before, .confiance::after {
	content: ""; flex: none; width: 1.7rem; height: 3.4rem;
	background: var(--wp--preset--color--or-texte);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 64'%3E%3Cpath d='M22 62C8 52 5 34 14 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cellipse cx='8.5' cy='51' rx='2.6' ry='6' transform='rotate(-55 8.5 51)'/%3E%3Cellipse cx='18.5' cy='49' rx='2.6' ry='6' transform='rotate(35 18.5 49)'/%3E%3Cellipse cx='4.5' cy='38' rx='2.6' ry='6' transform='rotate(-35 4.5 38)'/%3E%3Cellipse cx='14.5' cy='37' rx='2.6' ry='6' transform='rotate(30 14.5 37)'/%3E%3Cellipse cx='4.8' cy='22' rx='2.6' ry='6' transform='rotate(-20 4.8 22)'/%3E%3Cellipse cx='14.3' cy='22' rx='2.6' ry='6' transform='rotate(25 14.3 22)'/%3E%3Cellipse cx='7.5' cy='11' rx='2.4' ry='5.5' transform='rotate(-10 7.5 11)'/%3E%3Cellipse cx='16.2' cy='11.5' rx='2.4' ry='5.5' transform='rotate(30 16.2 11.5)'/%3E%3Cellipse cx='14.5' cy='3.8' rx='2' ry='4' transform='rotate(15 14.5 3.8)'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 64'%3E%3Cpath d='M22 62C8 52 5 34 14 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cellipse cx='8.5' cy='51' rx='2.6' ry='6' transform='rotate(-55 8.5 51)'/%3E%3Cellipse cx='18.5' cy='49' rx='2.6' ry='6' transform='rotate(35 18.5 49)'/%3E%3Cellipse cx='4.5' cy='38' rx='2.6' ry='6' transform='rotate(-35 4.5 38)'/%3E%3Cellipse cx='14.5' cy='37' rx='2.6' ry='6' transform='rotate(30 14.5 37)'/%3E%3Cellipse cx='4.8' cy='22' rx='2.6' ry='6' transform='rotate(-20 4.8 22)'/%3E%3Cellipse cx='14.3' cy='22' rx='2.6' ry='6' transform='rotate(25 14.3 22)'/%3E%3Cellipse cx='7.5' cy='11' rx='2.4' ry='5.5' transform='rotate(-10 7.5 11)'/%3E%3Cellipse cx='16.2' cy='11.5' rx='2.4' ry='5.5' transform='rotate(30 16.2 11.5)'/%3E%3Cellipse cx='14.5' cy='3.8' rx='2' ry='4' transform='rotate(15 14.5 3.8)'/%3E%3C/svg%3E") center / contain no-repeat;
}
.confiance::after { transform: scaleX(-1); }
.confiance__stat { display: flex; flex-direction: column; align-items: center; margin: 0; font-size: var(--wp--preset--font-size--xs); font-weight: 600; line-height: 1.25; color: var(--wp--preset--color--taupe); }
.confiance__stat strong { font-size: 1.6rem; font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; color: var(--wp--preset--color--or-texte); }
.confiance__stat + .confiance__stat { padding-left: 1.1rem; border-left: 1px solid var(--trait); }
.confiance__legende { margin: 0; font-size: var(--wp--preset--font-size--xs); font-weight: 600; color: var(--wp--preset--color--taupe); }
/* Dans le haut de page : la preuve sociale sous le formulaire, alignée à gauche, visible dès l'ouverture. */
.hero .confiance-zone { align-self: center; align-items: center; padding: 0; margin-top: var(--wp--preset--spacing--30); }
@media (min-width: 60rem) {
	.hero { padding-top: var(--wp--preset--spacing--70); }
	.hero__grille { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; gap: var(--wp--preset--spacing--80); }
	.hero .chapeau { font-size: var(--wp--preset--font-size--m); }
	.scene__appareil { width: 21rem; translate: 2.5rem 0; }
	/* Sur ordinateur, la preuve sociale s'aligne à gauche avec le texte (centrée sur téléphone). */
	.hero .confiance-zone { align-self: flex-start; }
}

/* ---------- Colonnes texte / visuel ---------- */
.colonnes { display: grid; gap: var(--wp--preset--spacing--70); align-items: center; }
.visuel { position: relative; isolation: isolate; display: flex; justify-content: center; align-items: flex-start; gap: var(--wp--preset--spacing--40); }
/* Îles accrochées aux captures : elles en dépassent de 50 % de chaque côté, quelle que soit la largeur. */
.visuel { --boite-l: min(21rem, 100%); --ile-l: calc(1.17 * min(21rem, 100%)); }
.visuel--duo { --boite-l: min(43rem, 100%); --ile-l: calc(1.17 * min(21rem, (100% - 1rem) / 2)); }
/* Même placement que le haut de page : 55 % (gauche) et 66 % (droite) de la hauteur, posées à 10 % du bas. */
.visuel::before, .visuel::after { bottom: 10%; opacity: calc(.85 * var(--vu, 1)); -webkit-mask-image: none; mask-image: none; }
.visuel::before { left: calc(50% - var(--boite-l) / 2); translate: -50% 0; height: 55%; }
.visuel::after { right: calc(50% - var(--boite-l) / 2); translate: 50% 0; height: 66%; }
/* Captures en carte de verre : la capture fait foi, la carte prend ses proportions (1179 × 2556). */
.telephone {
	position: relative; flex: none;
	padding: 0.8%; border-radius: 10.7% / 5%;
	background: var(--verre-fond);
	-webkit-backdrop-filter: blur(24px) saturate(1.1); backdrop-filter: blur(24px) saturate(1.1);
	border: 1px solid var(--verre-bord);
	box-shadow: var(--verre-ombre);
}
.telephone img { width: 100%; height: auto; aspect-ratio: 560 / 1214; border-radius: 10.1% / 4.65%; }
.visuel .telephone { width: min(100%, 21rem); }
.visuel--duo .telephone { width: min(21rem, calc((100% - var(--wp--preset--spacing--40)) / 2)); }
.visuel--duo .telephone:nth-child(2) { margin-top: var(--wp--preset--spacing--70); }

/* Étapes YouTube : une séquence, donc numérotée */
.etapes { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--50); counter-reset: etape; }
.etape { display: grid; grid-template-columns: 3.25rem 1fr; column-gap: var(--wp--preset--spacing--40); align-items: start; counter-increment: etape; }
.etape::before {
	content: counter(etape); grid-row: 1 / span 2;
	display: grid; place-items: center; width: 3.25rem; aspect-ratio: 1;
	background: var(--wp--preset--color--creme); border: 3px solid var(--wp--preset--color--terracotta); border-radius: 12px;
	font-weight: 800; font-size: var(--wp--preset--font-size--l);
}
.etape > * { grid-column: 2; }
.etape:nth-child(2)::before { border-color: var(--wp--preset--color--ambre); }
.etape:nth-child(3)::before { border-color: var(--wp--preset--color--sauge); }
.etape p { font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--taupe); margin-top: 0.25rem; }

.liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); }
.liste li { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--wp--preset--spacing--30); }
.liste li::before {
	content: ""; width: 1rem; height: 1rem; margin-top: 0.3rem;
	border: 2.5px solid var(--wp--preset--color--sauge); border-radius: 4px; background: var(--wp--preset--color--creme);
}

/* ---------- Lecteurs de rythme (bloc wakatoo/post : son style vient de l'extension) ---------- */
.lecteur-figure { display: flex; flex-direction: column; align-items: center; gap: var(--wp--preset--spacing--30); width: min(100%, 22rem); }
.post-exemple { display: flex; flex-direction: column; align-items: center; gap: var(--wp--preset--spacing--40); width: min(100%, 27rem); }
.post-exemple__titre { text-align: center; }
.lecteur-legende { font-size: var(--wp--preset--font-size--xs); font-weight: 600; color: var(--wp--preset--color--taupe); text-align: center; }

/* ---------- Gauthier ---------- */
.auteur { display: grid; gap: var(--wp--preset--spacing--50); align-items: center; }
.auteur--etroit { max-width: 48rem; }
.auteur__photo { width: 8rem; }
.auteur__photo img { width: 100%; border-radius: 50%; border: 5px solid var(--cadre); box-shadow: var(--ombre-douce); }
.auteur__portrait { position: relative; width: 8rem; margin-bottom: 1.25rem; }
/* Pastille Wakademy : l'école de Gauthier, un rectangle arrondi ajusté au logo, centré sur le bas de sa photo. */
.auteur__ecole {
	position: absolute; left: 50%; bottom: -1.1rem; translate: -50% 0;
	display: block; width: 5.8rem; padding: 0.45rem 0.6rem; border-radius: 12px;
	background: var(--cadre); box-shadow: 0 10px 24px -6px rgba(57, 41, 29, .35), 0 2px 6px rgba(57, 41, 29, .12);
}
.auteur__ecole img { display: block; width: 100%; height: auto; }
.auteur__titre { margin-top: var(--wp--preset--spacing--30); }
.auteur__recit { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); margin-top: var(--wp--preset--spacing--40); color: var(--wp--preset--color--taupe); }
.auteur__signature { font-weight: 800; color: var(--wp--preset--color--ecorce); }

/* ---------- Questions (bloc Détails natif, verre léger) ---------- */
.faq { max-width: 44rem; width: 100%; margin-inline: auto; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); }
.wp-block-details {
	border-radius: 16px; border: 1.5px solid var(--details-bord);
	background: var(--details-fond); box-shadow: 0 8px 20px -10px rgba(57, 41, 29, .2);
}
.wp-block-details summary {
	list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--wp--preset--spacing--40); align-items: center;
	padding: 1.1rem 1.25rem; font-weight: 700;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+"; flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
	background: var(--wp--preset--color--sable); font-weight: 800; transition: transform .2s ease;
}
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details p { padding: 0 1.25rem 1.2rem; font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--taupe); }

/* ---------- Fin de page : la carte de verre ---------- */
.section--encart {
	--koala-l: clamp(9.5rem, 8rem + 4vw, 11.5rem);
	display: flex; flex-direction: column; align-items: center; text-align: center;
	padding: calc(var(--wp--preset--spacing--80) + var(--koala-l) / 1.43) var(--wp--preset--spacing--40) var(--wp--preset--spacing--80);
}
/* Îles accrochées à la carte : elles en dépassent de 50 % à gauche et à droite, quelle que soit la largeur. */
.section--encart { --ile-h: clamp(12rem, 30vw, 22rem); --carte-l: min(30rem, 100% - 2rem); }
.section--encart::before, .section--encart::after { top: calc(var(--wp--preset--spacing--80) + var(--koala-l) / 1.43 + 3rem); height: var(--ile-h); opacity: calc(.55 * var(--vu, 1)); }
.section--encart::before { left: calc(50% - var(--carte-l) / 2 - var(--ile-h) * 1.5 * .5); }
.section--encart::after { right: calc(50% - var(--carte-l) / 2 - var(--ile-h) * 1.5 * .5); }
.encart {
	position: relative; width: 100%; max-width: 30rem;
	display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
	padding: 3.4rem var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	border-radius: 28px;
}
.encart__koala {
	position: absolute; left: 50%; top: calc(2.2rem - var(--koala-l) / 1.43);
	width: var(--koala-l); translate: -50% 0; scale: -1 1;
	filter: drop-shadow(0 10px 12px rgba(57, 41, 29, .18));
}
.encart__koala img { width: 100%; }
.encart__logo { width: 11rem; }
.encart__logo img { width: 100%; filter: var(--logo-filtre); }
.encart__dispo { color: var(--wp--preset--color--terracotta-texte); font-weight: 700; font-size: 1.05rem; }
.encart h2.wp-block-heading { font-size: clamp(1.3rem, 1.05rem + 1.3vw, 1.7rem); line-height: 1.2; }
.encart__slogan { margin-top: 2.25rem; font-style: italic; font-weight: 700; font-size: clamp(1.35rem, 1rem + 1.6vw, 2rem); letter-spacing: -0.01em; }

/* ---------- Pied de page (clair) ---------- */
.pied { background: var(--pied-fond); color: var(--wp--preset--color--ecorce); padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50); }
.wakatoo-accueil .pied { padding-bottom: calc(var(--wp--preset--spacing--70) + 5rem); }
.pied__grille { max-width: var(--largeur); margin-inline: auto; display: grid; gap: var(--wp--preset--spacing--50); }
.pied__logo { width: 7rem; }
.pied__logo img { width: 100%; filter: var(--logo-filtre); }
.pied__liens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; font-size: var(--wp--preset--font-size--s); }
.pied__copyright { font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--taupe); }

/* ---------- Bouton collé en bas (téléphone) ---------- */
.wp-block-buttons.colle {
	position: fixed; z-index: 40; left: 1rem; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom));
	display: flex; margin: 0;
	transition: transform .25s ease, opacity .25s ease, visibility .25s;
}
.colle .wp-block-button { width: 100%; }
.colle .wp-block-button__link { width: 100%; box-shadow: 0 10px 24px rgba(57, 41, 29, .25); }
.colle:not(.est-visible) { transform: translateY(150%); opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- Indice « la page continue » (ordinateur, bouton créé par site.js) ----------
   Seulement quand le haut de page remplit l'écran : il apparaît après un court instant,
   flotte doucement, fait défiler d'un clic et disparaît au premier défilement. */
.defiler {
	position: fixed; z-index: 30; left: 50%; bottom: 1.5rem; translate: -50% 0;
	display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0;
	border-radius: 50%; color: var(--wp--preset--color--ecorce); cursor: pointer;
	opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s, color .15s ease;
}
.defiler.est-visible { opacity: 1; visibility: visible; }
.defiler:hover { color: var(--wp--preset--color--or-texte); }
.defiler svg { width: 1.35rem; height: 1.35rem; animation: defiler-flotte 2.2s ease-in-out infinite; }
@keyframes defiler-flotte { 0%, 100% { translate: 0 -2px; } 50% { translate: 0 4px; } }

/* ---------- Pages simples (légales, contact) et 404 ---------- */
.page-contenu { max-width: 44rem; margin-inline: auto; padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50) var(--wp--preset--spacing--80); }
.page-contenu .wp-block-post-title { font-size: var(--wp--preset--font-size--xl); font-weight: 800; margin-bottom: var(--wp--preset--spacing--50); }
.page-contenu .wp-block-post-content > * + * { margin-block-start: 1em; }
.page-contenu .wp-block-post-content h2 { font-size: var(--wp--preset--font-size--l); margin-block-start: 2em; }
.page-contenu .wp-block-post-content h3 { font-size: var(--wp--preset--font-size--m); margin-block-start: 1.5em; }
.page-contenu .wp-block-post-content :is(ul, ol) { padding-left: 1.25rem; }
.page-contenu .wp-block-post-content a { text-decoration-line: underline; }
.page-contenu .wp-block-post-content .wp-block-button__link { background: var(--wp--preset--color--or); color: var(--wp--preset--color--sur-or); }
.wp-block-query .wp-block-post-title { font-size: var(--wp--preset--font-size--l); margin-top: var(--wp--preset--spacing--60); }
.page-404 { display: flex; flex-direction: column; align-items: center; gap: var(--wp--preset--spacing--40); text-align: center; }
.page-404 h1 { font-size: var(--wp--preset--font-size--xl); font-weight: 800; }
.page-404__koala { width: 9rem; }
.page-404__koala img { width: 100%; }
.page-404__en { font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--taupe); }
/* Contact : une carte par interlocuteur (avatar, rôle, lien mail), en verre léger comme la FAQ. */
.contact__titre { font-size: var(--wp--preset--font-size--xl); font-weight: 800; margin-bottom: var(--wp--preset--spacing--50); }
.contact__cartes { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); }
.contact__carte {
	display: grid; grid-template-columns: 4rem 1fr; gap: var(--wp--preset--spacing--40); align-items: start;
	padding: var(--wp--preset--spacing--50); border-radius: 20px;
	border: 1.5px solid var(--details-bord); background: var(--details-fond); box-shadow: 0 8px 20px -10px rgba(57, 41, 29, .2);
}
.contact__avatar { width: 4rem; }
.contact__avatar img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: var(--wp--preset--color--sable); border: 3px solid var(--cadre); }
.contact__texte { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.contact__texte h2.wp-block-heading { font-size: var(--wp--preset--font-size--l); font-weight: 700; }
.contact__texte p { font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--taupe); }
.contact__texte .contact__lien { margin-top: 0.35rem; }
.contact__lien a { display: inline-block; padding-block: 0.3rem; font-weight: 700; color: var(--wp--preset--color--ecorce); text-decoration-line: underline; overflow-wrap: anywhere; }

/* ---------- Tablette et ordinateur ---------- */
@media (min-width: 40rem) {
	.auteur { grid-template-columns: auto 1fr; gap: var(--wp--preset--spacing--60); }
	.pied__grille { grid-template-columns: auto 1fr; align-items: center; }
	.pied__liens { justify-content: flex-end; }
	.pied__copyright { grid-column: 1 / -1; }
}
@media (min-width: 60rem) {
	.colonnes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--wp--preset--spacing--80); }
	.colonnes--inverse .visuel { order: -1; }
	.wp-block-buttons.colle { display: none; }
	.wakatoo-accueil .pied { padding-bottom: var(--wp--preset--spacing--70); }
}
/* ---------- Entrées et sorties douces ----------
   html.wk-anime est posé dès l'en-tête (et retiré au bout de 3 s si le script ne tourne pas) :
   chaque bloc apparaît quand il entre à l'écran et s'efface quand il en sort, en cascade avec ses voisins. */
.wk-anime :is(.hero__texte > *, .scene, .confiance-zone, .section .pile > :not(.etapes, .liste, .faq), .etape, .etapes > li, .liste li, .faq > *, .visuel .telephone, .post-exemple, .lecteur-figure, .auteur__portrait, .auteur .surtitre, .auteur__titre, .auteur__recit > *, .encart, .encart__slogan) {
	transition: opacity .7s cubic-bezier(.22, .8, .26, 1), translate .7s cubic-bezier(.22, .8, .26, 1), scale .7s cubic-bezier(.22, .8, .26, 1);
	transition-delay: calc(var(--rang, 0) * 70ms);
}
.wk-anime :is(.hero__texte > *, .scene, .confiance-zone, .section .pile > :not(.etapes, .liste, .faq), .etape, .etapes > li, .liste li, .faq > *, .visuel .telephone, .post-exemple, .lecteur-figure, .auteur__portrait, .auteur .surtitre, .auteur__titre, .auteur__recit > *, .encart, .encart__slogan):not(.est-visible) { opacity: 0; translate: 0 1.5rem; }
.wk-anime :is(.scene, .visuel .telephone, .post-exemple, .lecteur-figure, .auteur__portrait, .encart):not(.est-visible) { scale: .96; }
/* La pastille Wakademy surgit après la photo ; le koala de l'encart se pose. */
.wk-anime .auteur__ecole { transition: opacity .5s ease .35s, scale .55s cubic-bezier(.34, 1.56, .64, 1) .35s; }
.wk-anime .auteur__portrait:not(.est-visible) .auteur__ecole { opacity: 0; scale: .4; }
.wk-anime .encart__koala { transition: opacity .6s ease .3s, translate .7s cubic-bezier(.34, 1.4, .64, 1) .3s; }
.wk-anime .encart:not(.est-visible) .encart__koala { opacity: 0; translate: -50% 1.25rem; }
/* Faux téléphones : les cartes du post apparaissent une à une, les boutons des paires montent en cascade. */
.wk-anime .post-exemple .wk-grille .wk-carte { transition: opacity .4s ease, scale .5s cubic-bezier(.34, 1.4, .64, 1); transition-delay: calc(300ms + var(--rang, 0) * 30ms); }
.wk-anime .post-exemple:not(.est-visible) .wk-grille .wk-carte { opacity: 0; scale: .8; }
.wk-anime .lecteur-figure .wk-ecran :is(.wk-paires__son, .wk-paires__carte) {
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, scale .1s ease,
		opacity .45s ease calc(300ms + var(--rang, 0) * 60ms), translate .55s cubic-bezier(.22, .8, .26, 1) calc(300ms + var(--rang, 0) * 60ms);
}
.wk-anime .lecteur-figure:not(.est-visible) .wk-ecran :is(.wk-paires__son, .wk-paires__carte) { opacity: 0; translate: 0 1.2rem; }
/* Îles du décor : fondu et léger zoom quand leur bloc arrive. */
.wk-anime .a-decor::before, .wk-anime .a-decor::after { transition: opacity 1s ease .15s, scale 1s cubic-bezier(.22, .8, .26, 1) .15s; }
.wk-anime .a-decor:not(.est-visible) { --vu: 0; }
.wk-anime .a-decor:not(.est-visible)::before, .wk-anime .a-decor:not(.est-visible)::after { scale: .94; }
.wk-anime .decor { transition: opacity 1s ease .15s, scale 1s cubic-bezier(.22, .8, .26, 1) .15s; }
.wk-anime :is(.scene__appareil, .visuel, .section--encart):not(.est-visible) > .decor { opacity: 0; scale: .94; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}