/* ============================================================
   AU MASCULIN — clinique d'esthétique masculine, Montréal
   Marque : marbre #FAF8F4 + or #A9822C + encre #14161A
   Palette claire (marbre / blanc / or, écriture noire).
   Feuille principale. Les points de rupture vivent dans
   mediaqueries.css.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
	/* Fonds — du marbre au sable */
	--ink:        #FAF8F4;
	--ink-2:      #F3EFE7;
	--ink-3:      #EEE8DD;
	--ink-4:      #E5DDCE;

	/* Papier (sections en contraste : blanc franc) */
	--paper:      #FFFFFF;
	--paper-2:    #F6F2EA;
	--paper-3:    #EAE3D6;

	/* Texte — noir sur clair, partout */
	--text:       #14161A;
	--text-dim:   #5C5850;
	--text-ink:   #14161A;
	--text-ink-2: #5C5850;

	/* Accent or */
	--bronze:     #A9822C;
	--bronze-hi:  #C9A24A;
	--bronze-lo:  #7E5F17;

	/* Traits */
	--line:       rgba(20, 22, 26, .13);
	--line-2:     rgba(20, 22, 26, .22);
	--line-ink:   rgba(20, 22, 26, .13);

	/* Typo */
	--font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	--font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
	--font-serif:   'Instrument Serif', Georgia, 'Times New Roman', serif;

	/* Rythme */
	--dd-largeur:      320px;  /* largeur des sous-menus de l'en-tête */
	--portrait-debord: 106%;   /* rognage du bas des portraits détourés */
	--wrap:        1240px;
	--wrap-narrow: 780px;
	--gut:         clamp(20px, 5vw, 56px);
	--sec-y:       clamp(72px, 9vw, 148px);
	--radius:      3px;
	--radius-lg:   6px;

	/* Mouvement */
	--ease:  cubic-bezier(.22, .61, .36, 1);
	--ease2: cubic-bezier(.65, 0, .35, 1);
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}

body {
	margin: 0;
	background-color: var(--ink);
	background-image:
		linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .55)),
		url("../assets/marbre.svg");
	background-size: auto, 1600px;
	background-repeat: repeat;
	color: var(--text);
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: -.005em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

a {
	color: inherit;
	text-decoration: none;
	transition: color .25s var(--ease);
}

h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -.035em;
	text-wrap: balance;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--bronze); color: #fff; }

:focus-visible {
	outline: 2px solid var(--bronze-hi);
	outline-offset: 3px;
	border-radius: 2px;
}

.visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px; left: 16px;
	z-index: 999;
	padding: 12px 20px;
	background: var(--bronze);
	color: #fff;
	font-weight: 600;
	transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* ---------- Grille ---------- */
.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gut);
}
.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--sec-y); position: relative; }
.section--tight { padding-block: clamp(52px, 6vw, 96px); }

/* Sections claires */
.section--paper {
	background: var(--paper);
	color: var(--text-ink);
}
.section--paper h1,
.section--paper h2,
.section--paper h3,
.section--paper h4 { color: var(--text-ink); }
.section--paper .lead,
.section--paper .muted { color: var(--text-ink-2); }

.section--raised { background: var(--ink-2); }

/* ---------- Typographie utilitaire ---------- */
.eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 22px;
	font-family: var(--font-body);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--bronze);
}
.eyebrow::before {
	content: '';
	width: 34px;
	height: 1px;
	background: currentColor;
	flex: none;
}
.eyebrow--center { justify-content: center; }

.h-xl   { font-size: clamp(2.9rem, 8.2vw, 6.4rem); }
.h-lg   { font-size: clamp(2.2rem, 5.2vw, 3.9rem); }
.h-md   { font-size: clamp(1.65rem, 3.1vw, 2.5rem); }

.lead {
	font-size: clamp(1.05rem, 1.5vw, 1.24rem);
	line-height: 1.6;
	color: var(--text-dim);
	letter-spacing: -.01em;
}

.muted { color: var(--text-dim); }
.bronze { color: var(--bronze); }

.serif-note {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -.01em;
}

.section-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 20px; }

/* Filet décoratif */
.rule {
	height: 1px;
	background: var(--line);
	border: 0;
	margin: 0;
}
.section--paper .rule { background: var(--line-ink); }

/* ---------- Utilitaires d'espacement ----------
   Une échelle courte, pour éviter les styles en ligne
   éparpillés dans le HTML. */
.mt-1 { margin-top: 16px; }
.mt-2 { margin-top: 26px; }
.mt-3 { margin-top: 34px; }
.mt-4 { margin-top: 46px; }
.mb-2 { margin-bottom: 26px; }
.mb-3 { margin-bottom: 40px; }
.mt-block { margin-top: clamp(44px, 5vw, 72px); }
.small { font-size: .88rem; }

/* Remarque en incise, ton plus bas que le corps de texte */
.pull-note {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.06rem;
	line-height: 1.45;
	color: var(--text-dim);
}
.section--paper .pull-note { color: var(--text-ink-2); }

/* Ligne de titre de fonction sous un nom (équipe) */
.role-line {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.12rem;
	line-height: 1.35;
	color: var(--bronze);
}

/* Variante compacte du bloc « technologie » */
.tech--sm h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }

/* Encart de héros dont le « montant » est du texte, pas un prix */
.hero-price .amount--text { font-size: clamp(1.45rem, 2.3vw, 1.95rem); line-height: 1.2; }

/* ---------- Boutons ---------- */
.btn {
	--btn-bg: var(--bronze);
	--btn-fg: #fff;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 28px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--font-body);
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	transition: background .3s var(--ease), color .3s var(--ease),
	            border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { background: var(--bronze-hi); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--ghost {
	--btn-bg: transparent;
	--btn-fg: var(--text);
	border-color: var(--line-2);
}
.btn--ghost:hover {
	background: rgba(20, 22, 26, .04);
	border-color: var(--bronze);
	color: var(--bronze);
}
.section--paper .btn--ghost {
	--btn-fg: var(--text-ink);
	border-color: var(--line-ink);
}
.section--paper .btn--ghost:hover {
	background: rgba(20, 22, 26, .05);
	color: var(--text-ink);
	border-color: var(--bronze);
}

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

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

/* Lien fléché */
.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--bronze);
}
.arrow-link svg { transition: transform .3s var(--ease); flex: none; }
.arrow-link:hover { color: var(--bronze-hi); }
.arrow-link:hover svg { transform: translateX(6px); }

/* ============================================================
   EN-TÊTE
   ============================================================ */
.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	transition: background .35s var(--ease), border-color .35s var(--ease),
	            backdrop-filter .35s var(--ease);
	border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
	background: rgba(250, 248, 244, .88);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom-color: var(--line);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	height: 84px;
	transition: height .35s var(--ease);
}
.site-header.is-stuck .header-inner { height: 68px; }

/* Logotype : monogramme (SVG sans fond) + mot-signe */
.brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-display);
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--text);
	flex: none;
	transition: opacity .25s var(--ease);
}
.brand-mark {
	width: auto;
	height: 34px;
	flex: none;
	transition: height .35s var(--ease);
}
.site-header.is-stuck .brand-mark { height: 28px; }
.brand-word { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.brand-word small {
	font-family: var(--font-body);
	font-size: .5rem;
	font-weight: 500;
	letter-spacing: .17em;
	color: var(--bronze);
}
.brand:hover { opacity: .72; }
.brand:hover { color: var(--bronze); }

/* Navigation */
.nav { display: flex; align-items: center; gap: 4px; }

.nav-item { position: relative; }

.nav-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 15px;
	font-size: .84rem;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--text-dim);
}
.nav-link:hover,
.nav-item.is-open > .nav-link { color: var(--text); }
.nav-link[aria-current="page"] { color: var(--text); }
.nav-link[aria-current="page"]::after {
	content: '';
	position: absolute;
	left: 15px; right: 15px; bottom: 2px;
	height: 1px;
	background: var(--bronze);
}
.nav-link .caret { transition: transform .3s var(--ease); flex: none; }
.nav-item.is-open .caret,
.nav-item:hover .caret { transform: rotate(180deg); }

/* Sous-menu */

/* Pont invisible entre l'onglet et son panneau. Sans lui, traverser
   lentement les 6 px qui les séparent fait perdre le survol de
   .nav-item et referme le menu sous le curseur. Le pont couvre toute
   la largeur du panneau pour tolérer un déplacement en diagonale ;
   il reste à l'intérieur de l'en-tête, donc n'intercepte rien. */
.nav-item.has-dd::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	width: var(--dd-largeur);
	height: 8px;
	transform: translateX(-50%);
}

.dd {
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	width: var(--dd-largeur);
	padding: 10px;
	transform: translate(-50%, 8px);
	background: var(--ink-3);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: #fff;
	box-shadow: 0 26px 60px -22px rgba(20, 22, 26, .22);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.nav-item:hover > .dd,
.nav-item:focus-within > .dd,
.nav-item.is-open > .dd {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

.dd-link {
	display: block;
	padding: 12px 14px;
	border-radius: var(--radius);
	transition: background .2s var(--ease);
}
.dd-link:hover { background: rgba(20, 22, 26, .045); }
.dd-link strong {
	display: block;
	font-size: .92rem;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--text);
}
.dd-link span {
	display: block;
	margin-top: 2px;
	font-size: .78rem;
	line-height: 1.45;
	color: var(--text-dim);
}
.dd-link:hover strong { color: var(--bronze-hi); }

.header-cta { display: flex; align-items: center; gap: 14px; flex: none; }

.header-tel {
	font-size: .84rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--text-dim);
}
.header-tel:hover { color: var(--bronze); }

/* Bouton hamburger */
.burger {
	display: none;
	width: 44px; height: 44px;
	padding: 0;
	background: none;
	border: 1px solid var(--line-2);
	border-radius: var(--radius);
	position: relative;
	flex: none;
}
.burger span {
	position: absolute;
	left: 12px;
	width: 18px;
	height: 1.5px;
	background: var(--text);
	transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 21.5px; }
.burger span:nth-child(3) { top: 26px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

/* Tiroir mobile */
.drawer {
	position: fixed;
	inset: 0;
	z-index: 99;
	display: flex;
	flex-direction: column;
	padding: 104px var(--gut) 40px;
	background: var(--ink) url("../assets/marbre.svg") center / 1200px repeat;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-12px);
	transition: opacity .3s var(--ease), transform .35s var(--ease), visibility .35s;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }

.drawer-nav > li { border-bottom: 1px solid var(--line); }
.drawer-nav > li > a {
	display: block;
	padding: 20px 0;
	font-family: var(--font-display);
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: -.03em;
}
.drawer-nav > li > a:hover { color: var(--bronze); }

.drawer-sub { padding: 0 0 22px 2px; }
.drawer-sub li a {
	display: block;
	padding: 9px 0 9px 18px;
	border-left: 1px solid var(--line);
	font-size: .95rem;
	color: var(--text-dim);
}
.drawer-sub li a:hover { color: var(--bronze); border-left-color: var(--bronze); }

.drawer-foot { margin-top: auto; padding-top: 40px; }
.drawer-foot .btn { width: 100%; }
.drawer-foot .header-tel {
	display: block;
	margin-top: 20px;
	text-align: center;
	font-size: 1rem;
}

/* ============================================================
   HÉROS
   ============================================================ */
.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(620px, 92svh, 940px);
	padding-top: 140px;
	padding-bottom: clamp(48px, 6vw, 88px);
	overflow: hidden;
	isolation: isolate;
}

/* Fond : dégradé + grain + halo bronze */
.hero-bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(90% 70% at 78% 10%, rgba(169, 130, 44, .16), transparent 62%),
		radial-gradient(70% 60% at 6% 94%, rgba(169, 130, 44, .10), transparent 60%),
		linear-gradient(175deg, #FFFDF9 0%, #F6F2EA 55%, #EFE9DE 100%);
}
.hero-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	opacity: .22;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Image optionnelle du héros (le client dépose sa photo) */
.hero-media {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: .38;
	object-fit: cover;
	width: 100%;
	height: 100%;
	filter: grayscale(1) contrast(1.08);
	-webkit-mask-image: linear-gradient(100deg, transparent 6%, #000 62%);
	mask-image: linear-gradient(100deg, transparent 6%, #000 62%);
}

/* Filets verticaux */
.hero-grid {
	position: absolute;
	inset: 0;
	z-index: -1;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gut);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	pointer-events: none;
}
.hero-grid span { border-left: 1px solid rgba(20, 22, 26, .05); }
.hero-grid span:last-child { border-right: 1px solid rgba(20, 22, 26, .05); }

.hero-inner { width: 100%; }

.hero h1 {
	margin: 0;
	text-transform: uppercase;
	letter-spacing: -.045em;
	line-height: .92;
}
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: block; }
.hero h1 em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -.02em;
	text-transform: none;
	color: var(--bronze);
}

.hero-copy {
	max-width: 520px;
	margin-top: clamp(26px, 3vw, 38px);
}

.hero-actions { margin-top: 32px; }

/* Bandeau de chiffres.
   Les séparateurs sont des bordures, jamais un fond opaque posé
   sur un gap : le dégradé du héros doit rester visible derrière. */
.hero-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-top: clamp(52px, 6vw, 84px);
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}
.hero-stats li {
	padding: 26px 24px 24px;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.hero-stats b {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	font-weight: 700;
	letter-spacing: -.04em;
	line-height: 1;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}
.hero-stats b .unit { color: var(--bronze); }
.hero-stats span {
	display: block;
	margin-top: 9px;
	font-size: .78rem;
	line-height: 1.4;
	color: var(--text-dim);
}

/* Héros interne (pages secondaires) */
.pagehero {
	position: relative;
	padding-top: clamp(150px, 17vw, 210px);
	padding-bottom: clamp(52px, 6vw, 86px);
	overflow: hidden;
	isolation: isolate;
	border-bottom: 1px solid var(--line);
}
.pagehero .hero-bg {
	background:
		radial-gradient(70% 90% at 88% 0%, rgba(169, 130, 44, .16), transparent 60%),
		linear-gradient(180deg, #FFFDF9 0%, #F4F0E7 100%);
}
.pagehero-inner { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: end; }
.pagehero h1 { text-transform: uppercase; letter-spacing: -.04em; }
.pagehero h1 em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	text-transform: none;
	color: var(--bronze);
}
.pagehero .lead { margin-top: 24px; max-width: 46ch; }

/* Fil d'Ariane */
.crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	margin-bottom: 26px;
	font-size: .76rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-dim);
}
.crumbs a:hover { color: var(--bronze); }
.crumbs li:not(:last-child)::after { content: '/'; margin-left: 9px; opacity: .45; }
.crumbs li { display: flex; align-items: center; }
.crumbs [aria-current] { color: var(--bronze); }

/* Encart prix dans le héros interne */
.hero-price {
	padding: 26px 28px;
	background: rgba(255, 255, 255, .72);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	backdrop-filter: blur(6px);
}
.hero-price .eyebrow { margin-bottom: 14px; }
.hero-price .amount {
	font-family: var(--font-display);
	font-size: clamp(2rem, 3.4vw, 2.7rem);
	font-weight: 700;
	letter-spacing: -.04em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.hero-price .amount sup { font-size: .5em; margin-left: 3px; color: var(--bronze); }
.hero-price p { margin-top: 12px; font-size: .88rem; color: var(--text-dim); }

/* ============================================================
   CARTES DE SERVICE
   ============================================================ */
.svc-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}

.svc {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 420px;
	background: rgba(255, 255, 255, .55);
	padding: clamp(28px, 3vw, 40px);
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	overflow: hidden;
	transition: background .4s var(--ease);
}
.svc::before {
	content: '';
	position: absolute;
	inset: auto 0 0 0;
	height: 2px;
	background: linear-gradient(90deg, var(--bronze), var(--bronze-hi));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .5s var(--ease);
}
.svc:hover { background: var(--ink-3); }
.svc:hover::before { transform: scaleX(1); }

.svc-num {
	font-family: var(--font-serif);
	font-size: 1.05rem;
	font-style: italic;
	color: var(--bronze);
	letter-spacing: .02em;
}

.svc-icon {
	margin: 26px 0 22px;
	width: 42px; height: 42px;
	color: var(--bronze);
}
.svc-icon svg { width: 100%; height: 100%; }

.svc h3 { font-size: clamp(1.15rem, 1.55vw, 1.5rem); text-transform: uppercase; letter-spacing: -.03em; overflow-wrap: break-word; hyphens: auto; }
.svc p { margin-top: 14px; font-size: .95rem; color: var(--text-dim); }

.svc-meta {
	margin-top: auto;
	padding-top: 26px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 16px;
	border-top: 1px solid var(--line);
}
.svc-price {
	font-family: var(--font-display);
	font-size: .98rem;
	font-weight: 700;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}
.svc-price small { display: block; font-family: var(--font-body); font-size: .7rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }

.svc-link { position: absolute; inset: 0; z-index: 2; }
.svc-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ============================================================
   BLOCS ALTERNÉS (texte + visuel)
   ============================================================ */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(36px, 6vw, 96px);
	align-items: center;
}
.split--reverse .split-media { order: 2; }

.split-media {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: linear-gradient(150deg, var(--ink-3), var(--paper-2) 70%);
	border: 1px solid var(--line);
}
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-media--wide { aspect-ratio: 5 / 4; }

/* Cadre vertical explicite : les portraits de l'équipe doivent garder
   leur format même quand les blocs passent en une colonne. */
.split-media--tall { aspect-ratio: 4 / 5; }

/* Photos de visage (pas un portrait détouré, une vraie photo) : le cadre
   prend le format du fichier — 3/4 — pour que la chevelure et le bas du
   visage tiennent tous les deux, et le cadrage part du haut. Un cadre plus
   large rogne le sujet par le milieu et ne montre plus que le front. */
.split-media--visage { aspect-ratio: 3 / 4; }
.split-media--visage img { object-position: center top; }

/* Même raison sur un cadre horizontal : la tête est haut dans l'image, donc
   le surplus doit toujours se prendre en bas. */
.split-media--wide img[src$="greffe-complement.jpg"] { object-position: center top; }

/* Le portrait du Dr Kannab est cadré beaucoup plus large que les trois
   autres (pied de page jusqu'à la cuisse) : on rogne davantage le bas
   pour ramener son buste à l'échelle du reste de l'équipe. */
.member-photo img[src$="equipe-kannab.png"],
.split-media--portrait img[src$="equipe-kannab.png"] { --portrait-debord: 150%; }

/* Portraits détourés : même traitement que la grille d'équipe */
.split-media--portrait img {
	position: absolute;
	top: 0;
	left: 0;
	height: var(--portrait-debord);
	object-position: center bottom;
}

.split-body h2 { margin-bottom: 22px; }

/* Liste à puces bronze */
.ticks li {
	position: relative;
	padding: 13px 0 13px 32px;
	border-bottom: 1px solid var(--line);
	font-size: .96rem;
}
.section--paper .ticks li { border-bottom-color: var(--line-ink); }
.ticks li:first-child { border-top: 1px solid var(--line); }
.section--paper .ticks li:first-child { border-top-color: var(--line-ink); }
.ticks li::before {
	content: '';
	position: absolute;
	left: 4px; top: 22px;
	width: 12px; height: 1px;
	background: var(--bronze);
}
.ticks strong { font-weight: 600; }

/* ============================================================
   ÉTAPES NUMÉROTÉES
   ============================================================ */
.steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(20px, 2.4vw, 34px);
	counter-reset: step;
}
.step {
	padding-top: 22px;
	border-top: 1px solid var(--line);
	counter-increment: step;
}
.section--paper .step { border-top-color: var(--line-ink); }
.step::before {
	content: '0' counter(step);
	display: block;
	margin-bottom: 14px;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.5rem;
	color: var(--bronze);
	line-height: 1;
}
.step h3 { font-size: 1.12rem; text-transform: uppercase; letter-spacing: -.015em; }
.step p { margin-top: 12px; font-size: .92rem; color: var(--text-dim); }
.section--paper .step p { color: var(--text-ink-2); }

/* ============================================================
   TABLEAU DE PRIX
   ============================================================ */
.pricing {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}
.section--paper .pricing { border-color: var(--line-ink); }

.price-card {
	display: flex;
	flex-direction: column;
	padding: clamp(26px, 3vw, 38px);
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	position: relative;
}
.section--paper .price-card { border-color: var(--line-ink); }

/* Carte large : occupe deux colonnes tant que la grille en a trois */
.price-card--wide { grid-column: span 2; }

.price-card.is-featured { background: var(--ink-3); }
.section--paper .price-card.is-featured { background: var(--paper-2); }

.price-tag {
	position: absolute;
	top: 0; right: 0;
	padding: 7px 14px;
	background: var(--bronze);
	color: #fff;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* Variante agrandie — met le rabais en évidence */
.price-tag--lg {
	padding: 9px 16px;
	font-size: .74rem;
	letter-spacing: .1em;
}

.price-card h3 { font-size: 1.18rem; text-transform: uppercase; letter-spacing: -.015em; }
/* Le paragraphe de description seulement : sans le `:not()`, cette règle
   est plus spécifique que `.price-amount` et ramenait le montant à
   .9rem en gris — le symbole $ en devenait illisible. */
.price-card > p:not(.price-amount) { margin-top: 12px; font-size: .9rem; color: var(--text-dim); }
.section--paper .price-card > p:not(.price-amount) { color: var(--text-ink-2); }

.price-amount {
	margin: 26px 0 22px;
	font-family: var(--font-display);
	font-size: clamp(2.2rem, 3.6vw, 3rem);
	font-weight: 700;
	letter-spacing: -.045em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.price-amount sup { font-size: .44em; margin-left: 3px; color: var(--bronze); }
.price-amount .per {
	display: block;
	margin-top: 8px;
	font-family: var(--font-body);
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-dim);
}

.price-card .ticks { margin-bottom: 28px; }
.price-card .ticks li { font-size: .89rem; padding-block: 11px; }
.price-card .btn { margin-top: auto; }

/* Liste de tarifs simple (soins esthétiques) */
.rate-list { border-top: 1px solid var(--line); }
.section--paper .rate-list { border-top-color: var(--line-ink); }
.rate-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 18px;
	padding: 17px 0;
	border-bottom: 1px solid var(--line);
}
.section--paper .rate-list li { border-bottom-color: var(--line-ink); }
.rate-list .name { flex: 1 1 220px; font-weight: 500; }
.rate-list .note { flex: 1 1 100%; font-size: .84rem; color: var(--text-dim); }
.section--paper .rate-list .note { color: var(--text-ink-2); }
.rate-list .amt {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	color: var(--bronze);
	white-space: nowrap;
}

/* ============================================================
   TRAITEMENTS (grille détaillée — soins esthétiques)
   ============================================================ */
.treat-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}
.section--paper .treat-grid { border-color: var(--line-ink); }

.treat {
	display: flex;
	flex-direction: column;
	padding: clamp(28px, 3vw, 40px);
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	transition: background .35s var(--ease);
}
.section--paper .treat { border-color: var(--line-ink); }
.treat:hover { background: var(--ink-3); }
.section--paper .treat:hover { background: var(--paper-2); }
.treat-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 18px;
}
.treat h3 { font-size: 1.3rem; text-transform: uppercase; letter-spacing: -.02em; }
.treat .kicker {
	margin-top: 8px;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.02rem;
	color: var(--bronze);
	line-height: 1.35;
}
.treat > p { font-size: .94rem; color: var(--text-dim); }

.spec-list {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 24px;
}
.spec-list div { min-width: 0; }
.spec-list dt {
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-dim);
}
.spec-list dd {
	margin: 6px 0 0;
	font-size: .92rem;
	font-weight: 500;
	line-height: 1.45;
}
.spec-list dd.price { color: var(--bronze); font-variant-numeric: tabular-nums; }

/* ============================================================
   ÉQUIPE
   ============================================================ */
.team-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(24px, 3vw, 40px);
}
.member { display: flex; flex-direction: column; }
.member-photo {
	position: relative;
	aspect-ratio: 3 / 4;
	margin-bottom: 26px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--paper-2);
	border: 1px solid var(--line);
}
/* Les portraits sont détourés sur fond clair : pas de voile sombre.
   Le sujet est collé au bas du cadre (object-position) et la hauteur
   déborde légèrement : le surplus sort sous le cadre et y est rogné
   par overflow: hidden, ce qui resserre le cadrage sur le buste. */
.member-photo img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--portrait-debord);
	object-fit: cover;
	object-position: center bottom;
	transition: transform .8s var(--ease);
}
.member:hover .member-photo img { transform: scale(1.03); }
.member .role {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--bronze);
}
.member h3 { margin-top: 12px; font-size: 1.42rem; letter-spacing: -.03em; }
.member .credentials {
	margin-top: 10px;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1rem;
	color: var(--text-dim);
	line-height: 1.4;
}
.member .bio { margin-top: 18px; font-size: .93rem; color: var(--text-dim); }
.section--paper .member .bio,
.section--paper .member .credentials { color: var(--text-ink-2); }

.member-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tag {
	padding: 6px 12px;
	border: 1px solid var(--line);
	border-radius: 100px;
	font-size: .74rem;
	letter-spacing: .04em;
	color: var(--text-dim);
}
.section--paper .tag { border-color: var(--line-ink); color: var(--text-ink-2); }

/* ============================================================
   TECHNOLOGIE (NeoGraft)
   ============================================================ */
.tech {
	position: relative;
	padding: clamp(34px, 4vw, 60px);
	background: var(--ink-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.tech::after {
	content: '';
	position: absolute;
	top: -40%; right: -10%;
	width: 46%; aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(192, 139, 74, .16), transparent 68%);
	pointer-events: none;
}
.tech--paper { background: var(--paper-2); border-color: var(--line-ink); }
.tech--paper::after { background: radial-gradient(circle, rgba(192, 139, 74, .22), transparent 68%); }

.tech-inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 64px); align-items: center; }
.tech h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); text-transform: uppercase; }
.tech h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; color: var(--bronze); }

.tech-points { display: grid; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tech-points li { padding: 20px 24px; border-top: 1px solid var(--line); }
.tech-points li:first-child { border-top: 0; }
.section--paper .tech-points,
.section--paper .tech-points li { border-color: var(--line-ink); }
.tech-points b { display: block; font-size: .95rem; font-weight: 600; }
.tech-points span { display: block; margin-top: 5px; font-size: .86rem; color: var(--text-dim); }

/* ============================================================
   ACCORDÉON FAQ
   ============================================================ */
.faq { border-top: 1px solid var(--line); }
.section--paper .faq { border-top-color: var(--line-ink); }

.faq-item { border-bottom: 1px solid var(--line); }
.section--paper .faq-item { border-bottom-color: var(--line-ink); }

.faq-q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: 24px 0;
	background: none;
	border: 0;
	text-align: left;
	font-family: var(--font-display);
	font-size: clamp(1.02rem, 1.6vw, 1.22rem);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.3;
	transition: color .25s var(--ease);
}
.faq-q:hover { color: var(--bronze); }

.faq-sign { position: relative; flex: none; width: 15px; height: 15px; margin-top: 5px; }
.faq-sign::before,
.faq-sign::after {
	content: '';
	position: absolute;
	inset: 50% 0 auto;
	height: 1.5px;
	background: var(--bronze);
	transition: transform .35s var(--ease2);
}
.faq-sign::after { transform: rotate(90deg); }
.faq-q[aria-expanded="true"] .faq-sign::after { transform: rotate(0deg); }

.faq-a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .4s var(--ease2);
}
.faq-a > div { overflow: hidden; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a p {
	max-width: 68ch;
	padding-bottom: 26px;
	font-size: .96rem;
	color: var(--text-dim);
}
.section--paper .faq-a p { color: var(--text-ink-2); }

/* ============================================================
   CITATION
   ============================================================ */
.quote {
	max-width: 940px;
	margin-inline: auto;
	text-align: center;
}
.quote blockquote {
	margin: 0;
	font-family: var(--font-serif);
	font-size: clamp(1.6rem, 3.4vw, 2.7rem);
	font-style: italic;
	line-height: 1.25;
	letter-spacing: -.02em;
	text-wrap: balance;
}
.quote figcaption {
	margin-top: 28px;
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--bronze);
}

/* ============================================================
   APPEL À L'ACTION
   ============================================================ */
.cta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	text-align: center;
	background: var(--ink-2);
	border-top: 1px solid var(--line);
}
.cta::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(60% 100% at 50% 100%, rgba(192, 139, 74, .20), transparent 70%);
}
.cta h2 { font-size: clamp(2.1rem, 5.4vw, 4rem); text-transform: uppercase; letter-spacing: -.04em; }
.cta h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; color: var(--bronze); }
.cta .lead { max-width: 54ch; margin: 24px auto 0; }
.cta .btn-row { justify-content: center; margin-top: 36px; }

/* ============================================================
   FORMULAIRE
   ============================================================ */
.form-layout { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(36px, 6vw, 88px); align-items: start; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field--full { grid-column: 1 / -1; }

.field label {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-dim);
}
.field .req { color: var(--bronze); }

.field input,
.field select,
.field textarea {
	width: 100%;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--text);
	font-size: .96rem;
	transition: border-color .25s var(--ease), background .25s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23A9822C' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; }
.field option { background: #fff; color: var(--text); }

.field input::placeholder,
.field textarea::placeholder { color: rgba(92, 88, 80, .55); }

.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--bronze);
	background: #fff;
	box-shadow: 0 0 0 3px rgba(169, 130, 44, .12);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #C0563E; }
.field .err { font-size: .78rem; color: #E08A72; min-height: 0; }

.consent { display: flex; gap: 12px; align-items: flex-start; grid-column: 1 / -1; }
.consent input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--bronze); }
.consent label { font-size: .82rem; letter-spacing: 0; text-transform: none; font-weight: 400; line-height: 1.5; color: var(--text-dim); }

.form-status {
	grid-column: 1 / -1;
	padding: 15px 18px;
	border: 1px solid var(--bronze);
	border-radius: var(--radius);
	background: rgba(192, 139, 74, .10);
	font-size: .92rem;
}
.form-status[hidden] { display: none; }

/* Colonne coordonnées */
.contact-block { padding-block: 22px; border-bottom: 1px solid var(--line); }
.contact-block:first-child { border-top: 1px solid var(--line); }
.contact-block dt {
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--text-dim);
}
.contact-block dd { margin: 8px 0 0; font-size: 1.02rem; }
.contact-block dd a:hover { color: var(--bronze); }

/* ============================================================
   AVIS / RÉASSURANCE
   ============================================================ */
.assure {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}
.section--paper .assure { border-color: var(--line-ink); }
.assure li {
	padding: 30px 26px;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.section--paper .assure li { border-color: var(--line-ink); }
.section--paper .assure span { color: var(--text-ink-2); }
.assure svg { width: 26px; height: 26px; color: var(--bronze); margin-bottom: 16px; }
.assure b { display: block; font-size: .98rem; font-weight: 600; letter-spacing: -.01em; }
.assure span { display: block; margin-top: 7px; font-size: .85rem; color: var(--text-dim); }

/* Bandeau défilant */
.marquee {
	overflow: hidden;
	padding-block: 20px;
	border-block: 1px solid var(--line);
	background: var(--ink-2);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
	display: flex;
	width: max-content;
	gap: 56px;
	animation: slide 38s linear infinite;
}
.marquee span {
	display: flex;
	align-items: center;
	gap: 56px;
	font-family: var(--font-display);
	font-size: .92rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--text-dim);
	white-space: nowrap;
}
.marquee span::after { content: '\2022'; color: var(--bronze); }
@keyframes slide { to { transform: translateX(calc(-50% - 28px)); } }

/* ============================================================
   AVIS MÉDICAL / NOTE
   ============================================================ */
.notice {
	padding: 22px 26px;
	border-left: 2px solid var(--bronze);
	background: rgba(192, 139, 74, .07);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-size: .9rem;
	color: var(--text-dim);
}
.section--paper .notice { color: var(--text-ink-2); background: rgba(192, 139, 74, .12); }

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.site-footer {
	background: var(--paper-2);
	border-top: 1px solid var(--line);
	padding-top: clamp(60px, 7vw, 96px);
}
.footer-top {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: clamp(30px, 4vw, 56px);
	padding-bottom: clamp(48px, 5vw, 72px);
}
.footer-brand .brand { font-size: 1.25rem; }
.footer-brand p { margin-top: 20px; max-width: 34ch; font-size: .92rem; color: var(--text-dim); }

.footer-col h4 {
	margin-bottom: 20px;
	font-family: var(--font-body);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--bronze);
}
.footer-col li + li { margin-top: 11px; }
.footer-col a { font-size: .92rem; color: var(--text-dim); }
.footer-col a:hover { color: var(--text); }

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 26px;
	border-top: 1px solid var(--line);
	font-size: .8rem;
	color: var(--text-dim);
}
.footer-bottom a:hover { color: var(--bronze); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 20px; }

.socials { display: flex; gap: 10px; margin-top: 26px; }
.socials a {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--text-dim);
	transition: color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.socials a:hover { color: var(--bronze); border-color: var(--bronze); transform: translateY(-2px); }
.socials svg { width: 17px; height: 17px; }

/* ============================================================
   RÉVÉLATION AU DÉFILEMENT
   ============================================================ */
.js .reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s var(--ease), transform .7s var(--ease);
	transition-delay: var(--d, 0ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.js .reveal { opacity: 1; transform: none; }
}

/* ---------- 404 ---------- */
.err-page {
	display: grid;
	place-items: center;
	min-height: 100svh;
	text-align: center;
	padding-block: 140px 80px;
}
.err-page .code {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: clamp(5rem, 18vw, 12rem);
	line-height: .9;
	color: var(--bronze);
}


/* ============================================================
   CARROUSEL DU HÉROS
   Trois visuels qui défilent à droite du titre. Le JS ajoute
   .is-active ; sans JS, la première image reste visible.
   ============================================================ */
.hero--split .hero-inner {
	display: grid;
	grid-template-columns: 1.08fr .92fr;
	gap: clamp(36px, 5vw, 78px);
	align-items: center;
}
.hero--split { align-items: center; }

.hero-slider {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--paper-2);
	border: 1px solid var(--line);
	box-shadow: 0 40px 90px -50px rgba(20, 22, 26, .55);
}
.hero-slider::after {
	content: '';
	position: absolute;
	inset: 10px;
	border: 1px solid rgba(169, 130, 44, .28);
	border-radius: 2px;
	pointer-events: none;
}
.hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 1s var(--ease), transform 6s linear;
}
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-slide.is-active { opacity: 1; transform: scale(1); }
html:not(.js) .hero-slide:first-child,
.hero-slider:not(:has(.is-active)) .hero-slide:first-child { opacity: 1; transform: none; }

.hero-dots {
	position: absolute;
	left: 0; right: 0; bottom: 18px;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 9px;
}
.hero-dots button {
	width: 26px; height: 3px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: rgba(255, 255, 255, .55);
	box-shadow: 0 1px 3px rgba(20, 22, 26, .35);
	transition: background .3s var(--ease), width .3s var(--ease);
}
.hero-dots button[aria-current="true"] { background: var(--bronze-hi); width: 40px; }

/* Bandeau de réassurance sous le héros (remplace les chiffres) */
.hero-notes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin-top: 32px;
	font-size: .8rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-dim);
}
.hero-notes li { display: flex; align-items: center; gap: 9px; }
.hero-notes li::before {
	content: '';
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--bronze);
	flex: none;
}

/* ============================================================
   HÉROS À AFFICHE  (variante d'accueil, index.html)
   L'affiche fournie par le client tient toute la largeur, juste
   sous l'en-tête ; le titre, l'accroche et les boutons se posent
   dessous, sur deux colonnes.
   ============================================================ */
.hero--affiche {
	display: block;
	min-height: 0;
	padding-top: 96px;                      /* en-tête au repos : 84 px */
	padding-bottom: clamp(48px, 6vw, 88px);
}

/* Bord à bord : l'affiche sort de la gouttière du .wrap.
   Le rognage est en CSS, jamais une retaille du fichier.
   Le fichier fait 1672 x 941 et son texte s'arrête à y = 674 ; on
   garde donc 720 px de haut — logotype, titre et accroche intacts,
   le canapé du bas tombe. Un format fixe plutôt qu'un plafond de
   hauteur : c'est ce qui rend le cadrage identique à toute largeur
   d'écran, un `max-height` recadrerait différemment selon le
   moniteur et couperait le titre imprimé sur les grands écrans. */
/* Pile d'affiches en fondu enchaîné. Le cadre prend le format de
   l'affiche en cours (--affiche-ratio, posé par le JS) et glisse d'un
   format à l'autre : les affiches du client n'ont pas toutes le même,
   et on ne rogne aucune d'elles pour les faire entrer de force. */
.hero-affiche {
	position: relative;
	margin: 0;
	width: 100%;
	aspect-ratio: var(--affiche-ratio, 1672 / 720);
	transition: aspect-ratio .9s ease;
	overflow: hidden;
	background: #0B0B0C;
}
.hero-affiche img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	opacity: 0;
	transition: opacity 1.1s ease;
}
.hero-affiche img.is-active { opacity: 1; }
/* Liseré or au pied de l'affiche, comme les autres cadres du site. */
.hero-affiche::after {
	content: '';
	position: absolute;
	inset: auto 0 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(201, 162, 74, .72), transparent);
}

.hero--affiche .hero-inner {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(26px, 4vw, 64px);
	align-items: end;
	margin-top: clamp(38px, 5vw, 66px);
}
.hero--affiche .hero-copy { max-width: 52ch; margin-top: 0; }
.hero--affiche .hero-actions { margin-top: 28px; }
.hero--affiche .hero-notes { margin-top: 26px; }

/* ============================================================
   PROMOTION / FINANCEMENT
   ============================================================ */
.promo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	border: 1px solid var(--bronze);
	border-radius: 100px;
	background: rgba(169, 130, 44, .10);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bronze-lo);
}

/* Variante agrandie — le montant du rabais prime sur le reste */
.promo--lg {
	flex-wrap: wrap;
	gap: 8px;
	padding: 10px 20px;
	font-size: .74rem;
	background: rgba(169, 130, 44, .14);
}

.promo--lg b {
	font-family: var(--font-display);
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	font-weight: 800;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--bronze-lo);
}

/* La pastille est en capitales : l'ordinal reste en bas de casse,
   sinon « 3e » se lit « 3E ». */
.promo sup { font-size: .78em; text-transform: lowercase; }

.finance {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 3vw, 44px);
	align-items: center;
	padding: clamp(28px, 3.4vw, 46px);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}
.finance h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); text-transform: uppercase; letter-spacing: -.02em; }
.finance h3 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; color: var(--bronze); }
.finance p { margin-top: 14px; font-size: .95rem; color: var(--text-dim); }

/* Visuel posé sur fond clair, sans recadrage (appareil détouré) */
.media-plain {
	display: grid;
	place-items: center;
	padding: clamp(20px, 3vw, 40px);
	background: linear-gradient(160deg, #fff, var(--paper-2));
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}
.media-plain img { max-height: 460px; width: auto; object-fit: contain; }

/* Visuel large avec légende (avant / après) */
.figure-band { margin: 0; }
.figure-band img {
	width: 100%;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: #fff;
}
.figure-band figcaption {
	margin-top: 12px;
	font-size: .8rem;
	letter-spacing: .04em;
	color: var(--text-dim);
}

/* Bloc image + texte dont le visuel est une figure légendée */
.split--figure { align-items: start; }
.split--figure .figure-band { position: sticky; top: 110px; }

/* Le carrousel du héros ne doit jamais dépasser la hauteur utile */
.hero--split .hero-slider { max-height: 68svh; margin-inline: auto; }