/*
Theme Name: Caléa
Description: Thème enfant de Twenty Twenty-Five, codé à la main. Aucun style WordPress hérité. Design éditorial bien-être.
Author: Alex
Version: 1.0.0
Template: twentytwentyfive
Requires at least: 6.7
Requires PHP: 7.4
Text Domain: montheme
*/

/* =========================================================================
   1. RESET
   ========================================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd,
ul, ol, fieldset, legend {
	margin: 0;
	padding: 0;
}

ul, ol {
	list-style: none;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

a {
	color: inherit;
	text-decoration: none;
}

table {
	border-collapse: collapse;
	width: 100%;
}

fieldset {
	border: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-size: inherit;
	font-weight: inherit;
}

/* =========================================================================
   2. TOKENS
   ========================================================================= */

:root {
	--beige:      #f8f3ec;
	--beige-deep: #efe7db;
	--green:      #5f684f;
	--green-deep: #4b533f;
	--brown:      #3f332b;
	--white:      #ffffff;

	--line:       rgba(63, 51, 43, 0.13);
	--line-soft:  rgba(63, 51, 43, 0.07);
	--brown-soft: rgba(63, 51, 43, 0.66);

	--font-display: "Italiana", "Times New Roman", serif;
	--font-sans:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--fs-body:  clamp(0.9375rem, 0.9rem + 0.14vw, 1.0625rem);
	--fs-lead:  clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
	--fs-label: 0.6875rem;

	/*
	 * Échelle tenue, pas démonstrative. Un titre énorme n'est pas un parti
	 * pris graphique : la hiérarchie doit venir de la composition, pas de
	 * la taille. On garde de l'écart avec le corps sans écraser la page.
	 */
	--fs-h1: clamp(2.75rem, 1rem + 6vw, 6rem);
	--fs-h2: clamp(2rem, 1.1rem + 3.2vw, 4rem);
	--fs-h3: clamp(1.75rem, 1.35rem + 1.6vw, 2.625rem);
	--fs-h4: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);

	--container: 1400px;
	--gutter:    clamp(1.25rem, 4.5vw, 4.5rem);

	/* Rythme resserré. Le vide ne vaut que s'il alterne avec du dense. */
	--section-y:       clamp(4rem, 7vw, 7rem);
	--section-y-tight: clamp(2.5rem, 4vw, 4rem);
	--section-y-air:   clamp(6rem, 11vw, 11rem);

	--header-h:  86px;

	/*
	 * Le logo se règle sur deux axes indépendants : `--brand-logo-w` est la
	 * taille vue, `--brand-box-*` le gabarit que la marque occupe dans la grille
	 * de l'en-tête. Garder le gabarit fixe laisse le menu en place quand le logo
	 * grandit.
	 */
	--brand-logo-w: 275px;
	--brand-box-w:  96px;
	--brand-box-h:  64px;

	/*
	 * Courbes de sortie franches : l'élément part vite et se pose longuement.
	 * L'ancienne `cubic-bezier(0.62, 0.02, 0.24, 1)` démarrait quasi à l'arrêt
	 * puis accélérait d'un coup — d'où l'impression rigide et mécanique.
	 */
	--ease:      cubic-bezier(0.33, 1, 0.68, 1);   /* sortie douce, usage général */
	--ease-soft: cubic-bezier(0.16, 1, 0.3, 1);    /* sortie très étalée, révélations */
}

/* =========================================================================
   3. BASE
   ========================================================================= */

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 2rem);
}

body {
	background: var(--beige);
	color: var(--brown);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

::selection {
	background: var(--green);
	color: var(--beige);
}

.h1, .h2, .h3, .h4 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: 0;
	text-wrap: balance;
}

.h1 { font-size: var(--fs-h1); line-height: 1; }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); line-height: 1.1; }
.h4 { font-size: var(--fs-h4); line-height: 1.25; }

p { text-wrap: pretty; }

.label {
	display: inline-block;
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--green);
}

.label--light { color: rgba(248, 243, 236, 0.65); }

.lead {
	font-size: var(--fs-lead);
	line-height: 1.7;
	color: var(--brown-soft);
}

.muted { color: var(--brown-soft); }

/* =========================================================================
   4. LAYOUT
   ========================================================================= */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--tight { max-width: 1040px; }
.container--text  { max-width: 720px; }

/* Quasi pleine largeur : gouttière de 20 px, comme la section de référence. */
.container--full {
	max-width: 1680px;
	padding-inline: clamp(1.25rem, 1.5vw, 1.25rem);
}

.section {
	padding-block: var(--section-y);
	position: relative;
}

.section--green {
	background: var(--green);
	color: var(--beige);
}

.section--white { background: var(--white); }

.section--tight { padding-block: var(--section-y-tight); }
.section--air   { padding-block: var(--section-y-air); }

/*
 * En-tête de section : aligné à gauche par défaut, titre large.
 * Le centrage devient l'exception (.section-head--center), pas la règle —
 * neuf sections centrées d'affilée, c'est ce qui rendait la page monotone.
 * Le label est rejeté dans une colonne de gauche, le titre occupe le reste.
 */
.section-head {
	display: grid;
	grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
	gap: 1rem clamp(1.5rem, 4vw, 4rem);
	align-items: baseline;
	margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.section-head .label { grid-column: 1; }

.section-head .h2 {
	grid-column: 2;
	max-width: 18ch;
}

.section-head .lead {
	grid-column: 2;
	max-width: 46ch;
	margin-top: 0.5rem;
}

.section-head--center {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	text-align: center;
	max-width: 720px;
	margin-inline: auto;
	gap: 1.5rem;
}

.section-head--center .label,
.section-head--center .h2,
.section-head--center .lead { grid-column: 1; max-width: 22ch; }

/*
 * Sous 900 px, l'en-tête de section repasse sur une colonne.
 *
 * Sa grille de bureau — 14 rem pour le surtitre, le reste pour le titre —
 * n'avait aucune règle mobile : sur un écran de 360 px, la colonne du titre
 * tombait à 72 px. Les mots débordaient jusqu'à 493 px, ce qui étirait la page
 * entière et ouvrait une bande vide à droite sur tout le site.
 */
@media (max-width: 900px) {
	.section-head { grid-template-columns: minmax(0, 1fr); }

	.section-head .label,
	.section-head .h2,
	.section-head .lead { grid-column: 1; }
}

.rule {
	height: 1px;
	background: var(--line);
	border: 0;
}

.section--green .rule { background: rgba(248, 243, 236, 0.22); }

/* =========================================================================
   5. BOUTONS & LIENS
   ========================================================================= */

.btn {
	--btn-fg: var(--beige);
	--btn-bg: var(--green);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/*
	 * Pas de pilule, pas de 0.2em de chasse : bouton rectangulaire et
	 * lettrage resserré. La capsule arrondie en capitales très espacées
	 * est la signature immédiate du gabarit générique.
	 */
	padding: 1.15em 2.2em;
	background: var(--btn-bg);
	color: var(--btn-fg);
	border: 1px solid var(--btn-bg);
	border-radius: 0;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: color 0.5s var(--ease), border-color 0.5s var(--ease);
}

.btn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--brown);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 0.55s var(--ease-soft);
	z-index: -1;
}

.btn:hover::after { transform: scaleY(1); transform-origin: top; }
.btn:hover { color: var(--beige); border-color: var(--brown); }

.btn--outline {
	--btn-bg: transparent;
	--btn-fg: var(--brown);
	border-color: var(--line);
}

.btn--outline:hover { border-color: var(--brown); }

.btn--light {
	--btn-bg: var(--beige);
	--btn-fg: var(--green);
}

.btn--light::after { background: var(--white); }
.btn--light:hover  { color: var(--green); border-color: var(--white); }

/* Lien à filet */
.link {
	display: inline-flex;
	align-items: center;
	gap: 1em;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	line-height: 1;
	padding-bottom: 0.75em;
	position: relative;
	color: inherit;
	align-self: start;
}

.link::before,
.link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
}

.link::before { opacity: 0.25; }

.link::after {
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.6s var(--ease-soft);
}

.link:hover::after { transform: scaleX(1); transform-origin: left; }

.link i {
	width: 2rem;
	height: 1px;
	background: currentColor;
	flex-shrink: 0;
	transition: width 0.45s var(--ease);
}

.link:hover i { width: 2.75rem; }

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}

/* =========================================================================
   6. MÉDIAS
   ========================================================================= */

/*
 * Pas de fond derrière une image. Un aplat de couleur se voit pendant le
 * chargement différé et se fait découvrir par la révélation : c'est ce qui
 * trahit immédiatement un site mal fini.
 */
.media {
	overflow: hidden;
	position: relative;
}

/*
 * Déplacement et agrandissement passent par deux variables distinctes, pour
 * que la révélation et le survol puissent piloter la même propriété
 * `transform` sans se marcher dessus.
 */
.media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--pos, 50% 50%);
	transform: translateY(var(--revealY, 0%)) scale(var(--zoom, 1));
	transition: transform 1.3s var(--ease-soft);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: transform;
}

.media--zoom:hover img { --zoom: 1.045; }

.media--empty {
	display: grid;
	place-items: center;
	background: repeating-linear-gradient(135deg, var(--beige-deep) 0 12px, #e8dfd0 12px 24px);
	min-height: 200px;
}

.media--empty span {
	font-size: 0.625rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--brown-soft);
	background: var(--beige);
	padding: 0.5em 1em;
	border-radius: 999px;
}

.ratio-portrait  { aspect-ratio: 3 / 4; }
.ratio-tall      { aspect-ratio: 5 / 7; }
.ratio-square    { aspect-ratio: 1 / 1; }
.ratio-landscape { aspect-ratio: 4 / 3; }
.ratio-wide      { aspect-ratio: 16 / 10; }
.ratio-pano      { aspect-ratio: 21 / 9; }

/* =========================================================================
   7. ACCESSIBILITÉ
   ========================================================================= */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 999;
	background: var(--brown);
	color: var(--beige);
	padding: 0.85rem 1.5rem;
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border-radius: 999px;
}

.skip-link:focus { top: 1rem; }

:focus-visible {
	outline: 1px solid var(--green);
	outline-offset: 4px;
}

/* =========================================================================
   8. HEADER
   ========================================================================= */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	color: var(--beige);
	border-bottom: 1px solid transparent;
	transition: background-color 0.7s var(--ease), color 0.7s var(--ease),
		border-color 0.7s var(--ease), transform 0.6s var(--ease);
}

/*
 * Voile sombre sous l'en-tête tant qu'il est transparent.
 *
 * Sur l'accueil, l'en-tête flotte au-dessus de la photo. À droite le menu
 * tombe sur le ciel et les arbres, mais à gauche la marque atterrit sur le
 * parasol blanc : texte clair sur blanc, illisible. Un dégradé très court
 * rattrape le contraste sans assombrir la photo.
 */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(43, 36, 30, 0.5), rgba(43, 36, 30, 0));
	transition: opacity 0.5s var(--ease);
}

/* Dès que l'en-tête devient opaque, le voile n'a plus de raison d'être. */
.site-header.is-solid::before,
.site-header.nav-open::before,
.no-hero .site-header::before { opacity: 0; }

/* Marque à gauche, menu au centre, actions à droite. */
.site-header__inner {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(1.5rem, 3vw, 3rem);
	min-height: var(--header-h);
}

.site-header.is-solid {
	background: var(--beige);
	color: var(--brown);
	border-bottom-color: var(--line-soft);
}

.site-header.is-hidden { transform: translateY(-100%); }

.site-header.nav-open {
	background: var(--beige);
	color: var(--brown);
	border-bottom-color: var(--line-soft);
	transform: none;
}

.no-hero .site-header {
	position: sticky;
	background: var(--beige);
	color: var(--brown);
	border-bottom-color: var(--line-soft);
}

/* Marque */
.brand {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	line-height: 1;
}

.site-header__inner .brand {
	grid-column: 1;
	grid-row: 1;
	align-items: flex-start;
	text-align: left;
}

/* Logo de l'en-tête.
 *
 * La grille de la barre est « auto | 1fr | auto » et le menu se centre dans la
 * colonne du milieu : si le logo grandit, la colonne de gauche s'élargit et le
 * menu glisse avec elle. Pour agrandir le logo sans déplacer le menu, on sépare
 * les deux tailles : la marque garde un gabarit réservé dans la grille, et
 * l'image, sortie du flux, débord librement par-dessus.
 */
.site-header__inner .brand {
	position: relative;
	width: var(--brand-box-w);
	height: var(--brand-box-h);
}

.brand__logo {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	/* Sur mobile la barre est étroite : le logo ne doit pas passer sous le
	   bouton « Réserver », qu'il chevaucherait en débordant. */
	width: min(var(--brand-logo-w), 45vw);
	height: auto;
	max-width: none;
}

/*
 * Le fond du logo brun est transparent dans le fichier lui-même. Un temps réglé
 * en `mix-blend-mode: multiply`, mais l'en-tête est en `position: fixed` et forme
 * donc un contexte d'empilement : le mélange s'arrêtait au bas de la barre et le
 * blanc ressortait en rectangle sur la partie débordante du logo.
 */

/* Le menu occupe la colonne centrale et s'y centre. */
.site-header__inner .site-nav {
	grid-column: 2;
	grid-row: 1;
	justify-self: center;
}

.brand__name {
	font-family: var(--font-display);
	font-size: 1.4375rem;
	letter-spacing: 0.36em;
	text-indent: 0.36em;
}

.brand__tag {
	font-size: 0.5rem;
	letter-spacing: 0.38em;
	text-indent: 0.38em;
	text-transform: uppercase;
	opacity: 0.7;
}

/* Navigation */
.site-nav { grid-column: 1; grid-row: 1; }

.site-nav ul {
	display: flex;
	align-items: center;
	gap: clamp(1.25rem, 2.4vw, 2.75rem);
}

.site-nav a {
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	position: relative;
	padding-block: 0.4rem;
	white-space: nowrap;
	opacity: 0.88;
	transition: opacity 0.4s var(--ease);
}

.site-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.55s var(--ease-soft);
}

.site-nav a:hover { opacity: 1; }

.site-nav a:hover::after,
.site-nav .current-menu-item > a::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* Actions */
.site-header__actions {
	grid-column: 3;
	grid-row: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1.5rem;
}

.header-btn {
	display: inline-flex;
	align-items: center;
	padding: 0.9em 1.7em;
	border: 1px solid currentColor;
	border-radius: 0;
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1;
	opacity: 0.85;
	transition: background-color 0.45s var(--ease), color 0.45s var(--ease),
		border-color 0.45s var(--ease), opacity 0.45s var(--ease);
}

.header-btn:hover {
	background: var(--beige);
	color: var(--brown);
	border-color: var(--beige);
	opacity: 1;
}

.site-header.is-solid .header-btn:hover,
.site-header.nav-open .header-btn:hover,
.no-hero .header-btn:hover {
	background: var(--green);
	color: var(--beige);
	border-color: var(--green);
}

/* Burger */
.nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	margin-right: -10px;
	position: relative;
}

.nav-toggle span {
	position: absolute;
	left: 11px;
	width: 22px;
	height: 1px;
	background: currentColor;
	transition: transform 0.5s var(--ease-soft);
}

.nav-toggle span:nth-child(2) { top: 18px; }
.nav-toggle span:nth-child(3) { top: 25px; }

.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-3.5px) rotate(-45deg); }

/* =========================================================================
   9. HERO
   ========================================================================= */

.hero {
	position: relative;
	min-height: 100svh;
	display: grid;
	align-items: end;
	overflow: hidden;
	color: var(--beige);
}

.hero__media {
	position: absolute;
	inset: -8% 0;
	background: var(--green-deep);
	will-change: transform;
}

.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Photo très lumineuse, très aérée en haut : on cadre sur le bassin. */
	object-position: 50% 62%;
}

/*
 * Double voile : un halo radial centré qui pose les titres sans écraser la
 * photo, plus un dégradé bas pour ancrer le bouton et l'indicateur de scroll.
 */
.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	/*
	 * Voile calé sur le contenu, qui est en bas : on assombrit le pied et on
	 * laisse le haut de l'image respirer. Un halo centré n'a plus de sens
	 * depuis que la composition n'est plus centrée.
	 */
	background: linear-gradient(
		to bottom,
		rgba(43, 36, 30, 0.3) 0%,
		rgba(43, 36, 30, 0.05) 26%,
		rgba(43, 36, 30, 0.22) 55%,
		rgba(43, 36, 30, 0.62) 100%
	);
}

/* Léger halo porté sur le texte, pour tenir sur les zones les plus claires. */
.hero__title,
.hero__inner p {
	text-shadow: 0 1px 28px rgba(43, 36, 30, 0.35);
}

/*
 * Composition asymétrique : le titre tient le bas à gauche, le texte et le
 * lien répondent à droite sous un filet, alignés sur la même ligne de pied.
 * L'empilement centré titre / texte / bouton est le réflexe par défaut et
 * n'installe aucune tension.
 */
/*
 * Un seul filet traverse toute la largeur, et les deux colonnes s'y
 * accrochent par le haut. Avant, chacune avait son propre repère — le titre
 * démarrait à 620, le filet du bloc de droite à 640 : rien n'était aligné,
 * ça se voyait sans qu'on sache pourquoi.
 */
.hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
	align-items: start;
	gap: clamp(1.5rem, 4vw, 4rem);
	padding-top: clamp(1.5rem, 2.5vw, 2.25rem);
	padding-bottom: clamp(3rem, 6vw, 5.5rem);
	border-top: 1px solid rgba(248, 243, 236, 0.32);
}

.hero__title {
	font-size: var(--fs-h1);
	max-width: 13ch;
	/*
	 * Compense le jambage supérieur de la police : sans ça, la capitale du
	 * titre tombe visiblement plus bas que le texte de droite, alors que
	 * les deux boîtes partent bien du même filet.
	 */
	margin-top: -0.14em;
}

.hero__aside {
	display: grid;
	justify-items: start;
	gap: 1.5rem;
}

.hero__aside p {
	max-width: 34ch;
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(248, 243, 236, 0.88);
}

/* Révélation ligne par ligne */
.lines .line {
	display: block;
	overflow: hidden;
}

.lines .line > span {
	display: block;
	transition: transform 1.25s var(--ease-soft);
	transition-delay: calc(var(--i, 0) * 130ms);
}

.lines.is-visible .line > span { transform: translateY(0); }

/* =========================================================================
   10. INTRO ÉDITORIALE (3 colonnes, images décalées)
   ========================================================================= */

/*
 * Proportions relevées sur relaisrossar.it (section « Una Favola »),
 * à 1600 px de fenêtre : colonnes 400 / 702 / 398 px, gouttière 30 px,
 * images 400 × 620 px alignées en haut ET en bas — aucun décalage vertical.
 * Le déséquilibre vient uniquement du rapport 0,57 / 1 / 0,57.
 */
.intro {
	display: grid;
	grid-template-columns: 0.57fr 1fr 0.57fr;
	align-items: center;
	gap: 30px;
}

/* 400 / 620 = 0,645 */
.intro__media .media { aspect-ratio: 20 / 31; }

.intro__body {
	display: grid;
	gap: 1.5rem;
	justify-items: center;
	text-align: center;
	/* Bloc de texte relevé à 450 px, centré dans sa colonne de 702 px. */
	max-width: 450px;
	margin-inline: auto;
}

.intro__body p {
	color: var(--brown-soft);
	font-size: 1.125rem;
	line-height: 1.44;
}

.intro__title {
	font-size: clamp(2.5rem, 1.2rem + 4vw, 4.375rem);
	margin-bottom: 0.5rem;
}

/* =========================================================================
   11. PRESTATIONS — blocs alternés pleine largeur
   ========================================================================= */

/*
 * Proportions relevées sur relaisrossar.it (section « Corners »), à 1600 px :
 * deux images de 417 × 585 px (rapport 0,712) séparées de 25 px, bloc texte
 * démarrant à 893 px, paragraphe plafonné à 349 px. Le texte n'est PAS centré
 * verticalement : le titre se cale en haut, le paragraphe est rejeté en bas.
 * Un filet sépare chaque bloc.
 */

.corners { display: grid; }

.corner {
	display: grid;
	grid-template-columns: minmax(0, 417fr) minmax(0, 417fr) minmax(0, 676fr);
	gap: 25px;
	align-items: stretch;
	padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
	border-bottom: 1px solid var(--line);
}

.corner + .corner { padding-top: clamp(2.5rem, 4vw, 3.5rem); }

/*
 * Alternance : une ligne sur deux, le texte passe à gauche.
 * `order` seul ne suffit PAS — il déplace les éléments mais pas les pistes.
 * Le texte atterrirait dans une piste de 417 px et une image hériterait
 * des 676 px, d'où une image démesurée. On inverse donc aussi les colonnes.
 */
.corner:nth-child(even) {
	grid-template-columns: minmax(0, 676fr) minmax(0, 417fr) minmax(0, 417fr);
}

.corner:nth-child(even) .corner__body { order: -1; }

/* 417 / 585 = 0,712 */
.corner__media .media { aspect-ratio: 417 / 585; }

.corner__body {
	display: grid;
	align-content: space-between;
	gap: 2rem;
	/*
	 * Titre calé 30 px sous le haut des images, paragraphe rejeté en bas :
	 * il doit finir ~80 px avant le pied des images, soit environ 74 % de
	 * la hauteur du bloc. Un padding trop grand le fait remonter au milieu.
	 */
	padding-block: 30px 60px;
}

.corner__title {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.01em;
	font-size: clamp(2rem, 0.9rem + 3.6vw, 4rem);
}

.corner__text { display: grid; gap: 1.75rem; justify-items: start; }

.corner__text p {
	/* Paragraphe relevé à 349 px de large, corps 16 px. */
	max-width: 349px;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--brown-soft);
}

/* =========================================================================
   12 bis. QUI SOMMES-NOUS — PROPOSITION « portrait et voix »
   =========================================================================
   Alternative à la version au-dessus. On répond à la question par une
   personne, pas par trois concepts abstraits. Une image, une voix, une
   signature. Rien d'autre : pas de numérotation (elle supposerait une
   séquence qui n'existe pas), pas de piliers interchangeables.
   ========================================================================= */

/*
 * Empilement au scroll. Chaque conviction est un panneau collant dont le
 * point d'accroche descend un peu plus bas que le précédent : les panneaux
 * viennent se poser les uns sur les autres, et la bande laissée libre en
 * haut garde la trace de ceux déjà passés.
 *
 * Deux conditions pour que ça tienne : un fond opaque sur chaque panneau
 * (sans quoi ils se traversent) et un décalage d'accroche constant.
 */
.creed {
	display: grid;
	/* Chaque panneau reste dans le flux : c'est ce qui donne la course. */
	gap: 0;
}

/*
 * Pas de filet sous ce titre : il s'arrêtait à la largeur du cadre, sans
 * rejoindre aucun bord ni aucun repère de la page. Un trait qui ne délimite
 * rien n'est qu'un trait.
 */
.creed__head {
	display: grid;
	gap: 1.25rem;
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.creed__head .h2 { max-width: 15ch; }

/*
 * Panneau pleine largeur, même fond que la page, sans ombre ni retrait :
 * il ne doit surtout pas se lire comme une carte. Le fond opaque reste
 * indispensable (sinon les panneaux se traversent), mais comme il est
 * identique à celui de la page, seule la couture se voit — marquée par un
 * filet d'1 px.
 */
.creed__panel {
	position: sticky;
	top: calc(var(--header-h) + var(--i) * clamp(1.75rem, 3vw, 3.25rem));
	background: var(--beige);
	border-top: 1px solid var(--line);
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.creed__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
	min-height: clamp(22rem, 52svh, 30rem);
}

.creed__body {
	display: grid;
	gap: 1rem;
	align-content: center;
	max-width: 42ch;
}

.creed__kicker {
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--green);
}

.creed__body h3 {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.375rem);
	line-height: 1.12;
}

.creed__body p {
	color: var(--brown-soft);
	line-height: 1.7;
}

.creed__media .media { height: clamp(16rem, 42svh, 24rem); }

@media (max-width: 900px) {
	/* Pas d'empilement sur petit écran : la hauteur d'écran n'y suffit pas. */
	.creed__panel { position: static; }

	.creed__inner {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.creed__inner .creed__media { order: -1; }
}

/* =========================================================================
   13. DÉROULÉ DE SÉANCE
   ========================================================================= */

/*
 * Traité comme un programme, pas comme trois cartes : chaque étape occupe
 * une ligne pleine largeur, le numéro est suspendu dans la marge de gauche
 * et reste discret, les filets rythment la lecture. Trois colonnes égales
 * avec de gros chiffres au centre, c'est le réflexe par défaut — et ça se
 * lit comme un tableau de prix, pas comme le déroulé d'un soin.
 */
/*
 * Défilement latéral épinglé. Le contenu est une séquence dans le temps :
 * la forme doit le dire. La section se fige, les trois moments avancent
 * horizontalement au rythme du scroll vertical — on progresse dans le soin
 * en progressant dans la page.
 *
 * La hauteur de la section fabrique la course : sans elle, rien à parcourir.
 */
.journey {
	background: var(--green);
	color: var(--beige);
	position: relative;
	height: 320svh;
}

.journey__pin {
	position: sticky;
	top: 0;
	height: 100svh;
	display: grid;
	grid-template-rows: auto 1fr;
	align-content: center;
	gap: clamp(2rem, 5vw, 4rem);
	padding-block: clamp(2rem, 5vw, 4rem);
	overflow: hidden;
}

.journey__head {
	display: grid;
	gap: 1rem;
}

.journey__head .h2 { max-width: 20ch; }

.journey__track {
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 4.5rem);
	padding-inline: var(--gutter);
	will-change: transform;
}

/*
 * Chaque moment occupe une large part de l'écran : c'est ce qui crée la
 * course. Avec des panneaux étroits, la piste dépassait la fenêtre de 16 px
 * et la traversée n'existait pas. Panneau large = deux colonnes à l'intérieur,
 * sinon la largeur se lit comme du vide.
 */
.journey__step {
	flex: 0 0 min(64vw, 46rem);
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
}

.journey__step .media {
	height: clamp(14rem, 42svh, 22rem);
	width: 100%;
}

.journey__body {
	display: grid;
	gap: 1.25rem;
	align-content: center;
}

.journey__num {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	color: rgba(248, 243, 236, 0.5);
	font-variant-numeric: tabular-nums;
}

/* Le filet s'allonge d'une étape à l'autre : jauge d'avancement. */
.journey__num::after {
	content: "";
	height: 1px;
	background: rgba(248, 243, 236, 0.3);
	width: calc(2rem + var(--i) * 2.5rem);
}

.journey__step h3 {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
	line-height: 1.08;
}

.journey__step p {
	color: rgba(248, 243, 236, 0.72);
	font-size: 1rem;
	line-height: 1.65;
}

/*
 * Repli : sur petit écran et si l'utilisateur refuse les animations, on
 * revient à un empilement vertical classique. Le défilement latéral suppose
 * une largeur et un mouvement dont on ne dispose pas toujours.
 */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
	.journey { height: auto; }

	.journey__pin {
		position: static;
		height: auto;
		overflow: visible;
	}

	.journey__track {
		flex-direction: column;
		align-items: stretch;
		transform: none !important;
		padding-inline: 0;
	}

	.journey__step { flex: none; }
}
/* =========================================================================
   14. BIENFAITS
   ========================================================================= */

.benefits {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(2.5rem, 7vw, 7rem);
	align-items: center;
}

.benefits__body { display: grid; gap: 1.75rem; justify-items: start; }

.benefits__list { display: grid; width: 100%; margin-top: 0.75rem; }

.benefits__list li {
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	align-items: baseline;
	gap: 0.5rem;
	padding-block: 1.15rem;
	border-bottom: 1px solid var(--line);
	font-size: 1.0625rem;
	line-height: 1.5;
}

.benefits__list li:first-child { border-top: 1px solid var(--line); }

.benefits__list li span {
	font-family: var(--font-display);
	font-size: 0.9375rem;
	color: var(--green);
}

/*
 * Encart carte cadeau : image de fond et cadre blanc en réserve. Le filet
 * intérieur, décollé du bord, cadre le texte et donne l'assise que deux
 * filets horizontaux ne pouvaient pas produire.
 */
.giftcard {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-top: clamp(4.5rem, 9vw, 8rem);
	min-height: clamp(22rem, 52svh, 32rem);
	display: grid;
	place-items: center;
	padding: clamp(1.25rem, 2.5vw, 2.25rem);
	color: var(--beige);
}

.giftcard__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.giftcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 55%;
}

/* Assombrissement mesuré : il faut tenir le texte blanc sans éteindre l'image. */
.giftcard__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(43, 36, 30, 0.42);
}

.giftcard__frame {
	width: 100%;
	max-width: 58rem;
	border: 1px solid rgba(255, 255, 255, 0.7);
	padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
	display: grid;
	justify-items: center;
	text-align: center;
	gap: 1.75rem;
}

/*
 * Titre nettement réduit par rapport aux autres sections : ici il doit tenir
 * DANS le cadre, pas le déborder. Au corps des titres de section, il passait
 * sur deux lignes trop longues qui sortaient du filet et poussaient le bouton
 * par-dessus la bordure basse.
 */
.giftcard h3 {
	font-family: var(--font-display);
	font-size: clamp(1.625rem, 1rem + 2vw, 2.75rem);
	line-height: 1.15;
	max-width: 16ch;
	text-shadow: 0 1px 24px rgba(43, 36, 30, 0.3);
}

/* =========================================================================
   15. OFFRES GROUPES — 3 colonnes centrées, sans carte
   ========================================================================= */

.offers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(2.25rem, 4.5vw, 4rem);
}

.offer {
	display: grid;
	gap: 1.5rem;
	justify-items: center;
	text-align: center;
	align-content: start;
}

.offer__media { width: 100%; }

.offer h3 { font-family: var(--font-display); font-size: var(--fs-h3); }

.offer__price {
	font-size: var(--fs-label);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--green);
}

.offer__features {
	display: grid;
	gap: 0.75rem;
	width: 100%;
	padding-block: 1.5rem;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--brown-soft);
}

/* =========================================================================
   16. HORAIRES
   ========================================================================= */

/*
 * Traitée en fiche plutôt qu'en bandeau centré : le contenu est de
 * l'information pratique, il gagne à être étiqueté et aligné. Trois lignes
 * de capitales centrées entre deux filets ne pesaient rien face à l'encart
 * carte cadeau qui précède.
 */
/*
 * Carte en fond pleine largeur, informations dans un bloc posé dessus.
 * La carte est désaturée et légèrement réchauffée pour ne pas jurer avec la
 * palette : le rendu Google brut, très saturé, ferait tache au milieu des
 * beiges et des verts.
 */
/*
 * Carte et informations côte à côte, comme les autres sections du site.
 * Superposer un bloc à une carte plein cadre encombre les deux : le fond
 * reste lisible sous le texte et le texte gêne la lecture du fond.
 */
.visit {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.visit__aside {
	display: grid;
	gap: 1.5rem;
	justify-items: start;
}

.visit__aside p { color: var(--brown-soft); max-width: 34ch; }

.visit__title { font-family: var(--font-display); font-size: var(--fs-h2); }

/*
 * La carte est désaturée et légèrement réchauffée : le rendu Google brut,
 * très saturé, jurerait au milieu des beiges et des verts.
 */
.visit__map {
	position: relative;
	height: clamp(20rem, 56svh, 30rem);
	overflow: hidden;
	background: var(--beige-deep);
}

.visit__map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	filter: grayscale(0.45) sepia(0.16) saturate(0.85) contrast(0.95);
}

.visit__list { display: grid; width: 100%; }

/* Étiquette à gauche, valeur à droite, filet entre chaque ligne. */
.visit__row {
	display: grid;
	grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
	gap: 0.35rem clamp(1rem, 2vw, 2rem);
	align-items: baseline;
	padding-block: clamp(0.85rem, 1.6vw, 1.15rem);
	border-top: 1px solid var(--line);
}

.visit__row:last-child { border-bottom: 1px solid var(--line); }

.visit__row dt {
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--green);
}

.visit__row dd {
	font-size: 1.0625rem;
	line-height: 1.5;
	margin: 0;
}

.visit__row dd a {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--line);
	transition: text-decoration-color 0.35s var(--ease);
}

.visit__row dd a:hover { text-decoration-color: currentColor; }

@media (max-width: 900px) {
	.visit { grid-template-columns: minmax(0, 1fr); }

	.visit__map { height: clamp(16rem, 44svh, 22rem); }

	.visit__row { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   17. JOURNAL
   ========================================================================= */

.posts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(2rem, 4vw, 3.5rem);
}

.post-card { display: grid; gap: 1.25rem; align-content: start; }

.post-card__date {
	font-size: var(--fs-label);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--green);
}

.post-card h3 { font-family: var(--font-display); font-size: var(--fs-h4); line-height: 1.2; }
.post-card p  { color: var(--brown-soft); font-size: 0.9375rem; }

/* =========================================================================
   18. PIED DE PAGE
   ========================================================================= */

.site-footer {
	background: var(--green);
	color: var(--beige);
	padding-top: clamp(4.5rem, 9vw, 8rem);
	padding-bottom: 2.5rem;
}

.footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: clamp(2.5rem, 5vw, 4.5rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

.footer__brand { display: grid; gap: 1.5rem; align-content: start; max-width: 32ch; }

.footer__brand p {
	color: rgba(248, 243, 236, 0.72);
	font-size: 0.9375rem;
}

.footer h4 {
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(248, 243, 236, 0.55);
	margin-bottom: 1.5rem;
}

.footer__col ul { display: grid; gap: 0.85rem; }

.footer__col a,
.footer__col li {
	font-size: 0.9375rem;
	color: rgba(248, 243, 236, 0.88);
	line-height: 1.6;
}

.footer__col a { transition: color 0.35s var(--ease); }
.footer__col a:hover { color: var(--white); }

.footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	padding-top: 2.25rem;
	border-top: 1px solid rgba(248, 243, 236, 0.18);
	font-size: 0.75rem;
	color: rgba(248, 243, 236, 0.55);
}

.footer__bottom ul { display: flex; flex-wrap: wrap; gap: 1.75rem; }
.footer__bottom a:hover { color: var(--beige); }

/* =========================================================================
   18 bis. PAGE SOIN
   ========================================================================= */

/* --- Hero plein cadre, titre en bas, barre d'informations en pied --- */

.svc-hero {
	position: relative;
	min-height: 88svh;
	display: grid;
	align-items: end;
	overflow: hidden;
	color: var(--beige);
	margin-top: calc(-1 * var(--header-h));
}

.svc-hero__media {
	position: absolute;
	inset: -6% 0;
	z-index: -1;
	background: var(--green-deep);
	will-change: transform;
}

.svc-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 52%;
}

.svc-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(43, 36, 30, 0.46) 0%,
		rgba(43, 36, 30, 0.08) 34%,
		rgba(43, 36, 30, 0.24) 62%,
		rgba(43, 36, 30, 0.68) 100%
	);
}

.svc-hero__inner {
	position: relative;
	display: grid;
	gap: clamp(1.75rem, 3.5vw, 3rem);
	padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.svc-hero__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(3rem, 0.5rem + 9vw, 8.5rem);
	line-height: 0.92;
	letter-spacing: -0.015em;
	text-shadow: 0 1px 32px rgba(43, 36, 30, 0.35);
}

/* Barre d'informations : filet plein, données réparties. */
.svc-hero__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem clamp(2rem, 6vw, 6rem);
	padding-top: clamp(1.25rem, 2.5vw, 2rem);
	border-top: 1px solid rgba(248, 243, 236, 0.35);
}

.svc-hero__bar > div { display: grid; gap: 0.45rem; }

.svc-hero__bar dt {
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: rgba(248, 243, 236, 0.6);
}

.svc-hero__bar dd {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
	line-height: 1;
}

.svc-hero__bar .btn { align-self: end; }

/* --- Ouverture : une phrase en grand, le reste décalé --- */

.svc-open {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

/*
 * La phrase d'ouverture est traitée en display, pas en corps de texte :
 * elle porte le ton de la page à elle seule.
 */
.svc-open__lead {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.75rem, 0.9rem + 3.4vw, 4rem);
	line-height: 1.08;
	letter-spacing: -0.005em;
	max-width: 13ch;
}

.svc-open__rest {
	display: grid;
	gap: 1.5rem;
	max-width: 44ch;
	justify-self: end;
	/* Décalé vers le bas : les deux colonnes ne démarrent pas au même trait. */
	margin-top: clamp(1rem, 4vw, 4rem);
}

.svc-open__rest p { color: var(--brown-soft); }

/*
 * Bandeau d'image, aligné sur la même grille que le texte de la section.
 * Il avait sa propre largeur maximale de 1680 px avec 20 px de marge : ses
 * bords ne tombaient donc sur aucun repère de la page.
 */
.svc-band { margin-top: clamp(3rem, 6vw, 5.5rem); }

/*
 * Hauteur fixe et largeur pleine, SANS `aspect-ratio`.
 *
 * Combiner `aspect-ratio` et `max-height` était le bug : quand la hauteur
 * plafonne, le navigateur rétrécit la LARGEUR pour conserver le rapport.
 * Le bandeau tombait à 575 px et laissait un vide sur toute sa droite.
 * Ici la largeur est libre, la hauteur imposée, et le recadrage est confié
 * à `object-fit: cover`.
 */
.svc-band .media {
	/* Centrée et plus haute : en pleine largeur sur 448 px, elle se lisait
	   comme une frise ; resserrée, elle redevient une image. */
	width: min(100%, 76rem);
	height: clamp(24rem, 72svh, 48rem);
	margin-inline: auto;
}

.svc-what__media { width: 100%; }

/*
 * Phrases de clôture : posées en display, décalées à droite, elles ferment
 * leur section au lieu de se fondre dans le corps de texte.
 */
/*
 * Colonne de gauche : le titre puis la phrase de synthèse, séparés par un
 * filet. Le titre seul laissait 400 px de vide sous lui pendant que tout le
 * texte s'entassait à droite.
 */
.svc-open__side {
	display: grid;
	gap: clamp(1.75rem, 3.5vw, 2.75rem);
	align-content: start;
}

.svc-open__close {
	max-width: 32ch;
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
	border-top: 1px solid var(--line);
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 0.95rem + 0.85vw, 1.5rem);
	line-height: 1.32;
	color: var(--brown-soft);
}

/*
 * La liste et sa phrase de clôture forment UN seul élément de grille.
 * Laissée nue, la phrase devenait un troisième élément et retombait en
 * colonne 1, par-dessus l'image collante.
 */
.svc-what__main { display: grid; }

.svc-gains__close {
	margin-top: clamp(2rem, 4vw, 3rem);
	margin-left: 3.25rem;
	max-width: 46ch;
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem);
	line-height: 1.35;
	color: var(--brown-soft);
}

@media (max-width: 900px) {
	.svc-gains__close { margin-left: 0; }
}

/* --- Définition : colonne collante, bénéfices en grandes lignes --- */

/*
 * Deux niveaux de lecture sur une même grille :
 *   rangée 1 — la question à gauche, sa réponse à droite ;
 *   rangée 2 — la photo à gauche, les cinq points à droite.
 * L'ancienne version empilait tout dans une colonne collante, ce qui
 * mélangeait les niveaux et faisait retomber le texte sur l'image.
 */
.svc-what {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	column-gap: clamp(2rem, 6vw, 6rem);
	row-gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: start;
}

.svc-what__q {
	display: grid;
	gap: 1.25rem;
	justify-items: start;
	align-content: start;
}

.svc-what__q .h2 { max-width: 12ch; }

/* Léger décrochage : la réponse ne démarre pas sur la ligne du surtitre. */
.svc-what__a { padding-top: clamp(0.5rem, 2vw, 2rem); }

.svc-what__a p {
	max-width: 48ch;
	font-size: var(--fs-lead);
	line-height: 1.7;
	color: var(--brown-soft);
}

/*
 * Bénéfices posés en display sur des lignes pleines, numéro suspendu.
 * En cinq colonnes étroites, ils se lisaient comme un tableau comparatif ;
 * en lignes, chacun a le poids d'une affirmation.
 */
.svc-gains {
	display: grid;
	border-top: 1px solid var(--line);
}

.svc-gains li {
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr);
	gap: 0.5rem clamp(1rem, 2vw, 1.75rem);
	align-items: baseline;
	padding-block: clamp(1.15rem, 2.2vw, 1.75rem);
	border-bottom: 1px solid var(--line);
	font-family: var(--font-display);
	font-size: clamp(1.375rem, 1rem + 1.5vw, 2.25rem);
	line-height: 1.15;
}

.svc-gains li span {
	font-family: var(--font-sans);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.2em;
	color: var(--green);
}

/* --- Déroulement : ligne de temps qui se trace --- */

/*
 * Deux niveaux, et une photo qui sort du cadre.
 *
 * L'ancienne version entassait label, titre, paragraphe et photo dans une
 * seule colonne face à la ligne de temps : quatre éléments empilés, aucune
 * composition. Ici l'en-tête occupe sa propre rangée, puis la photo file
 * jusqu'au bord de l'écran et vient couper la bande verte — c'est elle qui
 * porte le geste, pas sa taille.
 */
.svc-flow__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: end;
	margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.svc-flow__title { display: grid; gap: 1.25rem; justify-items: start; }
.svc-flow__title .h2 { max-width: 14ch; }

.svc-flow__intro {
	color: rgba(248, 243, 236, 0.72);
	max-width: 46ch;
	padding-bottom: 0.35rem;
}

/*
 * Ligne de temps à gauche, photo à droite, le tout centré dans le cadre.
 * Plus de débord : la photo était coupée net par la rangée et le sujet s'y
 * retrouvait décapité.
 */
.svc-flow__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, min(30vw, 26rem));
	gap: clamp(2rem, 5vw, 5rem);
	align-items: stretch;
}

/*
 * `align-items: stretch` étire la colonne ; encore faut-il que la figure et
 * son image suivent, d'où la chaîne de hauteurs à 100 %.
 */
.svc-flow__media { display: grid; }
.svc-flow__media .media { aspect-ratio: auto; height: 100%; }

.timeline { display: grid; }

/*
 * Chaque étape tient sur toute la largeur : numéro et titre à gauche,
 * description à droite. Tout empilé dans une seule colonne, le contenu
 * n'occupait que 400 px des 917 disponibles et laissait un demi-écran de
 * vert mort à droite.
 */
/*
 * Une seule colonne : numéro, titre, puis texte dessous. Séparer le titre
 * de sa description en deux colonnes ouvrait un couloir entre les deux et
 * cassait le lien de lecture.
 */
.timeline__step {
	position: relative;
	padding-left: clamp(2.5rem, 4vw, 3.5rem);
	padding-block: clamp(1.25rem, 2.4vw, 1.75rem);
	display: grid;
	gap: 0.5rem;
}

.timeline__head { display: grid; gap: 0.5rem; }

/*
 * Chaque étape porte son propre segment, qui se déploie du haut vers le bas
 * à sa révélation : le trait se dessine au fil de la lecture.
 */
.timeline__step::before {
	content: "";
	position: absolute;
	left: clamp(0.75rem, 1.4vw, 1.25rem);
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgba(248, 243, 236, 0.55);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 1.1s var(--ease-soft);
}

.js .timeline__step.is-visible::before { transform: scaleY(1); }

/*
 * La pastille se cale sur le centre optique du numéro, pas sur le haut de
 * la boîte : décalage du demi-interligne du numéro (13 px) moins son propre
 * rayon.
 */
.timeline__step::after {
	content: "";
	position: absolute;
	left: calc(clamp(0.75rem, 1.4vw, 1.25rem) - 4px);
	top: calc(clamp(1.5rem, 3vw, 2.5rem) + 2px);
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--beige);
	transform: scale(0);
	transition: transform 0.5s var(--ease-soft) 0.35s;
}

.js .timeline__step.is-visible::after { transform: scale(1); }

/*
 * Interligne ramené à 1 : sans lui, le numéro héritait de l'interligne du
 * corps (1,8) et son chiffre tombait bien plus bas que la pastille, calée
 * sur le haut de la boîte.
 */
.timeline__num {
	display: block;
	font-size: 0.8125rem;
	line-height: 1;
	letter-spacing: 0.1em;
	color: rgba(248, 243, 236, 0.55);
	font-variant-numeric: tabular-nums;
}

.timeline__step h3 {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.125rem);
	line-height: 1.1;
}

.timeline__step p { color: rgba(248, 243, 236, 0.72); max-width: 44ch; }

/* --- Tarifs : le prix domine --- */

.rates { display: grid; }

.rates__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1rem clamp(1.5rem, 4vw, 4rem);
	align-items: center;
	padding-block: clamp(1.5rem, 3vw, 2.5rem);
	border-top: 1px solid var(--line);
	transition: background-color 0.5s var(--ease);
}

.rates__row:last-child { border-bottom: 1px solid var(--line); }

.rates__name h3 {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
	line-height: 1.1;
}

.rates__meta {
	display: block;
	margin-top: 0.45rem;
	font-size: var(--fs-label);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--brown-soft);
}

.rates__price {
	text-align: right;
	display: grid;
	gap: 0.3rem;
	justify-items: end;
}

/* Le chiffre est l'information : on lui donne l'échelle d'un titre. */
.rates__price span {
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem);
	line-height: 0.95;
	color: var(--green);
}

.rates__price small { font-size: 0.8125rem; color: var(--brown-soft); }

/* --- Réservation : cadre blanc sur image, note de précaution dessous --- */

.svc-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: clamp(22rem, 54svh, 32rem);
	display: grid;
	place-items: center;
	padding: clamp(1.25rem, 2.5vw, 2.25rem);
	color: var(--beige);
}

.svc-cta__media { position: absolute; inset: 0; z-index: -1; }

.svc-cta__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 55%;
}

.svc-cta__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(43, 36, 30, 0.46);
}

.svc-cta__frame {
	width: 100%;
	max-width: 52rem;
	border: 1px solid rgba(255, 255, 255, 0.7);
	padding: clamp(2.25rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
	display: grid;
	justify-items: center;
	text-align: center;
	gap: 1.5rem;
}

.svc-cta__frame h2 {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3rem);
	line-height: 1.12;
	max-width: 16ch;
	text-shadow: 0 1px 24px rgba(43, 36, 30, 0.3);
}

/* --- Questions fréquentes : accordéon natif --- */

.svc-faq {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 6vw, 6rem);
	align-items: start;
}

.svc-faq__head {
	display: grid;
	gap: 1.25rem;
	justify-items: start;
	align-content: start;
}

.svc-faq__head .h2 { max-width: 13ch; }

.faq { display: grid; }

.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }

.faq__q {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: center;
	padding-block: clamp(1.25rem, 2.4vw, 1.75rem);
	cursor: pointer;
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	line-height: 1.2;
	/* Retire le triangle natif du navigateur. */
	list-style: none;
}

.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }

/* Signe + qui devient − à l'ouverture, construit en deux filets. */
.faq__sign {
	position: relative;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.faq__sign::before,
.faq__sign::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 1px;
	background: var(--green);
	transition: transform 0.45s var(--ease-soft);
}

.faq__sign::after { transform: rotate(90deg); }

.faq__item[open] .faq__sign::after { transform: rotate(90deg) scaleX(0); }

.faq__a {
	padding-bottom: clamp(1.25rem, 2.4vw, 1.75rem);
	max-width: 58ch;
}

.faq__a p { color: var(--brown-soft); }

/* Le contenu se pose à l'ouverture au lieu d'apparaître d'un bloc. */
.js .faq__item[open] .faq__a {
	animation: faq-ouvre 0.5s var(--ease-soft) both;
}

@keyframes faq-ouvre {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.js .faq__item[open] .faq__a { animation: none; }
}

/* --- Variantes des soins : un même gabarit, quatre respirations --- */

/*
 * Les phrases de clôture sont devenues des conteneurs : le site d'origine les
 * écrit souvent en deux paragraphes, et les fondre en un seul revenait à
 * réécrire le texte. Le style typographique reste porté par le conteneur et
 * descend par héritage ; il ne reste qu'à espacer les paragraphes.
 */
.svc-open__close,
.svc-gains__close {
	display: grid;
	gap: 0.65em;
}

/* --- Réponses de FAQ : plusieurs paragraphes et une liste à puces --- */

.faq__a {
	display: grid;
	gap: 1rem;
}

.faq__list {
	display: grid;
	gap: 0.5rem;
	padding-left: 1.25rem;
}

.faq__list li {
	position: relative;
	color: var(--brown-soft);
}

/* Puce dessinée : le reset a retiré `list-style` sur tout le site. */
.faq__list li::before {
	content: "";
	position: absolute;
	left: -1.25rem;
	top: 0.75em;
	width: 5px;
	height: 1px;
	background: var(--green);
}

/*
 * Phrase signée par la maison. Le filet passe au vert et l'échelle monte d'un
 * cran : c'est la ligne la plus forte de la page. Pas de guillemets ajoutés,
 * qui feraient citation de magazine.
 */
.svc-open__close--cite {
	max-width: 34ch;
	border-top-color: var(--green);
	color: var(--brown);
	font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

/*
 * Réponse d'une seule phrase.
 *
 * La composition normale cale la réponse en haut de sa rangée, dont la hauteur
 * est fixée par le titre d'en face. Quand ce titre tient sur trois lignes et la
 * réponse sur une, 270 px s'ouvrent entre la phrase et la liste — qui sont
 * pourtant dans la MÊME colonne et se suivent à la lecture.
 *
 * Posée en bas, la phrase retrouve sa liste ; le vide passe au-dessus, face au
 * titre, où il se lit comme le décrochage voulu.
 *
 * Le déclencheur vient des données (`serre`) et non d'une détection : c'est la
 * longueur du texte qui commande, et elle est connue à l'écriture.
 */
.svc-what--serre .svc-what__a {
	align-self: end;
	padding-top: 0;
}

/* Phrase qui amène la liste : elle annonce, elle ne conclut pas. */
.svc-gains__intro {
	margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
	max-width: 46ch;
	color: var(--brown-soft);
}

/*
 * En-tête de déroulement sans texte d'accompagnement. Sur deux colonnes, la
 * moitié droite resterait un demi-écran de vert vide ; le titre reprend alors
 * toute la largeur qu'il peut tenir.
 */
.svc-flow__head--solo { grid-template-columns: minmax(0, 1fr); }
.svc-flow__head--solo .svc-flow__title .h2 { max-width: 20ch; }

/* --- Options tarifaires : même grille, une échelle en dessous --- */

.rates-more { margin-top: clamp(3rem, 6vw, 5rem); }

.rates-more__title {
	margin-bottom: clamp(1rem, 2vw, 1.5rem);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--brown-soft);
}

.rates--soft .rates__row { padding-block: clamp(1.1rem, 2.2vw, 1.6rem); }

.rates--soft .rates__name h3 {
	font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem);
}

/* Les options ne doivent pas peser autant que les formules : chiffre plus
   petit, et brun plutôt que vert, qui reste la couleur des tarifs principaux. */
.rates--soft .rates__price span {
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
	color: var(--brown);
}

@media (max-width: 900px) {
	.svc-hero { min-height: 76svh; }

	.svc-open,
	.svc-what { grid-template-columns: minmax(0, 1fr); }

	/* Une seule colonne : plus de rangée à égaliser, donc plus de décrochage. */
	.svc-what--serre .svc-what__a { align-self: start; }

	.svc-flow__head { grid-template-columns: minmax(0, 1fr); align-items: start; }

	/* Plus de débord : la photo rentre dans la marge et repasse en paysage. */
	.svc-flow__body {
		grid-template-columns: minmax(0, 1fr);
		padding-inline: var(--gutter);
	}

	/* Plus d'étirement : la photo reprend un format fixe et passe au-dessus. */
	.svc-flow__media { order: -1; }
	.svc-flow__media .media { aspect-ratio: 3 / 2; height: auto; }


	.svc-open__rest { justify-self: start; margin-top: 0; }

	.svc-what__a { padding-top: 0; }
	.svc-faq { grid-template-columns: minmax(0, 1fr); }

	.rates__row { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.rates__price { text-align: left; justify-items: start; }
}

/* =========================================================================
   18 ter. PAGE OFFRES GROUPES
   ========================================================================= */

.grp-hero__chapo {
	max-width: 44ch;
	font-size: var(--fs-lead);
	color: rgba(248, 243, 236, 0.86);
}

/* --- Navigation des offres, collée sous l'en-tête --- */

/*
 * Cinq offres et leurs programmes font une page longue : sans ce rail, on ne
 * peut pas passer de l'EVJF aux formules été sans tout remonter.
 */
.grp-nav {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--beige);
	border-bottom: 1px solid var(--line);
}

.grp-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 clamp(1.5rem, 3.5vw, 3.5rem);
}

.grp-nav a {
	display: block;
	padding-block: clamp(1rem, 1.8vw, 1.35rem);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--brown-soft);
	border-bottom: 1px solid transparent;
	transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}

.grp-nav a:hover,
.grp-nav a:focus-visible {
	color: var(--brown);
	border-bottom-color: var(--green);
}

/* La cible d'ancre passerait sous le rail : on lui rend sa hauteur. */
.grp-offre { scroll-margin-top: calc(var(--header-h) + 3.5rem); }

/* --- Présentation d'une offre : photo d'un côté, tout le reste de l'autre --- */

.grp-offre__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	column-gap: clamp(2rem, 6vw, 6rem);
	row-gap: clamp(2rem, 4vw, 3rem);
	align-items: start;
}

/* Une offre sur deux inverse la photo, pour que la page respire au défilement.
   Ici l'inversion est sans danger : le titre reste au-dessus de SON texte,
   les deux voyagent ensemble dans la même colonne. */
.grp-offre:nth-of-type(even) .grp-offre__grid {
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}

.grp-offre:nth-of-type(even) .grp-offre__media { order: 2; }

.grp-offre__corps {
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
	justify-items: start;
	align-content: start;
}

.grp-offre__corps .h2 { max-width: 18ch; }

.grp-offre__intro { display: grid; gap: 1rem; max-width: 52ch; }
.grp-offre__intro p { color: var(--brown-soft); }

/* Ce que comprend l'offre : filets fins, pas de puces rondes. */
.grp-inclus {
	display: grid;
	gap: 0;
	width: 100%;
	max-width: 46rem;
	border-top: 1px solid var(--line);
}

.grp-inclus li {
	padding-block: clamp(0.7rem, 1.4vw, 0.95rem);
	border-bottom: 1px solid var(--line);
	font-family: var(--font-display);
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
	line-height: 1.25;
}

/* Capacité et prix sur une même ligne : les deux chiffres qu'on cherche. */
.grp-offre__pied {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.75rem clamp(2rem, 5vw, 4rem);
}

.grp-offre__capacite,
.grp-offre__tarif {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
}

.grp-offre__capacite span,
.grp-offre__tarif span {
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--brown-soft);
}

.grp-offre__capacite {
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
}

.grp-offre__tarif strong {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
	line-height: 0.95;
	color: var(--green);
}

.grp-offre__tarif small { font-size: 0.8125rem; color: var(--brown-soft); }

.grp-offre__note {
	max-width: 48ch;
	font-size: 0.9375rem;
	color: var(--brown-soft);
}

/* --- Programme : la journée heure par heure --- */

.grp-prog__head {
	display: grid;
	gap: 1.25rem;
	justify-items: start;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* En-tête de format, pour le séminaire qui en propose deux. */
.grp-format {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem clamp(1rem, 2.5vw, 2rem);
	padding-bottom: clamp(1rem, 2vw, 1.5rem);
	margin-top: clamp(2.5rem, 5vw, 4rem);
	border-bottom: 1px solid rgba(248, 243, 236, 0.28);
}

.grp-format:first-of-type { margin-top: 0; }

.grp-format h3 {
	font-family: var(--font-display);
	font-size: clamp(1.375rem, 1.05rem + 1.1vw, 2rem);
	line-height: 1.1;
}

.grp-format__meta {
	font-size: var(--fs-label);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(248, 243, 236, 0.6);
}

.grp-format__tarif {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem);
	color: var(--beige);
}

/*
 * Deux colonnes de créneaux : sept ou huit étapes empilées feraient une
 * colonne de plusieurs écrans dans une bande verte, illisible. En deux
 * colonnes la journée tient d'un seul regard.
 */
.timeline--jour {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(2rem, 5vw, 5rem);
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.timeline--jour .timeline__step { padding-block: clamp(1rem, 2vw, 1.5rem); }

/* L'heure prend le rôle du numéro : elle est l'information de repérage. */
.timeline--jour .timeline__num {
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	letter-spacing: 0;
	color: var(--beige);
}

.timeline--jour h4 {
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
	line-height: 1.15;
}

.timeline__list {
	display: grid;
	gap: 0.4rem;
	margin-top: 0.35rem;
	max-width: 42ch;
}

.timeline__list li {
	position: relative;
	padding-left: 1rem;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: rgba(248, 243, 236, 0.72);
}

.timeline__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.8em;
	width: 5px;
	height: 1px;
	background: rgba(248, 243, 236, 0.5);
}

@media (max-width: 900px) {
	.grp-offre__grid,
	.grp-offre:nth-of-type(even) .grp-offre__grid { grid-template-columns: minmax(0, 1fr); }

	.grp-offre:nth-of-type(even) .grp-offre__media { order: 0; }

	.timeline--jour { grid-template-columns: minmax(0, 1fr); }

	/* Le rail d'ancres devient un ruban qui défile plutôt qu'un pavé de cinq
	   lignes mangeant la moitié de l'écran. */
	.grp-nav ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 1.5rem;
		scrollbar-width: none;
	}

	.grp-nav ul::-webkit-scrollbar { display: none; }
	.grp-nav a { white-space: nowrap; }
}


/* =========================================================================
   18 quater. PAGE À PROPOS
   ========================================================================= */

/* --- Ouverture partagée : le titre à gauche, le portrait à droite --- */

.apr-hero {
	position: relative;
	min-height: 84svh;
	display: grid;
	align-items: end;
	/* Remonte sous l'en-tête, qui est fixe. */
	margin-top: calc(-1 * var(--header-h));
	padding-top: var(--header-h);
}

/*
 * Le portrait file jusqu'au bord droit de l'écran et tient toute la hauteur.
 * Sa colonne reste assez large pour qu'il garde un cadrage de portrait : à
 * moins d'un tiers d'écran, il redeviendrait une bande.
 */
.apr-hero__media {
	position: absolute;
	inset: 0 0 0 auto;
	width: min(42vw, 44rem);
	overflow: hidden;
}

.apr-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 28%;
}

.apr-hero__inner {
	position: relative;
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	justify-items: start;
	align-content: end;
	padding-bottom: clamp(3rem, 7vw, 6rem);
}

.apr-hero__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(2.75rem, 0.5rem + 7vw, 7rem);
	line-height: 0.95;
	letter-spacing: -0.015em;
	/* S'arrête avant la photo : le titre ne doit jamais passer dessous. */
	max-width: min(52%, 14ch);
}

@media (max-width: 900px) {
	.apr-hero {
		min-height: 0;
		align-items: start;
		padding-top: calc(var(--header-h) + clamp(2rem, 6vw, 4rem));
	}

	/* La photo reprend sa place dans le flux. `order` la fait passer sous le
	   titre : dans le balisage elle vient avant, pour rester en position
	   absolue au-dessus du texte sur grand écran. */
	.apr-hero__media {
		position: static;
		order: 2;
		width: auto;
		margin-top: clamp(2rem, 5vw, 3rem);
		aspect-ratio: 4 / 5;
	}

	.apr-hero__inner { padding-bottom: 0; }
	.apr-hero__title { max-width: 14ch; }
}

/* =========================================================================
   18 quinquies. PAGE CONTACT
   ========================================================================= */

/*
 * Même ouverture que « À propos » : photo pleine hauteur, bord droit à bord
 * d'écran. Seul le titre descend d'un cran — « Une question ? Un besoin
 * particulier ? » est deux fois plus long que « L'histoire de Caléa » et
 * partirait sur quatre lignes au même corps.
 */
.ct-hero .apr-hero__title {
	font-size: clamp(2.5rem, 0.8rem + 4.6vw, 5rem);
	line-height: 1;
	max-width: min(52%, 16ch);
}

.ct-hero__chapo {
	max-width: 40ch;
	font-size: var(--fs-lead);
	color: var(--brown-soft);
}

.ct-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	column-gap: clamp(2.5rem, 7vw, 7rem);
	row-gap: clamp(2.5rem, 5vw, 4rem);
	align-items: start;
}

.ct-infos {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.25rem);
	justify-items: start;
	position: sticky;
	top: calc(var(--header-h) + clamp(1.5rem, 3vw, 3rem));
}

/* --- Le formulaire --- */

.ct-form { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }

.ct-form .h2 { max-width: 14ch; }

.ct-champs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.ct-champ { display: grid; gap: 0.5rem; }
.ct-champ--large { grid-column: 1 / -1; }

.ct-champ label {
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--brown-soft);
}

/*
 * Champs sans boîte : un filet sous la ligne de saisie suffit. Encadrés, cinq
 * rectangles gris s'imposeraient au milieu d'une page qui n'en a aucun.
 */
/*
 * Le filet est plus marqué que les séparateurs du site : à 13 % d'opacité sur
 * fond blanc, on ne voyait pas où cliquer et le formulaire semblait absent.
 */
.ct-champ input,
.ct-champ select,
.ct-champ textarea {
	width: 100%;
	padding: 0.7rem 0;
	background: none;
	border: 0;
	border-bottom: 1px solid rgba(63, 51, 43, 0.32);
	border-radius: 0;
	font-family: var(--font-sans);
	font-size: 1rem;
	color: var(--brown);
	transition: border-color 0.35s var(--ease);
}

.ct-champ textarea { border: 1px solid rgba(63, 51, 43, 0.32); padding: 0.85rem 1rem; }

.ct-champ textarea { resize: vertical; min-height: 8rem; line-height: 1.7; }

.ct-champ input:focus,
.ct-champ select:focus {
	outline: none;
	border-bottom-color: var(--green);
	border-bottom-width: 2px;
	padding-bottom: calc(0.7rem - 1px);
}

.ct-champ textarea:focus { outline: none; border-color: var(--green); }

/* Chevron dessiné : la flèche native ne suit ni la palette ni la graisse. */
.ct-champ select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--green) 50%),
		linear-gradient(135deg, var(--green) 50%, transparent 50%);
	background-position: calc(100% - 10px) 1.25rem, calc(100% - 5px) 1.25rem;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 1.75rem;
}

.ct-envoi { justify-items: start; }

/* Piège à robots : sorti de l'écran plutôt que masqué, pour rester lisible
   par les remplissages automatiques qu'on veut justement attraper. */
.ct-piege {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ct-message {
	padding: clamp(0.85rem, 1.6vw, 1.15rem) clamp(1rem, 2vw, 1.4rem);
	border-left: 2px solid var(--green);
	background: var(--beige);
	font-size: 0.9375rem;
}

.ct-message--ko { border-left-color: #a4553f; }

/* --- La carte --- */

.ct-carte { margin-top: clamp(2rem, 4vw, 3rem); }

.ct-carte iframe {
	display: block;
	width: 100%;
	height: clamp(20rem, 52svh, 32rem);
	border: 1px solid var(--line);
	/* Même traitement que sur l'accueil : le rendu Google brut, très saturé,
	   jurerait au milieu des beiges et des verts. */
	filter: grayscale(0.45) sepia(0.16) saturate(0.85) contrast(0.95);
}

.ct-carte .btn-row { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }


/* =========================================================================
   18 sexies. PAGE NOS SERVICES
   ========================================================================= */

/* Le lien de chaque prestation, sous son texte. */
.corner__lien { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }


/* =========================================================================
   18 septies. PAGE SÉANCES & TARIFS
   ========================================================================= */

/*
 * Cinq groupes qui se suivent.
 *
 * Tout était en Italiana à trois corps voisins — titre de groupe 48 px, nom de
 * ligne 36 px, prix 64 px : une seule coulée de texte où l'on ne voyait plus
 * où une offre finissait. Ici le titre de groupe garde le display, les noms de
 * ligne repassent en sans, et chaque groupe s'ouvre sur un filet vert pleine
 * largeur. Deux niveaux au lieu de trois, et une frontière visible.
 */
.tarif-groupe + .tarif-groupe { margin-top: clamp(4rem, 8vw, 7rem); }

.tarif-groupe__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem clamp(1rem, 2.5vw, 2rem);
	padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
	margin-bottom: clamp(1rem, 2vw, 1.5rem);
	border-top: 2px solid var(--green);
}

.tarif-groupe__head h2 {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
	line-height: 1.1;
}

.tarif-groupe__head span {
	font-size: var(--fs-label);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--brown-soft);
}

/* Nom de ligne en sans : il devient une entrée de liste sous son titre, au
   lieu de rivaliser avec lui. */
.tarif-groupe .rates__name h3 {
	font-family: var(--font-sans);
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.01em;
}

.tarif-groupe .rates__row { padding-block: clamp(1.1rem, 2vw, 1.5rem); }

/* Le prix redescend aussi : à 64 px il écrasait le titre du groupe. */
.tarif-groupe .rates__price span {
	font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
}

/* --- Cartes cadeaux --- */

.cadeaux__intro,
.cadeaux__chute {
	max-width: 56ch;
	color: var(--brown-soft);
}

.cadeaux__chute {
	margin-top: clamp(2rem, 4vw, 3rem);
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.5rem);
	line-height: 1.35;
}

/*
 * Les occasions d'offrir : une énumération sur un rang.
 *
 * En petites capitales de 12 px, elles se lisaient comme une mention légale
 * alors qu'elles font partie de l'argument. Elles passent au display, au corps
 * d'une sous-partie, sur un rang encadré de deux filets — présentes sans
 * devenir cinq étiquettes.
 */
.occasions {
	display: grid;
	gap: clamp(0.85rem, 1.8vw, 1.25rem);
	margin-top: clamp(2rem, 4vw, 2.75rem);
	padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.occasions ul {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.65rem clamp(1.25rem, 2.5vw, 2.25rem);
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 0.9rem + 0.95vw, 1.75rem);
	line-height: 1.2;
	color: var(--brown);
}

/*
 * Le point suit son mot au lieu de précéder le suivant : posé en `::before`,
 * il se retrouvait seul en début de ligne au moment du retour à la ligne.
 * Attaché en `::after`, il passe à la ligne avec le mot auquel il appartient.
 */
.occasions li:not(:last-child)::after {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-left: clamp(1.25rem, 2.5vw, 2.25rem);
	border-radius: 50%;
	background: var(--green);
	vertical-align: middle;
}


/*
 * Trois colonnes séparées par un filet, sans fond ni ombre : en cartes, elles
 * prendraient l'allure d'un comparateur d'abonnements.
 */
/*
 * Une photo par formule, le texte dessous.
 *
 * La version en colonnes bordées ressemblait à un comparateur d'abonnements.
 * Ici plus de filet, plus de cadre : ce sont les photographies qui tiennent la
 * grille, comme partout ailleurs sur le site.
 */
.cadeaux {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.cadeau { display: grid; align-content: start; }

.cadeau__corps {
	display: grid;
	justify-items: start;
	gap: clamp(0.6rem, 1.2vw, 0.9rem);
	padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
}

.cadeau__titre {
	font-family: var(--font-display);
	font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2rem);
	line-height: 1.1;
}

/* Le montant sous son titre, « à partir de » au-dessus du chiffre pour que les
   trois prix démarrent sur la même verticale. */
.cadeau__prix { display: grid; justify-items: start; gap: 0.2rem; }

.cadeau__prix small {
	font-size: var(--fs-label);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--brown-soft);
}

.cadeau__prix strong {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	line-height: 0.95;
	color: var(--green);
}

.cadeau__liste {
	display: grid;
	gap: 0.35rem;
	margin-top: 0.35rem;
}

.cadeau__liste li {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--brown-soft);
}

/* Un lien souligné plutôt qu'un bouton encadré : trois cadres côte à côte
   ramenaient le tableau comparatif qu'on venait d'enlever. */
.cadeau__lien {
	margin-top: 0.5rem;
	padding-bottom: 3px;
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--green);
	transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}

.cadeau__lien:hover { color: var(--green); border-bottom-color: var(--brown); }

/* --- Mode d'emploi : trois temps sur un rang --- */

.cadeau-etapes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(2rem, 5vw, 4.5rem);
}

.cadeau-etapes li {
	display: grid;
	justify-items: start;
	gap: 0.75rem;
	padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
	border-top: 1px solid rgba(248, 243, 236, 0.32);
}

.cadeau-etapes__num {
	font-size: 0.8125rem;
	line-height: 1;
	letter-spacing: 0.1em;
	color: rgba(248, 243, 236, 0.55);
	font-variant-numeric: tabular-nums;
}

.cadeau-etapes h3 {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.125rem);
	line-height: 1.1;
}

.cadeau-etapes p { color: rgba(248, 243, 236, 0.72); max-width: 34ch; }

@media (max-width: 900px) {
	.cadeaux { grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 3.5rem); }
	.cadeau-etapes { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
	.ct-hero .apr-hero__title { max-width: 16ch; }

	.ct-grid { grid-template-columns: minmax(0, 1fr); }
	.ct-infos { position: static; }
	.ct-champs { grid-template-columns: minmax(0, 1fr); }
}


/* --- Le parcours : portrait collant, récit qui défile --- */

.parcours {
	display: grid;
	grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
	column-gap: clamp(2.5rem, 7vw, 7rem);
	align-items: start;
	margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

/*
 * Le portrait reste en face du texte pendant toute la lecture : c'est SON
 * histoire, le visage doit l'accompagner. Sans cela, il disparaît au premier
 * paragraphe et les quatre suivants se lisent devant une colonne vide.
 */
.parcours__portrait {
	position: sticky;
	top: calc(var(--header-h) + clamp(1.5rem, 3vw, 3rem));
}

.parcours__recit {
	display: grid;
	gap: clamp(2.75rem, 5vw, 4.5rem);
}

.parcours__bloc {
	display: grid;
	gap: clamp(0.85rem, 1.6vw, 1.15rem);
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
	border-top: 1px solid var(--line);
}

.parcours__bloc:first-child { border-top: 0; padding-top: 0; }

.parcours__bloc h3 {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
	line-height: 1.15;
	max-width: 20ch;
}

.parcours__bloc p {
	max-width: 58ch;
	color: var(--brown-soft);
}

/* Le diplôme : une pièce à l'appui, pas une illustration. D'où le petit
   format — le fichier d'origine ne fait que 430 px de large. */
.parcours__piece {
	margin-top: clamp(0.75rem, 1.5vw, 1.25rem);
	max-width: 14rem;
}

.parcours__piece img {
	width: 100%;
	border: 1px solid var(--line);
}

.parcours__piece figcaption {
	margin-top: 0.65rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--brown-soft);
}

/* --- Les valeurs : cinq mots sur un rang --- */

.valeurs__head {
	display: grid;
	gap: 1.25rem;
	justify-items: start;
	margin-bottom: clamp(3rem, 6vw, 5rem);
}

.valeurs__head .h2 { max-width: 14ch; }

.valeurs__intro {
	max-width: 62ch;
	color: rgba(248, 243, 236, 0.72);
}

.valeurs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	border-top: 1px solid rgba(248, 243, 236, 0.28);
	border-bottom: 1px solid rgba(248, 243, 236, 0.28);
}

.valeurs li {
	padding: clamp(1.75rem, 3.5vw, 3rem) clamp(0.5rem, 1.5vw, 1.25rem);
	text-align: center;
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 0.7rem + 1.3vw, 2rem);
	line-height: 1.15;
}

/* Filet entre les colonnes, pas autour : cinq cadres feraient cinq cartes. */
.valeurs li + li { border-left: 1px solid rgba(248, 243, 236, 0.28); }

.giftcard__prix {
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.5rem);
	color: rgba(248, 243, 236, 0.86);
}

@media (max-width: 900px) {
	.parcours { grid-template-columns: minmax(0, 1fr); row-gap: clamp(2rem, 4vw, 3rem); }

	/* Plus rien à quoi se coller sur une colonne unique : le portrait
	   reprend sa place en tête de section. */
	.parcours__portrait { position: static; }

	.valeurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.valeurs li + li { border-left: 0; }
	.valeurs li:nth-child(odd) { border-right: 1px solid rgba(248, 243, 236, 0.28); }
	.valeurs li:not(:nth-last-child(-n+2)) { border-bottom: 1px solid rgba(248, 243, 236, 0.28); }
}

@media (max-width: 560px) {
	.valeurs { grid-template-columns: minmax(0, 1fr); }
	.valeurs li:nth-child(odd) { border-right: 0; }
	.valeurs li:not(:last-child) { border-bottom: 1px solid rgba(248, 243, 236, 0.28); }
}


/* =========================================================================
   19. PAGES INTERNES
   ========================================================================= */

.page-header {
	padding-top: clamp(3.5rem, 8vw, 7rem);
	padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
	border-bottom: 1px solid var(--line);
	display: grid;
	gap: 1.25rem;
}

.page-header h1 { font-family: var(--font-display); font-size: var(--fs-h2); }

.entry-content { max-width: 68ch; }
.entry-content > * + * { margin-top: 1.5rem; }

.entry-content h2,
.entry-content h3 {
	font-family: var(--font-display);
	line-height: 1.15;
	margin-top: 3rem;
}

.entry-content h2 { font-size: var(--fs-h3); }
.entry-content h3 { font-size: var(--fs-h4); }

.entry-content a {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--line);
	transition: text-decoration-color 0.35s var(--ease);
}

.entry-content a:hover { text-decoration-color: currentColor; }

.entry-content ul { list-style: disc; padding-left: 1.25rem; }
.entry-content ol { list-style: decimal; padding-left: 1.25rem; }
.entry-content li + li { margin-top: 0.5rem; }

.entry-content blockquote {
	border-left: 1px solid var(--green);
	padding-left: 2rem;
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	line-height: 1.25;
}

/* =========================================================================
   20. RÉVÉLATIONS AU SCROLL
   ========================================================================= */

/*
 * Les états masqués sont conditionnés à la classe `js` posée par le script
 * inline du <head> : sans JavaScript, tout reste visible.
 */

/*
 * L'opacité se règle plus court que le déplacement : le texte devient
 * lisible tôt et finit de se poser ensuite. Les faire durer autant l'un que
 * l'autre donne un mouvement en bloc, qui se lit comme rigide.
 */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.75s var(--ease), transform 1.15s var(--ease-soft);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}

.js [data-reveal].is-visible { opacity: 1; transform: none; }

/*
 * Rideau vertical sur les images.
 *
 * Le clip porte sur l'ENFANT, jamais sur la figure elle-même : un clip-path
 * sur la cible observée réduit sa boîte visible à zéro, IntersectionObserver
 * renvoie alors un ratio de 0 et la révélation ne se déclenche jamais.
 */
/*
 * L'image glisse par en dessous à l'intérieur de son cadre, qui fait masque
 * (`overflow: hidden`). Elle entre légèrement agrandie et se pose à l'échelle
 * 1 : le mouvement se termine par un apaisement plutôt que par un arrêt net.
 *
 * On ne clippe surtout pas la figure elle-même : c'est la cible observée, et
 * un clip-path y ramènerait sa boîte visible à zéro — IntersectionObserver
 * renverrait alors un ratio nul et la révélation ne partirait jamais.
 */
.js [data-reveal-media] img {
	--revealY: 103%;
	--zoom: 1.06;
}

.js [data-reveal-media].is-visible img {
	--revealY: 0%;
	--zoom: 1;
}

.js .lines .line > span {
	transform: translateY(110%);
}

/* -------------------------------------------------------------------------
 * Titres révélés mot à mot
 * ---------------------------------------------------------------------- */

/*
 * Le mot est un masque, son contenu glisse dedans. `inline-block` est
 * indispensable pour que le masque épouse le mot ; le couple
 * padding/margin négatif en bas rattrape les jambages (g, p, q) que
 * `overflow: hidden` couperait sinon.
 */
.word {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding-bottom: 0.14em;
	margin-bottom: -0.14em;
}

.js .words .word > span {
	display: inline-block;
	transform: translateY(110%);
	transition: transform 0.95s var(--ease-soft);
	/* Chaque mot part un cran après le précédent. */
	transition-delay: calc(var(--w, 0) * 55ms + var(--reveal-delay, 0ms));
}

.js .words.is-visible .word > span { transform: translateY(0); }

/*
 * Le titre découpé ne bouge plus en bloc : ce sont les mots qui portent le
 * mouvement. Sans ça, les deux animations se superposeraient.
 */
.js [data-reveal].words {
	opacity: 1;
	transform: none;
}

/*
 * L'état révélé DOIT être déclaré ici, après l'état masqué, et porter une
 * spécificité supérieure. Avec `.lines.is-visible .line > span` laissé plus
 * haut dans le fichier, les deux règles étaient à égalité (0,3,1) et c'est
 * l'ordre qui tranchait : le texte restait bloqué hors cadre.
 */
.js .lines.is-visible .line > span {
	transform: translateY(0);
}

/* =========================================================================
   21. RESPONSIVE
   ========================================================================= */

@media (max-width: 1100px) {
	.intro {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(1rem, 2.5vw, 1.875rem);
	}

	.intro__body {
		grid-column: 1 / -1;
		order: -1;
		margin-bottom: 2rem;
		max-width: 520px;
	}


	.benefits { grid-template-columns: minmax(0, 1fr); }
	.benefits__media { order: -1; }

	.offers,
	.posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	:root { --header-h: 68px; }

	.nav-toggle { display: block; }

	/*
	 * Le tiroir couvre vraiment tout l'écran.
	 *
	 * En `z-index: -1`, il était peint SOUS le fond et le filet de la barre
	 * d'en-tête — qui partagent son contexte d'empilement. Le panneau beige
	 * semblait donc commencer 86 px plus bas, coupé par un trait. Ici il
	 * passe au-dessus, et seuls la marque et le bouton sont remontés
	 * par-dessus lui pour rester cliquables.
	 */
	/*
	 * Sélecteur repris au complet pour annuler le placement de bureau.
	 *
	 * Le menu centré du bureau pose `justify-self: center` via
	 * `.site-header__inner .site-nav`, qui pèse plus lourd que `.site-nav`.
	 * Un élément en position fixe enfant d'une grille honore encore
	 * `justify-self` : le tiroir gardait sa hauteur pleine mais se rétractait
	 * à la largeur de son contenu — 253 px sur 360.
	 */
	.site-header__inner .site-nav {
		grid-column: auto;
		justify-self: stretch;
		position: fixed;
		inset: 0;
		z-index: 0;
		background: var(--beige);
		color: var(--brown);
		display: grid;
		align-content: center;
		justify-items: center;
		padding: var(--header-h) var(--gutter) 3rem;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.55s var(--ease), visibility 0.55s;
	}

	.site-nav.is-open { opacity: 1; visibility: visible; }

	/* Au-dessus du tiroir : sinon le bouton qui l'a ouvert passe dessous. */
	.site-header__inner .brand,
	.site-header__actions { position: relative; z-index: 1; }

	/* Le tiroir apporte lui-même le fond : le filet de la barre traverserait
	   le panneau d'un trait au milieu de nulle part. */
	.site-header.nav-open { background: transparent; border-bottom-color: transparent; }

	.site-nav ul { flex-direction: column; gap: 1.75rem; text-align: center; }

	.site-nav a {
		font-family: var(--font-display);
		font-size: 1.75rem;
		letter-spacing: 0.04em;
		text-transform: none;
		opacity: 1;
	}

	.site-header__actions .header-btn { display: none; }

	.hero__scroll { display: none; }

	.hero__inner { grid-template-columns: minmax(0, 1fr); }


	.step {
		grid-template-columns: 3rem minmax(0, 1fr);
		gap: 0.5rem 1.5rem;
	}

	.step p { grid-column: 2; }

	/*
	 * Les deux sélecteurs sont nécessaires.
	 *
	 * `.corner` seul ne suffit pas : l'alternance est écrite sur
	 * `.corner:nth-child(even)`, qui pèse plus lourd et gardait donc son
	 * gabarit à trois colonnes en mobile. Sur les 270 px utiles, ses pistes
	 * 676fr/417fr/417fr donnaient 121 px à la première image et 75 px à la
	 * seconde — d'où une photo minuscule une rangée sur deux.
	 */
	.corner,
	.corner:nth-child(even) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem 25px;
	}

	.corner__body {
		grid-column: 1 / -1;
		order: -1 !important;
		align-content: start;
		padding-block: 0 0.5rem;
		gap: 1.25rem;
	}

	.steps { grid-template-columns: minmax(0, 1fr); border-top: 0; }

	.step {
		border-right: 0;
		border-top: 1px solid rgba(248, 243, 236, 0.22);
		padding-inline: 0;
		justify-items: start;
		text-align: left;
	}
}

@media (max-width: 720px) {
	.intro { grid-template-columns: minmax(0, 1fr); }
	.intro__media--right { display: none; }

	.offers,
	.posts,
	.footer__top { grid-template-columns: minmax(0, 1fr); }

	.footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   22. PRÉFÉRENCES UTILISATEUR
   ========================================================================= */

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

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

	.js [data-reveal],
	.js .lines .line > span {
		opacity: 1;
		transform: none;
	}

	.js [data-reveal-media] img {
		--revealY: 0%;
		--zoom: 1;
	}
}

.admin-bar .site-header { top: 32px; }

@media screen and (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }

	/* Le tiroir aussi : en `inset: 0` il glissait sous la barre
	   d'administration, et le menu paraissait mal calé en haut. */
	.admin-bar .site-nav { top: 46px; }
}

/* =========================================================================
   23. CALÉA KITCHEN
   =========================================================================
   Module autonome de `template-kitchen.php`. Tout est préfixé `kitchen-` et
   les adaptations mobiles vivent ici, pas dans la section 21 : la page peut
   ainsi être reprise — ou retirée — d'un seul bloc.
   ========================================================================= */

/* --- Les plats : vignette carrée, texte à côté ------------------------- */

.kitchen-plats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(2rem, 4vw, 3.5rem);
}

.kitchen-plat {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
gap: clamp(1.25rem, 2.5vw, 2rem);
align-items: center;
}

/*
 * Un seul plat dans son groupe — les soupes, les salades. Il prend toute la
 * largeur au lieu de laisser une colonne vide à côté de lui, et sa vignette
 * se resserre pour ne pas devenir démesurée à cette échelle.
 */
.kitchen-plats--seul { grid-template-columns: minmax(0, 1fr); }

.kitchen-plats--seul .kitchen-plat {
grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
}

.kitchen-plat__corps { display: grid; gap: 0.7rem; align-content: center; }

.kitchen-plat__badge {
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--green);
}

.kitchen-plat__nom {
font-family: var(--font-display);
font-size: var(--fs-h4);
line-height: 1.15;
}

.kitchen-plat__texte {
font-size: var(--fs-body);
color: var(--brown-soft);
}

/* Le chiffre à l'échelle d'un titre, comme dans `rates__price`. */
.kitchen-plat__prix {
margin-top: 0.2rem;
font-family: var(--font-display);
font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
line-height: 1;
color: var(--green);
}

/*
 * Régimes alimentaires : une énumération en italique, séparée par des points
 * médians. En pastilles bordées, trois mentions sur un plat prenaient le pas
 * sur son nom — l'information est utile, elle n'est pas le sujet.
 */
.kitchen-tags {
display: flex;
flex-wrap: wrap;
gap: 0.3rem 0;
font-size: 0.8125rem;
font-style: italic;
color: var(--brown-soft);
}

.kitchen-tags li { display: inline-flex; align-items: baseline; }

.kitchen-tags li + li::before {
content: "·";
margin-inline: 0.55rem;
font-style: normal;
opacity: 0.55;
}

/* --- Boissons : des lignes de prix, pas des vignettes ------------------ */

/*
 * `rates__meta` est taillé pour « 45 min » : capitales et interlettrage à
 * 0.2em. Une description de boisson y devient une bouillie illisible, alors
 * qu'elle fait ici une phrase entière. On la ramène au texte courant.
 */
.kitchen-boissons .rates__meta {
margin-top: 0.6rem;
font-size: var(--fs-body);
letter-spacing: 0;
text-transform: none;
max-width: 54ch;
}

.kitchen-neuf {
display: inline-block;
vertical-align: middle;
margin-left: 0.7rem;
padding: 0.45em 0.75em 0.4em;
border-radius: 999px;
background: var(--green);
color: var(--beige);
font-family: var(--font-sans);
font-size: 0.5625rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
line-height: 1;
}

/* --- La formule : trois temps, un montant ----------------------------- */

.kitchen-formule {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: clamp(1.5rem, 4vw, 3.5rem);
margin-top: clamp(2rem, 4vw, 3rem);
padding: clamp(2rem, 4vw, 3.5rem);
border: 1px solid rgba(248, 243, 236, 0.22);
}

.kitchen-formule__temps {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}

.kitchen-formule__temps li {
font-family: var(--font-display);
font-size: var(--fs-h4);
}

/* Le « + » qui relie les trois temps vient de la CSS : ce n'est pas du
   contenu, et il ne doit pas être lu à voix haute. */
.kitchen-formule__temps li + li::before {
content: "+";
margin-inline: clamp(0.9rem, 2.2vw, 1.75rem);
color: rgba(248, 243, 236, 0.5);
}

.kitchen-formule__prix {
font-family: var(--font-display);
font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem);
line-height: 0.95;
}

/* --- Les engagements -------------------------------------------------- */

/* Un filet au-dessus de chaque colonne : la grille se lit sans qu'on ait à
   border quatre cartes. */
.kitchen-engagements {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1.75rem, 3.5vw, 3rem);
margin-top: clamp(2rem, 4vw, 3rem);
}

.kitchen-engagements li {
padding-top: 1.25rem;
border-top: 1px solid var(--line);
}

.kitchen-engagements h3 {
margin-bottom: 0.7rem;
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--green);
}

.kitchen-engagements p {
font-size: var(--fs-body);
color: var(--brown-soft);
}

/* --- Adaptations ------------------------------------------------------ */

@media (max-width: 1100px) {
/* Deux plats côte à côte, chacun coupé en deux colonnes : à cette largeur
  le texte tombe à quatre ou cinq mots par ligne. Un plat par rangée. */
.kitchen-plats { grid-template-columns: minmax(0, 1fr); }

.kitchen-plat,
.kitchen-plats--seul .kitchen-plat {
grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
}
}

@media (max-width: 900px) {
.kitchen-engagements { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.kitchen-formule { flex-direction: column; }
}

@media (max-width: 560px) {
/* La vignette passe au-dessus du texte : en dessous de cette largeur, une
  colonne d'image ne laisse plus de place lisible à côté d'elle. */
.kitchen-plat,
.kitchen-plats--seul .kitchen-plat {
grid-template-columns: minmax(0, 1fr);
}

.kitchen-engagements { grid-template-columns: minmax(0, 1fr); }
}