/* =========================================================================
   RYTHM Lagree Studio, feuille principale
   Mobile d'abord. Aucun framework. Les couleurs viennent toutes de tokens.css.
   ========================================================================= */

/* ---------- Fonte auto-hébergée ---------- */
@font-face {
	font-family: "Archivo";
	src: url("../static/fonts/archivo-var-latin.woff2") format("woff2-variations");
	font-weight: 300 900;
	font-stretch: 62% 125%;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Remise à zéro ciblée ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--noir);
	color: var(--creme);
	font-family: var(--f-texte);
	font-size: var(--t-md);
	font-variation-settings: "wdth" var(--wdth-normal), "wght" 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

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

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; }

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

/* Focus clavier visible partout, y compris sur les bandeaux clairs. */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}
.sur-creme :focus-visible { outline-color: var(--noir-3); }

/* ---------- Utilitaires ---------- */
.enrobe { width: var(--page); margin-inline: auto; }
.enrobe-etroit { width: var(--page-etroit); margin-inline: auto; }

.hors-ecran {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Lien d'évitement, obligatoire pour la navigation au clavier. */
.evitement {
	position: absolute;
	top: -100%; left: var(--e-4);
	z-index: 100;
	padding: var(--e-3) var(--e-4);
	background: var(--accent);
	color: var(--accent-texte);
	font-weight: 700;
}
.evitement:focus { top: var(--e-4); }

/* ---------- Typographie de composition ---------- */
.surtitre {
	font-size: var(--t-xs);
	font-variation-settings: "wdth" var(--wdth-etroit), "wght" 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0;
}

.titre-section {
	font-size: var(--t-3xl);
	font-variation-settings: "wdth" var(--wdth-large), "wght" 800;
	line-height: 0.98;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--texte);
}

.chapeau {
	font-size: var(--t-lg);
	color: var(--texte-doux);
	max-width: 60ch;
	text-wrap: pretty;
}

.texte { color: var(--texte-doux); max-width: 65ch; text-wrap: pretty; }

/* ---------- Sections ---------- */
.section {
	padding-block: var(--e-9);
	background: var(--fond);
	color: var(--texte);
}
.section > .enrobe,
.section > .enrobe-etroit {
	display: flex;
	flex-direction: column;
	align-items: flex-start;   /* sinon un bouton isolé s'étire sur toute la largeur */
	gap: var(--e-7);
}
/* Les blocs de contenu occupent bien la largeur, seuls les boutons ne le font pas. */
.section > .enrobe > *:not(.bouton),
.section > .enrobe-etroit > *:not(.bouton) { align-self: stretch; }
.section-entete {
	display: flex;
	flex-direction: column;
	gap: var(--e-3);
}

/* ---------- Boutons ---------- */
.bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--e-2);
	padding: var(--e-4) var(--e-6);
	background: var(--accent);
	color: var(--accent-texte);
	font-size: var(--t-sm);
	font-variation-settings: "wdth" var(--wdth-normal), "wght" 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--rayon);
	transition: transform var(--duree-courte) var(--courbe),
	            filter var(--duree-courte) var(--courbe);
}
.bouton:hover { filter: brightness(1.12); transform: translateY(-1px); }
.bouton:active { transform: translateY(0); }

.bouton-fantome {
	background: transparent;
	color: var(--texte);
	border: 1px solid var(--filet);
}
.bouton-fantome:hover { border-color: var(--texte); filter: none; }

/* Paire d'appels à l'action. Un bouton isolé dans une colonne flex s'étirerait
   sur toute la largeur : les envelopper dans ce bloc les garde à leur taille et
   les aligne côte à côte, l'un sous l'autre sur mobile. */
.appel-bloc {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e-4);
	margin: 0;
}

/* =========================================================================
   EN-TÊTE
   ========================================================================= */
.entete {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 20;
	padding-block: var(--e-5);
}
/* En-tête intelligent (14 septembre 2026). Posé et transparent sur l'écran
   d'arrivée, comme avant ; dès qu'on descend il s'efface vers le haut, dès
   qu'on remonte il revient sur un fond noir translucide. Piloté par main.js
   (initEntete), donc réservé à la classe js : sans script, l'en-tête reste
   posé. En reduced-motion, pareil : rien ne bouge. Le menu mobile ouvert
   force l'affichage, sinon la croix partirait avec l'en-tête. */
.js .entete {
	position: fixed;
	/* 350 ms : --duree-longue (900 ms) est faite pour les apparitions, pas
	   pour un en-tête qui doit répondre au geste. */
	transition: transform 0.35s var(--courbe),
	            background-color 0.35s var(--courbe),
	            padding 0.35s var(--courbe);
	will-change: transform;
}
.js .entete--fond {
	padding-block: var(--e-4);
	background: rgba(11, 10, 9, 0.84);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.js .entete--cachee { transform: translateY(-100%); }
.js .menu-ouvert .entete { transform: none; }
@media (prefers-reduced-motion: reduce) {
	.js .entete { position: absolute; transition: none; }
	.js .entete--cachee { transform: none; }
	.js .entete--fond { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; padding-block: var(--e-5); }
}
.entete .enrobe {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-5);
}
.entete-marque { display: block; width: 30px; color: var(--creme); }
.entete-marque svg path { fill: currentColor; }

.nav-principale { display: none; }
.nav-principale ul {
	display: flex;
	align-items: center;
	gap: var(--e-6);
}
.nav-principale a {
	font-size: var(--t-xs);
	font-variation-settings: "wdth" var(--wdth-etroit), "wght" 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--gris-clair);
	transition: color var(--duree-courte) var(--courbe);
}
.nav-principale a:hover { color: var(--creme); }
.entete .bouton { display: none; }

/* ---------- Menu mobile ----------
   Sous 900 px, la navigation n'existait pas : seul le logo restait, sur une
   page de dix-neuf écrans. Le bouton ci-dessous ouvre la même liste de liens
   en plein écran. La barre d'action du bas reste au-dessus du voile pour que
   Appeler, WhatsApp et Réserver restent atteignables menu ouvert. */
.menu-bouton {
	flex: 0 0 auto;
	width: 44px;               /* cible tactile confortable */
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: calc(-1 * var(--e-3));   /* le trait s'aligne sur la marge */
	background: none;
	border: 0;
	color: var(--creme);
	cursor: pointer;
}
.menu-barres {
	position: relative;
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	transition: background var(--duree-courte) var(--courbe);
}
.menu-barres::before,
.menu-barres::after {
	content: "";
	position: absolute;
	left: 0;
	width: 22px;
	height: 2px;
	background: currentColor;
	transition: transform var(--duree-moyenne) var(--courbe);
}
.menu-barres::before { transform: translateY(-7px); }
.menu-barres::after  { transform: translateY(7px); }

/* Ouvert : les trois traits deviennent une croix, le trait du milieu s'efface. */
.menu-ouvert .menu-barres { background: transparent; }
.menu-ouvert .menu-barres::before { transform: rotate(45deg); }
.menu-ouvert .menu-barres::after  { transform: rotate(-45deg); }

/* La page ne défile plus derrière le voile. */
.menu-ouvert { overflow: hidden; }

@media (max-width: 899px) {
	/* L'en-tête est en absolu, en haut du hero : menu ouvert et page défilée,
	   il serait hors écran, donc le bouton de fermeture avec lui. On le fixe
	   le temps de l'ouverture, au-dessus du voile. */
	.menu-ouvert .entete {
		position: fixed;
		z-index: 60;
	}
	/* Le voile est un enfant de l'en-tête : sans cela il recouvrirait ses
	   propres frères, dont le bouton de fermeture, et le menu deviendrait un
	   piège. Constaté au doigt le 8 septembre, la croix n'était pas cliquable. */
	.menu-ouvert .entete-marque,
	.menu-ouvert .menu-bouton {
		position: relative;
		z-index: 51;
	}
	.menu-ouvert .nav-principale {
		display: flex;
		position: fixed;
		inset: 0;
		z-index: 50;
		flex-direction: column;
		justify-content: center;
		background: var(--noir);
		padding: var(--e-9) var(--e-6) calc(var(--barre-mobile) + var(--e-6));
	}
	.menu-ouvert .nav-principale ul {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--e-4);
	}
	.menu-ouvert .nav-principale a {
		display: block;
		padding-block: var(--e-2);
		font-size: var(--t-2xl);
		font-variation-settings: "wdth" var(--wdth-large), "wght" 700;
		letter-spacing: 0.01em;
		color: var(--creme);
	}
	/* Au-dessus de l'en-tête, sinon le voile la recouvre : l'en-tête porte le
	   voile, donc tout son sous-arbre passe devant. Appeler, WhatsApp et
	   Réserver restent atteignables menu ouvert, c'est tout l'intérêt. */
	.menu-ouvert .barre-mobile { z-index: 65; }
}

@media (min-width: 900px) {
	.menu-bouton { display: none; }
	.nav-principale { display: block; }
	.entete .bouton { display: inline-flex; padding: var(--e-3) var(--e-5); }
}

/* =========================================================================
   HERO
   Mobile  : un écran, la vraie photo du studio à sa résolution native.
   Desktop : la barre LED en CSS par défaut. Avec JavaScript et hors
             reduced-motion, la section fait quatre écrans de haut, la scène
             reste épinglée et main.js dessine la séquence d'images au rythme
             du défilement, un chapitre de texte après l'autre.
   ========================================================================= */
.hero {
	position: relative;
	min-height: 100vh;    /* repli pour les navigateurs sans svh */
	min-height: 100svh;
	background: #050403;
}
/* La scène : ce qui reste à l'écran. overflow hidden ici et pas sur .hero,
   sinon le collage (sticky) ne fonctionne pas. */
.hero-scene {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: grid;
	grid-template-rows: 1fr auto;
	overflow: hidden;
	padding-bottom: var(--barre-mobile);
}

/* Photo, mobile uniquement. 1080 px de large affichés sur 390 : parfaitement net. */
.hero-photo {
	position: absolute;
	inset: 0;
	/* Écran d'arrivée sur mobile. Le portrait du fondateur a été retiré le
	   8 septembre 2026 à sa demande : il ne se trouvait pas à son avantage, et
	   un visage n'est de toute façon pas ce qui vend un studio. À la place, le
	   lieu lui-même, cadré sur le plateau LAGREE et la barre LED. Le visuel
	   vient du 2K de la séquence du hero (assets/higgsfield/out/09-closeup.png),
	   recadré en portrait : c'est exactement l'image sur laquelle s'achève la
	   séquence de bureau, les deux écrans racontent donc la même chose. */
	background-image: url("../static/img/hero-studio-mobile.webp");
	background-size: cover;
	background-position: center;
}
.hero-voile {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(5, 4, 3, 0.82) 0%,
		rgba(5, 4, 3, 0.55) 38%,
		rgba(5, 4, 3, 0.72) 72%,
		rgba(5, 4, 3, 0.95) 100%
	);
}

/* La toile où main.js dessine la séquence. Desktop immersif uniquement. */
.hero-toile {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: none;
}

/* La barre LED. Desktop uniquement, et seulement tant que la toile n'a rien dessiné. */
.hero-led {
	position: absolute;
	top: 12%;
	bottom: 12%;
	left: 88%;
	width: 3px;
	display: none;
	background: linear-gradient(to bottom, var(--rouge), #FF4A28 45%, var(--rouge));
	box-shadow:
		0 0 6px var(--rouge),
		0 0 22px #FF4A28,
		0 0 70px rgba(252, 187, 45, 0.5),
		0 0 190px rgba(255, 38, 39, 0.28);
	animation: respire 9s ease-in-out infinite;
}
.hero-led::after {          /* le fin trait sombre au centre du néon réel */
	content: "";
	position: absolute;
	inset: 0 38%;
	background: #17110E;
}
.hero-lueur {
	position: absolute;
	inset: 0;
	display: none;
	background: radial-gradient(70% 90% at 88% 45%, rgba(255, 58, 32, 0.15), rgba(255, 58, 32, 0) 62%);
}
@keyframes respire {
	0%, 100% { opacity: 0.88; }
	50%      { opacity: 1; }
}

/* Les chapitres. Hors mode immersif ils se suivent simplement, centrés. */
.hero-contenu {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--e-8);
	text-align: center;
	padding: calc(var(--e-9) + 3rem) 0 var(--e-7);
	width: var(--page);
	margin-inline: auto;
}
.chapitre {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--e-5);
}

.hero-logo { width: 100%; max-width: 340px; margin-inline: auto; }
.hero-logo svg { width: 100%; height: auto; }
.hero-logo svg path { fill: var(--creme); }

/* Le H1 porte la requête cible et reste visible. Aucun texte caché. */
.hero-h1 {
	font-size: var(--t-md);
	font-variation-settings: "wdth" var(--wdth-normal), "wght" 400;
	color: var(--gris-clair);
	line-height: 1.5;
	max-width: 34ch;
	text-wrap: balance;
}
.hero-h1 strong {
	font-variation-settings: "wdth" var(--wdth-normal), "wght" 600;
	color: var(--creme);
}

.hero-accroche {
	font-size: var(--t-3xl);
	font-variation-settings: "wdth" var(--wdth-large), "wght" 800;
	line-height: 0.98;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: var(--creme);
	text-wrap: balance;
}
.hero-sous {
	font-size: var(--t-lg);
	color: var(--gris-clair);
	max-width: 40ch;
}

.hero-pied {
	position: relative;
	z-index: 2;
	width: var(--page);
	margin-inline: auto;
	padding-bottom: var(--e-5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-4);
	font-size: var(--t-xs);
	font-variation-settings: "wdth" var(--wdth-etroit), "wght" 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gris);
}
.hero-adresse { display: none; }
.hero-defiler { display: none; }

/* Invitation à écouter. Coupée par défaut, la boucle n'est ni téléchargée ni
   jouée avant le clic : une musique qui démarre seule est bloquée par les
   navigateurs, pénalise le référencement et fait fuir. Le pari est donc de
   donner envie, pas de forcer. */
.son {
	display: inline-flex;
	align-items: center;
	gap: var(--e-3);
	padding: var(--e-3) var(--e-5);
	border: 1px solid var(--ligne);
	border-radius: 999px;
	background: rgba(11, 10, 9, 0.55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--gris-clair);
	font-size: var(--t-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color var(--duree-courte) var(--courbe),
	            border-color var(--duree-courte) var(--courbe),
	            box-shadow var(--duree-moyenne) var(--courbe);
}
.son:hover { color: var(--creme); border-color: var(--gris); }
.son[aria-pressed="true"] { color: var(--creme); border-color: var(--creme); }

/* Quatre barres d'égaliseur. Au repos elles gardent des hauteurs différentes :
   sans animation, le bouton dit encore « musique » et non « réglage ». */
.son-barres {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 14px;
}
.son-barres i {
	display: block;
	width: 2px;
	background: currentColor;
	transform-origin: bottom center;
}
.son-barres i:nth-child(1) { height: 6px; }
.son-barres i:nth-child(2) { height: 12px; }
.son-barres i:nth-child(3) { height: 8px; }
.son-barres i:nth-child(4) { height: 14px; }
.son[aria-pressed="true"] .son-barres i {
	animation: egaliseur 880ms var(--courbe) infinite alternate;
}
.son[aria-pressed="true"] .son-barres i:nth-child(2) { animation-duration: 640ms; }
.son[aria-pressed="true"] .son-barres i:nth-child(3) { animation-duration: 1080ms; }
.son[aria-pressed="true"] .son-barres i:nth-child(4) { animation-duration: 760ms; }
@keyframes egaliseur {
	from { transform: scaleY(0.3); }
	to   { transform: scaleY(1); }
}

/* Trois respirations au bout de quelques secondes, puis plus rien : assez pour
   attraper l'oeil, pas assez pour agacer. Posée par main.js. */
.son--invite {
	color: var(--creme);
	border-color: var(--gris);
	animation: souffle 2600ms var(--courbe) 3;
}
@keyframes souffle {
	0%, 100% { box-shadow: 0 0 0 0 rgba(241, 238, 231, 0); }
	50%      { box-shadow: 0 0 0 5px rgba(241, 238, 231, 0.05),
	                       0 0 26px rgba(241, 238, 231, 0.16); }
}

@media (prefers-reduced-motion: reduce) {
	.son-barres i,
	.son--invite { animation: none; }
}

@media (min-width: 900px) {
	.hero-photo,
	.hero-voile { display: none; }
	.hero-led,
	.hero-lueur { display: block; }
	.hero-scene { padding-bottom: 0; }
	/* Réduit de 660 à 420 px le 5 septembre 2026 : le client trouvait le
	   logo trop gros et déséquilibré sur l'écran d'arrivée. */
	.hero-logo { max-width: 420px; }
	.hero-adresse { display: block; }
}

/* -------------------------------------------------------------------------
   Mode immersif. Trois conditions, toutes en CSS : JavaScript présent (classe
   js posée dans l'en-tête), écran desktop, pas de reduced-motion. Et une
   quatrième posée par PHP : la classe hero-sequence n'existe que si la
   séquence d'images a été générée. Si main.js ne se charge pas, l'en-tête
   retire la classe js (voir render.php) et tout redevient l'écran d'arrivée
   simple. S'il s'interrompt en route, le chapitre 1 et la barre LED restent
   visibles : le même écran, juste plus haut.
   ------------------------------------------------------------------------- */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
	.js .hero-sequence { height: 400vh; height: 400svh; min-height: 0; }
	.js .hero-sequence .hero-scene {
		position: sticky;
		top: 0;
		height: 100vh;
		height: 100svh;
		min-height: 0;
	}
	.js .hero-sequence .hero-toile { display: block; }

	/* Dès que la toile a dessiné une image, la barre CSS s'efface. */
	.js .hero-sequence.sequence--toile .hero-led,
	.js .hero-sequence.sequence--toile .hero-lueur { display: none; }

	/* Voile de lisibilité : le texte vit sur les deux tiers gauche, sombres. */
	.js .hero-sequence.sequence--toile .hero-voile {
		display: block;
		background:
			linear-gradient(to right, rgba(5, 4, 3, 0.6) 0%, rgba(5, 4, 3, 0.35) 50%, rgba(5, 4, 3, 0) 78%),
			linear-gradient(to bottom, rgba(5, 4, 3, 0.5) 0%, rgba(5, 4, 3, 0.05) 30%, rgba(5, 4, 3, 0.15) 70%, rgba(5, 4, 3, 0.85) 100%);
	}

	.js .hero-sequence .hero-contenu {
		position: absolute;
		inset: 0;
		width: 100%;
		padding: 0;
		display: block;
	}
	/* Le contenu étant sorti du flux, le pied serait placé en première ligne
	   de la grille et étiré sur toute la scène : on le renvoie en bas. */
	.js .hero-sequence .hero-pied {
		grid-row: 2;
		align-self: end;
	}
	.js .hero-sequence .chapitre {
		position: absolute;
		inset: 0;
		width: var(--page);
		margin-inline: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		opacity: 0;
		transform: translateY(22px);
		pointer-events: none;
		/* Masqué par l'opacité seulement, jamais par visibility : le H1 et le
		   bouton restent dans l'arbre d'accessibilité et le bouton reste
		   focalisable, main.js amène alors le visiteur sur le chapitre.
		   Un chapitre qui sort s'efface vite, un chapitre qui entre prend son
		   temps : même sur un défilement brusque, deux textes ne se superposent
		   jamais. */
		transition:
			opacity var(--duree-moyenne) var(--courbe),
			transform var(--duree-moyenne) var(--courbe);
	}
	/* Sans JS actif, le premier chapitre reste visible : c'est l'écran d'arrivée. */
	.js .hero-sequence .chapitre-1,
	.js .hero-sequence .chapitre--vu {
		opacity: 1;
		transform: none;
		pointer-events: auto;
		transition:
			opacity var(--duree-longue) var(--courbe),
			transform var(--duree-longue) var(--courbe);
	}
	.js .hero-sequence.sequence--pilote .chapitre-1:not(.chapitre--vu) {
		opacity: 0;
		transform: translateY(-22px);
		pointer-events: none;
		transition:
			opacity var(--duree-moyenne) var(--courbe),
			transform var(--duree-moyenne) var(--courbe);
	}
	.js .hero-sequence .chapitre-1 { align-items: center; text-align: center; }
	.js .hero-sequence .chapitre-2,
	.js .hero-sequence .chapitre-3 { align-items: flex-start; text-align: left; }

	.js .hero-sequence .chapitre-2 .hero-h1 {
		font-size: var(--t-xl);
		max-width: 26ch;
		line-height: 1.3;
		color: var(--gris-clair);
	}
	.js .hero-sequence .chapitre-2 .hero-h1 strong {
		display: block;
		margin-bottom: var(--e-4);
		font-size: var(--t-4xl);
		font-variation-settings: "wdth" var(--wdth-large), "wght" 800;
		line-height: 0.98;
		letter-spacing: -0.015em;
		text-transform: uppercase;
		color: var(--creme);
		max-width: 12ch;
	}
	/* La suite du H1 devient une phrase à part : virgule effacée, majuscule. */
	.js .hero-sequence .chapitre-2 .hero-h1-virgule { display: none; }
	.js .hero-sequence .chapitre-2 .hero-h1-suite { display: block; }
	.js .hero-sequence .chapitre-2 .hero-h1-suite::first-letter { text-transform: uppercase; }
	.js .hero-sequence .chapitre-3 .hero-accroche { font-size: var(--t-4xl); max-width: 13ch; }

	/* Invitation à défiler, effacée dès le premier mouvement. */
	.js .hero-sequence .hero-defiler {
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		gap: var(--e-3);
		color: var(--gris);
		transition: opacity var(--duree-moyenne) var(--courbe);
	}
	.js .hero-sequence .hero-defiler-trait {
		width: 1px;
		height: 40px;
		background: linear-gradient(to bottom, var(--creme), transparent);
		animation: defiler 2.4s ease-in-out infinite;
	}
	.js .hero-sequence.sequence--defile .hero-defiler { opacity: 0; }
}
/* -------------------------------------------------------------------------
   Sections en séquence (méthode, studio). Même mécanique que le hero :
   hors mode immersif, les chapitres se suivent en flux, lisibles partout ;
   en mode immersif, la piste fait plusieurs écrans (--ecrans), la scène
   reste collée et main.js dessine la séquence derrière les chapitres.
   ------------------------------------------------------------------------- */
.section.sequence { padding-block: 0; }
.section.sequence .sequence-toile,
.section.sequence .sequence-voile { display: none; }
.section.sequence .sequence-scene {
	position: relative;
	padding-block: var(--e-9);
}
.section.sequence .sequence-contenu {
	position: relative;
	z-index: 2;
	width: var(--page);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--e-8);
}
.section.sequence .chapitre {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--e-4);
}
.chapitre-accroche {
	font-size: var(--t-4xl);
	font-variation-settings: "wdth" var(--wdth-large), "wght" 800;
	line-height: 0.98;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: var(--texte);
	text-wrap: balance;
}
.chapitre-texte {
	font-size: var(--t-lg);
	color: var(--texte-doux);
	max-width: 52ch;
	text-wrap: pretty;
}
.chapitre-numero {
	font-size: var(--t-xs);
	font-variation-settings: "wdth" var(--wdth-etroit), "wght" 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
}
/* Ce qui suit la piste (conclusion, encart, photos) reste en flux. */
.section.sequence .sequence-suite {
	width: var(--page);
	margin-inline: auto;
	padding-block: var(--e-9);
	display: flex;
	flex-direction: column;
	gap: var(--e-7);
}

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
	.js .section.sequence .sequence-piste {
		height: calc(var(--ecrans, 4) * 100vh);
		height: calc(var(--ecrans, 4) * 100svh);
	}
	.js .section.sequence .sequence-scene {
		position: sticky;
		top: 0;
		height: 100vh;
		height: 100svh;
		padding: 0;
		overflow: hidden;
		background: #050403;
	}
	.js .section.sequence .sequence-toile {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}
	/* Voile de lisibilité : le texte vit sur la moitié gauche. */
	.js .section.sequence.sequence--toile .sequence-voile {
		display: block;
		position: absolute;
		inset: 0;
		background:
			linear-gradient(to right, rgba(5, 4, 3, 0.72) 0%, rgba(5, 4, 3, 0.45) 45%, rgba(5, 4, 3, 0.05) 75%),
			linear-gradient(to bottom, rgba(5, 4, 3, 0.45) 0%, rgba(5, 4, 3, 0.05) 30%, rgba(5, 4, 3, 0.1) 70%, rgba(5, 4, 3, 0.8) 100%);
	}
	.js .section.sequence .sequence-contenu {
		position: absolute;
		inset: 0;
		width: 100%;
		display: block;
	}
	.js .section.sequence .chapitre {
		position: absolute;
		inset: 0;
		width: var(--page);
		margin-inline: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		gap: var(--e-4);
		opacity: 0;
		transform: translateY(22px);
		pointer-events: none;
		transition:
			opacity var(--duree-moyenne) var(--courbe),
			transform var(--duree-moyenne) var(--courbe);
	}
	.js .section.sequence .chapitre--vu {
		opacity: 1;
		transform: none;
		pointer-events: auto;
		transition:
			opacity var(--duree-longue) var(--courbe),
			transform var(--duree-longue) var(--courbe);
	}
	/* Les piliers du client sont longs : taille de texte courante et largeur
	   contenue pour tenir dans un écran de 768 px de haut. */
	.js .section.sequence .chapitre-accroche { font-size: var(--t-3xl); max-width: 14ch; }
	.js .section.sequence .chapitre-titre { font-size: var(--t-lg); }
	.js .section.sequence .chapitre-texte { font-size: var(--t-md); max-width: 52ch; line-height: 1.55; }
}

@keyframes defiler {
	0%   { transform: scaleY(0); transform-origin: top; }
	45%  { transform: scaleY(1); transform-origin: top; }
	55%  { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

/* =========================================================================
   ÉTAPES DE RÉSERVATION
   Les quatre étapes de l'application Xplor Active, chemin principal de la
   réservation. Liste ordonnée, numéro en accent, une colonne sur mobile,
   quatre sur desktop.
   ========================================================================= */
.etapes {
	display: grid;
	gap: var(--e-5);
	counter-reset: etape;
}
.etape {
	display: flex;
	flex-direction: column;
	gap: var(--e-2);
	padding: var(--e-5);
	border: 1px solid var(--filet);
	border-radius: var(--rayon);
	background: var(--surface);
}
.etape-numero {
	font-size: var(--t-xs);
	font-variation-settings: "wdth" var(--wdth-etroit), "wght" 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
}
.etape-titre {
	font-size: var(--t-lg);
	font-variation-settings: "wdth" var(--wdth-normal), "wght" 600;
	color: var(--texte);
}
.etape-texte { color: var(--texte-doux); text-wrap: pretty; }
/* Le code studio, à recopier dans l'application : mis en évidence. */
.etape-code {
	display: inline-block;
	padding: 0 var(--e-2);
	border: 1px solid var(--texte);
	border-radius: var(--rayon);
	font-variation-settings: "wdth" var(--wdth-large), "wght" 700;
	letter-spacing: 0.12em;
	color: var(--texte);
}
@media (min-width: 900px) {
	.etapes { grid-template-columns: repeat(4, 1fr); }
}

/* =========================================================================
   BANDEAU REPÈRES
   ========================================================================= */
.reperes {
	border-block: 1px solid var(--ligne);
	background: var(--noir-2);
}
.reperes ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
.reperes li {
	padding: var(--e-5) var(--e-4);
	display: flex;
	flex-direction: column;
	gap: var(--e-1);
	border-right: 1px solid var(--ligne);
	border-bottom: 1px solid var(--ligne);
}
.reperes li:nth-child(2n) { border-right: 0; }
.reperes li:nth-last-child(-n + 2) { border-bottom: 0; }
.repere-valeur {
	font-size: var(--t-2xl);
	font-variation-settings: "wdth" var(--wdth-large), "wght" 800;
	line-height: 1;
	color: var(--creme);
	font-variant-numeric: tabular-nums;
}
.repere-libelle {
	font-size: var(--t-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gris);
}
/* Cinq repères depuis le 2 septembre (la durée de séance est connue) : sur
   mobile, le cinquième, seul sur sa ligne, prend les deux colonnes. */
.reperes li:last-child:nth-child(odd) { grid-column: span 2; border-right: 0; }
@media (min-width: 780px) {
	.reperes ul { grid-template-columns: repeat(5, 1fr); }
	.reperes li:nth-child(2n) { border-right: 1px solid var(--ligne); }
	.reperes li:last-child:nth-child(odd) { grid-column: auto; }
	.reperes li:last-child { border-right: 0; }
	.reperes li { border-bottom: 0; }
}

/* =========================================================================
   MÉTHODE
   ========================================================================= */
.piliers {
	display: grid;
	gap: 1px;
	background: var(--filet);
	border: 1px solid var(--filet);
}
.pilier {
	background: var(--fond);
	padding: var(--e-6) var(--e-5);
	display: flex;
	flex-direction: column;
	gap: var(--e-3);
}
.pilier h3 {
	font-size: var(--t-2xl);
	font-variation-settings: "wdth" var(--wdth-large), "wght" 800;
	text-transform: uppercase;
	line-height: 1;
	color: var(--texte);
}
.pilier p { color: var(--texte-doux); font-size: var(--t-sm); }
@media (min-width: 780px) {
	.piliers { grid-template-columns: repeat(3, 1fr); }
}

/* Encart de différenciation Lagree / Pilates. */
.encart {
	border-left: 2px solid var(--filet);
	padding: var(--e-2) 0 var(--e-2) var(--e-5);
	display: flex;
	flex-direction: column;
	gap: var(--e-2);
}
.encart h3 {
	font-size: var(--t-lg);
	font-variation-settings: "wdth" var(--wdth-normal), "wght" 700;
	color: var(--texte);
}
.encart p { color: var(--texte-doux); max-width: 62ch; }

/* =========================================================================
   STUDIO
   ========================================================================= */
.studio {
	display: grid;
	gap: var(--e-6);
}
.studio-photos {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--e-3);
}
/* En relatif : le clip vient se poser en absolu par-dessus la photo. */
.studio-photos figure { position: relative; margin: 0; }
/* Largeur bornée : les fichiers sources font 1080 px de large, on ne les
   affiche jamais au-delà pour ne pas révéler leur compression. */
.studio-photos img {
	width: 100%;
	max-width: 540px;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	filter: saturate(0.92) contrast(1.04);
}

/* Les clips des figures 2 et 3. Desktop uniquement, sources ajoutées par
   main.js quand la figure approche de l'écran. Mêmes bornes et même filtre
   que la photo, qui reste en dessous : invisible tant qu'il ne joue pas, la
   photo assure l'intérim et reste le repli si le clip échoue. */
.studio-video {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: 540px;
	aspect-ratio: 3 / 4;
	display: none;
	object-fit: cover;
	filter: saturate(0.92) contrast(1.04);
	opacity: 0;
	transition: opacity var(--duree-longue) var(--courbe);
	pointer-events: none;   /* décoratif : la souris atteint toujours la photo en dessous */
}
.figure--video .studio-video { opacity: 1; }

/* Commande de pause des clips, exigée par WCAG 2.2.2 pour tout mouvement
   automatique de plus de 5 s. Même forme que la pastille son du hero, mais
   stylée par les rôles. Portée par l'attribut hidden tant que main.js ne
   joue pas les clips : mobile, reduced-motion, économie de données, sans
   JavaScript. Dans la grille des photos, elle prend une ligne à elle. */
.studio-pause {
	grid-column: 1 / -1;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	padding: var(--e-2) var(--e-3);
	border: 1px solid var(--filet);
	border-radius: 999px;
	color: var(--texte-doux);
	font-size: var(--t-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: color var(--duree-courte) var(--courbe),
	            border-color var(--duree-courte) var(--courbe);
}
.studio-pause[hidden] { display: none; }
.studio-pause:hover,
.studio-pause:focus-visible { color: var(--texte); border-color: var(--texte-faible); }

.studio-infos {
	display: flex;
	flex-direction: column;
	gap: var(--e-5);
}
.fiche {
	display: grid;
	gap: var(--e-4);
}
.fiche div {
	display: flex;
	flex-direction: column;
	gap: var(--e-1);
	padding-top: var(--e-3);
	border-top: 1px solid var(--filet);
}
.fiche dt {
	font-size: var(--t-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--texte-faible);
}
.fiche dd { margin: 0; color: var(--texte); font-size: var(--t-md); }
.fiche a { color: var(--texte); text-decoration-color: var(--texte-faible); text-underline-offset: 3px; }

@media (min-width: 900px) {
	.studio { grid-template-columns: 1.1fr 0.9fr; gap: var(--e-8); align-items: start; }
	.studio-video { display: block; }
	.fiche { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   PLANNING
   ========================================================================= */
.planning {
	display: grid;
	gap: 1px;
	background: var(--filet);
	border: 1px solid var(--filet);
}
.planning-bloc {
	background: var(--fond);
	padding: var(--e-5);
	display: flex;
	flex-direction: column;
	gap: var(--e-4);
}
.planning-bloc h3 {
	font-size: var(--t-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--texte-faible);
	font-variation-settings: "wdth" var(--wdth-etroit), "wght" 600;
}
.creneaux { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.creneau {
	font-size: var(--t-2xl);
	font-variation-settings: "wdth" var(--wdth-large), "wght" 800;
	line-height: 1;
	color: var(--texte);
	font-variant-numeric: tabular-nums;
	padding-right: var(--e-4);
	border-right: 1px solid var(--filet);
}
.creneau:last-child { border-right: 0; padding-right: 0; }
@media (min-width: 780px) {
	.planning { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   TARIFS
   ========================================================================= */
/* Les filets sont portés par les cartes, pas par la grille. Avec un fond de
   grille, la dernière ligne incomplète laissait un aplat gris à la place des
   cartes manquantes. Une ombre de 1 px sur chaque carte se superpose dans
   l'espace de 1 px qui les sépare : le filet est le même, et une case vide
   reste invisible quel que soit le nombre de tarifs. */
.tarifs {
	display: grid;
	gap: 1px;
	background: transparent;
}
.tarif {
	background: var(--fond);
	box-shadow: 0 0 0 1px var(--filet);
	padding: var(--e-6) var(--e-5);
	display: flex;
	flex-direction: column;
	gap: var(--e-2);
	position: relative;
}
.tarif-vedette { background: var(--surface); }
.tarif-etiquette {
	position: absolute;
	top: 0; left: 0;
	padding: var(--e-1) var(--e-3);
	background: var(--accent);
	color: var(--accent-texte);
	font-size: var(--t-xs);
	font-variation-settings: "wdth" var(--wdth-etroit), "wght" 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.tarif h3 {
	font-size: var(--t-md);
	font-variation-settings: "wdth" var(--wdth-normal), "wght" 600;
	color: var(--texte);
}
.tarif-vedette h3 { margin-top: var(--e-4); }
.tarif-prix {
	font-size: var(--t-3xl);
	font-variation-settings: "wdth" var(--wdth-large), "wght" 800;
	line-height: 1;
	color: var(--texte);
	font-variant-numeric: tabular-nums;
}
.tarif-prix span { font-size: 0.5em; font-variation-settings: "wdth" 100, "wght" 600; }
.tarif-validite {
	font-size: var(--t-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--texte-faible);
}
.tarif-detail { font-size: var(--t-sm); color: var(--texte-doux); }
.tarif-paiement {
	margin-top: auto;
	padding-top: var(--e-3);
	font-size: var(--t-xs);
	color: var(--texte-faible);
}
@media (min-width: 640px) { .tarifs { grid-template-columns: repeat(2, 1fr); } }
/* Trois colonnes : six cartes font deux lignes pleines, trois abonnements une. */
@media (min-width: 1000px) { .tarifs { grid-template-columns: repeat(3, 1fr); } }

/* =========================================================================
   QUESTIONS FRÉQUENTES
   ========================================================================= */
.faq { display: flex; flex-direction: column; }
.faq details {
	border-top: 1px solid var(--filet);
	padding-block: var(--e-4);
}
.faq details:last-of-type { border-bottom: 1px solid var(--filet); }
.faq summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--e-4);
	cursor: pointer;
	list-style: none;
	font-size: var(--t-lg);
	font-variation-settings: "wdth" var(--wdth-normal), "wght" 600;
	color: var(--texte);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "+";
	flex: none;
	font-size: var(--t-xl);
	line-height: 1;
	color: var(--texte-faible);
	transition: transform var(--duree-courte) var(--courbe);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .reponse { padding-top: var(--e-3); color: var(--texte-doux); max-width: 68ch; }

/* =========================================================================
   RÉSERVATION
   ========================================================================= */
.formulaire {
	display: grid;
	gap: var(--e-4);
}
.champ { display: flex; flex-direction: column; gap: var(--e-2); }
.champ label {
	font-size: var(--t-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--texte-faible);
}
.champ input,
.champ select,
.champ textarea {
	font: inherit;
	font-size: var(--t-md);
	color: var(--texte);
	background: var(--surface);
	border: 1px solid var(--filet);
	border-radius: var(--rayon);
	padding: var(--e-3) var(--e-4);
	width: 100%;
	transition: border-color var(--duree-courte) var(--courbe);
}
.champ input:hover,
.champ select:hover,
.champ textarea:hover { border-color: var(--texte-faible); }
.champ textarea { min-height: 110px; resize: vertical; }
.champ select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
	                  linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 1.15rem center, right 0.9rem center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: var(--e-8);
}
.mention-rgpd { font-size: var(--t-xs); color: var(--texte-faible); max-width: 62ch; }
.mention-rgpd a { color: var(--texte-doux); }
@media (min-width: 700px) {
	.formulaire { grid-template-columns: repeat(2, 1fr); }
	.champ-large, .formulaire > .bouton, .mention-rgpd { grid-column: 1 / -1; }
	.formulaire > .bouton { justify-self: start; }
}

/* =========================================================================
   CONTACT ET ACCÈS
   ========================================================================= */
.contact { display: grid; gap: var(--e-6); }
/* Pas d'iframe Google Maps : c'est un traceur, et il n'y a pas de
   consentement à ce stade. Image statique cliquable à la place. */
.carte {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--e-6);
	min-height: 260px;
	padding: var(--e-6) var(--e-6) var(--e-5) calc(var(--e-6) + 3px);
	border: 1px solid var(--filet);
	background: var(--surface);
	text-decoration: none;
	color: var(--texte);
	overflow: hidden;
	transition: border-color var(--duree-courte) var(--courbe);
}
.carte:hover { border-color: var(--texte-faible); }
.carte-surtitre {
	font-size: var(--t-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--texte-faible);
}
.carte-adresse {
	font-size: var(--t-2xl);
	font-variation-settings: "wdth" var(--wdth-large), "wght" 800;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--texte);
}
.carte-action {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	font-size: var(--t-xs);
	font-variation-settings: "wdth" 100, "wght" 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--texte);
}
.carte-action svg { width: 14px; height: 14px; }
@media (min-width: 900px) {
	.contact { grid-template-columns: 1fr 1fr; gap: var(--e-8); align-items: start; }
}

/* =========================================================================
   PIED DE PAGE
   ========================================================================= */
.pied {
	border-top: 1px solid var(--ligne);
	padding-block: var(--e-7);
	padding-bottom: calc(var(--e-7) + var(--barre-mobile));
	background: var(--noir);
	color: var(--gris);
	font-size: var(--t-sm);
}
.pied .enrobe {
	display: flex;
	flex-direction: column;
	gap: var(--e-5);
}
.pied-marque { display: block; width: 160px; color: var(--gris-clair); }
.pied-marque svg path { fill: currentColor; }
.pied-navs { display: flex; flex-direction: column; gap: var(--e-4); }
.pied nav ul { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); }
@media (min-width: 780px) {
	.pied-navs { align-items: flex-end; }
	.pied nav ul { justify-content: flex-end; }
}
.pied a { color: var(--gris-clair); text-decoration-color: var(--ligne); text-underline-offset: 3px; }
.pied a:hover { color: var(--creme); }
.pied-legal { font-size: var(--t-xs); color: var(--gris); }
/* Crédit de l'agence : dernière ligne du pied de page, discrète. */
/* Double classe exprès : `.pied .enrobe` passe en « space-between, aligné en
   haut » au delà de 780 px, ce qui écartait la phrase et le badge aux deux
   bords, à des hauteurs différentes. Ici, les deux restent côte à côte,
   centrés entre eux, alignés à gauche sur le logo. */
.pied .enrobe.pied-credit {
	margin-top: var(--e-5); padding-top: var(--e-4); border-top: 1px solid var(--ligne); font-size: var(--t-xs);
	display: flex; flex-direction: row; flex-wrap: wrap;
	align-items: center; justify-content: flex-start; gap: var(--e-2) var(--e-3);
}
.credit-realise { color: var(--gris-clair); }
.pied .pied-credit a { color: var(--gris); }

/* Badge de l'agence, aux couleurs de NoCode IA (bleu #2d5cd4 éclairci pour
   rester lisible sur le noir, rouge #fb4243) : contour en dégradé, étincelle
   « IA », et un reflet lent sur « By NoCode IA ». Ce sont les seules couleurs
   hors charte RYTHM du site, volontairement confinées à ce badge. */
.pied .pied-credit a.credit-agence {
	display: inline-flex; align-items: center; gap: .55em;
	/* Sans cela, le badge s'étire sur toute la largeur du conteneur flex. */
	align-self: center;
	padding: .5em 1em; border-radius: 999px;
	border: 1px solid transparent;
	background: linear-gradient(var(--noir), var(--noir)) padding-box,
	            linear-gradient(90deg, #7f9cff, #fb4243) border-box;
	color: var(--creme); text-decoration: none; letter-spacing: .03em;
	transition: box-shadow .3s ease, transform .3s ease;
}
.credit-agence svg { width: 1.1em; height: 1.1em; fill: #7f9cff; flex: none; }
.credit-agence-by {
	font-weight: 700;
	background: linear-gradient(90deg, #7f9cff, #fb4243, #7f9cff);
	background-size: 200% 100%;
	-webkit-background-clip: text; background-clip: text; color: transparent;
	animation: credit-reflet 6s linear infinite;
}
.pied .pied-credit a.credit-agence:hover,
.pied .pied-credit a.credit-agence:focus-visible {
	box-shadow: 0 0 18px rgba(251, 66, 67, .28), 0 0 18px rgba(127, 156, 255, .22);
	transform: translateY(-1px);
}
@keyframes credit-reflet { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
	.credit-agence-by { animation: none; }
	.pied .pied-credit a.credit-agence { transition: none; }
}
@media (min-width: 780px) {
	.pied .enrobe { flex-direction: row; justify-content: space-between; align-items: flex-start; }
	.pied { padding-bottom: var(--e-7); }
}

/* =========================================================================
   BARRE D'ACTION MOBILE
   La recherche locale se fait au téléphone : appeler et réserver doivent
   rester atteignables en permanence.
   ========================================================================= */
.barre-mobile {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 40;
	height: var(--barre-mobile);
	display: grid;
	grid-template-columns: 1fr 1fr 1.2fr;
	border-top: 1px solid var(--ligne);
	background: rgba(11, 10, 9, 0.94);
	backdrop-filter: blur(10px);
}
.barre-mobile a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--e-2);
	border-right: 1px solid var(--ligne);
	text-decoration: none;
	font-size: var(--t-xs);
	font-variation-settings: "wdth" var(--wdth-normal), "wght" 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--creme);
}
.barre-mobile .principal { background: var(--accent); color: var(--accent-texte); border-right: 0; }
.barre-mobile svg { width: 15px; height: 15px; fill: currentColor; }
@media (min-width: 900px) { .barre-mobile { display: none; } }

/* =========================================================================
   RÉVÉLATION AU DÉFILEMENT
   Discrète, une seule fois, jamais si l'utilisateur préfère moins de
   mouvement, jamais sans JavaScript.
   ========================================================================= */
/* Les blocs .reveler ne sont masqués que si JavaScript est là (classe js
   posée dans l'en-tête) : main.js les révèle à l'entrée dans l'écran, une
   seule fois. Sans JavaScript, sans IntersectionObserver ou en
   reduced-motion, tout est visible d'emblée. */
.js .reveler {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity var(--duree-longue) var(--courbe),
		transform var(--duree-longue) var(--courbe);
}
.js .reveler--vu {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.js .reveler { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* =========================================================================
   EN BREF
   L'extrait citable, juste sous le bandeau de repères. Un titre discret,
   un paragraphe : sobre, lisible, jamais masqué.
   ========================================================================= */
.en-bref {
	padding-block: var(--e-7);
	border-bottom: 1px solid var(--ligne);
	background: var(--fond);
	color: var(--texte);
}
.en-bref .enrobe {
	display: flex;
	flex-direction: column;
	gap: var(--e-3);
}
.en-bref-titre {
	font-size: var(--t-xs);
	font-variation-settings: "wdth" var(--wdth-etroit), "wght" 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0;
}
.en-bref-texte {
	font-size: var(--t-lg);
	line-height: 1.55;
	color: var(--texte-doux);
	max-width: 70ch;
	text-wrap: pretty;
	margin: 0;
}
/* FIN EN BREF */

/* ARTICLES */
/* =========================================================================
   ARTICLES
   Pages de l'espace articles (/articles/ et /articles/<slug>/) : lecture sur
   --page-etroit, en-tête absolu du site dégagé par une marge haute, réponse
   courte sur --surface avec le filet d'accent, FAQ reprise de .faq, liste
   d'index en cartes sobres. Aucune couleur brute : seulement les rôles.
   ========================================================================= */
.page-article {
	/* L'en-tête est posé en absolu sur l'écran d'arrivée : sans hero, il faut
	   lui laisser sa hauteur (deux marges de --e-5 et le monogramme de 30 px). */
	padding-top: calc(var(--e-5) * 2 + 30px + var(--e-7));
	padding-bottom: var(--e-9);
	background: var(--fond);
	color: var(--texte);
}
.article,
.articles-index {
	display: flex;
	flex-direction: column;
	gap: var(--e-7);
}

/* Fil d'Ariane */
.fil { font-size: var(--t-xs); }
.fil ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2);
	color: var(--texte-faible);
	font-variation-settings: "wdth" var(--wdth-etroit), "wght" 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.fil li + li::before {
	content: "/";
	margin-right: var(--e-2);
	color: var(--texte-faible);
}
.fil a { color: var(--texte-doux); text-decoration: none; transition: color var(--duree-courte) var(--courbe); }
.fil a:hover { color: var(--texte); }
.fil [aria-current="page"] { color: var(--texte-faible); }

/* En-tête de l'article : surtitre, H1 (style .titre-section), date et lecture */
.article-entete {
	display: flex;
	flex-direction: column;
	gap: var(--e-4);
}
.article-meta,
.article-carte-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2);
	font-size: var(--t-xs);
	font-variation-settings: "wdth" var(--wdth-etroit), "wght" 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--texte-faible);
}

/* Réponse courte : le bloc citable, en tête, sur surface avec le filet d'accent */
.reponse-courte {
	display: flex;
	flex-direction: column;
	gap: var(--e-2);
	padding: var(--e-5);
	background: var(--surface);
	border-left: 2px solid var(--filet);
	border-radius: var(--rayon);
}
.reponse-courte-titre {
	font-size: var(--t-xs);
	font-variation-settings: "wdth" var(--wdth-etroit), "wght" 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
}
.reponse-courte-texte {
	font-size: var(--t-lg);
	line-height: 1.55;
	color: var(--texte);
	text-wrap: pretty;
}

/* Corps : sections H2, paragraphes, listes */
.article-corps {
	display: flex;
	flex-direction: column;
	gap: var(--e-6);
}
.article-corps section {
	display: flex;
	flex-direction: column;
	gap: var(--e-4);
}
.article-corps h2,
.article-faq h2,
.a-lire h2 {
	font-size: var(--t-xl);
	font-variation-settings: "wdth" var(--wdth-large), "wght" 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--texte);
	text-wrap: balance;
}
.article-corps p {
	color: var(--texte-doux);
	max-width: 65ch;
	text-wrap: pretty;
}
.article-corps ul {
	display: flex;
	flex-direction: column;
	gap: var(--e-2);
	padding-left: var(--e-5);
}
.article-corps li {
	position: relative;
	color: var(--texte-doux);
	max-width: 65ch;
	text-wrap: pretty;
}
.article-corps li::before {
	content: "";
	position: absolute;
	left: calc(-1 * var(--e-5));
	top: 0.8em;
	width: var(--e-3);
	height: 1px;
	background: var(--accent);
}

/* Questions fréquentes de l'article : même composant .faq que l'accueil */
.article-faq,
.a-lire {
	display: flex;
	flex-direction: column;
	gap: var(--e-4);
}
.a-lire {
	padding-top: var(--e-6);
	border-top: 1px solid var(--filet);
}

/* Cartes d'articles : liste d'index et « À lire aussi » */
.articles-liste {
	display: grid;
	gap: var(--e-4);
}
.article-carte a {
	display: flex;
	flex-direction: column;
	gap: var(--e-2);
	height: 100%;
	padding: var(--e-5);
	background: var(--surface);
	border: 1px solid var(--filet);
	border-radius: var(--rayon);
	color: var(--texte);
	text-decoration: none;
	transition: border-color var(--duree-courte) var(--courbe);
}
.article-carte a:hover { border-color: var(--texte-faible); }
.article-carte-titre {
	font-size: var(--t-lg);
	font-variation-settings: "wdth" var(--wdth-large), "wght" 700;
	line-height: 1.2;
	color: var(--texte);
	text-wrap: balance;
}
.article-carte-texte {
	font-size: var(--t-sm);
	color: var(--texte-doux);
	text-wrap: pretty;
}
@media (min-width: 780px) {
	.a-lire .articles-liste { grid-template-columns: repeat(2, 1fr); }
}

/* Retour */
.article-retour {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2);
	font-size: var(--t-sm);
	color: var(--texte-faible);
}
.article-retour a {
	color: var(--texte-doux);
	text-decoration-color: var(--filet);
	text-underline-offset: 3px;
}
.article-retour a:hover { color: var(--texte); }
/* FIN ARTICLES */

/* =========================================================================
   PAGES DE SERVICE
   /methode-lagree/, /studio/, /tarifs/, /reservation/,
   /lagree-toulouse-carmes/, /questions-frequentes/ : des sections comme sur
   l'accueil (.section, .enrobe, .titre-section), sans hero. La première
   section dégage l'en-tête du site, posé en absolu, comme .page-article.
   La prose réutilise .article-corps, les blocs .encart, les cartes .a-lire.
   ========================================================================= */
.page-service > .section:first-child {
	padding-top: calc(var(--e-5) * 2 + 30px + var(--e-8));
	padding-bottom: var(--e-8);
}
.page-service .page-entete > .enrobe,
.page-service .page-entete > .enrobe-etroit { gap: var(--e-6); }
/* Deux encarts côte à côte : les piliers, les deux façons de réserver. */
.grille-2 {
	display: grid;
	gap: var(--e-6);
}
@media (min-width: 780px) {
	.grille-2 { grid-template-columns: repeat(2, 1fr); gap: var(--e-7); }
}
.grille-2 .encart .surtitre { margin-bottom: var(--e-1); }
/* Un lien dans un encart ou un texte : même traitement que dans les articles. */
.encart a,
.article-corps a {
	color: var(--texte);
	text-decoration-color: var(--filet);
	text-underline-offset: 3px;
}
.encart a:hover,
.article-corps a:hover { text-decoration-color: currentColor; }
/* Les repères, ailleurs que sous le hero : un filet suffit, pas de fond
   plus sombre que la page qui les entoure. */
.page-service .reperes { background: var(--noir-2); }
/* Fin de page : les boutons puis les lectures, sans doubler la respiration. */
.page-fin > .enrobe-etroit { gap: var(--e-7); }
.page-fin .a-lire { padding-top: 0; border-top: 0; }
.page-fin .a-lire h2 { font-size: var(--t-lg); }

/* Bandeau : une image 16:9 pleine largeur sous l'en-tête de page, fondue
   dans le fond en haut et en bas. Hauteur bornée : c'est une respiration
   visuelle, pas un second hero. */
.bandeau {
	position: relative;
	margin: 0;
	background: var(--noir);
	overflow: hidden;
}
.bandeau img {
	display: block;
	width: 100%;
	height: clamp(260px, 52vh, 620px);
	object-fit: cover;
	filter: saturate(0.92) contrast(1.04);
}
.bandeau::before,
.bandeau::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	height: 18%;
	pointer-events: none;
}
.bandeau::before { top: 0; background: linear-gradient(to bottom, var(--noir), transparent); }
.bandeau::after { bottom: 0; background: linear-gradient(to top, var(--noir), transparent); }
.bandeau--vers-creme::after { background: linear-gradient(to top, var(--creme), transparent); }
.bandeau figcaption {
	position: absolute;
	left: 0; right: 0; bottom: var(--e-4);
	width: var(--page);
	margin-inline: auto;
	font-size: var(--t-xs);
	font-variation-settings: "wdth" var(--wdth-etroit), "wght" 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--creme);
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
}
/* Sur le fondu crème, la légende repasse en sombre. */
.bandeau--vers-creme figcaption { color: var(--noir-3); text-shadow: none; }

/* Média et texte côte à côte : les piliers de la méthode, les blocs du
   studio. Alternance par la classe --inverse. Sur mobile, l'image passe
   au-dessus du texte. */
.media-texte {
	display: grid;
	gap: var(--e-6);
	align-items: center;
}
.media-texte figure { margin: 0; }
.media-texte img {
	display: block;
	width: 100%;
	max-width: 640px;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	filter: saturate(0.92) contrast(1.04);
}
.media-texte .encart { border-left: 0; padding-left: 0; }
@media (min-width: 780px) {
	.media-texte { grid-template-columns: 1fr 1fr; gap: var(--e-8); }
	.media-texte--inverse figure { order: 2; }
	.media-texte--inverse img { margin-left: auto; }
}
.media-texte + .media-texte { margin-top: var(--e-7); }

/* Figure dans la prose : pleine largeur de la colonne de lecture. */
.article-corps figure,
.figure-large {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--e-2);
}
.article-corps figure img,
.figure-large img {
	display: block;
	width: 100%;
	object-fit: cover;
	filter: saturate(0.92) contrast(1.04);
}
.article-corps figcaption,
.figure-large figcaption {
	font-size: var(--t-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--texte-faible);
}
/* Deux images côte à côte (la barre éteinte puis allumée). */
.diptyque {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--e-3);
}
.diptyque figure { margin: 0; }
.diptyque--portrait img { aspect-ratio: 3 / 4; }
.diptyque img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	filter: saturate(0.92) contrast(1.04);
}
/* Galerie à trois sur les pages de service ; deux sur mobile. */
.page-service .studio-photos--trois { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 780px) {
	.page-service .studio-photos--trois { grid-template-columns: repeat(3, 1fr); }
}
/* La semaine jour par jour sur /planning/ : une ligne par jour. */
.fiche--jours { grid-template-columns: 1fr; }
.fiche--jours div {
	display: grid;
	grid-template-columns: 9rem 1fr;
	align-items: baseline;
	gap: var(--e-3);
}
.fiche--jours dt { margin: 0; }
.fiche--jours dd {
	font-size: var(--t-xl);
	font-variation-settings: "wdth" var(--wdth-large), "wght" 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}
@media (min-width: 780px) { .fiche--jours { grid-template-columns: 1fr; } }
/* Sélecteur de langue, dans l'en-tête : deux lettres, discret, avant le
   bouton Réserver. Sur mobile il reste visible à côté du bouton de menu. */
.langue {
	font-size: var(--t-xs);
	font-variation-settings: "wdth" var(--wdth-etroit), "wght" 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--texte-doux);
	text-decoration: none;
	padding: var(--e-2) var(--e-3);
	border: 1px solid var(--ligne);
	border-radius: var(--rayon);
	margin-left: auto;
	position: relative;
	z-index: 51;
	transition: color var(--duree-courte) var(--courbe), border-color var(--duree-courte) var(--courbe);
}
.langue:hover { color: var(--texte); border-color: var(--texte-faible); }
.langue + .bouton { margin-left: 0; }
/* FIN PAGES DE SERVICE */

/* =========================================================================
   RÉSERVATION INTÉGRÉE
   Le cadre Deciplus n'est inséré qu'au clic : rien n'est chargé, et donc
   aucun cookie tiers n'est déposé, tant que le visiteur n'a pas agi.
   ========================================================================= */
.reservation-integree {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--e-4);
}
.reservation-integree-note { font-size: var(--t-sm); }

/* Une fois ouvert, le cadre occupe toute la largeur de la colonne. */
.reservation-integree.ouvert { align-items: stretch; }
.reservation-integree.ouvert > .bouton,
.reservation-integree.ouvert > .reservation-integree-note { display: none; }

.reservation-cadre {
	position: relative;
	width: 100%;
	/* Hauteur suffisante pour le tunnel d'inscription sans défilement interne
	   sur mobile, où la place manque le plus. */
	height: clamp(560px, 82svh, 900px);
	border: 1px solid var(--filet);
	border-radius: var(--rayon);
	background: var(--creme);
	overflow: hidden;
}
/* Deciplus est une application d'environ six mégaoctets : entre la requête et
   le premier pixel, il s'écoule plusieurs secondes pendant lesquelles le cadre
   n'est qu'un rectangle blanc, ce qui se lit comme une panne. Ce voile occupe
   la place jusqu'à ce que l'application soit peinte, et propose le nouvel
   onglet si l'attente s'éternise. Retiré par main.js. */
.reservation-attente {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--e-4);
	padding: var(--e-6);
	text-align: center;
	background: var(--creme);
	color: var(--noir-3);
	font-size: var(--t-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.reservation-attente-barres {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 22px;
}
.reservation-attente-barres i {
	display: block;
	width: 3px;
	height: 100%;
	background: currentColor;
	transform-origin: bottom center;
	animation: egaliseur 700ms var(--courbe) infinite alternate;
}
.reservation-attente-barres i:nth-child(2) { animation-delay: 140ms; }
.reservation-attente-barres i:nth-child(3) { animation-delay: 280ms; }
.reservation-attente a { color: inherit; }
@media (prefers-reduced-motion: reduce) {
	.reservation-attente-barres i { animation: none; }
}

.reservation-cadre iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.reservation-barre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-3);
	font-size: var(--t-xs);
	color: var(--texte-faible);
	padding-top: var(--e-3);
}
.reservation-barre a { color: var(--texte-doux); }

.boutiques-app { display: flex; flex-wrap: wrap; gap: var(--e-3); }

/* =========================================================================
   MOBILE, DERNIERS RÉGLAGES
   Relevés au doigt sur un écran de 391 px le 8 septembre 2026.
   ========================================================================= */
@media (max-width: 899px) {

	/* Les étiquettes tombaient à 12 px, en capitales et très interlettrées :
	   lisible sur un écran de bureau, juste à la limite sur un téléphone.
	   Le jeton monte d'un point, tout ce qui s'en sert suit. */
	:root { --t-xs: 0.8125rem; }

	/* Cinq repères sur deux colonnes laissaient une case vide à côté du
	   dernier. Il prend toute la largeur. */
	.reperes li:last-child { grid-column: 1 / -1; }

	/* En-tête de question : 30 px de haut, sous le seuil de confort tactile.
	   Le rembourrage l'amène à 46 px sans changer l'apparence. */
	.faq summary { padding-block: var(--e-2); }

	/* Liens du pied de page : 16 px de haut, empilés, difficiles à viser. */
	.pied nav ul { gap: 0 var(--e-5); }
	.pied nav a { display: inline-block; padding-block: var(--e-3); }

	/* Le widget de discussion se pose à 24 px du bas, donc par-dessus la barre
	   d'action fixe. On le remonte de la hauteur de la barre : la fenêtre et
	   le lanceur gardent leurs positions l'un par rapport à l'autre. */
	#causerie-window,
	#causerie-launcher {
		transform: translateY(calc(-1 * var(--barre-mobile)));
	}

	/* La bulle d'accroche fait 185 px de large. Sur un écran de 375 px, elle
	   recouvre en permanence le texte, au milieu d'un article comme des
	   mentions légales, et il faut la fermer à la main pour lire. Elle reste
	   sur grand écran, où elle ne gêne rien : ici le monogramme du lanceur
	   suffit à signaler l'assistant. */
	#causerie-bubble { display: none; }

	/* Le widget se dessine à z-index 10000, donc par-dessus le voile du menu.
	   Menu ouvert, il n'a rien à y faire : il revient à la fermeture. */
	.menu-ouvert #causerie-widget { display: none; }
}