/* ==========================================================================
   Vitadiet — base
   ========================================================================== */
:root {
	/* Les quatre teintes de la planche « Palette des couleurs » de la
	   présentation, relevées en CMJN dans le PDF et converties :
	   terracotta 14/68/60/11 · tan 15/30/38/0 · pêche 6/16/22/0 · crème 3/7/9/0 */
	--accent: #c26659;      /* terracotta — couleur primaire */
	--accent-light: #d1847a;
	--accent-dark: #a8503f;
	/* Flèche des boutons, en deux versions selon le fond de la pastille. */
	--arrow-on-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--arrow-on-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c26659' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--tan: #d9b39e;
	--peach: #f0d6c7;
	--cream-2: #f7ede8;     /* crème de la palette, bandes secondaires */
	--cream: #fdfbf9;       /* fond principal, quasi blanc */
	--white: #ffffff;
	--gold: #d9b39e;        /* le tan remplace l'ancien doré */
	--ink: #4a3b36;         /* brun chaud, accordé à la palette */
	--ink-soft: #6b574e;
	--text: #55463f;
	--text-muted: #927d72;
	--line: rgba(74,59,54,.14);
	--radius: 22px;
	--radius-sm: 14px;
	--container: 1220px;
	--section-y: clamp(74px, 8vw, 118px); /* rythme vertical commun à toutes les sections */
	--font-serif: 'Cormorant Garamond', Georgia, serif;
	--font-sans: 'Montserrat', system-ui, -apple-system, Segoe UI, sans-serif;
	--ease: cubic-bezier(.22,.9,.32,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: 300;
	color: var(--text);
	background: var(--cream);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2 { font-family: var(--font-serif); font-weight: 400; margin: 0; line-height: 1.12; }
h3, h4 { font-family: var(--font-serif); font-weight: 400; margin: 0; line-height: 1.15; }
p { margin: 0; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.screen-reader-text { position: absolute; left: -9999px; }

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

/* Buttons — libellé en capitales espacées + pastille ronde pêche avec flèche.
   La pastille est un ::after : tous les boutons du thème l'obtiennent sans que
   leur markup change, et les <svg> déjà présents dans les liens sont masqués.
   Seule la couleur du libellé varie d'une variante à l'autre — terracotta sur fond
   clair, blanc au-dessus d'une photo. */
.btn {
	display: inline-flex; align-items: center; gap: 18px;
	padding: 0; border: 0; background: none;
	font-family: var(--font-sans);
	font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	color: var(--btn-ink, var(--accent-light));
	transition: color .3s var(--ease);
	white-space: nowrap; cursor: pointer;
}
.btn > svg { display: none; }
.btn::after {
	content: ''; flex: none;
	width: 52px; height: 52px; border-radius: 50%;
	background-color: var(--btn-badge, var(--accent));
	background-image: var(--btn-arrow, var(--arrow-on-dark));
	background-repeat: no-repeat; background-position: center; background-size: 20px 20px;
	transition: transform .35s var(--ease), background-color .3s var(--ease);
}
.btn:hover { color: var(--btn-ink-hover, var(--accent-dark)); }
.btn:hover::after { transform: translateX(5px); background-color: var(--btn-badge-hover, var(--accent-dark)); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

/* Libellé terracotta sur fond clair — la pastille, elle, est pleine partout. */
.btn-pill.btn-dark, .btn-pill.btn-outline,
.btn-pill.btn-light, .btn-pill.btn-outline-dark { --btn-ink: var(--accent); --btn-ink-hover: var(--accent-dark); }

/* Posé sur un aplat terracotta : pastille blanche, flèche terracotta. */
.on-accent .btn {
	--btn-ink: var(--white); --btn-ink-hover: var(--peach);
	--btn-badge: var(--white); --btn-badge-hover: var(--peach);
	--btn-arrow: var(--arrow-on-light);
}

.section-label { text-transform: uppercase; letter-spacing: .22em; font-size: 12px; color: var(--accent); font-weight: 600; margin-bottom: 14px; }
.section-label.light { color: var(--accent); }
.section-title { font-size: clamp(32px, 4.2vw, 50px); }
.section-title.light { color: var(--ink); }
.section-subtitle { color: var(--text-muted); font-size: 16px; margin-top: 14px; max-width: 560px; }
.section-subtitle.light { color: var(--text-muted); }
.section-head { text-align: center; margin-bottom: 56px; }
.section-head .section-subtitle { margin-left: auto; margin-right: auto; }

/* Séparateur de sections : deux filets et la marque du logo au centre. */
.section-divider { padding: 0; background: var(--cream); }
.section-divider + .about { padding-top: clamp(34px, 4vw, 52px); }
.section-divider-inner { display: flex; align-items: center; gap: clamp(18px, 3vw, 34px); }
.section-divider-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--tan), transparent); }
.section-divider-mark { flex: none; width: 34px; color: var(--accent); }
.section-divider-mark svg { display: block; width: 100%; height: auto; fill: currentColor; opacity: .85; }
.section-divider-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .7; }

/* ==========================================================================
   Reveal-on-scroll (data-aos) — plain CSS/JS, no library
   ========================================================================== */
/* Masquage conditionné à `.vd-js` (posé par le script en ligne du <head>) :
   sans JavaScript, le contenu s'affiche normalement au lieu d'une page blanche.
   `.vd-anim-off` est le filet déclenché si main.js ne démarre pas. */
.vd-js [data-aos] { opacity: 0; transition: opacity .8s var(--ease), transform .8s var(--ease); will-change: opacity, transform; }
.vd-js [data-aos="fade-up"] { transform: translateY(36px); }
.vd-js [data-aos="fade-right"] { transform: translateX(-40px); }
.vd-js [data-aos="fade-left"] { transform: translateX(40px); }
.vd-js [data-aos="zoom-in"] { transform: scale(.92); }
.vd-js [data-aos].aos-visible { opacity: 1; transform: none; }
.vd-anim-off [data-aos] { opacity: 1 !important; transform: none !important; }

/* ==========================================================================
   Préchargeur — l'icône se dessine au trait puis se remplit de bas en haut
   ========================================================================== */
.site-preloader {
	position: fixed; inset: 0; z-index: 9999;
	display: flex; align-items: center; justify-content: center;
	background: var(--cream);
	/* Filet de sécurité : si le JS ne s'exécute pas, l'écran s'efface seul. */
	animation: vd-preloader-out .7s var(--ease) 4.2s forwards;
}
.site-preloader.is-done { opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility .6s var(--ease); }

/* Deux temps : le contour se dessine au trait, puis la marque pleine monte de
   bas en haut par-dessus — le rideau qui se lève.
   NB : le tracé du logo est lui-même une fine bande pleine. `fill: none` +
   `stroke` en trace le pourtour (effet filaire), et c'est le remplissage qui
   donne la marque définitive. Un <path> laissé sans règle retombe sur le noir. */
.preloader-mark { position: relative; width: clamp(88px, 11vw, 132px); aspect-ratio: 1; }
.preloader-mark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.preloader-mark-track { fill: none; stroke: var(--accent); stroke-width: 5; opacity: .16; }
.preloader-mark-draw {
	fill: none; stroke: var(--accent); stroke-width: 5;
	stroke-linecap: round; stroke-linejoin: round;
}
@keyframes vd-draw { to { stroke-dashoffset: 0; } }

/* Le découpage est sur le <span>, pas sur le <path> : c'est le seul endroit où
   clip-path a une boîte de référence fiable dans tous les navigateurs. */
.preloader-mark-veil {
	position: absolute; inset: 0; display: block;
	clip-path: inset(100% 0% 0% 0%);
	animation: vd-veil 1.15s var(--ease) 1.35s forwards;
}
.preloader-mark-veil path { fill: var(--accent); }

/* Les deux bornes doivent être dans la MÊME unité : mélanger 100% et 0 empêche
   le navigateur d'interpoler. */
@keyframes vd-veil { from { clip-path: inset(100% 0% 0% 0%); } to { clip-path: inset(0% 0% 0% 0%); } }
@keyframes vd-preloader-out { to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
	.preloader-mark-draw { display: none; }
	.preloader-mark-veil { clip-path: none; animation: none; }
	.site-preloader { animation-delay: .4s; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	padding: 22px 0;
	transition: padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
/* La pastille ne fait pas toute la largeur : sans ce voile, le contenu qui
   défile se retrouve tranché en deux de part et d'autre d'elle. Le dégradé le
   fait disparaître proprement au lieu de le couper. */
.site-header::before {
	content: ''; position: absolute; z-index: -1; pointer-events: none;
	top: 0; left: 0; right: 0; height: 150px;
	background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 42%, rgba(253,251,249,0) 100%);
	opacity: 0; transition: opacity .35s var(--ease);
}
.site-header.scrolled::before { opacity: 1; }
.header-inner {
	max-width: var(--container); margin: 0 auto; padding: 10px 14px 10px 26px;
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	border-radius: 999px;
	transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
/* Pastille blanche en permanence, ombre qui s'affirme au défilement. */
.header-inner { background: rgba(255,255,255,.82); backdrop-filter: blur(14px); box-shadow: 0 8px 26px -18px rgba(74,59,54,.4); }
.site-header.scrolled { padding: 12px 0; }
.site-header.scrolled .header-inner { background: rgba(255,255,255,.94); box-shadow: 0 10px 30px -14px rgba(74,59,54,.28); }

.logo-text { font-family: var(--font-serif); font-size: 26px; font-weight: 500; color: var(--ink); transition: color .4s; }
.logo-text em { font-style: italic; color: var(--accent); }

/* Le site n'a plus aucun bandeau sombre : le logo garde partout ses couleurs
   d'origine, plus besoin de le passer en blanc au-dessus d'une photo. */
.custom-logo-link { display: block; }
.custom-logo { width: auto; height: 46px; }
@media (max-width: 640px) { .custom-logo { height: 38px; } }

.main-nav .nav-menu { display: flex; gap: 22px; flex-wrap: nowrap; }
.main-nav a {
	font-size: 12.5px; font-weight: 500; letter-spacing: .01em; color: var(--ink-soft);
	position: relative; padding: 6px 0; transition: color .35s; white-space: nowrap;
}
.main-nav a:hover { color: var(--accent); }
.main-nav a::after {
	content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1.5px;
	background: currentColor; transition: width .35s var(--ease);
}
.main-nav a:hover::after { width: 100%; }

/* Page courante : même traitement que le survol, mais permanent. Les classes
   WordPress sont couvertes en plus des nôtres, au cas où un vrai menu serait
   créé en back-office à la place du menu de repli. */
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav .current-menu-ancestor > a,
.main-nav a[aria-current="page"] { color: var(--accent); }
.main-nav .current-menu-item > a::after,
.main-nav .current_page_item > a::after,
.main-nav .current-menu-ancestor > a::after,
.main-nav a[aria-current="page"]::after { width: 100%; }

.mobile-nav-menu .current-menu-item > a,
.mobile-nav-menu .current_page_item > a,
.mobile-nav-menu a[aria-current="page"] { color: var(--accent); }

.header-actions { display: flex; align-items: center; gap: 18px; }

/* Bouton d'en-tête : pastille réduite, libellé terracotta — la barre est claire partout. */
.header-actions .btn { gap: 12px; font-size: 11.5px; --btn-ink: var(--accent); --btn-ink-hover: var(--accent); }
.header-actions .btn::after { width: 42px; height: 42px; background-size: 17px 17px; }

/* Bouton d'appel à gauche, burger à droite : sur mobile la barre se lit
   téléphone · logo centré · menu. Le téléphone reste masqué en desktop, où la
   navigation complète est déjà affichée. */
.header-phone {
	display: none; flex: none;
	width: 44px; height: 44px; border-radius: 50%;
	align-items: center; justify-content: center;
	color: var(--accent); background: var(--peach);
	transition: background .3s var(--ease), transform .3s var(--ease);
}
.header-phone svg { width: 19px; height: 19px; }
.header-phone:hover { background: var(--tan); transform: translateY(-2px); }

.nav-toggle {
	display: flex; flex-direction: column; justify-content: center; gap: 4px;
	width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
	background: var(--accent);
	box-shadow: 0 10px 22px -12px rgba(194,102,89,.95);
	transition: background .3s var(--ease), transform .3s var(--ease);
}
.nav-toggle:hover { background: var(--accent-dark); transform: translateY(-2px); }
.nav-toggle span { width: 17px; height: 1.8px; border-radius: 2px; margin: 0 auto; background: var(--white); transition: all .3s var(--ease); }

@media (max-width: 1100px) {
	.header-phone { display: flex; }
	.header-inner { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; padding: 8px 10px; }
	.site-logo, .custom-logo-link { justify-self: center; }
	.header-actions { justify-self: end; }
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1101px) { .nav-toggle { display: none; } }
@media (max-width: 1100px) { .main-nav { display: none; } }

/* En dessous de 760px, logo + « Réserver » + burger ne tiennent plus sur une
   ligne et poussaient la barre au-delà de l'écran (donc toute la page rognée,
   body ayant overflow-x: hidden). Le menu mobile porte déjà un bouton
   « Réserver », celui de la barre est donc masqué. */
@media (max-width: 760px) {
	.container { padding: 0 20px; }

	.header-actions .btn { display: none; }
}

.mobile-menu {
	position: fixed; inset: 0; top: 0; z-index: 99;
	background: var(--cream); color: var(--ink);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
	transform: translateY(-100%); transition: transform .5s var(--ease);
}
.mobile-menu.open { transform: translateY(0); }
.mobile-menu-close {
	position: absolute; top: 26px; right: 22px;
	width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
	display: flex; align-items: center; justify-content: center;
	background: var(--white); color: var(--accent); cursor: pointer;
	transition: background .3s var(--ease), transform .3s var(--ease);
}
.mobile-menu-close:hover { background: var(--cream-2); transform: rotate(90deg); }
.mobile-menu-close svg { width: 20px; height: 20px; }
.mobile-nav-menu { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.mobile-nav-menu a { font-family: var(--font-serif); font-size: 28px; color: var(--ink); transition: color .3s; }
.mobile-nav-menu a:hover { color: var(--accent); }
.mobile-menu .btn { --btn-ink: var(--accent); --btn-ink-hover: var(--accent); }

/* ==========================================================================
   Hero
   ========================================================================== */
/* Composition éditoriale : colonne texte sur fond crème + photo en arche.
   La photo n'est plus en pleine page, donc l'en-tête de l'accueil passe en
   version claire (voir $vitadiet_has_photo_hero dans header.php). */
/* Le hero tient dans une hauteur d'écran : espacements et corps du titre sont
   plafonnés en vh autant qu'en vw, pour que le titre ne fasse jamais déborder la
   colonne de texte sous la ligne de flottaison. 
   Le hero occupe une hauteur d'écran. */
.hero {
	position: relative; overflow: hidden;
	background: var(--cream);
	min-height: 100vh; display: flex; align-items: center;
	padding: clamp(104px, 14vh, 150px) 0 clamp(34px, 4.5vh, 52px);
}
.hero::before {
	content: ''; position: absolute; z-index: 0; pointer-events: none;
	top: -20%; right: -12%; width: 680px; height: 680px; border-radius: 50%;
	background: radial-gradient(circle, rgba(194,95,82,.16), rgba(194,95,82,0) 68%);
}
/* `stretch` plutôt que `center` : la photo commence et finit exactement à la
   même hauteur que la colonne de texte. */
.hero-inner {
	position: relative; z-index: 1; width: 100%;
	display: grid; grid-template-columns: 1.05fr .95fr;
	align-items: stretch; gap: clamp(40px, 6vw, 88px);
}

.hero-copy { max-width: 620px; }
.hero-eyebrow { text-transform: uppercase; letter-spacing: .3em; font-size: 12px; color: var(--accent); margin-bottom: clamp(12px, 2vh, 22px); font-weight: 600; }
.hero-title { font-size: clamp(38px, min(5.2vw, 8vh), 78px); color: var(--ink); line-height: 1.08; }
.hero-subtitle { margin-top: clamp(14px, 2.4vh, 26px); font-size: 16.5px; max-width: 470px; color: var(--text-muted); font-weight: 300; line-height: 1.7; }
.hero-copy .btn { margin-top: clamp(22px, 3.4vh, 38px); }

.hero-features {
	margin-top: clamp(24px, 3.8vh, 48px); padding-top: clamp(20px, 2.8vh, 32px); border-top: 1px solid rgba(194,95,82,.14);
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.hero-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.hero-features svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; color: var(--gold); }

.hero-visual { position: relative; display: flex; flex-direction: column; }
/* Arche filaire décalée, en écho à la photo */
.hero-visual::before {
	content: ''; position: absolute; inset: 30px -30px -30px 30px; pointer-events: none;
	border: 1px solid rgba(194,95,82,.22);
	border-radius: 260px 260px 22px 22px;
}
.hero-frame {
	position: relative; overflow: hidden;
	flex: 1 1 auto; min-height: 320px;
	border-radius: 260px 260px 22px 22px;
	box-shadow: 0 44px 90px -46px rgba(194,95,82,.55);
}
.hero-frame-media {
	position: absolute; inset: -5%;
	background-size: cover; background-position: center;
	transition: transform 6s var(--ease);
}


@media (max-width: 1000px) {
	.hero { min-height: 0; padding: 130px 0 80px; }
	.hero-inner { grid-template-columns: 1fr; gap: 52px; }
	.hero-visual::before { display: none; }
	.hero-frame { height: clamp(330px, 52vh, 460px); border-radius: 200px 200px 20px 20px; }
	.hero-features { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* ==========================================================================
   Stats
   ========================================================================== */
/* Ceinture pleine largeur en terracotta : une bande qui traverse la page, et
   non plus une carte blanche flottante. */
.stats { position: relative; z-index: 2; padding: 0; background: var(--accent); }
.stats-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	padding: clamp(44px, 5vw, 62px) 24px; text-align: center;
}
.stat-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 26px; }
.stat-icon {
	display: flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; margin-bottom: 8px;
	border-radius: 50%; background: rgba(255,255,255,.18); color: var(--white);
}
.stat-icon svg { width: 22px; height: 22px; }
.stat-item + .stat-item::before {
	content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	width: 1px; height: 76px;
	background: linear-gradient(180deg, transparent, rgba(255,255,255,.35), transparent);
}
.stat-number { font-family: var(--font-serif); font-size: clamp(38px, 4.2vw, 56px); font-weight: 500; line-height: 1; color: var(--white); }
.stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.8); }

@media (max-width: 760px) {
	.stats-grid { padding: 38px 18px; gap: 34px; }
	.stat-item + .stat-item::before { display: none; }
}

/* ==========================================================================
   About
   ========================================================================== */
.about { padding: var(--section-y) 0; }
.about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; }
.about-copy { margin: 26px 0 34px; color: var(--text-muted); font-size: 16px; line-height: 1.8; }
.about-copy p + p { margin-top: 14px; }
.about-media { position: relative; }
.about-img-1 { border-radius: var(--radius); width: 100%; aspect-ratio: 4/5; object-fit: cover; box-shadow: 0 40px 60px -30px rgba(74,59,54,.35); }
.about-wide-media { margin-top: 70px; border-radius: var(--radius); overflow: hidden; }
.about-wide-media img { width: 100%; aspect-ratio: 21/9; object-fit: cover; transition: transform 1.2s var(--ease); }
.about-wide-media:hover img { transform: scale(1.04); }

@media (max-width: 900px) {
	.about-grid { grid-template-columns: 1fr; gap: 46px; }
	/* Une seule colonne : en 4/5 sur toute la largeur, la photo occupait presque
	   un écran entier. On la ramène à un format paysage plafonné en hauteur. */
	.about-img-1 { aspect-ratio: 4/3; max-height: 46vh; }
	.about { padding: var(--section-y) 0; }
	.about-wide-media { margin-top: 40px; }
}

/* ==========================================================================
   Services (dark block)
   ========================================================================== */
.services { background: var(--cream-2); padding: var(--section-y) 0; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-card {
	position: relative; display: block; border-radius: var(--radius); overflow: hidden;
	aspect-ratio: 3/4; background: var(--ink-soft);
}
/* Les photos sont en paysage, les cartes en 3/4 : on cadre au tiers supérieur
   pour garder le sujet dans le champ plutôt que de le couper. */
.service-card img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; transition: transform .8s var(--ease); }
.service-card::after {
	content: ''; position: absolute; inset: 0;
	/* Voile concentré sur la bande basse, là où se pose le titre : au-delà, il
	   assombrissait le sujet de la photo sur plus de la moitié de la carte. */
	background: linear-gradient(180deg, rgba(74,59,54,0) 48%, rgba(74,59,54,.3) 72%, rgba(74,59,54,.86) 100%);
	transition: opacity .4s;
}
.service-card:hover img { transform: scale(1.08); }
.service-arrow {
	position: absolute; top: 18px; right: 18px; z-index: 2;
	width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.15);
	backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center;
	color: var(--white); transform: rotate(0deg) scale(1); transition: transform .4s var(--ease), background .4s;
}
.service-arrow svg { width: 16px; height: 16px; }
.service-card:hover .service-arrow { transform: rotate(45deg) scale(1.05); background: var(--gold); }
.service-info { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 2; color: var(--white); }
.service-info h3 { font-size: 22px; color: var(--white); }
.service-info p { font-size: 13px; color: rgba(255,255,255,.7); margin-top: 8px; max-height: 0; overflow: hidden; opacity: 0; transition: all .4s var(--ease); }
.service-card:hover .service-info p { max-height: 60px; opacity: 1; margin-top: 8px; }

@media (max-width: 980px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Feature banner
   ========================================================================== */
/* Bloc arrondi contenu — panneau crème + photo — au lieu d'un bandeau
   pleine largeur où le texte se posait directement sur l'image. */
.feature-banner { padding: var(--section-y) 0; background: var(--cream); }
.feature-banner-inner {
	display: grid; grid-template-columns: 1.05fr .95fr;
	border-radius: var(--radius); overflow: hidden;
	background: var(--accent);
	box-shadow: 0 30px 70px -42px rgba(194,102,89,.75);
}
.feature-content {
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
	padding: clamp(38px, 4.6vw, 70px); color: var(--white);
}
.feature-content h2 { font-size: clamp(34px, 4.2vw, 54px); color: var(--white); }
.feature-content p { margin-top: 16px; font-size: 15.5px; line-height: 1.75; color: rgba(255,255,255,.82); max-width: 420px; }
.feature-content .btn {
	--btn-ink: var(--white); --btn-ink-hover: var(--peach);
	--btn-badge: var(--white); --btn-badge-hover: var(--peach);
	--btn-arrow: var(--arrow-on-light);
}
.feature-content .btn { margin-top: 32px; }
.feature-media { min-height: 400px; background-size: cover; background-position: center; }

@media (max-width: 900px) {

	.feature-banner-inner { grid-template-columns: 1fr; }
	.feature-media { order: -1; min-height: 240px; }
}

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery { padding: var(--section-y) 0; }
.gallery-grid-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 160px; gap: 18px; }
.gallery-grid-mosaic .gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery-grid-mosaic .gallery-item:nth-child(4) { grid-column: span 2; grid-row: span 2; }
.gallery-item { position: relative; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; display: block; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gallery-item:hover img { transform: scale(1.1); }
.gallery-overlay {
	position: absolute; inset: 0; background: rgba(74,59,54,.45); opacity: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
	color: var(--white); transition: opacity .4s;
}
.gallery-overlay svg { width: 26px; height: 26px; }
.gallery-overlay em { font-style: normal; font-size: 13px; letter-spacing: .04em; }
.gallery-item:hover .gallery-overlay { opacity: 1; }

@media (max-width: 900px) {
	.gallery-grid-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
	.gallery { padding: var(--section-y) 0; }
}

/* Lightbox */
.lightbox {
	position: fixed; inset: 0; z-index: 200; background: rgba(15,13,17,.94);
	display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden;
	transition: opacity .35s, visibility .35s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-image { max-width: 84vw; max-height: 78vh; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lightbox-caption { position: absolute; bottom: 32px; color: rgba(255,255,255,.75); font-size: 14px; }
.lightbox-close, .lightbox-prev, .lightbox-next {
	position: absolute; background: rgba(255,255,255,.08); color: var(--white); border: none; border-radius: 50%;
	cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .3s;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: var(--accent); }
.lightbox-close { top: 26px; right: 26px; width: 46px; height: 46px; font-size: 24px; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 30px; }
.lightbox-prev { left: 26px; }
.lightbox-next { right: 26px; }

/* ==========================================================================
   Contact CTA
   ========================================================================== */
.contact-cta { padding: var(--section-y) 0; background: var(--cream-2); }
.contact-cta-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 30px; }
.contact-cta-inner h2 { font-size: clamp(26px, 3vw, 36px); }
.contact-cta-inner p { color: var(--text-muted); margin-top: 10px; }
.contact-cta-actions { display: flex; gap: 16px; flex-wrap: wrap; }
/* Cette section est sur fond crème : le libellé repasse en terracotta. */
.contact-cta .btn-outline-dark { --btn-ink: var(--accent-light); --btn-ink-hover: var(--accent); }

/* ==========================================================================
   Avis clientes
   ========================================================================== */
.reviews { padding: var(--section-y) 0; background: var(--cream); }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 26px; }
.review-card {
	position: relative; margin: 0;
	background: var(--white); border-radius: var(--radius);
	padding: 46px 34px 34px;
	box-shadow: 0 26px 54px -34px rgba(194,95,82,.35), 0 0 0 1px rgba(194,95,82,.07);
	transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.review-card:hover { transform: translateY(-6px); box-shadow: 0 36px 66px -34px rgba(194,95,82,.45), 0 0 0 1px rgba(194,95,82,.12); }
.review-quote { position: absolute; top: 26px; right: 30px; width: 40px; height: 40px; fill: rgba(194,95,82,.1); }
.review-stars { display: flex; gap: 4px; margin-bottom: 20px; }
.review-stars svg { width: 16px; height: 16px; fill: rgba(194,95,82,.16); }
.review-stars svg.is-on { fill: var(--gold); }
.review-card blockquote { margin: 0; font-size: 15.5px; line-height: 1.8; color: var(--text); font-weight: 300; }
.review-card figcaption { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(194,95,82,.12); display: flex; flex-direction: column; gap: 4px; }
.review-author { font-family: var(--font-serif); font-size: 19px; color: var(--accent); }
.review-meta { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); }

/* ==========================================================================
   FAQ + contact (fin de la page d'accueil)
   ========================================================================== */
.faq-contact { padding: var(--section-y) 0; background: var(--white); }
.faq-contact-inner { display: grid; grid-template-columns: 1fr .9fr; gap: clamp(40px, 5vw, 76px); align-items: start; }
.faq-title { font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 34px; }

.faq-list { border-top: 1px solid rgba(194,95,82,.14); }
.faq-item { border-bottom: 1px solid rgba(194,95,82,.14); }
.faq-item summary {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	padding: 22px 0; cursor: pointer; list-style: none;
	font-family: var(--font-serif); font-size: 20px; color: var(--ink);
	transition: color .3s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary svg {
	flex: none; width: 20px; height: 20px; color: var(--accent);
	transition: transform .35s var(--ease);
}
.faq-item[open] summary svg { transform: rotate(45deg); }
.faq-item[open] summary { color: var(--accent); }
.faq-item p { padding: 0 44px 24px 0; font-size: 15px; line-height: 1.8; color: var(--text-muted); }

.faq-contact-card {
	background: var(--cream); border-radius: var(--radius);
	padding: clamp(30px, 3.4vw, 44px);
	box-shadow: 0 0 0 1px rgba(194,95,82,.08);
}
.faq-contact-card.is-alone { max-width: 620px; margin: 0 auto; }
.faq-contact-card h2 { font-size: clamp(28px, 3vw, 38px); color: var(--ink); }
.faq-contact-intro { margin-top: 14px; font-size: 15px; line-height: 1.75; color: var(--text-muted); }
.faq-contact-coords { margin: 26px 0 30px; padding-bottom: 26px; border-bottom: 1px solid rgba(194,95,82,.14); display: flex; flex-direction: column; gap: 14px; }
.faq-contact-coords li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; color: var(--text); }
.faq-contact-coords svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }
.faq-contact-coords a:hover { color: var(--accent); }

@media (max-width: 940px) {
	.faq-contact-inner { grid-template-columns: 1fr; gap: 52px; }

}

/* ==========================================================================
   Footer
   ========================================================================== */
/* Pied de page clair, aligné sur la palette de la présentation (et non plus le noir
   générique), logo réel en blanc, accents rosés plutôt que gris bleuté. */
.site-footer {
	background: var(--cream-2); border-top: 1px solid var(--line);
	color: var(--text-muted); padding: 90px 0 0;
}
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: 60px; padding-bottom: 70px; }
.logo-text.light { color: var(--ink); }
.footer-logo { display: inline-block; }
.footer-logo img { height: 54px; width: auto; }
.footer-brand p { margin-top: 22px; font-size: 14px; line-height: 1.85; max-width: 340px; color: var(--text-muted); }
.footer-note { color: var(--accent) !important; font-style: italic; font-family: var(--font-serif); font-size: 17px !important; margin-top: 16px !important; }
.site-footer h4 {
	color: var(--ink); font-family: var(--font-sans);
	font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em;
	margin-bottom: 24px;
}
.site-footer ul li { margin-bottom: 13px; font-size: 14px; }
.site-footer ul li a { transition: color .3s; }
.site-footer ul li a:hover { color: var(--accent); }
.footer-contact li { display: flex; align-items: flex-start; gap: 10px; }
.footer-contact svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--accent-light); }
.social-links { display: flex; gap: 12px; margin-top: 26px; }
.social-link { width: 38px; height: 38px; border-radius: 50%; background: var(--white); color: var(--accent); box-shadow: 0 0 0 1px var(--line); display: flex; align-items: center; justify-content: center; transition: background .3s, transform .3s; }
.social-link svg { width: 16px; height: 16px; }
.social-link:hover { background: var(--accent); color: var(--white); transform: translateY(-3px); }
.footer-bottom { border-top: 1px solid var(--line); padding: 22px 0; text-align: center; font-size: 13px; color: var(--text-muted); }

@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr; gap: 44px; } }

/* Back to top */
.back-to-top {
	position: fixed; bottom: 30px; right: 30px; z-index: 60;
	width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--accent); color: var(--white);
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: all .4s var(--ease);
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--accent); }
.back-to-top svg { width: 18px; height: 18px; }

/* Generic pages */
.generic-content { padding: 160px 0 100px; }

/* ==========================================================================
   Service pages — hero + flexible content blocks
   ========================================================================== */
/* Photo en fond plein cadre, voile clair par-dessus pour que le titre reste
   lisible quelle que soit la photo, sans jamais passer à travers. */
.service-hero {
	position: relative; overflow: hidden;
	min-height: 56vh; display: flex; align-items: center;
	background-color: var(--cream); background-size: cover; background-position: center;
	padding: clamp(140px, 17vh, 190px) 0 clamp(80px, 10vh, 116px);
}
/* Le « voile » de la présentation : un rideau clair tiré devant la photo, qui
   la laisse deviner sans jamais gêner la lecture du titre. */
.service-hero-scrim {
	position: absolute; inset: 0; pointer-events: none;
	/* Voile léger sur l'ensemble pour laisser la photo lisible, renforcé au
	   centre par un halo pour que le titre garde son contraste. */
	background:
		linear-gradient(180deg, rgba(253,251,249,.5) 0%, rgba(253,251,249,.38) 45%, rgba(247,237,232,.66) 100%),
		radial-gradient(62% 58% at 50% 46%, rgba(253,251,249,.78) 0%, rgba(253,251,249,.3) 55%, rgba(253,251,249,0) 100%);
}
/* Composition volontairement distincte du hero d'accueil : titre centré, puis
   bande photo en paysage — et non le duo texte-à-gauche / arche-portrait. */
.service-hero-head { position: relative; z-index: 2; text-align: center; color: var(--ink); }
.service-hero-crumbs {
	display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 22px;
	font-size: 11.5px; text-transform: uppercase; letter-spacing: .18em; font-weight: 500;
	color: var(--text-muted);
}
/* Fil d'Ariane en terracotta, couleur d'accent de la palette. */
.service-hero-crumbs a { color: var(--accent); transition: color .3s; }
.service-hero-crumbs a:hover { color: var(--accent-light); }
.service-hero-head h1 { font-size: clamp(38px, 5.2vw, 66px); color: var(--ink); }
.service-hero-subtitle {
	margin: 16px auto 0; max-width: 540px;
	font-size: 16.5px; line-height: 1.7; color: var(--text-muted);
}

@media (max-width: 900px) {
	.service-hero { min-height: 44vh; }
}

/* Encore utilisé par le panneau de la page Contact. */
.service-hero-eyebrow { text-transform: uppercase; letter-spacing: .3em; font-size: 12px; color: var(--gold); font-weight: 600; margin-bottom: 16px; }

.section-title.centered { text-align: center; }

/* Intro */
.flex-intro { padding: 90px 0 20px; }
.flex-intro-inner { max-width: 760px; margin: 0 auto; text-align: center; font-size: 17px; line-height: 1.8; color: var(--text-muted); }
.flex-intro-inner p + p { margin-top: 14px; }

/* Pricing table (menu style, optionally with an alternating photo) */
.flex-pricing { padding: 60px 0; }
.pricing-wrap { max-width: 720px; margin: 0 auto; }
.pricing-block { width: 100%; }
.pricing-eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: 11.5px; color: var(--gold); font-weight: 600; margin-bottom: 10px; }
.pricing-title { font-size: 28px; margin-bottom: 8px; }
.pricing-desc { color: var(--text-muted); font-size: 15px; margin-bottom: 26px; }
.pricing-rows { border-top: 1px solid rgba(44,39,48,.1); }
.pricing-rows li {
	display: flex; align-items: baseline; gap: 10px; padding: 16px 0;
	border-bottom: 1px solid rgba(44,39,48,.1);
}
/* `min-width: 0` sur les deux colonnes : sans lui, un libellé ou un prix long
   impose sa largeur minimale à la ligne flex, élargit la piste de grille et
   fait déborder toute la page horizontalement sur mobile. */
.pricing-label { font-size: 15.5px; color: var(--text); min-width: 0; }
.pricing-dots { flex: 1 1 20px; min-width: 20px; border-bottom: 1px dotted rgba(44,39,48,.25); margin-bottom: 5px; }
.pricing-price { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--accent); white-space: nowrap; min-width: 0; }

/* Sur petit écran, prix sous le libellé plutôt qu'une ligne à rallonge. */
@media (max-width: 560px) {
	.pricing-rows li { flex-wrap: wrap; gap: 2px 10px; }
	.pricing-dots { display: none; }
	.pricing-label { flex: 1 1 100%; }
	.pricing-price { white-space: normal; }
}

.flex-pricing.has-image .pricing-wrap {
	max-width: var(--container); display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: center;
}
.flex-pricing.has-image .pricing-wrap.is-reverse { grid-template-columns: 1.15fr .85fr; }
.flex-pricing.has-image .pricing-wrap.is-reverse .pricing-media { order: 2; }
.flex-pricing.has-image .pricing-wrap.is-reverse .pricing-block { order: 1; }
/* Sources en paysage recadrées en 4/5 : on décale le cadrage pour garder le
   sujet dans le champ plutôt que de le couper sur le bord. */
.pricing-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 58% center; border-radius: var(--radius); box-shadow: 0 30px 60px -30px rgba(74,59,54,.3); }

@media (max-width: 860px) {
	.flex-pricing.has-image .pricing-wrap,
	.flex-pricing.has-image .pricing-wrap.is-reverse { grid-template-columns: 1fr; gap: 30px; }
	.flex-pricing.has-image .pricing-wrap.is-reverse .pricing-media,
	.flex-pricing.has-image .pricing-wrap.is-reverse .pricing-block { order: initial; }
	.pricing-media img { aspect-ratio: 16/10; }
}

/* Feature / ritual cards — numbered "task card" style */
.flex-cards { padding: 90px 0; background: var(--white); }
.task-cards {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px;
	margin-top: 50px; align-items: start;
}
.task-card {
	border-radius: var(--radius); padding: 30px 26px 32px; transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.task-card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -28px rgba(74,59,54,.3); }
.task-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.task-card-number {
	width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	font-family: var(--font-serif); font-size: 13px; font-weight: 600;
}
.task-card-arrow {
	width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
	transition: transform .4s var(--ease);
}
.task-card-arrow svg { width: 15px; height: 15px; }
.task-card:hover .task-card-arrow { transform: rotate(45deg); }
.task-card h3 { font-size: 19px; margin-bottom: 14px; }
.task-card ul { display: flex; flex-direction: column; gap: 9px; }
.task-card li { font-size: 13.5px; padding-left: 16px; position: relative; line-height: 1.5; }
.task-card li::before { content: ''; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; }

.task-card-a { background: var(--cream-2); color: var(--text); }
.task-card-a .task-card-number { background: var(--white); color: var(--accent); }
.task-card-a .task-card-arrow { background: var(--ink); color: var(--white); }
.task-card-a li { color: var(--text-muted); }
.task-card-a li::before { background: var(--gold); }

.task-card-b { background: var(--accent); color: var(--white); }
.task-card-b h3 { color: var(--white); }
.task-card-b .task-card-number { background: rgba(255,255,255,.16); color: var(--white); }
.task-card-b .task-card-arrow { background: var(--gold); color: var(--ink); }
.task-card-b li { color: rgba(255,255,255,.82); }
.task-card-b li::before { background: rgba(255,255,255,.7); }

@media (min-width: 900px) {
	.task-cards > .task-card:nth-child(2), .task-cards > .task-card:nth-child(4) { transform: translateY(-22px); }
	.task-cards > .task-card:nth-child(2):hover, .task-cards > .task-card:nth-child(4):hover { transform: translateY(-28px); }
}

/* ==========================================================================
   Process / ritual timeline ("How We Work" style)
   ========================================================================== */
.process-card { position: relative; background: var(--cream-2); border-radius: var(--radius); padding: 20px clamp(20px, 5vw, 56px); margin-top: 50px; }
.process-line { position: absolute; left: 50%; top: 30px; bottom: 30px; width: 1px; background: rgba(44,39,48,.15); transform: translateX(-50%); }
.process-steps { position: relative; display: flex; flex-direction: column; }

.process-step {
	display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; gap: 22px;
	padding: 18px 14px; border-radius: var(--radius-sm); position: relative;
}
.process-step.is-highlighted { background: var(--white); box-shadow: 0 16px 40px -26px rgba(74,59,54,.2); }

.process-step-icon-side { order: 1; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.process-step-center { order: 2; display: flex; justify-content: center; }
.process-step-text-side { order: 3; text-align: left; }

.process-step.is-reversed .process-step-icon-side { order: 3; justify-content: flex-start; flex-direction: row-reverse; }
.process-step.is-reversed .process-step-text-side { order: 1; text-align: right; }

.process-step-icon {
	width: 46px; height: 46px; border-radius: var(--radius-sm); flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	background: var(--white); color: var(--accent);
}
.process-step-icon svg { width: 20px; height: 20px; }
.process-step.is-highlighted .process-step-icon { background: var(--ink); color: var(--white); }
.process-step-number { font-family: var(--font-serif); font-size: 13px; color: var(--text-muted); }

.process-step-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); position: relative; z-index: 2; box-shadow: 0 0 0 4px var(--cream-2); }
.process-step.is-highlighted .process-step-dot { box-shadow: 0 0 0 4px var(--white); }

.process-step-text-side h3 { font-size: 17px; margin-bottom: 6px; }
.process-step-text-side p { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }

@media (max-width: 760px) {
	.process-card { padding: 16px; }
	.process-line { left: 23px; }
	.process-step,
	.process-step.is-reversed { grid-template-columns: 40px 1fr; column-gap: 16px; }
	.process-step-center { display: none; }
	.process-step-icon-side, .process-step.is-reversed .process-step-icon-side {
		order: 1; grid-row: 1 / 3; flex-direction: column; justify-content: flex-start; gap: 6px; padding-top: 2px;
	}
	.process-step-text-side, .process-step.is-reversed .process-step-text-side { order: 2; text-align: left; }
}

/* Prose */
.flex-prose { padding: 60px 0; }
.prose-wrap { max-width: 760px; margin: 0 auto; }
.prose-block { width: 100%; }
.prose-content { color: var(--text-muted); font-size: 16px; line-height: 1.85; }
.prose-content p + p { margin-top: 14px; }
.prose-content a { color: var(--accent); text-decoration: underline; }

.flex-prose.has-image .prose-wrap {
	max-width: var(--container); display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: center;
}
.flex-prose.has-image .prose-wrap.is-reverse { grid-template-columns: 1.15fr .85fr; }
.flex-prose.has-image .prose-wrap.is-reverse .prose-media { order: 2; }
.flex-prose.has-image .prose-wrap.is-reverse .prose-block { order: 1; }
.prose-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 58% center; border-radius: var(--radius); box-shadow: 0 30px 60px -30px rgba(74,59,54,.3); }

@media (max-width: 860px) {
	.flex-prose.has-image .prose-wrap,
	.flex-prose.has-image .prose-wrap.is-reverse { grid-template-columns: 1fr; gap: 30px; }
	.flex-prose.has-image .prose-wrap.is-reverse .prose-media,
	.flex-prose.has-image .prose-wrap.is-reverse .prose-block { order: initial; }
	.prose-media img { aspect-ratio: 16/10; }
}

/* Bullet list */
.flex-bullets { padding: 60px 0; }
.bullets-wrap { max-width: 720px; margin: 0 auto; }
.bullets-block { width: 100%; }
.bullets-intro { color: var(--text-muted); margin-top: 14px; font-size: 16px; }
.bullets-list { margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 12px 30px; }
.bullets-list li { font-size: 15px; padding-left: 22px; position: relative; color: var(--text); }
.bullets-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--accent); }
.bullets-outro { margin-top: 24px; color: var(--text-muted); font-size: 15px; }
.bullets-block .btn { margin-top: 26px; }

.flex-bullets.has-image .bullets-wrap {
	max-width: var(--container); display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: center;
}
.flex-bullets.has-image .bullets-wrap.is-reverse { grid-template-columns: 1.15fr .85fr; }
.flex-bullets.has-image .bullets-wrap.is-reverse .bullets-media { order: 2; }
.flex-bullets.has-image .bullets-wrap.is-reverse .bullets-block { order: 1; }
.flex-bullets.has-image .bullets-list { grid-template-columns: 1fr; }
.bullets-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 58% center; border-radius: var(--radius); box-shadow: 0 30px 60px -30px rgba(74,59,54,.3); }

@media (max-width: 860px) {
	.flex-bullets.has-image .bullets-wrap,
	.flex-bullets.has-image .bullets-wrap.is-reverse { grid-template-columns: 1fr; gap: 30px; }
	.flex-bullets.has-image .bullets-wrap.is-reverse .bullets-media,
	.flex-bullets.has-image .bullets-wrap.is-reverse .bullets-block { order: initial; }
	.bullets-media img { aspect-ratio: 16/10; }
}

/* Image pair */
.flex-image-pair { padding: 20px 0 70px; }
.image-pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.image-pair-item img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 700px) { .image-pair-grid { grid-template-columns: 1fr; } }

/* Simple gallery (service pages) */
.flex-gallery { padding: 70px 0; }
.gallery-grid-simple { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); grid-auto-rows: 280px; gap: 18px; }
.gallery-grid-simple .gallery-item { border-radius: var(--radius-sm); }

/* Note */
.flex-note { padding: 10px 0 60px; }
.note-block { max-width: 720px; margin: 0 auto; font-size: 14px; color: var(--text-muted); text-align: center; }
.note-block a { color: var(--accent); }
.note-block p + p { margin-top: 8px; }

/* ==========================================================================
   Contact page — split screen
   ========================================================================== */
.contact-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.contact-split-media { background-size: cover; background-position: center; min-height: 320px; }
.contact-split-panel { display: flex; align-items: center; padding: 140px 60px 80px; }
.contact-split-inner { max-width: 480px; margin: 0 auto; width: 100%; }
.contact-title { font-size: clamp(38px, 5vw, 56px); margin-top: 10px; }
.contact-intro { margin-top: 20px; color: var(--text-muted); font-size: 15.5px; line-height: 1.7; }
.contact-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 50px; }
.contact-col h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-sans); font-weight: 600; margin-bottom: 20px; color: var(--text); }
.contact-coords { display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: var(--text-muted); line-height: 1.6; }
.contact-coords a { color: var(--text-muted); }
.contact-coords a:hover { color: var(--accent); }
.social-links.dark { margin-top: 26px; }
.social-links.dark .social-link { background: var(--cream-2); color: var(--ink); }
.social-links.dark .social-link:hover { background: var(--accent); color: var(--white); }

.contact-form { display: flex; flex-direction: column; gap: 18px; }
.contact-form .field { display: flex; flex-direction: column; gap: 6px; }
.contact-form .field span { font-size: 12px; color: var(--text-muted); }
.contact-form .field-optional { color: var(--tan); }
/* Deux champs côte à côte (date + créneau), empilés sur petit écran. */
.contact-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 520px) { .contact-form .field-row { grid-template-columns: 1fr; } }

/* `min-width: 0` + `width: 100%` : sans ça, la largeur intrinsèque d'un
   input[type="date"] ou d'un <select> impose sa taille minimale à la colonne
   et fait déborder toute la page. */
.contact-columns > *, .contact-form .field, .contact-form .field-row { min-width: 0; }
.contact-form input, .contact-form textarea, .contact-form select {
	width: 100%; min-width: 0; max-width: 100%;
	border: none; border-bottom: 1px solid rgba(74,59,54,.25); background: transparent;
	padding: 8px 2px; font-family: var(--font-sans); font-size: 14.5px; color: var(--text);
	resize: none; transition: border-color .3s;
}
/* Flèche dessinée à la main : les <select> natifs ne s'harmonisent pas
   d'un navigateur à l'autre. */
.contact-form select {
	appearance: none; -webkit-appearance: none;
	padding-right: 24px; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23927d72' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 2px center; background-size: 15px 15px;
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline: none; border-color: var(--accent); }
.contact-form input:invalid:not(:placeholder-shown), .contact-form select:invalid:not(:focus) { border-color: rgba(74,59,54,.25); }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* Bouton pleine largeur du formulaire : dans la colonne étroite de la page
   Contact, « Demander un rendez-vous » cassait sur deux lignes. */
.submit-round {
	margin-top: 10px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	background: var(--accent); border: 1.5px solid var(--accent); border-radius: 999px; padding: 14px 22px;
	font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	color: var(--white); cursor: pointer; white-space: nowrap;
	transition: background .3s, border-color .3s, transform .3s var(--ease);
}
.submit-round svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.submit-round:hover { background: var(--accent-dark); border-color: var(--accent-dark); transform: translateY(-2px); }
.submit-round:hover svg { transform: translateX(3px); }

.contact-form-status { font-size: 14px; padding: 12px 16px; border-radius: 10px; margin-bottom: 8px; }
.contact-form-status.success { background: rgba(194,95,82,.1); color: var(--accent); }
.contact-form-status.error { background: rgba(180,60,60,.1); color: #a83c3c; }

@media (max-width: 960px) {
	.contact-split { grid-template-columns: 1fr; }
	.contact-split-media { min-height: 320px; }
	.contact-split-panel { padding: 60px 24px 80px; }
	.contact-columns { grid-template-columns: 1fr; gap: 34px; }
}

/* Locked scroll while mobile menu / lightbox open */
body.no-scroll { overflow: hidden; }