/**
 * Epilfit — feuille de style du thème.
 * Mobile d'abord. Une seule police, une palette tirée du logo, aucune dépendance.
 */

:root {
	/* Palette : le taupe du logo, réchauffé de crème et posé sur un brun profond. */
	--ink: #211c17;
	--ink-soft: #6b6157;
	--taupe: #a1907e;
	--taupe-dark: #7d6c5a;
	--espresso: #3a322a;
	--cream: #f7f3ee;
	--sand: #ece3d8;
	--line: #e2d8cc;
	--white: #fff;

	/* Une seule famille, géométrique et contemporaine : la hiérarchie se fait
	   à la graisse et à l'échelle, pas au mélange de polices. */
	--display: "Outfit", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
	--ui: var(--display);

	--r-sm: 10px;
	--r-md: 16px;
	--r-lg: 24px;
	--r-pill: 999px;

	/* Le plugin de réservation lit ces deux variables pour choisir ses polices.
	   En les déclarant ici, le module suit le thème sans qu'on y touche. */
	--theme-font-p_font-family: "Outfit", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
	--theme-font-menu_font-family: "Outfit", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;

	--shell: 1240px;
	--gut: 20px;
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--ui);
	font-size: 15.5px;
	font-weight: 300;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

/* Sans height:auto, l'image garde l'attribut height du HTML et ignore
   aussi bien son rapport naturel que tout aspect-ratio en CSS. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

.shell {
	width: 100%;
	max-width: var(--shell);
	margin: 0 auto;
	padding: 0 var(--gut);
}

.skip {
	position: absolute;
	left: -9999px;
}

/* ----------------------------------------------------------- Typographie */

h1, h2, h3, h4 {
	font-family: var(--display);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.035em;
	margin: 0;
}

h1 { font-size: clamp(46px, 12vw, 104px); font-weight: 600; }
h2 { font-size: clamp(32px, 6.6vw, 58px); }
h3 { font-size: clamp(20px, 3.2vw, 25px); letter-spacing: -0.02em; }
h4 { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }

/* Le mot d'accent joue sur la couleur, pas sur un italique de labeur. */
h1 em { font-style: normal; color: var(--taupe); }
.hero h1 em { color: #e3d2be; }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
	display: inline-block;
	margin: 0 0 20px;
	padding: 7px 14px;
	border-radius: var(--r-pill);
	background: var(--sand);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--taupe-dark);
	line-height: 1;
}

.eyebrow.light {
	background: rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(4px);
}

.lead {
	font-size: clamp(22px, 4.2vw, 34px);
	line-height: 1.28;
	font-weight: 400;
	letter-spacing: -0.025em;
	max-width: 24ch;
}

.section-head { margin-bottom: 44px; }
.section-head.center { text-align: center; }
.section-head.center .lead { margin-inline: auto; }

/* --------------------------------------------------------------- Boutons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 30px;
	border: 1px solid var(--espresso);
	border-radius: var(--r-pill);
	background: var(--espresso);
	color: var(--white);
	font-family: var(--ui);
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.btn:hover { background: var(--taupe); border-color: var(--taupe); transform: translateY(-1px); }

.btn-sm { padding: 11px 20px; font-size: 12.5px; }

.btn-ghost {
	background: transparent;
	color: var(--espresso);
}

.btn-ghost.light {
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.45);
}

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

.link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 500;
	text-decoration: none;
	color: var(--taupe-dark);
	transition: color 0.25s ease, gap 0.25s ease;
}

.link::after { content: "→"; font-size: 15px; line-height: 1; }
.link:hover { color: var(--ink); gap: 11px; }

/* --------------------------------------------------------------- En-tête */

.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	transition: background 0.3s ease, box-shadow 0.3s ease;
}

.site-header.is-stuck {
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(8px);
	box-shadow: 0 1px 0 var(--line);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	height: 76px;
}

/* Le logo est une image : un seul fichier taupe, passé en blanc par filtre
   tant que l'en-tête est transparent sur la photo du hero. */
.logo { display: block; text-decoration: none; }

.logo img {
	height: 42px;
	width: auto;
	filter: brightness(0) invert(1);
	transition: filter 0.3s ease;
}

.is-stuck .logo img { filter: none; }

.site-footer .logo img { filter: brightness(0) invert(1); }


.nav { display: none; }

.nav a {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: -0.01em;
	text-decoration: none;
	color: var(--white);
	opacity: 0.85;
	transition: opacity 0.2s ease, color 0.3s ease;
}

.is-stuck .nav a { color: var(--ink); }
.nav a:hover { opacity: 1; }

.header-actions { display: none; align-items: center; gap: 22px; }

.tel {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.01em;
	text-decoration: none;
	color: var(--white);
	transition: color 0.3s ease;
}

.is-stuck .tel { color: var(--ink); }


.is-stuck .burger span { background: var(--ink); }

/* ------------------------------------------------------------------ Hero */

.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 100svh;
	padding: 120px 0 0;
	color: var(--white);
	overflow: hidden;
}

.hero-media { position: absolute; inset: 0; }

.hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
}

.hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(33, 28, 23, 0.5) 0%, rgba(33, 28, 23, 0.2) 38%, rgba(33, 28, 23, 0.85) 100%),
		linear-gradient(90deg, rgba(33, 28, 23, 0.5) 0%, rgba(33, 28, 23, 0.1) 55%, rgba(33, 28, 23, 0) 100%);
}

.hero-inner {
	position: relative;
	padding-bottom: 48px;
}

.hero h1 { margin-bottom: 26px; }

.hero-lead {
	max-width: 46ch;
	font-size: 15px;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.86);
	margin-bottom: 32px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-strip {
	position: relative;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(33, 28, 23, 0.35);
	backdrop-filter: blur(6px);
}

.strip-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	padding-block: 18px;
	font-size: 13.5px;
	letter-spacing: -0.01em;
	color: rgba(255, 255, 255, 0.82);
}

.strip-inner strong {
	font-size: 17px;
	font-weight: 600;
	color: var(--white);
}

.sep { display: none; width: 1px; height: 14px; background: rgba(255, 255, 255, 0.3); }

/* ------------------------------------------------------------- Manifeste */

.manifeste { padding: 88px 0 72px; }

/* ----------------------------------------------------------- Prestations */

.prestations { padding: 24px 0 88px; }

.cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 44px 28px;
}

/* La vignette est un lien : sans display:block, l'élément reste inline et
   ignore le rapport d'image — d'où des photos démesurément hautes. */
.card-media {
	position: relative;
	display: block;
	margin-bottom: 18px;
	background: var(--sand);
	border-radius: var(--r-lg);
	overflow: hidden;
	line-height: 0;
}

/* Quatre colonnes étroites : un portrait 4/5 donnerait des bandes verticales.
   Le 3/4 tient mieux la ligne, et le carré reprend la main quand les cartes
   s'élargissent à une ou deux par ligne. */
.card-media img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.card:hover .card-media img { transform: scale(1.04); }

.card-num {
	position: absolute;
	left: 14px;
	top: 14px;
	display: grid;
	place-items: center;
	min-width: 30px;
	height: 30px;
	padding: 0 9px;
	border-radius: var(--r-pill);
	background: rgba(33, 28, 23, 0.55);
	backdrop-filter: blur(6px);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	color: var(--white);
}

.card h3 { margin-bottom: 10px; }
.card h3 a { text-decoration: none; color: inherit; transition: color 0.2s ease; }
.card:hover h3 a { color: var(--taupe-dark); }

.card-list {
	margin-bottom: 12px;
	font-size: 13px;
	font-weight: 400;
	color: var(--taupe);
	line-height: 1.7;
}

.card-text {
	margin-bottom: 18px;
	color: var(--ink-soft);
	font-size: 14px;
}

/* ------------------------------------------------------------- Signature */

.signature {
	padding: 88px 0;
	background: var(--cream);
}

.signature-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
	align-items: center;
}

.signature-media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--r-lg);
}

.signature-body h2 { margin-bottom: 22px; }
.signature-body p { color: var(--ink-soft); max-width: 46ch; }

.benefits {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 20px;
	margin: 26px 0 22px;
	padding: 0;
	list-style: none;
}

.benefits li {
	position: relative;
	padding-left: 20px;
	font-size: 13.5px;
}

.benefits li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 11px;
	width: 9px;
	height: 1px;
	background: var(--taupe);
}

.note {
	display: inline-block;
	padding: 8px 15px;
	border-radius: var(--r-pill);
	background: var(--sand);
	font-size: 13px;
	color: var(--taupe-dark);
}

/* --------------------------------------------------------------- Méthode */

.methode { padding: 88px 0; }

.steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.steps li { padding-top: 22px; border-top: 1px solid var(--line); }

.step-num {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: 18px;
	border-radius: var(--r-pill);
	background: var(--sand);
	font-size: 13px;
	font-weight: 600;
	color: var(--taupe-dark);
}

.steps h3 { margin-bottom: 10px; }
.steps p { color: var(--ink-soft); font-size: 14px; }

/* ----------------------------------------------------------- Engagements */

.engagements {
	padding: 88px 0;
	background: var(--espresso);
	color: var(--white);
}

.engagements-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

.engagements-head h2 { color: var(--white); }

.engagements-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 22px;
}

.engagements-list li {
	padding-bottom: 22px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 14px;
	color: rgba(255, 255, 255, 0.72);
}

.engagements-list li:last-child { border-bottom: 0; padding-bottom: 0; }

.engagements-list strong {
	display: block;
	margin-bottom: 6px;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--white);
}

/* ------------------------------------------------------------ Réservation */

.reserver { padding: 88px 0; background: var(--cream); }

.reserver-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: center;
}

.reserver-body h2 { margin-bottom: 20px; }
.reserver-body p { color: var(--ink-soft); max-width: 42ch; }

.reserver-tel {
	margin-top: 26px;
	font-size: 14px;
	color: var(--taupe-dark);
}

.reserver-tel a {
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.03em;
	text-decoration: none;
	color: var(--ink);
}

/* ------------------------------------------------- Formulaire de réservation

   Dessiné avec le vocabulaire du site : filets d'un pixel, angles droits,
   micro-libellés en capitales, titres en Cormorant. Aucune ombre, aucun coin
   arrondi — le module doit se lire comme une section de la page, pas comme un
   composant importé. */

.booking {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
}

.booking-rail {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--line);
}

.booking-rail li {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 15px 14px;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: -0.01em;
	color: var(--taupe);
	opacity: 0.5;
	border-right: 1px solid var(--line);
}

.booking-rail li:last-child { border-right: 0; }

.booking-rail li.is-active { opacity: 1; color: var(--ink); }

.booking-rail span {
	font-size: 12px;
	font-weight: 600;
	color: var(--taupe);
}

.booking-body { padding: 26px 24px 8px; }

.booking-label {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-soft);
}

.booking-cats,
.booking-services {
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.booking-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.booking-cats button,
.booking-services button {
	width: 100%;
	text-align: left;
	background: none;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 13px 15px;
	font-family: var(--ui);
	color: var(--ink);
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.booking-cats button:hover,
.booking-services button:hover { border-color: var(--taupe); background: var(--cream); }

.booking-cats button.is-selected {
	border-color: var(--espresso);
	background: var(--espresso);
	color: var(--white);
}

.cat-name {
	display: block;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.cat-meta,
.srv-meta {
	display: block;
	margin-top: 4px;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--taupe);
}

.booking-cats button.is-selected .cat-meta { color: rgba(255, 255, 255, 0.6); }

.booking-services { border-top: 1px solid var(--line); }

.booking-services li { border-bottom: 1px solid var(--line); }

.booking-services button {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	border: 0;
	padding: 14px 4px;
}

.srv-name { font-size: 16px; font-weight: 500; letter-spacing: -0.02em; }
.srv-meta { margin-top: 0; }

.booking-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 18px 24px;
	border-top: 1px solid var(--line);
	background: var(--cream);
}

.booking-note {
	font-size: 13px;
	color: var(--taupe-dark);
}

/* ------------------------------------------------------------------- FAQ */

.faq { padding: 88px 0; }

.faq-grid { display: grid; grid-template-columns: 1fr; gap: 36px; }

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

.faq-list summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 0;
	cursor: pointer;
	list-style: none;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.4;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin-top: 8px;
	border-right: 1px solid var(--taupe);
	border-bottom: 1px solid var(--taupe);
	transform: rotate(45deg);
	transition: transform 0.25s ease;
}

.faq-list details[open] summary::after { transform: rotate(-135deg); margin-top: 12px; }

.faq-list p {
	padding-bottom: 22px;
	max-width: 62ch;
	color: var(--ink-soft);
	font-size: 14px;
}

/* ------------------------------------------------------------- Pied de page */





/* -------------------------------------------------------- Bande de rappel */

.cta-band {
	padding: 64px 0;
	background: var(--sand);
}

.cta-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
	align-items: center;
}

.cta-band h2 { margin-bottom: 12px; font-size: clamp(26px, 5vw, 40px); }
.cta-band p { color: var(--ink-soft); max-width: 48ch; }

.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------- Barre d'action mobile

   Sur téléphone, la décision se prend au pouce : réserver et WhatsApp restent
   accessibles en permanence, sans avoir à remonter la page. */

.actionbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	display: flex;
	gap: 10px;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--line);
}

.ab-main {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	border-radius: var(--r-pill);
	background: var(--espresso);
	color: var(--white);
	font-size: 14.5px;
	font-weight: 500;
	text-decoration: none;
}

.ab-wa {
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: var(--r-pill);
	background: #25d366;
	color: #fff;
	text-decoration: none;
}

.ab-wa svg { width: 27px; height: 27px; fill: currentColor; }

/* La barre occupe le bas de l'écran : le pied de page ne doit pas passer dessous. */
body { padding-bottom: 76px; }

/* ---------------------------------------------------------------- WhatsApp

   Bouton flottant permanent. Le vert officiel est conservé : c'est lui qui
   rend le bouton immédiatement reconnaissable, y compris chez des clientes
   qui ne lisent pas le libellé. Sur mobile il se réduit à la pastille, pour
   ne pas manger la largeur d'écran. */

.wa {
	position: fixed;
	right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 60;

	/* Sur petit écran, WhatsApp vit dans la barre d'action : pas deux boutons
	   qui disent la même chose au même endroit. Réaffiché à partir de 1000 px. */
	display: none;
	align-items: center;
	gap: 9px;
	height: 56px;
	width: 56px;
	padding: 0;
	justify-content: center;

	border-radius: var(--r-pill);
	background: #25d366;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 10px 26px -10px rgba(37, 211, 102, 0.85), 0 3px 10px rgba(33, 28, 23, 0.16);
	transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.wa:hover {
	background: #1fbe5a;
	transform: translateY(-2px);
	box-shadow: 0 16px 32px -12px rgba(37, 211, 102, 0.95), 0 4px 12px rgba(33, 28, 23, 0.2);
}

.wa:focus-visible {
	outline: 3px solid rgba(37, 211, 102, 0.45);
	outline-offset: 3px;
}

.wa-icon {
	width: 29px;
	height: 29px;
	fill: currentColor;
	flex: 0 0 auto;
}

.wa-label {
	display: none;
	font-size: 14.5px;
	font-weight: 500;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.wa { transition: none; }
	.wa:hover { transform: none; }
}

/* ============================================================= Tablette */

@media (min-width: 700px) {
	:root { --gut: 32px; }

	body { font-size: 15.5px; }

	.cards { grid-template-columns: 1fr 1fr; gap: 52px 32px; }
	.steps { grid-template-columns: repeat(3, 1fr); gap: 28px; }
	.engagements-grid { grid-template-columns: 1fr 1fr; gap: 56px; }
	.signature-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
	.reserver-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
	.faq-grid { grid-template-columns: 320px 1fr; gap: 48px; }
	.sep { display: block; }
	.hero-inner { padding-bottom: 60px; }
}

/* ============================================================== Bureau */

@media (min-width: 1000px) {
	:root { --gut: 44px; }

	.nav { display: block; }
	.header-actions { display: flex; }
	.burger { display: none; }
	.header-inner { height: 92px; }

	/* Écran large : la barre d'action disparaît, la pastille WhatsApp reprend
	   sa place et s'allonge pour annoncer ce qu'elle est. */
	.actionbar { display: none; }
	body { padding-bottom: 0; }

	.wa {
		display: inline-flex;
		right: 28px;
		bottom: 28px;
		width: auto;
		padding: 0 22px 0 18px;
		justify-content: flex-start;
	}

	.wa-label { display: inline; }

	.cta-band { padding: 96px 0; }
	.cta-inner { grid-template-columns: 1.25fr auto; gap: 48px; }

	.manifeste { padding: 128px 0 104px; }
	.prestations { padding: 24px 0 128px; }
	.cards { grid-template-columns: repeat(4, 1fr); gap: 0 28px; }
	.signature { padding: 128px 0; }
	.signature-grid { grid-template-columns: 1.05fr 1fr; gap: 72px; }
	.methode { padding: 128px 0; }
	.engagements { padding: 128px 0; }
	.engagements-grid { grid-template-columns: 1fr 1.15fr; gap: 88px; }
	.reserver { padding: 128px 0; }
	.reserver-grid { grid-template-columns: 1fr 1.05fr; gap: 80px; }
	.faq { padding: 128px 0; }
	.faq-grid { grid-template-columns: 380px 1fr; gap: 80px; }
}

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

/* ==========================================================================
   Pages intérieures
   ========================================================================== */

/* En-tête de page : l'équivalent calme du bandeau d'accueil. */

.page-head {
	padding: 130px 0 48px;
	background: var(--cream);
}

.page-head h1 {
	font-size: clamp(34px, 7vw, 62px);
	max-width: 18ch;
}

.page-chapo {
	margin-top: 20px;
	max-width: 56ch;
	font-size: 16px;
	line-height: 1.7;
	color: var(--ink-soft);
}

/* L'en-tête du site est transparent sur l'accueil, plein ailleurs. */
.site-header.is-solid {
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(8px);
	box-shadow: 0 1px 0 var(--line);
}

.site-header.is-solid .logo img { filter: none; }
.site-header.is-solid .nav a,
.site-header.is-solid .tel { color: var(--ink); }
.site-header.is-solid .burger span { background: var(--ink); }

/* -------------------------------------------------------- Contenu éditeur */

.page-contenu { padding: 64px 0 88px; }

.prose {
	max-width: 68ch;
	font-size: 16px;
	line-height: 1.8;
	color: var(--ink-soft);
}

.prose h2 { margin: 40px 0 14px; color: var(--ink); }
.prose h3 { margin: 30px 0 10px; color: var(--ink); }
.prose ul, .prose ol { padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--taupe-dark); }
.prose img { border-radius: var(--r-md); }

/* --------------------------------------------------- Sommaire des univers */

.univers-liste { padding: 64px 0 24px; }

.univers-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
	padding-bottom: 56px;
	margin-bottom: 56px;
	border-bottom: 1px solid var(--line);
}

.univers-row:last-child { border-bottom: 0; }

.univers-media {
	display: block;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--sand);
}

.univers-media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.univers-media:hover img { transform: scale(1.04); }

.univers-body h2 { margin-bottom: 14px; }
.univers-body h2 a { text-decoration: none; }
.univers-texte { color: var(--ink-soft); max-width: 52ch; }

.univers-services {
	margin: 22px 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.univers-services li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
}

.univers-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin-top: 26px;
}

/* ------------------------------------------------------- Page d'un univers */

.univers-detail { padding: 64px 0 88px; }

.univers-detail-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: start;
}

.univers-detail-media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--r-lg);
}

.univers-detail-body h2 { margin-bottom: 24px; }

.soins { margin: 0 0 32px; padding: 0; list-style: none; }

.soin {
	padding: 20px 0;
	border-bottom: 1px solid var(--line);
}

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

.soin-tete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
}

.soin h3 { margin: 0; font-size: 19px; }

.soin-meta {
	flex: 0 0 auto;
	font-size: 13px;
	color: var(--taupe);
	white-space: nowrap;
}

.soin-texte {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--ink-soft);
	max-width: 58ch;
}

/* ------------------------------------------------------------ Rendez-vous */

.rdv { padding: 56px 0 88px; }

.rdv-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
	align-items: start;
}

.rdv-bloc {
	padding: 26px 24px;
	margin-bottom: 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
}

.rdv-bloc-clair { background: var(--cream); border-color: transparent; }

.rdv-bloc h2 { font-size: 19px; margin-bottom: 12px; }

.rdv-tel { margin: 0 0 6px; }

.rdv-tel a {
	font-size: 25px;
	font-weight: 600;
	letter-spacing: -0.03em;
	text-decoration: none;
	color: var(--ink);
}

.rdv-note { margin: 0; font-size: 14px; color: var(--ink-soft); }

.rdv-etapes {
	margin: 0;
	padding-left: 18px;
	font-size: 14px;
	color: var(--ink-soft);
}

.rdv-etapes li { margin-bottom: 8px; }

.epf-absent {
	padding: 26px;
	border: 1px dashed var(--line);
	border-radius: var(--r-lg);
	color: var(--ink-soft);
}

/* ---------------------------------------------------------------- Contact */








/* ----------------------------------------------------------- FAQ complète */

.faq-page { padding-top: 56px; }
.faq-page .faq-list { max-width: 820px; }
.faq-lien { margin-top: 20px; }

/* --------------------------------------------------------------- Articles */

.liste-articles { display: grid; grid-template-columns: 1fr; gap: 40px; }
.article-media { display: block; border-radius: var(--r-lg); overflow: hidden; margin-bottom: 18px; }
.article-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.article-resume h2 { font-size: 24px; margin-bottom: 8px; }
.article-resume h2 a { text-decoration: none; }
.article-meta { font-size: 13px; color: var(--taupe); margin-bottom: 10px; }
.article-image { margin: 0 0 32px; }
.article-image img { width: 100%; border-radius: var(--r-lg); }

/* ------------------------------------------------------------ Menu mobile */


body.nav-ouvert { overflow: hidden; }


/* Le lien sous le manifeste de l'accueil. */
.manifeste-lien { margin-top: 26px; }

/* ================================================================ Tablette */

@media (min-width: 700px) {
	.univers-row { grid-template-columns: 1fr 1.25fr; gap: 40px; align-items: center; }
	.univers-detail-grid { grid-template-columns: 1fr 1.3fr; gap: 48px; }
	.liste-articles { grid-template-columns: 1fr 1fr; gap: 44px 32px; }
	.page-head { padding: 160px 0 64px; }
}

/* ================================================================== Bureau */

@media (min-width: 1000px) {
	.page-head { padding: 184px 0 80px; }
	.univers-liste { padding: 88px 0 32px; }
	.univers-row { grid-template-columns: 1fr 1.35fr; gap: 64px; padding-bottom: 72px; margin-bottom: 72px; }
	.univers-detail { padding: 88px 0 120px; }
	.univers-detail-grid { grid-template-columns: 1fr 1.4fr; gap: 72px; }
	.rdv { padding: 72px 0 120px; }
	.rdv-grid { grid-template-columns: 1.35fr 1fr; gap: 56px; }
	.page-contenu { padding: 80px 0 120px; }
	.nav-mobile { display: none !important; }
}

/* ------------------------------------- Barre d'action et page de réservation

   Sur la page de rendez-vous, la barre ne sert plus à rien : la cliente y est
   déjà, et elle recouvrait le formulaire au moment précis où on le remplit.
   On la retire et on laisse la pastille WhatsApp, qui reste utile pour poser
   une question sans quitter la page. */

.page-template-template-rendez-vous .actionbar { display: none; }

.page-template-template-rendez-vous .wa {
	display: inline-flex;
	width: 56px;
	padding: 0;
	justify-content: center;
}

.page-template-template-rendez-vous .wa-label { display: none; }

.page-template-template-rendez-vous body,
body.page-template-template-rendez-vous { padding-bottom: 0; }

/* Le module de réservation occupe toute la largeur utile du téléphone. */
.rdv-form .epf-booking { max-width: none; }

@media (min-width: 1000px) {
	.page-template-template-rendez-vous .wa {
		width: auto;
		padding: 0 22px 0 18px;
		justify-content: flex-start;
	}
	.page-template-template-rendez-vous .wa-label { display: inline; }
}

/* ==========================================================================
   Navigation — correctif et finition mobile
   ========================================================================== */

/* Les éléments de menu sont des <li> : sans remise à zéro, le navigateur
   affiche ses puces, y compris dans un menu horizontal. */

.nav-list,
.nav-mobile-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-list li,
.nav-mobile-list li {
	list-style: none;
	margin: 0;
}

.nav-list li::marker,
.nav-mobile-list li::marker {
	content: "";
}

.nav-list {
	display: flex;
	align-items: center;
	gap: 34px;
}

/* Le lien actif se signale par un trait fin, pas par une couleur criarde. */
.nav-list .current-menu-item > a,
.nav-list .current_page_item > a,
.nav-list .current-menu-ancestor > a {
	position: relative;
	opacity: 1;
}

.nav-list .current-menu-item > a::after,
.nav-list .current_page_item > a::after,
.nav-list .current-menu-ancestor > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -7px;
	height: 1px;
	background: currentColor;
	opacity: 0.55;
}

/* ------------------------------------------------------------ Menu mobile */

.nav-mobile {
	border-top: 1px solid var(--line);
	background: var(--white);
	padding: 8px 0 22px;
	max-height: calc(100svh - 76px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.nav-mobile .shell { display: block; }

.nav-mobile-list li + li { border-top: 1px solid var(--line); }

/* Cibles de tap confortables : toute la ligne est cliquable. */
.nav-mobile-list a {
	display: block;
	padding: 15px 2px;
	font-size: 17px;
	font-weight: 400;
	letter-spacing: -0.01em;
	text-decoration: none;
	color: var(--ink);
}

.nav-mobile-list .current-menu-item > a,
.nav-mobile-list .current_page_item > a,
.nav-mobile-list .current-menu-ancestor > a {
	color: var(--taupe-dark);
	font-weight: 500;
}

.nav-mobile-pied {
	display: grid;
	gap: 14px;
	justify-items: stretch;
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.nav-mobile-pied .btn { width: 100%; }

.nav-mobile-tel {
	text-align: center;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -0.01em;
	text-decoration: none;
	color: var(--taupe-dark);
}

/* Croix de fermeture : le bouton devient une croix une fois le menu ouvert. */
.burger {
	position: relative;
	display: grid;
	gap: 5px;
	width: 40px;
	height: 40px;
	align-content: center;
	justify-items: stretch;
	padding: 0 6px;
	border: 0;
	background: none;
	cursor: pointer;
}

.burger span {
	display: block;
	height: 1.5px;
	border-radius: 2px;
	background: var(--white);
	transition: transform 0.25s ease, background 0.3s ease;
}

.is-stuck .burger span,
.site-header.is-solid .burger span,
body.nav-ouvert .burger span { background: var(--ink); }

.burger.is-open span:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger.is-open span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* Menu ouvert : l'en-tête devient opaque, sinon le panneau flotte sur la photo. */
body.nav-ouvert .site-header {
	background: var(--white);
	box-shadow: 0 1px 0 var(--line);
}

body.nav-ouvert .site-header .logo img { filter: none; }
body.nav-ouvert .site-header .tel { color: var(--ink); }

@media (min-width: 1000px) {
	.nav-mobile { display: none !important; }
	.burger { display: none; }
}

/* ------------------------------------------------------------------- Carte

   L'iframe Google est une boîte fixe de 600 × 450 : sans cadre imposé, elle
   déborde sur téléphone. Le rapport d'image la rend fluide. */

.carte { padding: 0 0 88px; }

.carte-cadre {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--sand);
}

.carte-cadre iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.carte-lien { margin-top: 18px; }

@media (min-width: 700px) {
	.carte-cadre { aspect-ratio: 16 / 7; }
}

@media (min-width: 1000px) {
	.carte { padding: 0 0 120px; }
}

/* ------------------------------------------------------------------ Réseaux

   Pictogramme + nom : sur un site d'institut, la cliente cherche le compte
   Instagram par son nom autant que par son icône. */

.reseaux {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.reseaux li { margin: 0; list-style: none; }

.reseaux a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px 9px 13px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: -0.01em;
	text-decoration: none;
	color: var(--ink);
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.reseaux a:hover {
	border-color: var(--taupe);
	background: var(--cream);
	color: var(--taupe-dark);
}

.reseaux svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
	flex: 0 0 auto;
}

/* Dans le pied de page, sur fond sombre. */
.site-footer .reseaux a {
	border-color: rgba(255, 255, 255, 0.22);
	color: rgba(255, 255, 255, 0.78);
}

.site-footer .reseaux a:hover {
	border-color: rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.06);
	color: var(--white);
}

/* ==========================================================================
   Pied de page — reconstruit
   ========================================================================== */

/* Quatre colonnes de largeur égale écrasaient l'adresse et laissaient un grand
   vide sous le logo. La marque prend désormais plus de place, et les listes
   de liens moins. Sur téléphone, tout s'empile dans l'ordre utile :
   la relance d'abord, les mentions à la fin. */

.site-footer {
	padding: 0 0 26px;
	background: var(--ink);
	color: rgba(255, 255, 255, 0.62);
	font-size: 14px;
}

/* --------------------------------------------------------------- Relance */

.footer-cta {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.035);
}

.footer-cta-inner {
	display: grid;
	gap: 22px;
	padding: 40px 0;
}

.footer-cta-titre {
	margin: 0 0 6px;
	font-size: clamp(21px, 4.6vw, 27px);
	font-weight: 500;
	letter-spacing: -0.025em;
	color: var(--white);
}

.footer-cta-texte {
	margin: 0;
	max-width: 46ch;
	color: rgba(255, 255, 255, 0.62);
}

.footer-cta-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
}

.footer-cta .btn {
	background: var(--white);
	border-color: var(--white);
	color: var(--ink);
}

.footer-cta .btn:hover {
	background: var(--taupe);
	border-color: var(--taupe);
	color: var(--white);
}

.footer-cta-tel {
	font-size: 19px;
	font-weight: 500;
	letter-spacing: -0.02em;
	text-decoration: none;
	color: var(--white);
}

/* --------------------------------------------------------------- Colonnes */

.footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
	padding: 44px 0 40px;
}

.site-footer .logo { display: inline-block; margin-bottom: 16px; }
.site-footer .logo img { height: 40px; }

.footer-note {
	margin: 0;
	max-width: 34ch;
	line-height: 1.65;
}

.footer-col h4 {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--white);
}

.footer-col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-col li { margin: 0 0 9px; list-style: none; }

.site-footer a {
	text-decoration: none;
	transition: color 0.2s ease;
}

.site-footer a:hover { color: var(--white); }

.footer-adresse,
.footer-contact { margin: 0 0 14px; line-height: 1.65; }

.footer-horaires {
	display: grid;
	gap: 2px;
	margin: 0;
	line-height: 1.6;
}

.muted { color: rgba(255, 255, 255, 0.38); }

/* ------------------------------------------------------------- Mentions */

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 20px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.4);
}

.footer-bottom p { margin: 0; }

/* Dès qu'il y a la place, les deux listes de liens se partagent une ligne :
   200 px de hauteur gagnés sur un pied de page de téléphone. */

@media (min-width: 360px) and (max-width: 699px) {
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
	.footer-marque,
	.footer-infos { grid-column: 1 / -1; }
}

/* ================================================================ Tablette */

@media (min-width: 700px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 40px 32px;
		padding: 56px 0 44px;
	}

	.footer-marque { grid-column: 1 / -1; }

	.footer-cta-inner {
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 32px;
		padding: 48px 0;
	}
}

/* ================================================================== Bureau */

@media (min-width: 1000px) {
	.footer-grid {
		grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
		gap: 56px;
		padding: 72px 0 56px;
	}

	.footer-marque { grid-column: auto; }

	.footer-cta-inner { padding: 56px 0; }
}

/* ---------------------------------------------------- Cartes de prestation

   Le rapport d'image suit le nombre de colonnes : carré sur une ou deux
   cartes par ligne, 3/4 quand elles passent à quatre et deviennent étroites. */

@media (min-width: 1000px) {
	.card-media img { aspect-ratio: 3 / 4; }
}

.card-list {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card-text {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------------------------------------------------------- Fil d'Ariane */

.fil { margin-bottom: 18px; }

.fil ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--ink-soft);
}

.fil li { list-style: none; }

.fil li + li::before {
	content: "/";
	margin-right: 8px;
	color: var(--taupe-soft, #c9bcae);
}

.fil a { text-decoration: none; color: var(--taupe-dark); }
.fil a:hover { color: var(--ink); }
.fil [aria-current="page"] { color: var(--ink); }

/* ==========================================================================
   Page Contact — refaite
   ========================================================================== */

/* Six encadrés identiques mettaient le numéro de téléphone au même niveau
   qu'un lien Instagram. Ici le numéro et la carte occupent le haut, en grand ;
   les détails suivent, sans cadre, séparés par des filets. */

.contact-cle { padding: 48px 0 64px; }

.contact-cle-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: start;
}

/* --------------------------------------------------------- Bloc téléphone */

.contact-numero {
	display: block;
	margin: 0 0 10px;
	font-size: clamp(32px, 8vw, 52px);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1.05;
	text-decoration: none;
	color: var(--ink);
	transition: color 0.2s ease;
}

.contact-numero:hover { color: var(--taupe-dark); }

.contact-dispo {
	margin: 0 0 26px;
	font-size: 14px;
	color: var(--ink-soft);
}

.contact-boutons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
}

.btn-wa {
	gap: 9px;
	background: #25d366;
	border-color: #25d366;
}

.btn-wa:hover { background: #1fbe5a; border-color: #1fbe5a; }
.btn-wa .wa-icon { width: 18px; height: 18px; fill: currentColor; }

.contact-mail { margin: 0; font-size: 14.5px; }
.contact-mail a { color: var(--taupe-dark); text-decoration: none; }
.contact-mail a:hover { color: var(--ink); }

/* -------------------------------------------------------------- Bloc lieu */

.contact-lieu .carte-cadre { margin-bottom: 18px; }

.contact-adresse {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

.contact-adresse-texte {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--ink);
}

/* ---------------------------------------------------- Détails pratiques */

.contact-details { padding: 0 0 88px; }

.contact-details-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
	padding-top: 40px;
	border-top: 1px solid var(--line);
}

.contact-bloc-texte h2 {
	margin-bottom: 16px;
	font-size: 18px;
	letter-spacing: -0.02em;
}

.contact-liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-liste li {
	position: relative;
	padding-left: 18px;
	margin-bottom: 11px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ink-soft);
}

.contact-liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 11px;
	width: 8px;
	height: 1px;
	background: var(--taupe);
}

.contact-suivre-texte {
	margin: 0;
	font-size: 14.5px;
	color: var(--ink-soft);
}

/* ------------------------------------------------- Tableau des horaires */

.horaires {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
}

.horaires th,
.horaires td {
	padding: 9px 0;
	border-bottom: 1px solid var(--line);
	vertical-align: baseline;
}

.horaires tr:last-child th,
.horaires tr:last-child td { border-bottom: 0; }

.horaires th {
	text-align: left;
	font-weight: 400;
	color: var(--ink);
}

.horaires td {
	text-align: right;
	color: var(--ink-soft);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Le jour en cours est celui qu'on vient vérifier. */
.horaires .est-aujourdhui th,
.horaires .est-aujourdhui td {
	color: var(--taupe-dark);
	font-weight: 500;
}

.horaires .ferme th,
.horaires .ferme td { color: var(--taupe-soft, #c9bcae); }

.sep-horaire { color: var(--taupe-soft, #c9bcae); }

.contact-horaires-simple {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--ink-soft);
}

/* ================================================================ Tablette */

@media (min-width: 700px) {
	.contact-cle-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
	.contact-details-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* ================================================================== Bureau */

@media (min-width: 1000px) {
	.contact-cle { padding: 64px 0 80px; }
	.contact-cle-grid { grid-template-columns: 0.9fr 1.1fr; gap: 72px; }
	.contact-details { padding: 0 0 120px; }
	.contact-details-grid { grid-template-columns: 1fr 1fr; gap: 72px; padding-top: 52px; }
	.contact-lieu .carte-cadre { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   Formulaire de contact
   ========================================================================== */

.ecrire-section { padding: 0 0 88px; }

.ecrire {
	max-width: 760px;
	padding-top: 44px;
	border-top: 1px solid var(--line);
}

.ecrire h2 {
	margin-bottom: 10px;
	font-size: clamp(24px, 5vw, 34px);
}

.ecrire-intro {
	margin: 0 0 28px;
	max-width: 54ch;
	color: var(--ink-soft);
}

/* ------------------------------------------------------------ Retour d'envoi */

.ecrire-retour {
	margin: 0 0 24px;
	padding: 14px 18px;
	border-radius: var(--r-md);
	font-size: 14.5px;
	line-height: 1.55;
}

.ecrire-retour.est-ok {
	background: #eef5ee;
	color: #3d6b45;
}

.ecrire-retour.est-erreur {
	background: #fbeeec;
	color: #a8443b;
}

/* ------------------------------------------------------------------ Champs */

.ecrire-ligne {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 18px;
}

.champ {
	display: block;
	margin-bottom: 18px;
}

.champ > span {
	display: block;
	margin-bottom: 7px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink);
}

.champ > span em {
	font-style: normal;
	font-weight: 400;
	color: var(--ink-soft);
}

.champ input,
.champ textarea {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--white);
	font-family: var(--ui);
	font-size: 16px; /* évite le zoom automatique sur iOS */
	font-weight: 300;
	line-height: 1.5;
	color: var(--ink);
	transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.champ input::placeholder,
.champ textarea::placeholder { color: var(--taupe-soft, #c9bcae); }

.champ input:focus,
.champ textarea:focus {
	outline: none;
	border-color: var(--taupe);
	box-shadow: 0 0 0 3px rgba(161, 144, 126, 0.15);
}

.champ textarea { resize: vertical; min-height: 130px; }

/* Champ piège : hors écran, jamais atteint au clavier. */
.ecrire-piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------------------- Pied */

.ecrire-pied {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-top: 10px;
}

.ecrire-mention {
	margin: 0;
	max-width: 42ch;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ink-soft);
}

.ecrire-mention a { color: var(--taupe-dark); }

.ecrire-pied .btn { min-width: 160px; }

/* ================================================================ Tablette */

@media (min-width: 700px) {
	.ecrire-ligne { grid-template-columns: 1fr 1fr; }
	.ecrire { padding-top: 56px; }
}

@media (min-width: 1000px) {
	.ecrire-section { padding: 0 0 120px; }
}

/* ------------------------------- Page Contact : une action, un seul endroit

   La page est elle-même le canal de contact : elle affiche déjà le numéro en
   grand, un bouton WhatsApp et un formulaire. La pastille flottante et l'icône
   WhatsApp de la barre mobile feraient double emploi. Le bouton « Prendre
   rendez-vous » de la barre reste : c'est la seule action absente de la page. */

.page-template-template-contact .wa { display: none !important; }
.page-template-template-contact .ab-wa { display: none; }
.page-template-template-contact .ab-main { flex: 1; }