/* ==========================================================================
   Chez Mariella — Accueil
   Fidèle à la maquette Figma / Bricks v3. Typographie fluide (clamp),
   mêmes points de rupture que Bricks : 991 / 767 / 478 px.
   ========================================================================== */

:root {
	/* Couleurs de la maquette */
	--ink: #2b2b2b;
	--grey-100: #f5f5f5;
	--grey-300: #e0e0e0;
	--grey-700: #616161;
	--grey-900: #212121;
	--mahogany: #61251a;        /* bouton « Voir tous les services » */
	--taupe: #8e7e78;           /* tuile Transmission */
	--taupe-veil: #8f796e36;    /* tuile Bienveillance */
	--cocoa: #45291e;           /* tuile Apprentissage */
	--veil-hero: #f5f5f5de;
	--veil-services: #f5f5f5d1;
	--veil-trust: #f5f5f5cc;

	/* Polices */
	--f-display: "Abril Fatface", "Playfair Display", Georgia, serif;
	--f-title: "Oswald", "Arial Narrow", system-ui, sans-serif;
	--f-text: "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Échelle typographique fluide (reprise des variables Bricks, recalibrée) */
	--t-display: clamp(2.6rem, 1.4rem + 4.6vw, 7.5rem);
	--t-h1: clamp(2.2rem, 1.3rem + 3.2vw, 5.5rem);
	--t-h2: clamp(2rem, 1.2rem + 2.8vw, 4.75rem);
	--t-h3: clamp(1.75rem, 1.15rem + 1.9vw, 3.25rem);
	--t-h4: clamp(1.3rem, 1rem + 1vw, 2.25rem);
	--t-h5: clamp(1.15rem, .95rem + .65vw, 1.75rem);
	--t-h6: clamp(1.1rem, .95rem + .45vw, 1.45rem);
	--t-lead: clamp(1.05rem, .95rem + .4vw, 1.35rem);
	--t-body: clamp(1rem, .93rem + .25vw, 1.15rem);
	--t-card: clamp(.92rem, .86rem + .2vw, 1.05rem);
	--t-btn: clamp(.8rem, .76rem + .15vw, .92rem);

	--lh-display: .95;
	--lh-heading: 1.04;
	--lh-body: 1.6;

	/* Espacements */
	--s-2: clamp(8px, .5vw, 10px);
	--s-3: clamp(12px, .75vw, 16px);
	--s-5: clamp(20px, 1.25vw, 28px);
	--s-m: clamp(1.25rem, 1rem + .8vw, 2rem);
	--s-xl: clamp(1.75rem, 1.3rem + 1.4vw, 3rem);
	--sec-xs: clamp(40px, 3vw, 64px);
	--sec-sm: clamp(56px, 4vw, 88px);
	--sec-md: clamp(72px, 6vw, 128px);
	--sec-lg: clamp(90px, 8vw, 160px);
	--measure-sm: 45ch;

	--radius: 10px;
	--ease: cubic-bezier(.22, .8, .24, 1);
	--terra: #cd8974;           /* bouton « Réserver » de la v1 */
	--nav-h: 4.75rem;
	--content-max: 100rem;      /* largeur maximale du contenu (les fonds restent en pleine largeur) */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--grey-100);
	color: var(--ink);
	font-family: var(--f-text);
	font-size: var(--t-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--mahogany); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: #fff; padding: .6em 1em; }

/* Fond texturé + voile clair, commun à plusieurs sections */
.textured { position: relative; background: url("../img/texture.webp") center / cover; }
.textured::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--veil, transparent); }
.textured > * { position: relative; }

/* ---------- Boutons ---------- */
.btn {
	display: inline-flex; align-items: center; gap: .7em;
	padding: .55em 1.1em;
	font-family: var(--f-title); font-size: var(--t-btn); letter-spacing: .02em;
	text-decoration: none; color: var(--ink); background: var(--grey-300);
	border: 0; cursor: pointer;
	transition: background-color .4s ease, color .4s ease, box-shadow .6s var(--ease);
}
.btn .plus { display: inline-block; font-size: 1.15em; line-height: 1; transition: transform .6s var(--ease); }
.btn:hover { box-shadow: 0 12px 26px -16px rgba(33, 33, 33, .55); }
.btn:hover .plus { transform: rotate(90deg); }
.btn--dark { background: var(--grey-900); color: var(--grey-100); }
.btn--mahogany { background: var(--mahogany); color: var(--grey-100); }

/* ==========================================================================
   1. HERO
   ========================================================================== */
.hero { display: grid; grid-template-columns: 1fr 1fr; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.hero__panel { --veil: var(--veil-hero); display: flex; align-items: center; justify-content: center; padding: calc(var(--nav-h) + clamp(40px, 6vw, 90px)) var(--sec-sm) var(--sec-sm); }
.hero__content { display: flex; flex-direction: column; align-items: flex-start; }
.hero__title { font-family: var(--f-display); font-size: var(--t-display); line-height: var(--lh-display); }
.hero__subtitle { font-family: var(--f-title); font-size: var(--t-h4); line-height: 1.15; margin-top: .9em; }
.hero__text { font-family: var(--f-title); font-weight: 200; font-size: var(--t-lead); line-height: var(--lh-body); max-width: var(--measure-sm); margin-top: 1em; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-m); margin-top: var(--s-xl); }
.hero__media { position: relative; overflow: hidden; background: #e9e9e9; }
.hero__media video { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 40%; }

/* ==========================================================================
   2. SERVICES
   ========================================================================== */
.services { --veil: var(--veil-services); display: grid; grid-template-columns: 2fr 3fr; }
.services__bowl { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding-top: clamp(100px, 26vh, 260px); min-height: 100%; }
.services__bowl-img { position: absolute; inset: -8% 0; background: url("../img/bol-tibetain.webp") center / cover; will-change: transform; }
.services__word { position: relative; font-family: var(--f-display); font-size: var(--t-h2); line-height: 1; }
.services__word .char { display: inline-block; will-change: transform; }
.rings { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.rings span { position: absolute; left: 0; top: 0; width: 28vmin; height: 28vmin; margin: -14vmin 0 0 -14vmin; border: 1px solid rgba(97, 37, 26, .35); border-radius: 50%; opacity: 0; }

.services__main { padding-block: var(--sec-md) var(--sec-xs); }
.services__head { padding-inline: var(--sec-md); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-m); margin-bottom: var(--sec-xs); }
.services__heading { font-family: var(--f-display); font-size: clamp(2rem, 1.2rem + 2vw, 3.6rem); line-height: var(--lh-heading); }
.services__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-xl) var(--s-m); padding-inline: var(--sec-md); }
.card { padding: var(--s-3); display: flex; flex-direction: column; align-items: flex-start; }
.card__icon { width: clamp(3rem, 2.4rem + 1.6vw, 4.25rem); height: auto; aspect-ratio: 1; margin-bottom: var(--s-3); color: var(--ink); overflow: visible; }
.card__icon .dots { opacity: .55; }
.card__body { display: flex; flex-direction: column; align-items: flex-start; }
/* 5e carte : elle occupe toute la ligne, icône à gauche */
.card--wide { grid-column: 1 / -1; flex-direction: row; align-items: flex-start; gap: var(--s-m); }
.card--wide .card__icon { flex: none; margin-bottom: 0; }
.card__title { font-family: var(--f-title); font-size: var(--t-h6); line-height: 1.2; }
.card__text { font-weight: 300; font-size: var(--t-body); max-width: var(--measure-sm); margin-top: var(--s-m); }
.card .btn { margin-top: var(--s-m); }

/* ==========================================================================
   3. TRANSMISSION
   ========================================================================== */
.learn { position: relative; overflow: hidden; padding-block: clamp(56px, 3.5vw, 76px) clamp(112px, 7vw, 160px); }
.learn__bg { position: absolute; inset: -10% 0 0; background: url("../img/fond-cube.webp") top center / cover; will-change: transform; }
.learn__inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-inline: 16px; }
.learn__kicker { font-family: var(--f-title); font-weight: 300; font-size: var(--t-h5); }
.learn__heading { font-family: var(--f-display); font-size: var(--t-h1); line-height: var(--lh-heading); margin-top: .1em; }
.learn__inner > .btn { margin-top: var(--s-xl); }
.tiles { display: grid; grid-template-columns: repeat(3, 370px); grid-auto-rows: 385px; gap: var(--s-3); justify-content: center; margin-top: clamp(56px, 3.5vw, 76px); perspective: 1200px; }
.tile { position: relative; border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transform-style: preserve-3d; }
.tile--img { margin: 0; }
.tile--img img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }
.tile--word { background-image: url("../img/texture.webp"); background-size: cover; padding: 8%; }
.tile--taupe { background-color: var(--taupe); background-blend-mode: multiply; color: var(--grey-100); }
.tile--veil { background-color: var(--taupe-veil); color: var(--ink); }
.tile--cocoa { background-color: var(--cocoa); background-blend-mode: multiply; color: var(--grey-100); }
.tile__title { font-family: var(--f-display); font-size: var(--t-h3); line-height: 1.05; }
.tile--veil .tile__title { color: var(--grey-700); }
.tile__text { font-weight: 300; font-size: var(--t-card); line-height: var(--lh-body); margin-top: var(--s-m); }

/* ==========================================================================
   4. CONFIANCE
   ========================================================================== */
.trust { --veil: var(--veil-trust); display: grid; grid-template-columns: 3fr 2fr 3fr; height: 100vh; height: 100svh; min-height: 640px; }
.trust__intro { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-inline: var(--sec-lg); gap: var(--s-5); }
.trust__lotus { width: 40%; max-width: 150px; }
.trust__heading { font-family: var(--f-display); font-size: var(--t-h2); line-height: 1; }
.trust__sub { font-family: var(--f-title); font-size: var(--t-h5); line-height: var(--lh-heading); }
.trust__text { font-family: var(--f-title); font-weight: 200; font-size: var(--t-lead); max-width: var(--measure-sm); }
.trust__arch { align-self: start; height: 86%; overflow: hidden; border-radius: 0 0 500px 500px; }
.trust__arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.trust__stats { display: flex; flex-direction: column; justify-content: center; gap: var(--s-xl); padding-inline: var(--sec-sm); }
.stat__value { font-family: var(--f-display); font-size: var(--t-h1); line-height: 1; font-variant-numeric: tabular-nums; }
.stat__value small { font-size: .32em; margin-right: .1em; }
.stat__label { font-family: var(--f-title); font-size: var(--t-h5); line-height: var(--lh-heading); margin-top: .35em; }

/* Défilement adouci (Lenis) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Masques de lignes (SplitText) */
.line-mask { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.line-mask > span { display: inline-block; }
.char { display: inline-block; will-change: transform; }
.word { display: inline-block; white-space: nowrap; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199px) {
	.tiles { grid-template-columns: repeat(3, minmax(0, 300px)); grid-auto-rows: 330px; }
	.trust__intro { padding-inline: var(--sec-sm); }
}
@media (max-width: 991px) {
	.hero__panel { padding: calc(var(--nav-h) + 24px) var(--sec-sm) var(--sec-sm); }
	.services__grid { grid-template-columns: 1fr; }
	.card--wide { flex-direction: column; gap: 0; }
	.card--wide .card__icon { margin-bottom: var(--s-3); }
	.tiles { grid-template-columns: repeat(3, minmax(0, 280px)); grid-auto-rows: 320px; padding-inline: 16px; }
	.tile__text { font-size: .9rem; }
	.trust { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; height: auto; }
	.trust__intro { grid-column: 1 / -1; padding-block: var(--sec-md) var(--sec-xs); }
	.trust__arch { height: 70vh; border-radius: 0 0 400px 400px; }
}
@media (max-width: 767px) {
	.hero { grid-template-columns: 1fr; height: auto; min-height: 0; }
	.hero__panel { padding: calc(var(--nav-h) + 48px) 24px var(--sec-sm); justify-content: flex-start; }
	.hero__media { height: 450px; }
	.services { display: flex; flex-direction: column; }
	.services__bowl { height: 450px; padding-top: 60px; }
	.services__main { padding-block: var(--sec-md); }
	.services__head, .services__grid { padding-inline: var(--sec-sm); }
	.tiles { display: flex; flex-direction: column; align-items: stretch; padding-inline: var(--sec-sm); }
	.tile--img { height: auto; aspect-ratio: 16 / 9; }
	.tile--word { padding: var(--sec-sm) 8%; }
	.tile__text { font-size: var(--t-body); }
	.trust { display: flex; flex-direction: column; }
	.trust__intro { padding: var(--sec-md) 32px var(--s-xl); }
	.trust__lotus { width: 20%; }
	.trust__arch { height: auto; border-radius: 0; }
	.trust__arch img { height: auto; aspect-ratio: 16 / 9; object-position: 50% 28%; }
	.trust__stats { align-items: center; text-align: center; padding-block: var(--sec-md); }
}
@media (max-width: 478px) {
	.hero__panel { padding: calc(var(--nav-h) + 32px) 20px 48px; }
	.hero__title { font-size: clamp(2.4rem, 12.5vw, 3.5rem); }
	.hero__ctas { flex-direction: column; width: 100%; gap: 12px; }
	.hero__ctas .btn { justify-content: space-between; }
	.hero__media { height: auto; aspect-ratio: 9 / 12; }
	.services__bowl { height: 410px; }
	.services__head, .services__grid { padding-inline: 20px; }
	.services__heading, .learn__heading, .trust__heading { font-size: clamp(2rem, 9.5vw, 2.75rem); }
	.card .btn, .services__head .btn { width: 100%; justify-content: space-between; }
	.learn { padding-inline: 4px; }
	.tiles { padding-inline: 20px; }
	.tile__title { font-size: clamp(1.9rem, 9vw, 2.5rem); }
}



/* ==========================================================================
   MENU (repris de la v1) — barre fixe
   ========================================================================== */
.nav {
	position: fixed; top: 0; left: 0; right: 0; z-index: 90;
	height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
	padding: env(safe-area-inset-top, 0px) clamp(16px, 2.6vw, 44px) 0;
	display: flex; align-items: center; gap: clamp(16px, 2vw, 36px);
	transition: background-color .5s ease, box-shadow .5s ease, backdrop-filter .5s ease;
}
.nav.is-scrolled { background: rgba(245, 245, 245, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(33, 33, 33, .08); }
.brand { display: block; text-decoration: none; flex: none; align-self: flex-start; margin-top: 8px; }
/* Logo : grand au chargement, il se réduit au défilement (GSAP) */
.brand .logo { display: block; width: clamp(92px, 9vw, 9.4rem); height: auto; aspect-ratio: 681 / 575; }
.logo--dark { --logo-moon: #212121; --logo-text: #212121; }
.logo--light { --logo-moon: #f5f5f5; --logo-text: #f5f5f5; }
.logo--color { --logo-moon: #cbb6ab; --logo-text: #1c2120; }
.nav__links { margin-left: clamp(8px, 2vw, 40px); }
.nav__links > ul { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 28px); list-style: none; margin: 0; padding: 0; }
.nav__links a, .nav__links button { font-family: var(--f-title); font-weight: 300; font-size: .95rem; letter-spacing: .03em; color: var(--ink); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.nav__links .is-active { font-weight: 500; }
.has-sub { position: relative; }
.has-sub { padding-right: 13px; }
.has-sub::after { content: ""; position: absolute; right: 0; top: 50%; width: 5px; height: 5px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; transition: transform .5s var(--ease); }
.has-sub:hover::after, .has-sub.is-open::after { transform: translateY(-30%) rotate(225deg); }
.sub {
	position: absolute; top: calc(100% + 18px); left: -18px; min-width: 260px;
	list-style: none; margin: 0; padding: 10px 0;
	background: rgba(245, 245, 245, .97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	box-shadow: 0 24px 50px -24px rgba(33, 33, 33, .3);
	clip-path: inset(0 0 100% 0); visibility: hidden;
	transition: clip-path .6s var(--ease), visibility 0s .6s;
}
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.sub a { display: block; padding: .55em 18px; transition: padding-left .5s var(--ease), color .3s; }
.sub a:hover { padding-left: 26px; color: var(--mahogany); }
.has-sub:hover .sub, .has-sub:focus-within .sub, .has-sub.is-open .sub { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .6s var(--ease), visibility 0s; }
.nav__cta { flex: none; margin-left: auto; display: inline-flex; align-items: center; padding: .7em 1.2em; background: var(--terra); color: #fff; text-decoration: none; font-family: var(--f-title); font-size: .9rem; letter-spacing: .03em; }
.menu-btn { display: none; flex: none; width: 44px; height: 44px; border: 0; background: none; position: relative; cursor: pointer; margin-left: auto; }
.menu-btn i { position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--ink); transition: transform .6s var(--ease), top .6s var(--ease); }
.menu-btn i:first-child { top: 17px; } .menu-btn i:last-child { top: 26px; }
.menu-open .menu-btn i:first-child { top: 21px; transform: rotate(45deg); }
.menu-open .menu-btn i:last-child { top: 21px; transform: rotate(-45deg); }

/* Liens « roll » : le texte est remplacé par sa copie au survol */
.roll { position: relative; display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3em; vertical-align: top; }
.roll > span { display: block; transition: transform .55s var(--ease); }
.roll > span + span { position: absolute; top: 100%; left: 0; }
.roll:hover > span, a:hover > .roll > span, .roll:focus-visible > span { transform: translateY(-100%); }

/* Menu plein écran */
#menu {
	position: fixed; inset: 0; z-index: 85; background: var(--grey-100);
	padding: calc(var(--nav-h) + 24px) 24px 32px; overflow-y: auto;
	display: flex; flex-direction: column; gap: 6px;
	clip-path: inset(0 0 100% 0);
}
#menu .mi { display: flex; align-items: baseline; gap: 14px; font-family: var(--f-display); font-size: clamp(1.9rem, 7vw, 2.8rem); line-height: 1.15; color: var(--ink); text-decoration: none; }
#menu .mi i { font-style: normal; font-family: var(--f-title); font-size: .8rem; letter-spacing: .1em; color: var(--grey-700); }
#menu .mi-group { display: flex; flex-direction: column; }
#menu .mi-group > a { font-family: var(--f-title); font-weight: 300; font-size: 1.05rem; padding: .25em 0 .25em 36px; color: var(--ink); text-decoration: none; }
#menu .menu-cta { margin-top: 24px; align-self: flex-start; }
.btn--terra { background: var(--terra); color: #fff; }

@media (max-width: 1180px) {
	.nav__links, .nav > .nav__cta { display: none; }
	.menu-btn { display: block; }
}

/* ==========================================================================
   Écran de chargement
   ========================================================================== */
#loader { position: fixed; inset: 0; z-index: 200; background: var(--grey-100); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 3vh, 28px); }
.no-loader #loader, .reduced #loader, .no-js #loader { display: none; }
.ld-mark { position: relative; width: clamp(200px, 22vw, 300px); aspect-ratio: 681 / 575; }
.ld-mark .logo { position: absolute; inset: 0; width: 100%; height: 100%; }
.ld-moon { transform-origin: 51% 27%; }
.ld-tag { font-family: var(--f-title); font-weight: 300; font-size: .78rem; letter-spacing: .38em; text-transform: uppercase; color: var(--grey-700); white-space: nowrap; }
.ld-line { position: relative; width: clamp(120px, 14vw, 180px); height: 1px; background: rgba(33, 33, 33, .12); overflow: hidden; }
.ld-line i { position: absolute; inset: 0; background: var(--mahogany); transform: scaleX(0); transform-origin: left; }

/* Barre de progression + curseur */
#progress { position: fixed; left: 0; top: 0; height: 2px; width: 100%; background: var(--mahogany); transform: scaleX(0); transform-origin: left; z-index: 150; }
#cursor { position: fixed; top: 0; left: 0; z-index: 180; pointer-events: none; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--ink); display: none; place-items: center; }
#cursor span { font-family: var(--f-title); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-100); opacity: 0; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { #cursor { display: grid; } }
/* Curseur « Jouer le film » sur la vidéo du hero (ordinateur seulement) */
#cursor.is-film { border: 1px solid rgba(255, 255, 255, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
#cursor.is-film span { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11px; font-weight: 300; letter-spacing: .18em; color: #fff; }
#cursor.is-film svg { width: 14px; height: 14px; margin-left: 3px; }
@media (hover: hover) and (pointer: fine) {
	.has-cursor .hero__media[data-cursor-film] { cursor: none; }
	.has-cursor .hero__media[data-cursor-film] .film-btn { cursor: pointer; }
}

/* Rideaux de révélation */
.curtain { position: absolute; inset: 0; z-index: 3; background: var(--mahogany); transform: scaleX(0); pointer-events: none; }
.trust__arch { position: relative; }
.trust__arch img { will-change: transform; }

/* Ondes autour du bol */
.services__bowl .curtain { z-index: 2; }

/* ==========================================================================
   Bandeau défilant
   ========================================================================== */
.marquee { overflow: hidden; white-space: nowrap; padding-block: clamp(22px, 3vw, 40px); background: var(--grey-100); border-block: 1px solid rgba(33, 33, 33, .1); position: relative; z-index: 1; }
.marquee .track { display: inline-flex; align-items: center; gap: clamp(22px, 3vw, 44px); will-change: transform; }
.marquee span { font-family: var(--f-display); font-size: clamp(2.2rem, 5.5vw, 5.5rem); line-height: 1; }
.marquee em { font-family: var(--f-title); font-weight: 200; font-style: normal; font-size: clamp(2rem, 5vw, 5rem); text-transform: uppercase; letter-spacing: .04em; line-height: 1; }
.marquee .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--terra); flex: none; }

/* ==========================================================================
   Pied de page
   ========================================================================== */
.foot { background: var(--grey-900); color: var(--grey-100); overflow: hidden; }
.foot__inner { padding: clamp(64px, 8vw, 120px) clamp(20px, 4vw, 64px) 28px; }
.foot__claim { font-family: var(--f-display); font-size: clamp(1.8rem, 3.6vw, 3.4rem); line-height: 1.1; max-width: 22ch; }
.foot__claim em { font-style: normal; color: var(--terra); }
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 28px; margin-top: clamp(40px, 6vw, 80px); font-size: .95rem; }
.foot__grid > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.foot__grid a { color: var(--grey-100); text-decoration: none; }
.foot__label { font-family: var(--f-title); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: #9e9e9e; margin-bottom: 4px; }
.sel { user-select: all; overflow-wrap: anywhere; }
.foot__big { font-family: var(--f-display); font-size: clamp(2.6rem, 11vw, 13rem); line-height: .9; white-space: nowrap; margin-top: clamp(48px, 7vw, 96px); color: var(--grey-100); }
.foot__row { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(245, 245, 245, .15); font-size: .8rem; color: #9e9e9e; }
.foot__row a { color: inherit; }

.skip:focus { z-index: 300; }

/* Logo du pied de page */
.foot__logo { display: block; width: clamp(120px, 12vw, 190px); height: auto; aspect-ratio: 681 / 575; margin-bottom: clamp(32px, 4vw, 56px); }

/* Boutons : un fond qui balaie au survol */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--mahogany); transform: scaleX(0); transform-origin: right; transition: transform .7s var(--ease); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn:hover { color: var(--grey-100); }
.btn--mahogany::before, .btn--terra::before { background: var(--grey-900); }

/* Titre « présence qui s'apprend » : les lettres se remplissent au défilement */
[data-fill] .char { opacity: .14; }
.no-js [data-fill] .char, .reduced [data-fill] .char { opacity: 1; }

/* Les photos des tuiles zooment au survol */
.tile--img img { transition: filter .8s var(--ease); }
.tile--img:hover img { filter: saturate(1.15); }

/* Lamelles verticales qui découvrent la vidéo du hero au chargement */
.hero__blinds { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); pointer-events: none; }
.hero__blinds i { display: block; background: #f5f5f5; transform-origin: 50% 0%; }
.hero__blinds i:nth-child(even) { background: #fff; }
.reduced .hero__blinds, .no-js .hero__blinds, .late:not(.js-ready) .hero__blinds { display: none; }

/* ==========================================================================
   « Comment je peux t'accompagner ? » : version compacte qui tient en 100vh
   ========================================================================== */
.card { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-3); align-items: start; }
.card .card__icon { width: clamp(2.6rem, 2.2rem + 1vw, 3.4rem); margin: 0; }
.card__body { min-width: 0; }
.card__text { margin-top: .6em; font-size: var(--t-card); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* « En savoir + » devient un lien souligné qui se dessine au survol */
.card .btn { background: none; color: var(--ink); padding: 0 0 4px; margin-top: .9em; box-shadow: none; }
.card .btn::before { display: none; }
.card .btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: left; transition: transform .7s var(--ease); }
.card .btn:hover { color: var(--mahogany); }
.card .btn:hover::after { transform: scaleX(0); transform-origin: right; animation: underline-in .7s var(--ease) .35s forwards; }
@keyframes underline-in { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
.services__head { margin-bottom: clamp(28px, 4vh, 48px); gap: clamp(12px, 2vh, 20px); }
.services__heading { font-size: clamp(2rem, 1.2rem + 1.8vw, 3.4rem); }
.services__grid { row-gap: clamp(24px, 4.5vh, 48px); }

@media (min-width: 992px) and (min-height: 760px) {
	.services { height: 100vh; height: 100svh; overflow: hidden; }
	.services__bowl { height: 100%; min-height: 0; padding-top: clamp(110px, 24vh, 240px); }
	.services__main { display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--nav-h) + 8px) clamp(24px, 4vh, 48px); }
}

/* Pied de page fixe, découvert par le contenu qui remonte (activé par le JS s'il tient dans l'écran) */
.foot-fixed .foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; }
.foot-fixed main { position: relative; z-index: 1; background: var(--grey-100); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .35); }

/* Pied de page compact (pour tenir dans l'écran et pouvoir rester fixe) */
.foot__inner { padding: clamp(40px, 6vh, 72px) clamp(20px, 4vw, 64px) 22px; }
.foot__top { display: flex; align-items: center; gap: clamp(24px, 4vw, 64px); }
.foot__logo { width: clamp(96px, 8vw, 132px); margin: 0; flex: none; }
.foot__claim { font-size: clamp(1.6rem, 2.6vw, 2.6rem); max-width: 24ch; }
.foot__grid { margin-top: clamp(28px, 5vh, 56px); }
.foot__big { font-size: clamp(2.6rem, 9vw, 10rem); margin-top: clamp(24px, 4vh, 48px); }
.foot__row { margin-top: 18px; padding-top: 16px; }
@media (max-width: 767px) { .foot__top { flex-direction: column; align-items: flex-start; } }

/* « C'est une présence qui s'apprend » : tuiles au format paysage, la section tient en 100vh sur ordinateur.
   Les textes des tuiles se dimensionnent sur la largeur de la grille (unités cqi). */
.tiles { container-type: inline-size; }
@media (min-width: 768px) {
	.tiles {
		width: min(73.75rem, 100% - 32px);
		grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto;
		margin-inline: auto;
	}
	.tile { aspect-ratio: 16 / 10; height: auto; }
	.tile--word { padding: 5% 7%; }
	.tile__title { font-size: clamp(1.25rem, 3.1cqi, 2.6rem); line-height: 1.05; }
	.tile__text { font-size: clamp(.78rem, 1.22cqi, 1rem); line-height: 1.5; margin-top: clamp(6px, 1cqi, 14px); }
}
@media (min-width: 992px) and (min-height: 700px) {
	.learn {
		height: 100vh; height: 100svh;
		display: flex; flex-direction: column; justify-content: center;
		padding-block: calc(var(--nav-h) + 12px) clamp(20px, 3vh, 36px);
	}
	.learn__inner > .btn { margin-top: clamp(14px, 2.4vh, 28px); }
	/* La grille ne dépasse jamais la hauteur disponible : 2 rangées de tuiles 16/10 */
	.tiles { width: min(73.75rem, 100% - 32px, (min(100svh, 70rem) - var(--nav-h) - 18.75rem) / 2 * 1.6 * 3 + 2 * var(--s-3)); margin-top: clamp(20px, 3.5vh, 44px); }
}

/* ==========================================================================
   Grands écrans (27 pouces et plus)
   1. Au-delà de 1920 px, toute la page grandit légèrement (comme un zoom de 110 à 135 %).
   2. Les fonds restent en pleine largeur, le contenu reste dans une colonne centrée.
   3. Les sections « plein écran » ne dépassent pas 70rem de haut.
   4. Le hero donne un peu plus de place au texte.
   ========================================================================== */
@media (min-width: 1921px) {
	html { font-size: clamp(16px, .833vw, 22px); }
	.hero { grid-template-columns: 11fr 9fr; }
	.hero__content { width: min(100%, 46rem); }
}
.services__head, .services__grid { max-width: 62rem; }
.trust__intro > * { max-width: 32rem; }
.trust__stats { max-width: 40rem; }
.foot__inner { max-width: var(--content-max); margin-inline: auto; }
.nav { padding-inline: max(clamp(16px, 2.6vw, 44px), (100vw - var(--content-max) - 8rem) / 2); }
@media (min-width: 992px) and (min-height: 760px) {
	.services { height: min(100svh, 70rem); }
}
@media (min-width: 992px) and (min-height: 700px) {
	.learn { height: min(100svh, 70rem); }
}
@media (min-width: 992px) {
	.trust { height: min(100svh, 70rem); }
}
/* Le « y » de « Mboty » ne doit pas être coupé par le masque des lettres */
.foot__big .word { padding-bottom: .18em; margin-bottom: -.18em; }

/* Icône « confiance » (trait fin, animée) */
.trust__icon { width: clamp(96px, 8vw, 9rem); height: auto; color: var(--ink); overflow: visible; }

/* ==========================================================================
   Bouton « Réserver une séance » : noir, icône calendrier, aplat terracotta au survol
   ========================================================================== */
.book { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: .6em; background: var(--grey-900); color: var(--grey-100); }
.book .cal { width: 1.15em; height: 1.15em; flex: none; }
.book::before {
	content: ""; position: absolute; inset: 0; z-index: -1; transform: none;
	/* Au survol, un aplat terracotta remplit le bouton de gauche à droite */
	background: var(--terra);
	clip-path: inset(0 100% 0 0); transition: clip-path .7s var(--ease);
}
.book:hover::before, .book:focus-visible::before { clip-path: inset(0 0 0 0); }
.book:hover { color: #fff; }
.nav__cta.book { padding: .7em 1.2em; }

/* ==========================================================================
   Bouton discret « Jouer le film en entier » + lecteur
   ========================================================================== */
.film-btn {
	position: absolute; right: clamp(14px, 2vw, 32px); bottom: clamp(14px, 2vw, 32px); z-index: 3;
	display: inline-flex; align-items: center; gap: .7em; padding: .5em 1em .5em .5em;
	border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px;
	background: rgba(20, 20, 20, .28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	color: #fff; font-family: var(--f-title); font-weight: 300; font-size: .82rem; letter-spacing: .06em; cursor: pointer;
	transition: background-color .5s ease, border-color .5s ease;
}
.film-btn:hover { background: rgba(20, 20, 20, .55); border-color: #fff; }
.film-btn__play { display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: #fff; color: var(--grey-900); transition: transform .6s var(--ease); }
.film-btn__play svg { width: 45%; height: 45%; margin-left: 8%; }
.film-btn:hover .film-btn__play { transform: scale(1.12); }

.film-modal { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: clamp(16px, 4vw, 64px); }
.film-modal[hidden] { display: none; }
.film-modal__bg { position: absolute; inset: 0; background: rgba(12, 12, 12, .92); }
.film-modal__frame { position: relative; width: min(100%, 1100px); max-height: 100%; }
.film-modal__frame video { display: block; width: 100%; max-height: calc(100svh - 120px); background: #000; }
.film-modal__close { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); right: 20px; background: none; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; color: #fff; padding: .45em 1em; font-family: var(--f-title); letter-spacing: .08em; cursor: pointer; }
.film-modal__close:hover { border-color: #fff; }

/* ==========================================================================
   5. LE JOURNAL — un tiers photo portrait, deux tiers articles en cartes
   ========================================================================== */
.journal { display: grid; grid-template-columns: 1fr 2fr; background: var(--grey-100); padding-block: clamp(80px, 10vw, 9rem); }
.journal__aside { position: relative; display: flex; justify-content: center; align-items: flex-start; padding-inline: clamp(20px, 4vw, 5rem); }
.journal__portrait { margin: 0; width: min(100%, 17rem); aspect-ratio: 735 / 1128; overflow: hidden; position: sticky; top: calc(var(--nav-h) + 40px); }
.journal__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; transform-origin: 50% 50%; }
.journal__main { padding-inline: 0 clamp(20px, 5vw, 6rem); min-width: 0; max-width: 72rem; }
.journal__kicker { font-family: var(--f-title); font-weight: 300; font-size: .78rem; letter-spacing: .32em; text-transform: uppercase; color: var(--grey-700); margin-bottom: .9em; }
.journal__title { font-family: var(--f-display); font-size: clamp(2.4rem, 1.4rem + 3.4vw, 5.5rem); line-height: .98; }
.journal__intro { font-weight: 300; color: var(--grey-700); max-width: 34rem; margin-top: 1.2em; line-height: 1.65; }
.arr { display: inline-block; transition: transform .6s var(--ease); }

/* Cartes : blanches, image en haut, ombre douce, colonnes décalées */
.journal__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 1.8rem); align-items: start; margin-top: clamp(36px, 5vw, 4rem); }
.post:nth-child(2) { margin-top: clamp(28px, 4vw, 4rem); }
.post:nth-child(3) { margin-top: clamp(10px, 1.6vw, 1.5rem); }
.post__link { display: block; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 14px 34px -22px rgba(33, 33, 33, .35); transition: box-shadow .8s var(--ease), transform .8s var(--ease); }
.post__link:hover { box-shadow: 0 26px 50px -24px rgba(33, 33, 33, .45); transform: translateY(-4px); }
.post__media { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #e7e7e7; }
.post__media--tall { aspect-ratio: 4 / 5; }
.post__media img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }
.post__body { padding: clamp(18px, 1.8vw, 1.7rem) clamp(18px, 1.8vw, 1.7rem) clamp(16px, 1.5vw, 1.4rem); }
.post__meta { font-family: var(--f-title); font-weight: 300; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: #9e9e9e; }
.post__title { font-family: var(--f-display); font-size: clamp(1.15rem, .9rem + .6vw, 1.55rem); line-height: 1.15; margin-top: .6em; transition: color .5s ease; }
.post__link:hover .post__title { color: var(--mahogany); }
.post__excerpt { font-weight: 300; font-size: var(--t-card); color: var(--grey-700); line-height: 1.6; margin-top: .8em; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.post__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 1.4em; padding-top: 1em; border-top: 1px solid rgba(33, 33, 33, .1); font-family: var(--f-title); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; }
.post__link:hover .arr { transform: translateX(6px); }
.journal__more { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 4rem); }

@media (max-width: 1100px) {
	.journal__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.post:nth-child(3) { margin-top: 0; }
}
@media (max-width: 860px) {
	.journal { grid-template-columns: 1fr; row-gap: 48px; }
	.journal__aside { padding-inline: 20px; }
	.journal__portrait { position: relative; top: 0; width: min(60%, 15rem); }
	.journal__main { padding-inline: 20px; }
}
@media (max-width: 560px) {
	.journal__cards { grid-template-columns: 1fr; }
	.post:nth-child(n) { margin-top: 0; }
}

/* Journal : titre en deux tailles qui chevauche la photo, section en 100vh sur ordinateur */
.journal__title-small > span { font-family: var(--f-title); font-weight: 300; font-size: clamp(.95rem, .8rem + .5vw, 1.3rem); letter-spacing: .32em; text-transform: uppercase; line-height: 1.6; }
.journal__title-big > span { font-family: var(--f-display); font-size: clamp(2.8rem, 1.4rem + 4.4vw, 7rem); line-height: 1; }
.journal__title { position: relative; z-index: 2; }
@media (min-width: 861px) and (min-height: 700px) {
	.journal { height: min(100svh, 70rem); padding-block: 0; overflow: hidden; align-items: stretch; }
	.journal__aside { padding: var(--nav-h) 0 0; height: 100%; }
	.journal__portrait { position: relative; top: 0; width: min(62%, 24rem); height: 100%; aspect-ratio: auto; }
	.journal__portrait img { object-position: 66% 50%; }
	.journal__main { display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--nav-h) + 2vh) 3vh; position: relative; z-index: 2; }
	/* Le titre déborde sur la photo de gauche */
	.journal__title { margin-left: calc(-1 * clamp(5rem, 11vw, 13rem)); }
	.journal__intro { margin-top: 1.4vh; font-size: var(--t-card); }
	.journal__cards { margin-top: 3.5vh; gap: clamp(14px, 1.4vw, 1.5rem); }
	.post:nth-child(2) { margin-top: 3vh; }
	.post:nth-child(3) { margin-top: 1.2vh; }
	.post__media, .post__media--tall { aspect-ratio: auto; height: clamp(100px, 17vh, 15rem); }
	.post__media--tall { height: clamp(110px, 20vh, 17rem); }
	.post__body { padding: 1.6vh clamp(14px, 1.3vw, 1.4rem) 1.4vh; }
	.post__title { font-size: clamp(1rem, .55rem + 1.1vh, 1.45rem); margin-top: .45em; }
	.post__excerpt { -webkit-line-clamp: 2; margin-top: .55em; font-size: clamp(.82rem, .6rem + .45vh, 1rem); }
	.post__foot { margin-top: 1.1vh; padding-top: 1vh; }
	.journal__more { margin-top: 3vh; }
}

/* ==========================================================================
   3. TRANSMISSION — style éditorial sobre : fond grège, capitales fines,
   filets, numéros, photos en rectangles nets
   ========================================================================== */
.method { --greige: #ebe7e2; position: relative; background: var(--greige); color: #2b2b2b; padding: calc(var(--nav-h) + clamp(16px, 3vh, 40px)) clamp(20px, 5vw, 6rem) clamp(28px, 5vh, 56px); overflow: hidden; }
.method > * { width: 100%; max-width: var(--content-max); margin-inline: auto; }
.method__bar { display: flex; justify-content: space-between; gap: 16px; font-family: var(--f-title); font-weight: 400; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: #6d6863; padding-bottom: clamp(12px, 2vh, 20px); border-bottom: 1px solid rgba(43, 43, 43, .14); }
.method__grid { display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 4fr) 1px minmax(0, 3.8fr); column-gap: clamp(28px, 4vw, 5rem); align-items: center; margin-top: clamp(28px, 6vh, 72px); }
.method__kicker { font-family: var(--f-title); font-weight: 400; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: #6d6863; }
.method__title { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2rem, 1.1rem + 2.6vw, 4.2rem); line-height: 1.04; letter-spacing: .02em; margin-top: .55em; }
.method__text { font-weight: 300; font-size: var(--t-card); line-height: 1.75; color: #4a4643; max-width: 26rem; margin-top: 1.6em; }
.method__link { display: inline-flex; align-items: center; gap: 1em; margin-top: 2.2em; font-family: var(--f-title); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: #2b2b2b; text-decoration: none; }
.method__arrow { position: relative; display: block; width: 56px; height: 1px; background: currentColor; transform-origin: left; transition: width .7s var(--ease); }
.method__arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.method__link:hover .method__arrow { width: 84px; }

.method__media { position: relative; padding-bottom: clamp(24px, 6vh, 64px); }
.method__photo { margin: 0; overflow: hidden; background: #ddd8d2; }
.method__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.method__photo:first-child { width: 78%; aspect-ratio: 660 / 918; max-height: 60vh; }
.method__photo--small { position: absolute; right: 0; bottom: 0; width: 42%; aspect-ratio: 1; border: clamp(6px, .6vw, 10px) solid var(--greige); }

.method__rule { display: block; align-self: stretch; background: rgba(43, 43, 43, .2); transform-origin: top; }
.method__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(22px, 4.5vh, 48px); }
.method__list li { display: grid; grid-template-columns: auto 1fr; column-gap: 1.2em; align-items: baseline; }
.method__num { font-family: var(--f-display); font-size: 1.5rem; color: #8b847d; line-height: 1; }
.method__list h3 { font-family: var(--f-display); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-size: clamp(1.05rem, .85rem + .5vw, 1.4rem); }
.method__list p { font-weight: 300; font-size: var(--t-card); line-height: 1.65; color: #5a5652; margin-top: .45em; max-width: 22rem; }
.method__caption { font-family: var(--f-title); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: #6d6863; text-align: right; line-height: 1.8; margin-top: clamp(8px, 2vh, 24px); }

@media (min-width: 992px) and (min-height: 700px) {
	.method { height: min(100svh, 70rem); display: flex; flex-direction: column; }
	.method__grid { flex: 1; min-height: 0; }
}
@media (max-width: 991px) {
	.method__grid { grid-template-columns: 1fr 1fr; row-gap: 48px; }
	.method__intro { grid-column: 1 / -1; }
	.method__rule { display: none; }
	.method__photo:first-child { max-height: none; }
}
@media (max-width: 640px) {
	.method__bar span:nth-child(2) { display: none; }
	.method__grid { grid-template-columns: 1fr; }
	.method__media { width: min(100%, 22rem); }
	.method__caption { text-align: left; }
}

/* ==========================================================================
   Fonds en blanc pur sur toutes les sections (le hero garde sa texture)
   ========================================================================== */
body, .foot-fixed main { background: #fff; }
.services, .trust, .journal, .method { --veil: transparent; background: #fff; }
.services.textured, .trust.textured { background-image: none; }
.method { --greige: #fff; }
.nav.is-scrolled { background: rgba(255, 255, 255, .9); }
#loader, #menu { background: #fff; }

/* Section Transmission : mêmes polices de titres que le reste de la page */
.method__title { font-family: var(--f-display); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: clamp(2.2rem, 1.2rem + 3vw, 4.75rem); line-height: 1; }
.method__list h3 { font-family: var(--f-display); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: clamp(1.25rem, 1rem + .6vw, 1.75rem); }
.method__num { font-family: var(--f-title); font-weight: 300; font-size: 1.1rem; letter-spacing: .06em; }

/* Transmission : sous-titre sous le grand titre, formats de formation en haut à droite */
.method__bar { align-items: flex-end; }
.method__formats { margin: 0; text-align: right; font-family: var(--f-title); font-weight: 300; font-size: clamp(.95rem, .8rem + .45vw, 1.3rem); letter-spacing: .06em; text-transform: none; line-height: 1.35; color: #2b2b2b; }
.method__sub { font-family: var(--f-title); font-weight: 300; font-size: var(--t-h5); line-height: 1.2; margin-top: .6em; color: #2b2b2b; }
@media (max-width: 640px) { .method__bar { flex-direction: column; align-items: flex-start; gap: 10px; } .method__formats { text-align: left; } }
/* Section Confiance : retour du fond texturé gris de la maquette */
.trust.textured { --veil: var(--veil-trust); background: url("../img/texture.webp") center / cover; }

/* Transmission : formats sur une ligne, petites photos 16/9 sous chaque titre de la liste */
.method__formats { white-space: nowrap; }
.method__thumb { margin: .7em 0 0; width: min(100%, calc(clamp(64px, 10.5vh, 9rem) * 16 / 9)); aspect-ratio: 16 / 9; overflow: hidden; background: #e6e6e6; }
.method__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.method__list { gap: clamp(16px, 3vh, 36px); }
.method__list p { margin-top: .6em; }
@media (max-width: 860px) { .method__formats { white-space: normal; } }
/* Liste compacte : titre, puis photo 16/9 et texte côte à côte */
.method__list li > div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(12px, 1.2vw, 20px); align-items: start; }
.method__list li > div > h3 { grid-column: 1 / -1; }
.method__thumb { width: calc(clamp(56px, 9.5vh, 8.5rem) * 16 / 9); }
.method__list li > div > p { margin-top: .7em; font-size: clamp(.82rem, .6rem + .5vh, 1rem); line-height: 1.55; }
@media (max-width: 640px) {
	.method__list li > div { grid-template-columns: 1fr; }
	.method__thumb { width: 100%; }
}

/* Lamelles blanches sur le bol de la section services (elles se retirent vers le bas) */
.bowl-blinds { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; pointer-events: none; }
.bowl-blinds i { display: block; background: #fff; transform-origin: 50% 100%; }
.bowl-blinds i + i { background: #f5f5f5; }
.reduced .bowl-blinds, .no-js .bowl-blinds, .late:not(.js-ready) .bowl-blinds { display: none; }
.services__word, .rings { z-index: 3; }
/* Section « Comment je peux t'accompagner ? » : retour du fond texturé gris de la maquette */
.services.textured { --veil: var(--veil-services); background: url("../img/texture.webp") center / cover; }


/* ==========================================================================
   PAGE « SÉANCE MAGNÉTISME »
   Mêmes polices, boutons, filets et voiles que l'accueil.
   Sur ordinateur (≥ 992 px de large et ≥ 640 px de haut), chaque section
   tient dans l'écran (100vh, plafonné à 70rem comme l'accueil) : les tailles
   s'ajustent aussi à la hauteur de la fenêtre.
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.seance {
	--edge: max(clamp(20px, 5vw, 6rem), (100vw - var(--content-max)) / 2);
	--t-sec: clamp(2.3rem, 1.15rem + 2.7vw, 4.6rem);
	--hair: rgba(43, 43, 43, .14);
	--dot: rgba(43, 43, 43, .5);
	--screen: min(100svh, 70rem);
}

/* Petit surtitre (Oswald fin) posé en retrait au-dessus du grand titre, comme sur la maquette */
.kicker { display: block; font-family: var(--f-title); font-weight: 300; font-size: var(--t-h5); line-height: 1.15; padding-left: clamp(1.2rem, 2.4vw, 3rem); margin-bottom: .1em; }
.sec-title { display: flex; flex-direction: column; align-items: flex-start; }
.sec-title__main { display: block; font-family: var(--f-display); font-size: var(--t-sec); line-height: 1.02; }

/* Bouton fin à contour (téléphone) */
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn--line:hover { box-shadow: inset 0 0 0 1px var(--mahogany), 0 12px 26px -16px rgba(33, 33, 33, .55); }
.tel { gap: .6em; font-variant-numeric: tabular-nums; }
.tel__ico { width: 1.15em; height: 1.15em; flex: none; overflow: visible; }

/* --------------------------------------------------------------------------
   1. HERO : texte · photo ovale · « C'est quoi ? »
   -------------------------------------------------------------------------- */
.sh {
	--veil: var(--veil-hero);
	position: relative; overflow: hidden;
	display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
	column-gap: clamp(28px, 4.5vw, 6.5rem);
	min-height: var(--screen);
	padding: calc(var(--nav-h) + clamp(28px, 5vh, 64px)) var(--edge) clamp(36px, 6vh, 80px);
}
.sh > .sh__word { position: absolute; z-index: 0; left: 50%; top: clamp(90px, 15%, 11rem); transform: translateX(-50%); margin: 0; font-family: var(--f-display); font-size: clamp(5.5rem, 14vw, 19rem); line-height: .9; white-space: nowrap; color: rgba(33, 33, 33, .045); pointer-events: none; user-select: none; }
.sh__intro, .sh__media, .sh__what { position: relative; z-index: 1; }
.sh__intro { justify-self: start; max-width: 28rem; }
.sh__title { display: flex; flex-direction: column; align-items: flex-start; font-weight: 400; }
.sh__name { display: block; font-family: var(--f-display); font-size: clamp(2.4rem, 1.3rem + 2.6vw, 4.6rem); line-height: 1.02; }
.sh__text { font-weight: 300; font-size: var(--t-card); line-height: 1.65; max-width: 30rem; margin-top: 1.4em; }

.prices { display: flex; align-items: flex-start; gap: clamp(16px, 1.8vw, 30px); margin-top: clamp(20px, 3.6vh, 44px); }
.price { display: flex; flex-direction: column; }
.price__value { font-family: var(--f-display); font-size: clamp(2rem, 1.4rem + 1.4vw, 3.2rem); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price__label { font-family: var(--f-title); font-weight: 300; font-size: clamp(.82rem, .78rem + .15vw, .98rem); line-height: 1.3; margin-top: .5em; }
.prices__sep { flex: none; width: 1px; height: clamp(1.4rem, 1rem + .8vw, 2.1rem); margin-top: .55em; background: var(--ink); transform-origin: 50% 0; }
.sh__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 4.5vh, 56px); }

.sh__media { justify-self: center; }
.arch { position: relative; margin: 0; height: min(64svh, 41rem, 41vw); aspect-ratio: 385 / 606; border-radius: 50%; overflow: hidden; background: #e9e6e2; clip-path: inset(0 round 50%); }
.arch img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 60%; }
.arch__ring { position: absolute; inset: calc(-1 * clamp(8px, .75vw, 13px)); width: calc(100% + 2 * clamp(8px, .75vw, 13px)); height: calc(100% + 2 * clamp(8px, .75vw, 13px)); overflow: visible; pointer-events: none; }
.arch__ring ellipse { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.arch__ring .arch__half { fill: none; stroke: var(--ink); stroke-width: 1; }

.sh__what { justify-self: start; max-width: 25rem; }
.what__text { font-weight: 300; font-size: var(--t-card); line-height: 1.65; margin-top: 1.1em; }
.sh__what .sh__title + .what__text { margin-top: 1.4em; }
.what__accent { font-family: var(--f-title); font-weight: 300; font-size: var(--t-h6); line-height: 1.35; margin-top: 1em; padding-left: 1em; border-left: 1px solid var(--mahogany); }

/* --------------------------------------------------------------------------
   2. TECHNIQUES + BÉNÉFICES
   -------------------------------------------------------------------------- */
.care { position: relative; overflow: hidden; background: #f3f3f2; padding-block: var(--sec-md); }
.care__bg { position: absolute; inset: -12% 0; background: url("../img/seance-fenetre.webp") left top / cover no-repeat; will-change: transform; }
.care__bg::after { content: ""; position: absolute; inset: 0; background: rgba(243, 243, 242, .35); }
.care__grid {
	position: relative; width: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(16px, 2vw, 32px); padding-inline: var(--edge);
}
.tech { grid-column: 1 / 9; grid-row: 1; align-self: center; padding-bottom: clamp(32px, 6vh, 72px); }
.tech .cols { margin-top: clamp(20px, 3.5vh, 44px); }
.care__photo { position: relative; margin: 0; overflow: hidden; background: #e7e3df; }
.care__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.care__photo--tech { grid-column: 9 / 12; grid-row: 1; align-self: stretch; min-height: 0; }
.care__photo--tech img { position: absolute; inset: -6% 0; height: 112%; }
.care__photo--ben { grid-column: 1 / 6; grid-row: 3; align-self: start; margin-left: calc(-1 * var(--edge)); aspect-ratio: 621 / 222; margin-top: 4px; }
.ben { display: contents; }
.sec-title--ben { grid-column: 6 / 13; grid-row: 2; align-self: end; position: relative; z-index: 2; }
.cols--ben { grid-column: 6 / 13; grid-row: 3; margin-top: clamp(20px, 3.5vh, 44px); }

.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.col { position: relative; padding: 0 clamp(14px, 1.8vw, 32px); }
.col:first-child { padding-left: 0; }
.col:first-child .col__rule { display: none; }
.col__rule { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, var(--dot) 50%, transparent 0) 0 0 / 1px 4px repeat-y; transform-origin: 50% 0; }
.wave-ico { display: block; width: clamp(1.6rem, 1.3rem + .6vw, 2.1rem); height: auto; margin-bottom: clamp(10px, 1.4vh, 16px); overflow: visible; }
.col__title { font-family: var(--f-title); font-weight: 400; font-size: var(--t-h6); line-height: 1.15; }
.col__text { font-weight: 300; font-size: var(--t-card); line-height: 1.6; margin-top: .8em; color: #3d3d3d; }
.dots-list { list-style: none; margin: .9em 0 0; padding: 0; display: flex; flex-direction: column; gap: .3em; }
.dots-list li { position: relative; padding-left: 1.05em; font-weight: 300; font-size: var(--t-card); line-height: 1.45; color: #3d3d3d; }
.dots-list li::before { content: ""; position: absolute; left: .1em; top: .64em; width: 4px; height: 4px; border-radius: 50%; background: var(--ink); }

/* Deux lamelles blanches qui découvrent la photo (comme le bol de l'accueil) */
.blinds { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; pointer-events: none; }
.blinds i { display: block; background: #fff; transform-origin: 50% 100%; }
.blinds i + i { background: #f5f5f5; }
.reduced .blinds, .no-js .blinds, .late:not(.js-ready) .blinds { display: none; }

/* --------------------------------------------------------------------------
   3. LE DÉROULÉ : titre au centre, étapes 01 à 04 collées aux bords
   -------------------------------------------------------------------------- */
.flow { --veil: rgba(250, 250, 250, .8); position: relative; overflow: hidden; padding-block: var(--sec-md); background-position: center bottom; }
.flow__head { padding-inline: var(--edge); margin-bottom: clamp(40px, 6vw, 80px); text-align: center; }
.flow__head .sec-title { align-items: center; }
.flow__head .kicker { padding-left: 0; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 64px); row-gap: clamp(40px, 6vw, 72px); }
.step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(20px, 2.8vw, 52px); align-items: center; }
/* Colonne de droite : la bande photo est contre le bord droit */
.step:nth-child(even) { grid-template-columns: minmax(0, 1fr) auto; }
.step:nth-child(even) .step__strip { order: 2; }
.step:nth-child(even) .step__body { justify-self: end; }
.step__strip { position: relative; width: clamp(72px, 7vw, 140px); height: clamp(260px, 30vw, 440px); }
.step__img { position: absolute; inset: 0; margin: 0; overflow: hidden; background: #e4e4e4; }
.step__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(.82) brightness(1.16); opacity: .9; transition: filter 1.2s var(--ease), opacity 1.2s var(--ease); }
.step--1 .step__img img { object-position: 50% 30%; }
.step--2 .step__img img { object-position: 46% 55%; }
.step--3 .step__img img { object-position: 52% 50%; }
.step--4 .step__img img { object-position: 50% 85%; }
.step:hover .step__img img { filter: grayscale(0) contrast(1) brightness(1); opacity: 1; }
/* Grand numéro vertical : il déborde vers l'intérieur de la page, jamais vers le bord */
.step__num { position: absolute; inset: 0; z-index: 2; display: flex; justify-content: flex-start; align-items: flex-start; padding-top: 12%; pointer-events: none; }
.step:nth-child(even) .step__num { justify-content: flex-end; }
.step__num > span { display: block; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--f-title); font-weight: 500; font-size: clamp(5rem, 10vw, 13rem); line-height: .8; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.step__body { max-width: 21rem; padding-right: clamp(16px, 2vw, 24px); }
.step:nth-child(even) .step__body { padding: 0 0 0 clamp(16px, 2vw, 24px); }
.step__title { font-family: var(--f-title); font-weight: 500; font-size: clamp(1.15rem, .95rem + .6vw, 1.6rem); line-height: 1.15; }
.step__idx { display: inline-block; min-width: 1.8em; font-weight: 500; font-size: .78em; letter-spacing: .04em; }
.step__text { font-weight: 300; font-size: var(--t-card); line-height: 1.6; margin-top: .9em; color: #3d3d3d; }

/* --------------------------------------------------------------------------
   4. AVIS CLIENTS : défilement horizontal, barre de défilement ultra fine
   -------------------------------------------------------------------------- */
.reviews { background: var(--grey-100); padding-block: var(--sec-md); overflow: hidden; }
.reviews__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-inline: var(--edge); margin-bottom: clamp(24px, 4vh, 52px); }
.rv-nav { display: flex; align-items: center; gap: 10px; flex: none; }
.rv-count { display: flex; align-items: center; gap: .8em; margin: 0 14px 0 0; font-family: var(--f-title); font-weight: 300; font-size: .85rem; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.rv-count i { width: 28px; height: 1px; background: currentColor; opacity: .35; }
.rv-count__cur { display: inline-block; min-width: 1.4em; }
.rv-arrow { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 1px solid rgba(43, 43, 43, .28); background: transparent; color: var(--ink); cursor: pointer; transition: background-color .5s ease, border-color .5s ease, color .5s ease, opacity .4s ease; }
.rv-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s var(--ease); }
.rv-arrow:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.rv-arrow--prev:hover svg { transform: translateX(-3px); }
.rv-arrow--next:hover svg { transform: translateX(3px); }
.rv-arrow[disabled] { opacity: .28; pointer-events: none; }

.rv-track {
	display: flex; align-items: stretch; gap: clamp(14px, 1.4vw, 24px);
	overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
	padding: 6px var(--edge) clamp(26px, 3.5vh, 40px); scroll-padding-inline: var(--edge);
	scrollbar-width: none; -ms-overflow-style: none; cursor: grab; outline: none;
}
.rv-track::-webkit-scrollbar { display: none; }
.rv-track:focus-visible { outline: 1px solid var(--mahogany); outline-offset: -1px; }
.rv-track.is-drag { cursor: grabbing; user-select: none; }
.rv-track.is-drag .review { pointer-events: none; }
@media (hover: none) { .rv-track { scroll-snap-type: x mandatory; } .review { scroll-snap-align: start; } }

.review { flex: 0 0 clamp(17rem, 25vw, 26rem); height: clamp(25rem, 58vh, 34rem); display: flex; flex-direction: column; margin: 0; position: relative; background: #fff; padding: clamp(22px, 2.6vw, 42px) clamp(22px, 2.2vw, 38px); box-shadow: 0 14px 34px -22px rgba(33, 33, 33, .35); transition: box-shadow .8s var(--ease), transform .8s var(--ease); }
.review:hover { box-shadow: 0 26px 50px -24px rgba(33, 33, 33, .45); transform: translateY(-4px); }
.review__mark { display: block; height: .42em; font-family: var(--f-display); font-size: clamp(3.4rem, 2.6rem + 1.8vw, 5.2rem); line-height: .9; color: var(--terra); transition: transform .8s var(--ease); }
.review:hover .review__mark { transform: translateY(-6px) rotate(-6deg); }
.review__text { flex: 1 1 auto; min-height: 0; margin: 1em 0 0; overflow: hidden; }
.review__text p { font-weight: 300; font-size: clamp(.86rem, .8rem + .2vw, 1rem); line-height: 1.6; color: #3d3d3d; }
/* Avis long : fondu en bas, puis lecture complète dans la carte (même taille, défilement ultra fin) */
.review.is-clamped .review__text { -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent); mask-image: linear-gradient(to bottom, #000 72%, transparent); }
.review.is-open .review__text { overflow-y: auto; overscroll-behavior: contain; -webkit-mask-image: none; mask-image: none; padding-right: 10px; scrollbar-width: thin; scrollbar-color: rgba(43, 43, 43, .35) transparent; }
.review.is-open .review__text::-webkit-scrollbar { width: 2px; }
.review.is-open .review__text::-webkit-scrollbar-thumb { background: rgba(43, 43, 43, .35); border-radius: 2px; }
.review__more { display: none; align-self: flex-start; align-items: center; gap: .7em; margin-top: .9em; padding: 0 0 3px; border: 0; border-bottom: 1px solid currentColor; background: none; cursor: pointer; font-family: var(--f-title); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); transition: color .4s ease; }
.review.is-clamped .review__more { display: inline-flex; }
.review__more i { position: relative; width: 9px; height: 9px; }
.review__more i::before, .review__more i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform .6s var(--ease); }
.review__more i::after { transform: rotate(90deg); }
.review.is-open .review__more i::after { transform: rotate(0deg); }
.review__more:hover { color: var(--mahogany); }
.review__name { display: flex; align-items: center; gap: .9em; margin-top: auto; padding-top: 1.1em; font-family: var(--f-title); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.review__name::before { content: ""; width: 28px; height: 1px; background: var(--terra); }

.reviews__foot { display: flex; align-items: center; gap: clamp(20px, 3vw, 56px); padding-inline: var(--edge); }
.rv-bar { position: relative; flex: 1; height: 1px; background: rgba(43, 43, 43, .16); cursor: pointer; touch-action: none; }
.rv-bar::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; }
.rv-bar__thumb { position: absolute; left: 0; top: -1px; height: 3px; width: 20%; border-radius: 3px; background: var(--ink); cursor: grab; transition: height .3s ease, top .3s ease; }
.rv-bar:hover .rv-bar__thumb, .rv-bar.is-drag .rv-bar__thumb { top: -2px; height: 5px; }
.reviews__foot .btn { flex: none; }

/* --------------------------------------------------------------------------
   5. FAQ (compacte)
   -------------------------------------------------------------------------- */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(32px, 6vw, 8rem); align-items: start; padding: var(--sec-md) var(--edge); background: #fff; }
.faq__aside { position: sticky; top: calc(var(--nav-h) + 40px); }
.faq__intro { font-weight: 300; font-size: var(--t-card); line-height: 1.6; color: var(--grey-700); max-width: 22rem; margin-top: 1.1em; }
.faq__link, .book-cta__link { display: inline-flex; align-items: center; gap: 1em; font-family: var(--f-title); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.faq__link { margin-top: 1.6em; }
.faq__arrow { position: relative; display: block; width: 56px; height: 1px; background: currentColor; transform-origin: left; transition: width .7s var(--ease); }
.faq__arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.faq__link:hover .faq__arrow { width: 84px; }
.faq__list { border-top: 1px solid var(--hair); }
.qa { border-bottom: 1px solid var(--hair); }
.qa summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: clamp(12px, 1.6vh, 18px) 0; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa__q { font-family: var(--f-title); font-weight: 300; font-size: clamp(1.02rem, .92rem + .35vw, 1.3rem); line-height: 1.25; transition: color .4s ease, transform .7s var(--ease); }
.qa summary:hover .qa__q { color: var(--mahogany); transform: translateX(8px); }
.qa__plus { position: relative; flex: none; width: 15px; height: 15px; }
.qa__plus::before, .qa__plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink); transition: transform .7s var(--ease); }
.qa__plus::after { transform: rotate(90deg); }
.qa[open] .qa__plus::after { transform: rotate(0deg); }
.qa[open] .qa__plus::before { transform: rotate(180deg); }
.qa__a { overflow: hidden; }
.qa__a p { padding: 0 3rem clamp(14px, 1.8vh, 20px) 0; max-width: 46rem; font-weight: 300; font-size: var(--t-card); line-height: 1.6; color: #4a4643; }

/* --------------------------------------------------------------------------
   6. PRENDRE RENDEZ-VOUS
   -------------------------------------------------------------------------- */
.book-cta { --veil: rgba(245, 245, 245, .84); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: clamp(110px, 15vw, 15rem) var(--edge); }
.book-cta > .book-cta__rings { position: absolute; z-index: 1; }
.book-cta__rings span { width: 46vmin; height: 46vmin; margin: -23vmin 0 0 -23vmin; }
.book-cta__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.book-cta__kicker { padding-left: 0; }
.book-cta__title { font-family: var(--f-display); font-size: clamp(2.4rem, 1.2rem + 3.4vw, 5.6rem); line-height: 1.02; max-width: 15ch; margin-top: .25em; }
.book-cta__btn { margin-top: clamp(28px, 4vw, 52px); }
.book-cta__ask { font-weight: 300; font-size: var(--t-card); margin-top: 1.6em; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3em .8em; }
.book-cta__link { padding-bottom: 3px; border-bottom: 1px solid currentColor; }
.book-cta__link:hover { color: var(--mahogany); }

/* --------------------------------------------------------------------------
   Ordinateur : la page se lit écran par écran (chaque section = 100vh)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
	/* Déroulé : titre au centre, 01 · 02 en haut, 03 · 04 en bas, bandes contre les bords */
}
@media (min-width: 992px) and (max-width: 1279px) {
	.tech { grid-column: 1 / 10; }
	.care__photo--tech { grid-column: 10 / 13; }
	.care__photo--ben { grid-column: 1 / 5; }
	.sec-title--ben, .cols--ben { grid-column: 5 / 13; }
}
@media (min-width: 992px) and (min-height: 640px) {
	.seance { --t-sec: min(clamp(2.3rem, 1.15rem + 2.7vw, 4.6rem), 7vh); }
	.seance .kicker { font-size: min(var(--t-h5), 2.7vh); }
	.sh, .care, .flow, .reviews, .faq, .book-cta { min-height: var(--screen); }
	.sh { padding-block: calc(var(--nav-h) + 4vh) 5vh; }
	.sh__name { font-size: min(clamp(2.4rem, 1.3rem + 2.6vw, 4.6rem), 8vh); }
	.sh__text, .what__text { font-size: min(var(--t-card), 1.95vh); }
	.what__accent { font-size: min(var(--t-h6), 2.6vh); }

	.care { display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--nav-h) + 3vh) 4vh; }
	.tech { padding-bottom: 4.5vh; }
	.col__title { font-size: min(var(--t-h6), 2.7vh); }
	.col__text, .dots-list li { font-size: min(var(--t-card), 1.85vh); }
	.wave-ico { width: min(2.1rem, 3.4vh); margin-bottom: 1.2vh; }

	/* Déroulé, mise en page « éditoriale » de la référence : bandes photo accrochées
	   au haut (01, 03) et au bas (02, 04) de la section, grands chiffres verticaux,
	   texte à côté, titre sur une ligne au milieu de la page. */
	.flow { height: var(--screen); padding: 0; }
	.flow__head { position: absolute; z-index: 3; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin: 0; padding: 0 var(--edge); display: flex; justify-content: center; pointer-events: none; }
	.flow__head .sec-title { flex-direction: row; align-items: baseline; gap: 1.1vw; }
	.flow__head .kicker { padding: 0; margin: 0; font-size: min(var(--t-h5), 2.6vh); }
	.flow__head .sec-title__main { font-size: min(4vw, 6.2vh); white-space: nowrap; }
	.steps { position: absolute; inset: 0; display: block; }
	.step { position: absolute; inset: 0; display: block; pointer-events: none; }
	.step__strip, .step__body { position: absolute; pointer-events: auto; }
	.step__strip { width: 7vw; height: 41%; }
	.step__body { width: 16vw; max-width: none; padding: 0; }
	.step:nth-child(even) .step__body { padding: 0; }
	.step--1 .step__strip { left: 8vw; top: 0; }
	.step--1 .step__body { left: 22vw; top: 19%; }
	.step--2 .step__body { left: 8vw; top: 61%; }
	.step--2 .step__strip { left: 29vw; bottom: 0; }
	.step--3 .step__strip { left: 64vw; top: 0; }
	.step--3 .step__body { left: 78vw; top: 19%; }
	.step--4 .step__body { left: 64vw; top: 61%; }
	.step--4 .step__strip { left: 85vw; bottom: 0; }
	.step .step__num { justify-content: center; padding: 0; }
	.step--1 .step__num, .step--3 .step__num { align-items: flex-end; padding-bottom: 9%; }
	.step--2 .step__num, .step--4 .step__num { align-items: flex-start; padding-top: 9%; }
	.step__num > span { font-size: min(10.5vw, 19vh); }
	.step__title { font-size: min(clamp(1.15rem, .95rem + .6vw, 1.6rem), 3vh); }
	.step__text { font-size: min(var(--t-card), 1.85vh); margin-top: .7em; }

	.reviews { display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--nav-h) + 2vh) 4vh; }
	.review { height: min(55vh, 34rem); padding: 3vh clamp(22px, 2.2vw, 36px) 2.6vh; }
	.review__text p { font-size: clamp(.86rem, 1.8vh, 1rem); }
	.review__mark { font-size: min(clamp(3.4rem, 2.6rem + 1.8vw, 5.2rem), 7.5vh); }
	.reviews__head { margin-bottom: 3vh; }

	.faq { align-items: center; align-content: center; padding-block: calc(var(--nav-h) + 2vh) 4vh; }
	.faq__aside { position: relative; top: 0; }

	.book-cta { padding-block: calc(var(--nav-h) + 2vh) 4vh; }
}

/* --------------------------------------------------------------------------
   Tablette et mobile : les sections reprennent leur hauteur naturelle
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
	.sh { grid-template-columns: minmax(0, 1fr) auto; row-gap: clamp(48px, 7vw, 80px); }
	.sh__what { grid-column: 1 / -1; max-width: 40rem; }
	.arch { height: min(62svh, 34rem); }
	.tech { grid-column: 1 / -1; padding-bottom: clamp(40px, 6vw, 64px); }
	.care__photo--tech { grid-column: 1 / 6; grid-row: 2; aspect-ratio: 330 / 470; }
	.care__photo--ben { grid-column: 6 / 13; grid-row: 2; align-self: end; margin: 0 calc(-1 * var(--edge)) 0 0; }
	.sec-title--ben { grid-column: 1 / -1; grid-row: 3; padding-top: clamp(48px, 7vw, 80px); }
	.cols--ben { grid-column: 1 / -1; grid-row: 4; }
	.faq { grid-template-columns: 1fr; row-gap: clamp(28px, 5vw, 44px); }
	.faq__aside { position: relative; top: 0; }
}
@media (max-width: 767px) {
	.sh { grid-template-columns: 1fr; padding-top: calc(var(--nav-h) + 56px); }
	.sh > .sh__word { top: calc(var(--nav-h) + 8px); font-size: 19vw; }
	.sh__intro { max-width: none; }
	.arch { height: auto; width: min(76vw, 21rem); }
	.cols { grid-template-columns: 1fr; }
	.col { padding: clamp(22px, 6vw, 30px) 0 0; margin-top: clamp(22px, 6vw, 30px); }
	.col:first-child { padding-top: 0; margin-top: 0; }
	.col__rule { top: 0; bottom: auto; right: 0; width: auto; height: 1px; background: linear-gradient(to right, var(--dot) 50%, transparent 0) 0 0 / 4px 1px repeat-x; transform-origin: 0 50%; }
	.care__photo--tech { grid-column: 1 / 7; }
	.care__photo--ben { grid-column: 7 / 13; aspect-ratio: auto; height: 100%; }
	.care__photo--ben img { object-position: 30% 50%; }
	/* Déroulé : une colonne, bandes contre le bord gauche */
	.steps { grid-template-columns: 1fr; row-gap: 48px; }
	.step, .step:nth-child(even) { grid-template-columns: auto minmax(0, 1fr); }
	.step:nth-child(even) .step__strip { order: 0; }
	.step:nth-child(even) .step__body { justify-self: start; padding: 0 var(--edge) 0 0; }
	.step__body { padding-right: var(--edge); }
	.step__strip { width: 72px; height: 260px; }
	.step:nth-child(even) .step__num { justify-content: flex-start; }
	.step__num > span { font-size: 5.6rem; }
	.reviews__head { flex-direction: column; align-items: flex-start; }
	.reviews__foot { flex-direction: column; align-items: stretch; gap: 28px; }
	.reviews__foot .btn { justify-content: space-between; }
	.qa__a p { padding-right: 0; }
}
@media (max-width: 478px) {
	.sh__ctas { flex-direction: column; width: 100%; }
	.sh__ctas .btn { justify-content: center; }
	.prices { gap: 14px; }
	.care__photo--tech, .care__photo--ben { grid-column: 1 / -1; grid-row: auto; margin: 0; }
	.care__photo--tech { aspect-ratio: 4 / 5; }
	.care__photo--ben { aspect-ratio: 621 / 222; height: auto; margin-top: 16px; margin-left: calc(-1 * var(--edge)); margin-right: calc(-1 * var(--edge)); }
	.sec-title--ben { grid-row: auto; }
	.cols--ben { grid-row: auto; }
	.rv-count { display: none; }
}

/* --------------------------------------------------------------------------
   Transition entre les pages : à l'arrivée, le contenu attend son entrée
   -------------------------------------------------------------------------- */
.pt-in main, .pt-in .nav, .pt-in .foot { opacity: 0; }

/* ==========================================================================
   PAGE « MASSAGE CHI NEI TSANG » — même gabarit que la page Séance magnétisme,
   plus deux sections : « Mon approche » et « Le parcours de trois séances ».
   ========================================================================== */
.sh > .sh__word--long { font-size: clamp(4.5rem, 13.5vw, 19rem); }
.sh__lead { font-family: var(--f-title); font-weight: 300; font-size: var(--t-h6); line-height: 1.3; margin-top: 1em; }
.sh__lead + .sh__text { margin-top: .9em; }
.sh__name--sm { font-size: clamp(2rem, 1.1rem + 1.9vw, 3.6rem); line-height: 1.05; }

/* Pour qui : une seule rangée de colonnes, la photo occupe toute la hauteur */
.care--single .care__photo--tech { grid-row: 1; min-height: 26rem; }
.care--single .tech { padding-bottom: 0; }
.care__note { margin-top: clamp(24px, 4vh, 48px); max-width: 40rem; padding-left: 1em; border-left: 1px solid var(--mahogany); font-weight: 300; font-size: .86rem; line-height: 1.6; color: var(--grey-700); }

/* Mon approche */
.approach { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(32px, 6vw, 8rem); align-items: center; padding: var(--sec-md) var(--edge); background: #fff; }
.approach__photo { position: relative; margin: 0; overflow: hidden; aspect-ratio: 778 / 1080; max-height: 78vh; width: 100%; background: #e7e3df; justify-self: center; }
.approach__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; will-change: transform; }
.approach__body { max-width: 38rem; }
.approach__text { font-weight: 300; font-size: var(--t-body); line-height: 1.7; color: #3d3d3d; margin-top: 1.1em; }
.sec-title + .approach__text { margin-top: 1.6em; }
.approach__sign { display: flex; align-items: center; gap: .9em; margin-top: 1.8em; font-family: var(--f-title); font-weight: 300; font-size: var(--t-h5); line-height: 1.2; }
.approach__sign::before { content: ""; flex: none; width: 40px; height: 1px; background: var(--terra); }

/* Le parcours de trois séances */
.path { --veil: rgba(245, 245, 245, .86); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 6vw, 8rem); align-items: center; padding: var(--sec-md) var(--edge); }
.path__dots { --line: 1; position: relative; list-style: none; display: flex; justify-content: space-between; width: min(100%, 24rem); margin: clamp(32px, 6vh, 64px) 0 0; padding: 0; }
.path__dots::before { content: ""; position: absolute; left: 32px; right: 32px; top: 50%; height: 1px; background: linear-gradient(to right, var(--dot, rgba(43,43,43,.5)) 50%, transparent 0) 0 0 / 4px 1px repeat-x; transform: scaleX(var(--line)); transform-origin: 0 50%; }
.path__dots li { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--ink); background: #f7f7f7; font-family: var(--f-title); font-weight: 400; font-size: .95rem; letter-spacing: .06em; }
.path__dots li:last-child { background: var(--ink); color: #fff; }
.path__text { font-weight: 300; font-size: var(--t-body); line-height: 1.7; color: #3d3d3d; max-width: 34rem; }
.path__text + .path__text { margin-top: .9em; }
.path__price { display: flex; flex-direction: column; margin-top: clamp(24px, 4vh, 44px); }
.path__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 3.5vh, 36px); }
.book-cta__sub { font-weight: 300; font-size: var(--t-body); line-height: 1.6; max-width: 34rem; margin-top: 1.1em; }

@media (min-width: 992px) and (min-height: 640px) {
	.sh__name--sm { font-size: min(clamp(2rem, 1.1rem + 1.9vw, 3.6rem), 6vh); }
	.sh__lead { font-size: min(var(--t-h6), 2.6vh); }
	.care--single .care__photo--tech { min-height: 0; height: min(64vh, 40rem); align-self: center; }
	.care__note { font-size: min(.86rem, 1.6vh); }
	.approach, .path { min-height: var(--screen); padding-block: calc(var(--nav-h) + 3vh) 4vh; }
	.approach__photo { max-height: calc(var(--screen) - var(--nav-h) - 9vh); width: auto; height: calc(var(--screen) - var(--nav-h) - 9vh); }
	.approach__text, .path__text { font-size: min(var(--t-body), 2vh); }
	.approach__sign { font-size: min(var(--t-h5), 3vh); }
	/* Déroulé : textes un peu plus longs sur cette page */
	.seance--cnt .step__body { width: 17.5vw; }
	.seance--cnt .step--1 .step__body, .seance--cnt .step--3 .step__body { top: 15%; }
	.seance--cnt .step__text { font-size: min(var(--t-card), 1.75vh); }
	.seance--cnt .step--3 .step__body { left: 77vw; }
}
@media (max-width: 991px) {
	.care--single .care__photo--tech { grid-column: 1 / -1; grid-row: 2; aspect-ratio: 16 / 10; min-height: 0; margin-top: 40px; }
	.approach, .path { grid-template-columns: 1fr; row-gap: 40px; }
	.approach__photo { width: min(100%, 26rem); }
}
@media (max-width: 767px) {
	.sh > .sh__word--long { font-size: 13vw; }
	.path__dots li { width: 52px; height: 52px; }
	.path__ctas { flex-direction: column; }
	.path__ctas .btn { justify-content: center; }
}


/* ==========================================================================
   PAGES « FORMATIONS » — porte d'entrée, formation en ligne, formation à
   Nantes (+ privée). Même gabarit que les pages Séance : polices, filets,
   voiles, FAQ et appel final. Les fonds de l'accueil reviennent par endroits :
   texture grise, lumière de fenêtre, grège de la section Transmission.
   ========================================================================== */
.formation { --greige: #ebe7e2; --dark: #1f1d1b; }
.f-sec { position: relative; padding: var(--sec-md) var(--edge); }
.f-sec--white { background: #fff; }
.f-sec--greige { background: var(--greige); }
.f-head { margin-bottom: clamp(28px, 5vh, 60px); }
.f-head--center { display: flex; justify-content: center; text-align: center; }
.f-head--center .sec-title { align-items: center; }
.f-head--center .kicker { padding-left: 0; }
.f-sub { font-weight: 300; font-size: var(--t-card); line-height: 1.65; color: #3d3d3d; max-width: 30rem; margin-top: 1.1em; }
.f-note { font-weight: 300; font-size: .82rem; line-height: 1.5; color: var(--grey-700); margin-top: 1.1em; }
.f-note b, .f-note strong { font-weight: 500; color: var(--ink); }
.f-note a, .f-link { color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: color .4s ease; }
.f-note a:hover, .f-link:hover { color: var(--mahogany); }
.btn--light { background: var(--grey-100); color: var(--ink); }
.btn--light:hover { background: #fff; }
.btn--full { width: 100%; justify-content: center; }

/* Prix : valeur en Abril, mention en dessous */
.f-price { display: flex; flex-direction: column; }
.f-price .price__value { font-size: clamp(2.2rem, 1.5rem + 1.6vw, 3.4rem); }
.f-price small { font-family: var(--f-title); font-weight: 300; font-size: clamp(.8rem, .76rem + .12vw, .92rem); letter-spacing: .02em; margin-top: .45em; opacity: .85; }
.f-price del { font-family: var(--f-text); font-size: .38em; font-weight: 300; margin-left: .35em; opacity: .55; vertical-align: middle; }

/* --------------------------------------------------------------------------
   HERO commun (porte d'entrée + en ligne) : grand mot en filigrane
   -------------------------------------------------------------------------- */
.fh { --veil: var(--veil-hero); position: relative; overflow: hidden; padding: calc(var(--nav-h) + clamp(36px, 7vh, 96px)) var(--edge) clamp(48px, 8vh, 100px); }
.fh__word { position: absolute; z-index: 0; left: 50%; top: clamp(80px, 13%, 10rem); transform: translateX(-50%); margin: 0; font-family: var(--f-display); font-size: clamp(5.5rem, 15vw, 20rem); line-height: .9; white-space: nowrap; color: rgba(33, 33, 33, .045); pointer-events: none; user-select: none; }
.fh__title { font-family: var(--f-display); font-size: clamp(2.4rem, 1.3rem + 3vw, 5rem); line-height: 1.02; }
.fh__text { font-weight: 300; font-size: var(--t-card); line-height: 1.65; max-width: 33rem; margin-top: 1.3em; }
.fh__proof { display: flex; flex-wrap: wrap; justify-content: center; gap: .3em 1.6em; margin-top: 1.6em; font-family: var(--f-title); font-weight: 300; font-size: .88rem; letter-spacing: .04em; color: var(--grey-700); }
.fh__proof span { display: inline-flex; align-items: center; gap: .6em; }
.fh__proof span + span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--terra); margin-left: -1em; }

/* Porte d'entrée : titre centré, les trois cartes dans le même écran */
.fh--hub { display: flex; flex-direction: column; align-items: center; text-align: center; }
.fh--hub > *:not(.fh__word) { position: relative; z-index: 1; }
.fh--hub .kicker { padding-left: 0; }
.fh--hub .fh__title { max-width: 16ch; }
.fh--hub .fh__text { margin-inline: auto; }

.offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 28px); width: 100%; max-width: 78rem; margin-top: clamp(36px, 7vh, 80px); text-align: left; }
.offer { position: relative; display: flex; flex-direction: column; background: #fff; padding: clamp(24px, 2.4vw, 40px) clamp(22px, 2.2vw, 38px); box-shadow: 0 14px 34px -22px rgba(33, 33, 33, .35); transition: box-shadow .8s var(--ease), transform .8s var(--ease); }
.offer:hover { box-shadow: 0 26px 50px -24px rgba(33, 33, 33, .45); transform: translateY(-6px); }
.offer--dark { background: var(--dark); color: var(--grey-100); }
.offer__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 1.9rem; }
.offer__tag { font-family: var(--f-title); font-weight: 300; font-size: clamp(.86rem, .8rem + .2vw, 1rem); letter-spacing: .02em; }
.offer__badge { font-family: var(--f-title); font-weight: 400; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; padding: .45em .8em; border: 1px solid currentColor; white-space: nowrap; }
.offer__title { font-family: var(--f-display); font-size: clamp(1.8rem, 1.3rem + 1.2vw, 2.7rem); line-height: 1.05; margin-top: .45em; }
.offer__text { font-weight: 300; font-size: var(--t-card); line-height: 1.6; margin-top: .9em; }
.offer__fit { font-weight: 300; font-size: .84rem; line-height: 1.55; margin-top: 1em; opacity: .85; }
.offer__fit b { font-weight: 600; }
.offer__rule { display: block; height: 1px; margin: auto 0 0; padding-top: clamp(20px, 3vh, 32px); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; opacity: .16; transform-origin: 0 50%; }
.offer .f-price { margin-top: clamp(16px, 2.6vh, 26px); }
.offer .btn { margin-top: clamp(18px, 3vh, 30px); }
.offer--dark .btn--line { color: var(--grey-100); box-shadow: inset 0 0 0 1px var(--grey-100); }
.fh__ask { position: relative; z-index: 1; margin-top: clamp(28px, 5vh, 52px); font-weight: 300; font-size: var(--t-card); }
.fh__ask .tel-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* En ligne : texte à gauche, vidéo à droite */
.fh--split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; column-gap: clamp(32px, 5vw, 7rem); }
.fh--split > *:not(.fh__word) { position: relative; z-index: 1; }
.fh__intro { max-width: 34rem; }
.fh__buy { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 2vw, 32px); margin-top: clamp(24px, 4.5vh, 48px); }

/* Cadre vidéo (présentation / témoignages) : affiche + bouton lecture */
.fvideo { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #2a2623; color: #fff; }
.fvideo img, .fvideo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fvideo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 18, 16, .55), rgba(20, 18, 16, .08) 55%); pointer-events: none; transition: opacity .8s var(--ease); }
.fvideo.is-playing::after, .fvideo.is-playing .fvideo__cap { opacity: 0; pointer-events: none; }
/* GSAP pose une opacité en ligne sur le bouton : on force le masquage pendant la lecture */
.fvideo.is-playing .fvideo__play { opacity: 0 !important; visibility: hidden !important; pointer-events: none; }
.fvideo__play { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; place-items: center; width: clamp(64px, 6vw, 92px); height: clamp(64px, 6vw, 92px); margin: calc(clamp(64px, 6vw, 92px) / -2) 0 0 calc(clamp(64px, 6vw, 92px) / -2); padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; backdrop-filter: blur(3px); transition: background-color .5s ease, color .5s ease, transform .8s var(--ease), opacity .5s ease; }
.fvideo__play svg { width: 30%; height: 30%; margin-left: 8%; fill: currentColor; }
.fvideo__play:hover { background: #fff; color: var(--ink); transform: scale(1.06); }
.fvideo__cap { position: absolute; z-index: 2; left: clamp(16px, 2vw, 28px); bottom: clamp(14px, 1.8vw, 24px); font-family: var(--f-title); font-weight: 300; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; transition: opacity .5s ease; }

/* --------------------------------------------------------------------------
   Chiffres clés (bande blanche entre deux filets)
   -------------------------------------------------------------------------- */
.fstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: #fff; border-block: 1px solid var(--hair); padding: clamp(28px, 4.5vh, 52px) var(--edge); }
.fstat { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 12px; position: relative; }
.fstat + .fstat::before { content: ""; position: absolute; left: 0; top: 15%; bottom: 15%; width: 1px; background: linear-gradient(to bottom, var(--dot) 50%, transparent 0) 0 0 / 1px 4px repeat-y; }
.fstat__num { font-family: var(--f-display); font-size: clamp(2rem, 1.4rem + 1.6vw, 3.4rem); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fstat__label { font-family: var(--f-title); font-weight: 300; font-size: clamp(.8rem, .76rem + .15vw, .95rem); line-height: 1.3; margin-top: .6em; color: #3d3d3d; }

/* --------------------------------------------------------------------------
   Témoignages écrits + emplacement du module d'avis Google
   -------------------------------------------------------------------------- */
.quotes { --veil: rgba(245, 245, 245, .82); }
.quotes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 28px); }
.quote { display: flex; flex-direction: column; margin: 0; background: #fff; padding: clamp(24px, 2.6vw, 42px) clamp(22px, 2.2vw, 38px); box-shadow: 0 14px 34px -22px rgba(33, 33, 33, .35); transition: box-shadow .8s var(--ease), transform .8s var(--ease); }
.quote:hover { box-shadow: 0 26px 50px -24px rgba(33, 33, 33, .45); transform: translateY(-4px); }
.quote .review__mark { margin-bottom: .2em; }
.quote:hover .review__mark { transform: translateY(-6px) rotate(-6deg); }
.quote blockquote { margin: 1em 0 0; font-family: var(--f-display); font-size: clamp(1.08rem, .95rem + .45vw, 1.45rem); line-height: 1.35; }
.quote figcaption { display: flex; align-items: center; gap: .9em; margin-top: auto; padding-top: 1.4em; font-family: var(--f-title); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; }
.quote figcaption::before { content: ""; flex: none; width: 28px; height: 1px; background: var(--terra); }
.quote--feature { max-width: 56rem; margin-inline: auto; text-align: center; align-items: center; background: transparent; box-shadow: none; padding: 0; }
.quote--feature:hover { box-shadow: none; transform: none; }
.quote--feature blockquote { font-size: clamp(1.4rem, 1rem + 1.5vw, 2.5rem); line-height: 1.25; }
.quote--feature figcaption { margin-top: 0; }
.gtrust { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; margin-top: clamp(24px, 4vh, 44px); padding: clamp(18px, 2.4vh, 26px) clamp(20px, 2vw, 32px); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.gtrust__label { font-family: var(--f-title); font-weight: 400; font-size: var(--t-h6); line-height: 1.2; }
.gtrust__label small { display: block; font-weight: 300; font-size: .62em; letter-spacing: .04em; color: var(--grey-700); margin-top: .35em; }
.gtrust__stars { display: flex; gap: 4px; color: var(--terra); }
.gtrust__stars svg { width: 18px; height: 18px; fill: currentColor; }

/* --------------------------------------------------------------------------
   Ce que tu sauras faire : 6 acquis numérotés sur deux colonnes
   -------------------------------------------------------------------------- */
.skills { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(32px, 6vw, 8rem); align-items: center; }
.skills__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); counter-reset: sk; }
.skills__list li { position: relative; display: grid; grid-template-columns: 2.6em minmax(0, 1fr); align-items: baseline; padding: clamp(16px, 2.6vh, 28px) 0; font-weight: 300; font-size: var(--t-card); line-height: 1.5; }
.skills__list li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hair); transform-origin: 0 50%; transform: scaleX(var(--rule, 1)); }
.skills__list b { font-family: var(--f-display); font-weight: 400; font-size: 1.35em; line-height: 1; }

/* --------------------------------------------------------------------------
   Le contenu : liste des blocs, sur le grège de la section Transmission
   -------------------------------------------------------------------------- */
.mods { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(32px, 6vw, 8rem); align-items: start; }
.mods__aside { position: sticky; top: calc(var(--nav-h) + 40px); }
.mods__aside .dots-list { margin-top: 1.6em; gap: .5em; }
.mods__aside .btn { margin-top: clamp(24px, 4vh, 40px); }
.mods__list { list-style: none; margin: 0; padding: 0; overflow-x: clip; border-top: 1px solid rgba(43, 43, 43, .2); }
.mods__list li { display: grid; grid-template-columns: minmax(7.5rem, 2fr) minmax(0, 7fr); column-gap: clamp(16px, 2vw, 32px); align-items: baseline; padding: clamp(14px, 2.2vh, 22px) 0; border-bottom: 1px solid rgba(43, 43, 43, .2); transition: background-color .5s ease; }
.mods__tag { font-family: var(--f-title); font-weight: 300; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mahogany); }
.mods__list h3 { font-family: var(--f-title); font-weight: 400; font-size: var(--t-h6); line-height: 1.2; transition: transform .7s var(--ease); }
.mods__list p { font-weight: 300; font-size: var(--t-card); line-height: 1.55; color: #4a4643; margin-top: .35em; transition: transform .7s var(--ease); }
.mods__list li:hover h3, .mods__list li:hover p { transform: translateX(8px); }
.mods__list li.is-bonus .mods__tag { color: var(--terra); }

/* --------------------------------------------------------------------------
   Bande sombre : rappel du prix et bouton
   -------------------------------------------------------------------------- */
.fband { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 28px 48px; flex-wrap: wrap; background: var(--dark); color: var(--grey-100); padding: clamp(48px, 9vh, 110px) var(--edge); }
.fband::before { content: ""; position: absolute; inset: 0; background: url("../img/texture.webp") center / cover; opacity: .05; pointer-events: none; }
.fband > * { position: relative; }
.fband .kicker { padding-left: 0; }
.fband__title { font-family: var(--f-display); font-size: clamp(2rem, 1.2rem + 2.4vw, 4rem); line-height: 1.05; }
.fband__sub { font-weight: 300; font-size: var(--t-card); margin-top: .7em; opacity: .85; }
.fband .f-price .price__value { font-size: clamp(2.6rem, 1.6rem + 2.6vw, 4.6rem); }

/* --------------------------------------------------------------------------
   Nantes : programme en trois jours (grège), déontologie
   -------------------------------------------------------------------------- */
.days__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); }
.day__num { display: block; overflow: hidden; font-family: var(--f-display); font-size: clamp(4rem, 2.5rem + 4.5vw, 8.5rem); line-height: .95; padding-bottom: .04em; }
.day__num > span { display: block; }
.day__title { font-family: var(--f-title); font-weight: 400; font-size: var(--t-h5); line-height: 1.2; margin-top: .4em; }
.day__text { font-weight: 300; font-size: var(--t-card); line-height: 1.6; color: #3d3d3d; margin-top: .7em; max-width: 26rem; }
.ethic { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); column-gap: clamp(20px, 3vw, 48px); align-items: baseline; margin-top: clamp(36px, 6vh, 72px); padding: clamp(20px, 3vh, 32px) clamp(20px, 2.4vw, 40px); border-left: 1px solid var(--mahogany); background: rgba(255, 255, 255, .55); }
.ethic__title { font-family: var(--f-title); font-weight: 400; font-size: var(--t-h6); line-height: 1.25; }
.ethic__text { font-weight: 300; font-size: var(--t-card); line-height: 1.6; color: #3d3d3d; }

/* Nantes : infos pratiques + option en ligne */
.infos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(18px, 2.4vw, 40px); }
.infos li { padding: clamp(14px, 2.2vh, 22px) 0 clamp(18px, 2.6vh, 28px); border-top: 1px solid var(--hair); }
.infos dt, .infos h3 { font-family: var(--f-title); font-weight: 400; font-size: clamp(1rem, .92rem + .3vw, 1.2rem); line-height: 1.2; }
.infos p { font-weight: 300; font-size: var(--t-card); line-height: 1.55; color: #4a4643; margin-top: .45em; }
.addon { display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; margin-top: clamp(28px, 5vh, 56px); padding: clamp(22px, 3vh, 34px) clamp(22px, 2.6vw, 44px); border: 1px solid var(--ink); }
.addon__kicker { font-family: var(--f-title); font-weight: 300; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mahogany); }
.addon__title { font-family: var(--f-display); font-size: clamp(1.4rem, 1.1rem + .9vw, 2.1rem); line-height: 1.1; margin-top: .3em; }
.addon__text { font-weight: 300; font-size: var(--t-card); line-height: 1.55; color: #3d3d3d; margin-top: .5em; max-width: 36rem; }

/* Nantes : film de présentation, témoignages vidéo en défilement */
.reel { --veil: rgba(245, 245, 245, .86); display: flex; flex-direction: column; align-items: center; }
.reel .fvideo { width: min(100%, 64rem); }
.reel__head { flex-direction: column; align-items: center; }
.reel__rule { display: block; width: clamp(56px, 6vw, 96px); height: 1px; margin-top: clamp(14px, 2vh, 22px); background: var(--terra); transform-origin: 50% 50%; }
/* Aperçu en sourdine au survol, puis lecture avec le son au clic */
.fvideo video { opacity: 0; transition: opacity .8s var(--ease); }
.fvideo.is-preview video, .fvideo.is-playing video { opacity: 1; }
.fvideo.is-preview::after { opacity: .55; }
.fvideo.is-playing { cursor: default; }
.vtrack { display: flex; gap: clamp(12px, 1.2vw, 20px); overflow-x: auto; overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--edge)); padding: 4px var(--edge) clamp(22px, 3vh, 34px); scroll-padding-inline: var(--edge); scrollbar-width: none; cursor: grab; }
.vtrack::-webkit-scrollbar { display: none; }
.vtrack.is-drag { cursor: grabbing; user-select: none; }
.vtrack.is-drag .vcard { pointer-events: none; }
@media (hover: none) { .vtrack { scroll-snap-type: x mandatory; } .vcard { scroll-snap-align: start; } }
.vcard { flex: 0 0 clamp(13rem, 19vw, 18rem); aspect-ratio: 9 / 16; }
.vcard.fvideo { aspect-ratio: 9 / 16; }
.vcard .fvideo__play { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
.vcard .fvideo__cap { right: clamp(14px, 1.4vw, 20px); font-size: .74rem; letter-spacing: .12em; line-height: 1.45; }
.vtrack__foot { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); }
.vtrack__hint { flex: none; font-family: var(--f-title); font-weight: 300; font-size: .82rem; letter-spacing: .06em; color: var(--grey-700); }
.vtrack__foot .rv-bar { flex: 1; }

/* Lumière de fenêtre (fond de la page séance), réutilisée sous d'autres sections */
.f-window { position: absolute; inset: -12% 0; background: url("../img/seance-fenetre.webp") left top / cover no-repeat; will-change: transform; pointer-events: none; }
.f-window::after { content: ""; position: absolute; inset: 0; background: rgba(243, 243, 242, .35); }
.fwin .f-window { background-position: right top; }

/* Nantes : liste d'attente et formation privée, sur la lumière de fenêtre */
.fwin { position: relative; overflow: hidden; background: #f3f3f2; }
.fwin > *:not(.f-window) { position: relative; }
.wait { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 20px clamp(24px, 4vw, 64px); background: #fff; padding: clamp(22px, 3vh, 36px) clamp(22px, 2.6vw, 44px); box-shadow: 0 14px 34px -22px rgba(33, 33, 33, .35); }
.wait__title { font-family: var(--f-title); font-weight: 400; font-size: var(--t-h5); line-height: 1.2; }
.wait__text { font-weight: 300; font-size: var(--t-card); line-height: 1.55; color: #3d3d3d; margin-top: .5em; }
.wait__form { display: flex; align-items: flex-end; gap: 10px; }
.wait__form .field { flex: 1; }
.private { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(32px, 6vw, 8rem); align-items: start; margin-top: clamp(56px, 10vh, 120px); }
.private .f-sub { max-width: 34rem; }
.private__list { list-style: none; margin: clamp(20px, 3vh, 32px) 0 0; padding: 0; border-top: 1px solid var(--hair); max-width: 34rem; }
.private__list li { display: flex; align-items: center; gap: .9em; padding: .8em 0; border-bottom: 1px solid var(--hair); font-family: var(--f-title); font-weight: 300; font-size: clamp(.95rem, .9rem + .2vw, 1.1rem); }
.private__list li::before { content: ""; flex: none; width: 18px; height: 1px; background: var(--terra); }
.private__price { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 28px; margin-top: clamp(22px, 3.5vh, 36px); }
.private__price .f-price small { opacity: 1; }
.private__deposit { font-family: var(--f-title); font-weight: 300; font-size: .9rem; line-height: 1.35; padding-left: 1em; border-left: 1px solid var(--mahogany); }

/* Formulaires */
.fcard { background: #fff; padding: clamp(24px, 3vh, 40px) clamp(22px, 2.4vw, 40px); box-shadow: 0 14px 34px -22px rgba(33, 33, 33, .35); }
.fcard__title { font-family: var(--f-title); font-weight: 400; font-size: var(--t-h5); line-height: 1.2; margin-bottom: clamp(16px, 2.4vh, 24px); }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fgrid .field--full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--f-title); font-weight: 300; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #3d3d3d; }
.field input, .field select, .field textarea { width: 100%; font: 300 .95rem/1.4 var(--f-text); color: var(--ink); background: #fff; border: 1px solid rgba(43, 43, 43, .28); border-radius: 0; padding: .75em .9em; transition: border-color .4s ease, box-shadow .4s ease; -webkit-appearance: none; appearance: none; }
.field select { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%232b2b2b' stroke-width='1.2'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") right .9em center / 11px no-repeat; padding-right: 2.4em; }
.field textarea { min-height: 6.5em; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(97, 37, 26, .08); }
.fcard .btn { margin-top: 18px; padding-block: .8em; }
.fcard .f-note { margin-top: .9em; }

/* --------------------------------------------------------------------------
   Porte d'entrée : la formatrice + les chiffres (lumière de fenêtre)
   -------------------------------------------------------------------------- */
.fwho { position: relative; overflow: hidden; background: #f3f3f2; }
.fwho .approach { position: relative; background: transparent; }
/* Le portrait glisse dans son cadre (seance.js) : l'image déborde pour ne jamais laisser de bande vide */
.formation .approach__photo img { height: 110%; margin-top: -5%; }

/* --------------------------------------------------------------------------
   Ordinateur : le hero et les sections courtes tiennent dans l'écran
   -------------------------------------------------------------------------- */
@media (min-width: 992px) and (min-height: 640px) {
	.fh, .formation .sh { min-height: var(--screen); }
	.fh--hub { justify-content: center; padding-block: calc(var(--nav-h) + 2vh) 3vh; }
	.fh--hub .kicker { font-size: min(var(--t-h5), 2.6vh); }
	.fh--hub .fh__title { max-width: 24ch; font-size: min(clamp(2.4rem, 1.3rem + 3vw, 5rem), 6.4vh); }
	.fh--hub .fh__text { font-size: min(var(--t-card), 1.9vh); margin-top: 1.6vh; }
	.fh--hub .fh__proof { margin-top: 1.4vh; font-size: min(.88rem, 1.6vh); }
	.fh--hub .offers { margin-top: 3.6vh; }
	.fh--hub .offer { padding-block: 2.8vh; }
	.fh--hub .offer__tag { font-size: min(1rem, 1.8vh); }
	.fh--hub .offer__text { font-size: min(var(--t-card), 1.8vh); margin-top: 1.2vh; }
	.fh--hub .offer__fit { font-size: min(.84rem, 1.55vh); margin-top: 1.2vh; }
	.fh--hub .offer__rule { padding-top: 2.2vh; }
	.fh--hub .offer .f-price { margin-top: 2vh; }
	.fh--hub .offer .btn { margin-top: 2.4vh; }
	.fh--hub .offer__title { font-size: min(clamp(1.8rem, 1.3rem + 1.2vw, 2.7rem), 4.4vh); }
	.fh--hub .f-price .price__value { font-size: min(clamp(2.2rem, 1.5rem + 1.6vw, 3.4rem), 5vh); }
	.fh--hub .fh__ask { margin-top: 3vh; font-size: min(var(--t-card), 1.9vh); }
	.fh--split { padding-block: calc(var(--nav-h) + 4vh) 5vh; }
	.fh--split .fh__title { font-size: min(clamp(2.4rem, 1.3rem + 3vw, 5rem), 8.4vh); }
	.fh--split .fh__text { font-size: min(var(--t-card), 2vh); }
	.skills, .f-sec.quotes, .fwho .approach { min-height: var(--screen); }
	.skills { padding-block: calc(var(--nav-h) + 3vh) 4vh; }
	.f-sec.quotes { display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--nav-h) + 3vh) 4vh; }
}

/* Tablette et mobile */
@media (max-width: 991px) {
	.offers { grid-template-columns: 1fr; max-width: 34rem; }
	.fh--split { grid-template-columns: 1fr; row-gap: clamp(36px, 6vw, 56px); }
	.fh__intro { max-width: 40rem; }
	.fstats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
	.fstat:nth-child(3)::before { display: none; }
	.quotes__grid { grid-template-columns: 1fr; max-width: 40rem; }
	.skills, .mods, .private { grid-template-columns: 1fr; row-gap: clamp(28px, 5vw, 44px); }
	.mods__aside { position: relative; top: 0; }
	.days__list { grid-template-columns: 1fr; }
	.ethic { grid-template-columns: 1fr; row-gap: .6em; }
	.infos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wait { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.fh__word { top: calc(var(--nav-h) + 8px); font-size: 19vw; }
	.skills__list { grid-template-columns: 1fr; }
	.mods__list li { grid-template-columns: 1fr; row-gap: .3em; }
	.fband { flex-direction: column; align-items: flex-start; }
	.vtrack__foot { flex-direction: column; align-items: stretch; gap: 16px; }
	.private__price { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 478px) {
	.fh__buy { flex-direction: column; align-items: stretch; }
	.fh__buy .btn { justify-content: center; }
	.infos { grid-template-columns: 1fr; }
	.fgrid { grid-template-columns: 1fr; }
	.wait__form { flex-direction: column; align-items: stretch; }
	.wait__form .btn { justify-content: center; }
	.addon { flex-direction: column; align-items: flex-start; }
	.fstat__num { font-size: 1.9rem; }
}

/* Ajustements après relecture */
.formation .sh__intro .kicker { white-space: nowrap; }
.fband .btn { font-size: clamp(.9rem, .85rem + .2vw, 1.05rem); padding: .9em 1.6em; }
@media (min-width: 992px) and (min-height: 640px) { .formation .sh__intro .kicker { font-size: min(var(--t-h5), 2.3vh); } }
@media (max-width: 478px) { .formation .sh__intro .kicker { white-space: normal; } }

/* ==========================================================================
   PAGE « MASSAGE SONORE AUX BOLS TIBÉTAINS » — même gabarit que les pages
   Séance magnétisme et Chi Nei Tsang. En plus : avis en citation unique
   (styles des pages Formations) et « Offrir », bloc sombre du bon cadeau.
   ========================================================================== */
.sh__sub { display: block; font-family: var(--f-title); font-weight: 300; font-size: var(--t-h5); line-height: 1.2; margin-top: .35em; }
.seance--bols .price__label { max-width: 15rem; }
.seance--bols .care__photo--tech img { object-position: 50% 60%; }
.seance--bols .step--2 .step__img img { object-position: 50% 40%; }
.seance--bols .step--3 .step__img img { object-position: 50% 75%; }
.seance--bols .col__text { color: var(--ink); }

/* Avis : une citation mise en avant, puis l'emplacement Trustindex */
.seance--bols .quotes { display: flex; flex-direction: column; justify-content: center; }
.seance--bols .quote--feature { margin-top: clamp(8px, 2vh, 24px); }
.seance--bols .quote--feature blockquote p { font: inherit; }
.seance--bols .gtrust { width: min(100%, 56rem); margin-inline: auto; }

/* Offrir : bloc sombre, carte du bon cadeau à droite */
.gift { --gift-ink: #f5f5f5; position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(32px, 6vw, 8rem); align-items: center; padding: var(--sec-md) var(--edge); background: #1f1d1b; color: var(--gift-ink); }
.gift .sec-title__main { color: var(--gift-ink); }
.gift__text { font-weight: 300; font-size: var(--t-body); line-height: 1.7; max-width: 34rem; margin-top: 1.6em; }
.gift__also { font-weight: 300; font-size: .88rem; line-height: 1.6; margin-top: 1.4em; opacity: .8; }
.gift a:not(.btn) { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: color .4s ease; }
.gift a:not(.btn):hover { color: var(--terra); }
.gift__card { padding: clamp(24px, 2.6vw, 42px); border: 1px solid rgba(245, 245, 245, .35); }
.gift__label { font-family: var(--f-title); font-weight: 300; font-size: clamp(.82rem, .78rem + .15vw, .98rem); letter-spacing: .04em; }
.gift__price { margin: .4em 0 clamp(18px, 3vh, 28px); }
.gift__price .price__value { font-size: clamp(2.4rem, 1.6rem + 1.8vw, 3.8rem); }
.gift__note { font-weight: 300; font-size: .82rem; line-height: 1.55; margin-top: 1.1em; opacity: .8; }

/* Appel final : téléphone et renvoi vers la séance à distance */
.book-cta__tel { color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; }
.book-cta__tel::before { content: "·"; margin-right: .8em; }
.book-cta__alt { font-weight: 300; font-size: .88rem; margin-top: 1.1em; }
.book-cta__alt a { color: inherit; border-bottom: 1px solid currentColor; text-decoration: none; padding-bottom: 1px; }
.book-cta__alt a:hover { color: var(--mahogany); }

@media (min-width: 992px) and (min-height: 640px) {
	.sh__sub { font-size: min(var(--t-h5), 2.8vh); }
	.seance--bols .quotes { min-height: var(--screen); padding-block: calc(var(--nav-h) + 3vh) 4vh; }
	/* Offrir : un bandeau sombre, pas un écran entier */
	.gift { padding-block: 14vh; }
	.gift__text { font-size: min(var(--t-body), 2vh); }
	/* Déroulé : textes courts, on garde les positions de la page Séance */
}
@media (max-width: 991px) {
	.gift { grid-template-columns: 1fr; row-gap: 40px; }
	.gift__card { max-width: 26rem; }
}
@media (max-width: 767px) {
	.seance--bols .gtrust .btn { width: 100%; justify-content: space-between; }
}


/* ==========================================================================
   ACCUEIL : Formations, Avis, Défi 30 jours (maquette page_accueil.pdf)
   Reprend les cartes .offer, .quote et .gtrust des pages formation,
   sur les fonds de l'accueil (texture grise, lumière de fenêtre).
   ========================================================================== */
.hreviews, .hebook { --edge: max(clamp(20px, 5vw, 6rem), (100vw - var(--content-max)) / 2); --hair: rgba(43, 43, 43, .14); --dark: #1f1d1b; }

/* Formation en magnétisme : bloc complet de la maquette, sur fond blanc (remplace Transmission) */
.hform { --edge: max(clamp(20px, 5vw, 6rem), (100vw - var(--content-max)) / 2); background: #fff; color: #2b2b2b; padding: var(--sec-md) var(--edge); }
.hform__bar { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 32px; padding-bottom: clamp(14px, 2.2vh, 22px); border-bottom: 1px solid rgba(43, 43, 43, .14); }
.hform__title { font-family: var(--f-display); font-size: clamp(1.8rem, 1.2rem + 1.6vw, 3rem); line-height: 1.05; }
.hform__formats { font-family: var(--f-title); font-weight: 300; font-size: clamp(.95rem, .8rem + .45vw, 1.3rem); line-height: 1.35; text-align: right; }
.hform__intro { padding-top: clamp(28px, 5vh, 56px); max-width: 44rem; }
.hform__kicker { font-family: var(--f-title); font-weight: 400; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: #6d6863; }
.hform__heading { font-family: var(--f-display); font-size: clamp(2.2rem, 1.2rem + 3vw, 4.75rem); line-height: 1; margin-top: .35em; text-wrap: balance; }
.hform__text { font-weight: 300; font-size: var(--t-card); line-height: 1.75; color: #4a4643; margin-top: 1.4em; }
.hform__link { margin-top: 1.8em; }
.hform__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 24px); margin-top: clamp(36px, 6vh, 64px); }
.hcard { display: flex; flex-direction: column; background: #f0efed; padding: clamp(22px, 2.2vw, 36px) clamp(20px, 2vw, 32px); transition: transform .8s var(--ease), box-shadow .8s var(--ease); }
.hcard:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -24px rgba(33, 33, 33, .4); }
.hcard--dark { background: #1a1a1a; color: var(--grey-100); }
.hcard__tag { font-family: var(--f-title); font-weight: 400; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.hcard__title { font-family: var(--f-display); font-size: clamp(1.4rem, 1.1rem + .8vw, 2rem); line-height: 1.1; margin-top: .7em; }
.hcard__text { font-weight: 300; font-size: var(--t-card); line-height: 1.6; margin-top: .8em; }
.hcard__more { align-self: flex-start; margin-top: auto; padding-top: 1.6em; font-family: var(--f-title); font-size: var(--t-btn); letter-spacing: .02em; color: inherit; text-decoration: none; }
.hcard__more .arr { display: inline-block; margin-left: .3em; transition: transform .6s var(--ease); }
.hcard__more:hover .arr { transform: translateX(5px); }
.hform__note { font-weight: 300; font-size: .85rem; line-height: 1.5; color: var(--grey-700); margin-top: clamp(16px, 2.4vh, 24px); }

/* Avis : lumière de fenêtre et handpan de l'ancien fond de l'accueil, sous un voile clair */
.hreviews { position: relative; overflow: hidden; padding: var(--sec-md) var(--edge); background: var(--grey-100); }
.hreviews__bg { position: absolute; inset: -10% 0 0; background: url("../img/fond-cube.webp") right top / cover no-repeat; will-change: transform; pointer-events: none; }
.hreviews__bg::after { content: ""; position: absolute; inset: 0; background: rgba(245, 245, 245, .55); }
.hreviews > :not(.hreviews__bg) { position: relative; }
.hreviews__head { margin-bottom: clamp(28px, 5vh, 56px); }
.hreviews .kicker { padding-left: 0; }
.hreviews .sec-title__main { font-family: var(--f-display); font-size: clamp(2.2rem, 1.2rem + 3vw, 4.75rem); line-height: 1.02; }
.hreviews .quote blockquote p { font: inherit; }
.hreviews .gtrust { background: rgba(255, 255, 255, .7); }
.hreviews .gtrust .btn { margin-left: auto; }

/* Confiance : quatre chiffres (accompagnements, formées, avis Google, Instagram) */
.trust__stats { gap: clamp(14px, 3.2vh, 2.4rem); }
.trust__stats .stat__value { font-size: min(var(--t-h1), 9vh); }
.stat__value .stat__unit { font-size: .62em; margin: 0 0 0 .18em; }
.stat__link { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: color .4s ease; }
.stat__link:hover { color: var(--mahogany); }

/* Défi 30 jours : bandeau sombre, formulaire à droite */
.hebook { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 6vw, 8rem); align-items: center; padding: var(--sec-md) var(--edge); background: var(--dark); color: var(--grey-100); }
.hebook::before { content: ""; position: absolute; inset: 0; background: url("../img/texture.webp") center / cover; opacity: .06; pointer-events: none; }
.hebook > * { position: relative; }
.hebook .kicker { padding-left: 0; }
.hebook .sec-title__main { font-family: var(--f-display); font-size: clamp(2rem, 1.2rem + 2.4vw, 4rem); line-height: 1.05; color: var(--grey-100); }
.hebook__lead { font-weight: 300; font-size: var(--t-body); line-height: 1.7; max-width: 34rem; margin-top: 1.4em; opacity: .9; }
.hebook__form { display: flex; flex-direction: column; gap: 16px; }
.hebook__field { display: flex; flex-direction: column; gap: 6px; font-family: var(--f-title); font-weight: 300; font-size: .9rem; letter-spacing: .04em; }
.hebook__field input { font: inherit; font-family: var(--f-text); font-size: 1rem; letter-spacing: 0; color: var(--ink); background: #fff; border: 1px solid transparent; border-radius: 0; padding: .8em .9em; transition: border-color .4s ease, box-shadow .4s ease; }
.hebook__field input:focus { outline: none; border-color: var(--terra); box-shadow: 0 0 0 3px rgba(205, 137, 116, .35); }
.hebook__form .btn { margin-top: 6px; padding-block: .85em; }

@media (max-width: 991px) {
	.hform__cards { grid-template-columns: 1fr; }
	.hreviews .quotes__grid { grid-template-columns: 1fr; max-width: 40rem; }
	.hebook { grid-template-columns: 1fr; row-gap: 36px; }
	.hebook__form { max-width: 30rem; }
}
@media (max-width: 767px) {
	.hreviews__bg { background-position: 70% top; }
	.hreviews .gtrust .btn { width: 100%; justify-content: space-between; margin-left: 0; }
}
@media (max-width: 640px) { .hform__bar { flex-direction: column; align-items: flex-start; } .hform__formats { text-align: left; } }


/* ==========================================================================
   Page « Mon histoire » (2026-10-29)
   Ouverture façon magazine (panneau sombre granuleux, photos noir et blanc),
   récit en trois panneaux horizontaux avec parallax (ordinateur, piloté par
   histoire.js), puis suite verticale. Textes en noir sur fond clair.
   ========================================================================== */
.histoire {
	--mh-ink: #151515;
	--mh-dark: #1c1b1a;
	--mh-rose: #f1ebe8;
	--mh-hair: rgba(21, 21, 21, .16);
	--mh-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	color: var(--mh-ink);
	background: #fff;
}
.histoire .kicker { padding-left: 0; }
.mh-quote { display: block; font-family: var(--f-display); font-size: clamp(4.5rem, 3rem + 4vw, 8rem); line-height: .62; height: .42em; }

/* ---------- 1. Ouverture ---------- */
.mh-open { display: flex; min-height: 100svh; padding: max(calc(var(--nav-h) + clamp(14px, 3vh, 40px)), calc(clamp(92px, 9vw, 9.4rem) * .845 + 22px)) clamp(12px, 2.6vw, 44px) clamp(14px, 3vh, 40px); background: var(--grey-100); }
.mh-panel {
	--pad: clamp(18px, 4vw, 72px);
	position: relative; flex: 1; overflow: hidden; isolation: isolate;
	display: flex; flex-direction: column;
	padding: clamp(18px, 3.4vh, 40px) var(--pad) 0;
	background: var(--mh-dark); color: #ece9e6;
}
.mh-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--mh-grain); opacity: .16; mix-blend-mode: screen; pointer-events: none; }
.mh-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; font-family: var(--f-title); font-weight: 400; font-size: clamp(.72rem, .66rem + .2vw, .86rem); letter-spacing: .08em; text-transform: uppercase; line-height: 1.05; }
.mh-bar__c { text-align: center; font-size: 1.25em; }
.mh-bar__c small { display: block; font-size: .62em; letter-spacing: .12em; margin-top: .25em; color: #b9b3ae; }
.mh-bar__r { display: flex; justify-content: flex-end; gap: clamp(14px, 2vw, 32px); }
.mh-bar__r a { text-decoration: none; transition: color .4s ease; }
.mh-bar__r a:hover { color: var(--terra); }
.mh-rule { display: block; height: 1px; background: rgba(236, 233, 230, .38); margin-top: clamp(16px, 2.6vh, 30px); transform-origin: 0 50%; }

.mh-open__grid { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 3.1fr) minmax(0, 4.4fr); column-gap: clamp(20px, 3vw, 48px); align-items: end; margin-top: clamp(20px, 4vh, 56px); }
.mh-inset { position: relative; align-self: center; margin: 0 0 0 calc(-1 * var(--pad)); }
.mh-inset img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.mh-inset__no { position: absolute; right: .3em; bottom: calc(100% + .5em); writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--f-title); font-size: clamp(1.1rem, .8rem + 1vw, 1.9rem); letter-spacing: .06em; line-height: 1; }
.mh-open__text { align-self: center; text-align: right; display: flex; flex-direction: column; align-items: flex-end; padding-bottom: clamp(20px, 6vh, 80px); }
.mh-open__title { font-family: var(--f-display); font-size: clamp(2rem, 1.1rem + 2.3vw, 3.9rem); line-height: 1.04; max-width: 11ch; margin-top: .35em; }
.mh-open__sub { font-weight: 300; font-size: var(--t-lead); line-height: 1.45; max-width: 20ch; margin-top: 1em; color: #d8d3cf; }
.mh-open__link { margin-top: 1.6em; font-family: var(--f-title); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: underline; text-underline-offset: .35em; transition: color .4s ease; }
.mh-open__link:hover { color: var(--terra); }
.mh-portrait { position: relative; margin: 0; height: min(66svh, 48rem); overflow: hidden; background: #8d8784; }
.mh-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; filter: grayscale(1) contrast(1.08) brightness(.96); }
.mh-moon { position: absolute; z-index: 2; right: -21vw; top: 9%; width: clamp(260px, 38vw, 640px); height: auto; aspect-ratio: 1; pointer-events: none; opacity: .92; }

/* ---------- 2. Trois panneaux ---------- */
.mh-h { position: relative; background: #fff; }
.mh-p {
	position: relative; overflow: hidden;
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(32px, 6vw, 112px); align-items: center;
	padding: var(--sec-md) var(--edge);
	background: #fff;
}
.mh-p--2 { --veil: rgba(255, 255, 255, .72); }
.mh-p--3 { background: var(--mh-rose); }
.mh-p__word { position: absolute; z-index: 0; left: 0; bottom: -.16em; font-family: var(--f-display); font-size: clamp(7rem, 4rem + 15vw, 24rem); line-height: 1; white-space: nowrap; color: rgba(21, 21, 21, .045); pointer-events: none; }
.mh-p__text { position: relative; z-index: 1; max-width: 36rem; }
.mh-p__no { font-family: var(--f-title); font-weight: 300; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: #555; }
.mh-p__no span { color: var(--mh-ink); font-weight: 500; }
.mh-p__title { font-family: var(--f-display); font-size: clamp(1.7rem, 1.05rem + 1.7vw, 3.1rem); line-height: 1.06; margin: .55em 0 .7em; }
.mh-p--3 .mh-p__title { font-size: clamp(1.45rem, .95rem + 1.25vw, 2.4rem); }
.mh-p__text p:not(.mh-p__no) + p { margin-top: .8em; }
.mh-p__text p { font-size: var(--t-body); line-height: 1.6; }
.mh-p__accent, .mh-p__end, .mh-p__lead { font-family: var(--f-title); font-weight: 300; font-size: var(--t-h6) !important; line-height: 1.35 !important; }
.mh-p__accent { padding-left: 1em; border-left: 1px solid var(--mh-ink); }
.mh-p__end { margin-top: 1.2em !important; }
.mh-steps { list-style: none; margin: .7em 0 0; padding: 0; border-top: 1px solid var(--mh-hair); }
.mh-steps li { display: flex; gap: 1.1em; align-items: baseline; padding: .7em 0; border-bottom: 1px solid var(--mh-hair); font-size: var(--t-body); line-height: 1.45; }
.mh-steps i { font-style: normal; font-family: var(--f-title); font-size: .78rem; letter-spacing: .14em; color: var(--mahogany); }
.mh-p__media { position: relative; z-index: 1; margin: 0; overflow: hidden; justify-self: end; width: 100%; background: #d9cfca; }
.mh-p__media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.mh-p__media--land { aspect-ratio: 4 / 3; }
.mh-p__media--square { aspect-ratio: 1; max-width: 40rem; }
.mh-p__media--square img { object-position: 46% 50%; }
.mh-p__media--tall { aspect-ratio: 4 / 5; max-width: 30rem; }
.mh-p__media--tall img { object-position: 50% 30%; }
.mh-h__ui { display: none; }

/* Défilement horizontal (activé par histoire.js sur grand écran) */
.mh-h.is-horizontal .mh-h__pin { position: relative; height: 100svh; overflow: hidden; }
.mh-h.is-horizontal .mh-h__track { display: flex; height: 100%; width: max-content; will-change: transform; }
.mh-h.is-horizontal .mh-p { flex: none; width: 100vw; height: 100%; padding-block: calc(var(--nav-h) + 3vh) 12vh; }
.mh-h.is-horizontal .mh-p__media--land { width: min(100%, calc(64svh * 4 / 3)); }
.mh-h.is-horizontal .mh-p__media--square { width: min(100%, 64svh); }
.mh-h.is-horizontal .mh-p__media--tall { width: min(100%, calc(68svh * 4 / 5)); }
.mh-h.is-horizontal .mh-h__ui { position: absolute; z-index: 5; left: var(--edge); bottom: 5vh; display: flex; align-items: center; gap: 18px; font-family: var(--f-title); font-size: .8rem; letter-spacing: .2em; color: #555; }
.mh-h__count b { font-weight: 500; color: var(--mh-ink); }
.mh-h__bar { position: relative; width: clamp(120px, 14vw, 220px); height: 1px; background: var(--mh-hair); }
.mh-h__bar i { position: absolute; inset: 0; background: var(--mh-ink); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- 3. Transmettre ---------- */
.mh-trans { padding: var(--sec-lg) var(--edge); background: #fff; }
.mh-trans__head { max-width: 60rem; }
.mh-sec-title { font-family: var(--f-display); font-size: clamp(2.1rem, 1.15rem + 2.5vw, 4.4rem); line-height: 1.03; margin-top: .3em; }
.mh-pull { position: relative; margin: clamp(48px, 7vw, 110px) 0 0 auto; max-width: 58rem; padding: clamp(32px, 5vw, 80px) clamp(24px, 5vw, 88px); background: var(--mh-dark); color: #ece9e6; isolation: isolate; overflow: hidden; }
.mh-pull::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--mh-grain); opacity: .16; mix-blend-mode: screen; }
.mh-pull p { font-family: var(--f-title); font-weight: 300; font-size: clamp(1.35rem, 1rem + 1.1vw, 2.2rem); line-height: 1.3; margin-top: .4em; }
.mh-trans__stat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(32px, 6vw, 112px); align-items: center; margin-top: clamp(56px, 8vw, 120px); }
.mh-stat { font-family: var(--f-display); font-size: clamp(6rem, 3rem + 11vw, 15rem); line-height: .85; letter-spacing: -.02em; }
.mh-trans__text { max-width: 34rem; }
.mh-trans__text p + p { margin-top: .9em; }
.mh-strong { font-family: var(--f-title); font-weight: 400; font-size: var(--t-h6); line-height: 1.35; }
.mh-trans__text .btn { margin-top: 1.8em; }

/* ---------- 4. Mère ---------- */
.mh-mere { --veil: rgba(241, 235, 232, .82); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(32px, 6vw, 112px); align-items: end; padding: var(--sec-lg) var(--edge); }
.mh-mere__lead { font-family: var(--f-title); font-weight: 300; font-size: var(--t-h5); line-height: 1.3; margin-top: .6em; }
.mh-mere__list { margin-top: 1.1em; font-size: var(--t-lead); line-height: 1.6; }
.mh-mere__big { font-family: var(--f-display); font-size: clamp(2.4rem, 1.2rem + 3.6vw, 6rem); line-height: 1.02; text-align: right; }

/* ---------- 5. Origines ---------- */
.mh-roots { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(32px, 6vw, 112px); align-items: center; padding: var(--sec-lg) var(--edge); background: #fff; }
.mh-roots__word { position: absolute; z-index: 0; top: 50%; left: 0; transform: translateY(-50%); font-family: var(--f-display); font-size: clamp(8rem, 3rem + 22vw, 34rem); line-height: 1; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(21, 21, 21, .2); pointer-events: none; }
.mh-roots__media { position: relative; z-index: 1; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; max-width: 32rem; }
.mh-roots__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.mh-roots__text { position: relative; z-index: 1; max-width: 34rem; }
.mh-roots__lead { font-family: var(--f-display); font-size: clamp(1.9rem, 1.1rem + 2vw, 3.4rem); line-height: 1.06; margin: .35em 0 .8em; }
.mh-roots__text p:not(.kicker) { font-size: var(--t-lead); line-height: 1.6; }
.mh-roots__text p.mh-roots__lead { font-family: var(--f-display); font-size: clamp(1.9rem, 1.1rem + 2vw, 3.4rem); line-height: 1.06; }
.mh-roots__end { margin-top: 1.2em; font-family: var(--f-title); font-weight: 300; }

/* ---------- 6. Pourquoi ---------- */
.mh-why { padding: var(--sec-lg) var(--edge); background: var(--mh-dark); color: #ece9e6; text-align: center; position: relative; isolation: isolate; overflow: hidden; }
.mh-why::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--mh-grain); opacity: .14; mix-blend-mode: screen; }
.mh-why__intro, .mh-why__end { font-family: var(--f-title); font-weight: 300; font-size: var(--t-h5); line-height: 1.35; max-width: 34ch; margin-inline: auto; }
.mh-why__big { font-family: var(--f-display); font-size: clamp(2.3rem, 1.1rem + 3.6vw, 6rem); line-height: 1.05; margin: .7em auto; max-width: 16ch; }
.mh-why__big span { display: inline; }
.mh-why__end { color: #d8d3cf; }

/* ---------- 7. Conclusion ---------- */
.mh-cta .book-cta__title { max-width: 13ch; color: var(--mh-ink); }
.mh-cta__sub { font-family: var(--f-title); font-weight: 300; font-size: var(--t-h5); margin-top: .8em; color: var(--mh-ink); }
.mh-sign { font-family: var(--f-display); font-size: var(--t-h6); margin-top: 1.4em; padding-top: .9em; border-top: 1px solid var(--mh-ink); }
.mh-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(28px, 4vw, 52px); }

/* ---------- Tablette et mobile ---------- */
@media (max-width: 991px) {
	.mh-open__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto auto; row-gap: 24px; }
	.mh-open__text { grid-column: 1 / -1; grid-row: 1; align-items: flex-start; text-align: left; padding-bottom: 0; }
	.mh-open__title { max-width: 14ch; }
	.mh-inset { grid-row: 2; align-self: end; margin-bottom: 8vh; }
	.mh-portrait { grid-row: 2; height: min(56svh, 40rem); }
	.mh-p, .mh-trans__stat, .mh-roots { grid-template-columns: 1fr; row-gap: 40px; }
	.mh-p__media { justify-self: start; }
	.mh-mere { grid-template-columns: 1fr; row-gap: 40px; }
	.mh-mere__big { text-align: left; }
	.mh-pull { margin-left: 0; }
}
@media (max-width: 767px) {
	.mh-open { min-height: 0; padding-inline: 10px; }
	.mh-bar { grid-template-columns: 1fr auto; }
	.mh-bar__r { display: none; }
	.mh-bar__c { text-align: right; }
	.mh-open__grid { grid-template-columns: 1fr; }
	.mh-inset { position: absolute; z-index: 2; left: 0; bottom: 18px; width: 46%; margin: 0 0 0 calc(-1 * var(--pad)); }
	.mh-inset__no { font-size: 1rem; }
	.mh-portrait { grid-row: 2; height: auto; aspect-ratio: 4 / 5; margin-inline: calc(-1 * var(--pad)) 0; margin-left: 22%; }
	.mh-moon { right: -170px; top: auto; bottom: 26%; width: 260px; }
	.mh-p { padding-block: var(--sec-sm); }
	.mh-p__word { font-size: 7rem; bottom: auto; top: 10px; }
	.mh-p__media--tall { max-width: 82%; }
	.mh-stat { font-size: 6.5rem; }
	.mh-roots__media { max-width: 80%; }
	.mh-cta__btns { flex-direction: column; align-items: stretch; width: 100%; max-width: 22rem; }
	.mh-cta__btns .btn { justify-content: center; }
}

/* Note Google (bandeau d'avis soigné, pages séance) */
.gtrust--score { background: rgba(255,255,255,.75); border: 1px solid var(--hair); border-radius: 4px; padding: clamp(20px,3vh,32px) clamp(24px,3vw,44px); }
.gtrust__score { display: flex; align-items: center; gap: clamp(16px,2vw,28px); }
.gtrust__num { font-family: var(--f-display); font-size: clamp(3.4rem,5.5vw,5.2rem); line-height: .9; color: var(--mahogany); letter-spacing: -.02em; padding-right: clamp(16px,2vw,28px); border-right: 1px solid var(--hair); }
.gtrust__info { display: flex; flex-direction: column; gap: .55em; }
.gtrust--score .gtrust__stars svg { width: 20px; height: 20px; }
.gtrust__meta { font-family: var(--f-title); font-size: var(--t-h6); font-weight: 300; line-height: 1.3; }
.gtrust__meta strong { font-weight: 400; }
@media (max-width: 640px) { .gtrust__num { font-size: 3.2rem; } .gtrust__meta { font-size: .95rem; } }

/* Mention bien-être sous « Pourquoi on vient me voir » (séance magnétisme) */
.care__note--ben { grid-column: 6 / 13; grid-row: 4; align-self: start; }
@media (min-width: 992px) and (max-width: 1279px) { .care__note--ben { grid-column: 5 / 13; } }
@media (max-width: 991px) { .care__note--ben { grid-column: 1 / -1; grid-row: 5; } }
@media (max-width: 478px) { .care__note--ben { grid-row: auto; } }

/* Mon histoire : petite ligne SEO au-dessus du titre */
.mh-open__kicker { display: block; font-family: var(--f-title); font-weight: 300; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; opacity: .7; line-height: 1.5; margin-bottom: 1.4em; }

/* Chi Nei Tsang : lien vers les bons cadeaux sous le parcours */
.path__gift { font-weight: 300; font-size: .88rem; margin-top: 1.2em; color: var(--grey-700); }
.path__gift a { color: var(--mahogany); }

/* Lien bon cadeau dans le sous-menu Séances */
.sub .sub__gift { margin-top: .35em; padding-top: .55em; border-top: 1px solid var(--hair, rgba(0,0,0,.1)); }
.sub .sub__gift a { color: var(--mahogany); }

/* Pied de page : formulaire « La lettre de Mariella » (Systeme.io, chargé quand on arrive en bas) */
.foot__news { margin-left: auto; width: min(100%, 380px); flex: none; }
/* Hauteur fixe réservée : le pied de page ne change pas de taille quand le formulaire arrive (pas de saut de page) */
.foot__news-slot { height: 350px; overflow: hidden; }
.foot__news-slot iframe { width: 100% !important; max-width: 100%; height: 350px !important; display: block; }
@media (max-width: 480px) { .foot__news-slot, .foot__news-slot iframe { height: 380px !important; } }
.foot__news noscript a { color: var(--grey-100); }
@media (max-width: 991px) { .foot__top { flex-wrap: wrap; } .foot__news { margin-left: 0; width: 100%; max-width: 420px; } }

/* Menu mobile sans numéros, et rien ne s'écrase quand le menu dépasse l'écran */
#menu > * { flex-shrink: 0; }
#menu .mi i { display: none; }
#menu .mi-group > a { padding-left: 2px; color: var(--grey-700); }
#menu .mi-group > a:hover { color: var(--mahogany); }
#menu .menu-cta { margin-top: 28px; padding: .95em 1.6em; }

/* Site plus sobre : pas de « + » dans les boutons, pas de petite ligne au-dessus du titre formations */
.btn .plus, .book .plus { display: none; }
.hform__kicker { display: none; }

/* 3 nov. 2026 : sans jauge de défilement ni petites numérotations (on garde les grands numéros verticaux des étapes) */
#progress { display: none !important; }
.step__idx { display: none !important; }
.mh-h__ui, .mh-h.is-horizontal .mh-h__ui { display: none !important; }