/* ──────────────────────────────────────────────────────────────────────
   Composants : nav, hero, cards, buttons, accordion, form, modal, banner
   ────────────────────────────────────────────────────────────────────── */

/* ───── Buttons ─────────────────────────────────────────────────────────── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-6);
	font-family: var(--font-display);
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	border-radius: var(--r-sm);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color var(--t-fast), color var(--t-fast),
	            border-color var(--t-fast), transform var(--t-fast);
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled, .btn[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.btn--primary {
	background: var(--accent-primary);
	color: var(--text-on-accent);
}
.btn--primary:hover {
	background: var(--accent-primary-hover);
	color: var(--text-on-accent);
}

.btn--secondary {
	background: transparent;
	color: var(--text-primary);
	border-color: var(--border-default);
}
.btn--secondary:hover {
	border-color: var(--text-primary);
	color: var(--text-primary);
}

.btn--ghost {
	background: transparent;
	color: var(--text-primary);
	padding-inline: var(--s-4);
}
.btn--ghost:hover { color: var(--accent-primary); }

/* Lien-flèche secondaire (style Verywell « arrow-link » mais Welia) */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--font-display);
	font-weight: 500;
	color: var(--text-primary);
	text-decoration: none;
	border-bottom: 1px solid var(--border-default);
	padding-bottom: var(--s-1);
	transition: border-color var(--t-fast), color var(--t-fast);
}
.link-arrow:hover {
	color: var(--accent-primary);
	border-bottom-color: var(--accent-primary);
}
.link-arrow .icon { transition: transform var(--t-fast); }
.link-arrow:hover .icon { transform: translate(2px, 2px); }

/* ───── Navbar ──────────────────────────────────────────────────────────── */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(150%) blur(12px);
	-webkit-backdrop-filter: saturate(150%) blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--t-fast), background var(--t-fast);
}
@media (prefers-color-scheme: dark) {
	.site-header { background: rgba(31, 30, 28, 0.92); }
}
.site-header.is-scrolled { border-bottom-color: var(--border-subtle); }

.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-6);
	padding-block: var(--s-4);
}

.nav__brand {
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: 500;
	color: var(--text-primary);
	text-decoration: none;
	letter-spacing: 0.01em;
	white-space: nowrap;
}
.nav__brand:hover { color: var(--text-primary); }

.nav__menu {
	display: none;
	align-items: center;
	gap: var(--s-8);
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav__menu a {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--fs-body);
	color: var(--text-primary);
	text-decoration: none;
	padding-block: var(--s-2);
	border-bottom: 1px solid transparent;
}
.nav__menu a:hover,
.nav__menu a[aria-current="page"] {
	color: var(--accent-primary);
	border-bottom-color: var(--accent-primary);
}

.nav__actions {
	display: flex;
	align-items: center;
	gap: var(--s-3);
}

.nav__cta { display: none; }

.nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--r-sm);
	border: 1px solid var(--border-default);
	color: var(--text-primary);
}
.nav__toggle:hover { border-color: var(--text-primary); }

@media (min-width: 1024px) {
	.nav__menu { display: flex; }
	.nav__cta { display: inline-flex; }
	.nav__toggle { display: none; }
}

/* Menu mobile : overlay plein écran */
.nav__menu--mobile {
	position: fixed;
	inset: 0;
	z-index: 99;
	background: var(--bg-primary);
	display: flex;
	flex-direction: column;
	gap: var(--s-6);
	padding: calc(var(--s-16) + var(--s-4)) var(--s-6) var(--s-6);
	transform: translateY(-100%);
	transition: transform var(--t-med);
	visibility: hidden;
}
.nav__menu--mobile[data-open="true"] {
	transform: translateY(0);
	visibility: visible;
}
.nav__menu--mobile ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}
.nav__menu--mobile a {
	display: block;
	font-family: var(--font-display);
	font-size: var(--fs-h3);
	font-weight: 500;
	color: var(--text-primary);
	text-decoration: none;
	padding-block: var(--s-2);
}
.nav__menu--mobile a:hover { color: var(--accent-primary); }
.nav__menu--mobile .btn { align-self: flex-start; margin-top: var(--s-6); }
@media (min-width: 1024px) {
	.nav__menu--mobile { display: none; }
}

/* ───── Hero ────────────────────────────────────────────────────────────── */
.hero {
	padding-block: var(--s-16) var(--s-16);
}
@media (min-width: 768px) {
	.hero { padding-block: var(--s-24) var(--s-24); }
}
.hero__inner {
	display: grid;
	gap: var(--s-12);
	align-items: center;
}
@media (min-width: 1024px) {
	.hero__inner {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: var(--s-16);
	}
}
.hero__title {
	margin-bottom: var(--s-6);
}
.hero__sub {
	font-family: var(--font-serif);
	font-size: var(--fs-body-lg);
	color: var(--text-secondary);
	max-width: 50ch;
	margin-bottom: var(--s-8);
}
.hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4);
	align-items: center;
}
.hero__visual {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hero__visual svg { width: 100%; height: auto; }

/* Variante hero minimaliste pour pages secondaires */
.hero--simple { padding-block: var(--s-16) var(--s-12); }
.hero--simple .hero__title { margin-bottom: var(--s-4); }

/* ───── Cards ───────────────────────────────────────────────────────────── */
.card {
	background: var(--bg-surface);
	border-radius: var(--r-md);
	padding: var(--s-6);
	border: 1px solid transparent;
	transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.card:hover {
	border-color: var(--border-subtle);
	box-shadow: var(--shadow-soft);
}

.card--icon {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	padding: var(--s-8);
}
.card--icon .icon-wrap {
	width: 44px;
	height: 44px;
	border-radius: var(--r-pill);
	background: var(--bg-primary);
	color: var(--accent-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border-subtle);
}
.card--icon h3 {
	font-size: var(--fs-h4);
	margin: 0;
}
.card--icon p {
	color: var(--text-secondary);
	margin: 0;
}

/* Card praticienne (Approche) */
.card--profile {
	display: grid;
	gap: var(--s-8);
	background: var(--bg-surface);
	border-radius: var(--r-md);
	padding: var(--s-8);
}
@media (min-width: 768px) {
	.card--profile {
		grid-template-columns: minmax(200px, 280px) 1fr;
		align-items: start;
		padding: var(--s-12);
	}
}
.card--profile__avatar {
	aspect-ratio: 1;
	background: var(--bg-primary);
	border-radius: var(--r-md);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-tertiary);
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	border: 1px solid var(--border-subtle);
}
.card--profile h2 { margin-bottom: var(--s-2); font-size: var(--fs-h3); }
.card--profile .role {
	font-family: var(--font-display);
	color: var(--text-secondary);
	font-size: var(--fs-body);
	margin-bottom: var(--s-6);
	letter-spacing: 0.02em;
}

/* Carte stat / tarif simple */
.card--stat {
	background: var(--bg-surface);
	border-radius: var(--r-md);
	padding: var(--s-8);
	text-align: left;
}
.card--stat .stat-label {
	display: block;
	font-family: var(--font-display);
	font-size: var(--fs-small);
	color: var(--text-secondary);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: var(--s-2);
}
.card--stat .stat-value {
	display: block;
	font-family: var(--font-display);
	font-size: var(--fs-h2);
	font-weight: 500;
	color: var(--text-primary);
	line-height: 1.1;
	margin-bottom: var(--s-2);
}
.card--stat .stat-note {
	color: var(--text-secondary);
	font-size: var(--fs-body);
	margin: 0;
}

/* ───── Process steps (4 étapes Séances) ────────────────────────────────── */
.steps { display: grid; gap: var(--s-8); }
.step {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: var(--s-6);
	align-items: start;
	position: relative;
}
.step__num {
	width: 40px;
	height: 40px;
	border-radius: var(--r-pill);
	background: var(--bg-primary);
	border: 1px solid var(--border-default);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 500;
	color: var(--accent-primary);
	position: relative;
	z-index: 2;
}
.step:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 19px;
	top: 40px;
	bottom: calc(-1 * var(--s-8));
	width: 1px;
	background: var(--border-subtle);
	z-index: 1;
}
.step h3 {
	font-size: var(--fs-h4);
	margin: 0 0 var(--s-2);
}
.step p {
	color: var(--text-secondary);
	margin: 0;
}

/* ───── Accordion FAQ ───────────────────────────────────────────────────── */
.accordion { display: flex; flex-direction: column; }
.accordion__item {
	border-top: 1px solid var(--border-subtle);
}
.accordion__item:last-child { border-bottom: 1px solid var(--border-subtle); }

.accordion__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	padding-block: var(--s-6);
	text-align: left;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-body-lg);
	color: var(--text-primary);
	cursor: pointer;
	transition: color var(--t-fast);
}
.accordion__trigger:hover { color: var(--accent-primary); }
.accordion__chevron {
	flex-shrink: 0;
	transition: transform var(--t-med);
	color: var(--text-secondary);
}
.accordion__trigger[aria-expanded="true"] .accordion__chevron {
	transform: rotate(180deg);
	color: var(--accent-primary);
}

.accordion__panel {
	overflow: hidden;
	transition: grid-template-rows var(--t-med);
}
.accordion__panel[hidden] { display: none; }
.accordion__panel-inner {
	padding-bottom: var(--s-6);
	color: var(--text-secondary);
	max-width: 65ch;
}
.accordion__panel-inner p { margin: 0; }

/* ───── Formulaire ──────────────────────────────────────────────────────── */
.form {
	display: flex;
	flex-direction: column;
	gap: var(--s-6);
}
.form__field {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}
.form__label {
	font-family: var(--font-display);
	font-size: var(--fs-small);
	font-weight: 500;
	color: var(--text-primary);
	letter-spacing: 0.02em;
}
.form__label .required {
	color: var(--accent-primary);
	font-weight: 500;
}

.form__input,
.form__select,
.form__textarea {
	width: 100%;
	padding: var(--s-3) var(--s-4);
	background: var(--bg-surface);
	color: var(--text-primary);
	border: 1px solid var(--border-subtle);
	border-radius: var(--r-sm);
	font-family: var(--font-serif);
	font-size: var(--fs-body);
	line-height: 1.5;
	transition: border-color var(--t-fast), background var(--t-fast);
}
.form__input:focus,
.form__select:focus,
.form__textarea:focus {
	border-color: var(--accent-primary);
	background: var(--bg-primary);
	outline: 2px solid var(--accent-primary);
	outline-offset: -1px;
}
.form__textarea {
	min-height: 140px;
	resize: vertical;
}

.form__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	font-size: var(--fs-small);
	color: var(--text-secondary);
	line-height: 1.5;
}
.form__consent input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--accent-primary);
	flex-shrink: 0;
}

.form__honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
	visibility: hidden;
}

.form__message {
	padding: var(--s-4) var(--s-6);
	border-radius: var(--r-sm);
	font-size: var(--fs-body);
}
.form__message--success {
	background: var(--bg-surface);
	border: 1px solid var(--success);
	color: var(--text-primary);
}
.form__message--error {
	background: var(--error-bg);
	border: 1px solid var(--error);
	color: var(--text-primary);
}

/* ───── Modale RDV ──────────────────────────────────────────────────────── */
.modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--s-4);
}
.modal[data-open="true"] {
	display: flex;
}
.modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(43, 42, 40, 0.55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.modal__dialog {
	position: relative;
	background: var(--bg-primary);
	border-radius: var(--r-md);
	max-width: 480px;
	width: 100%;
	padding: var(--s-12);
	box-shadow: var(--shadow-hover);
}
.modal__close {
	position: absolute;
	top: var(--s-4);
	right: var(--s-4);
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--r-sm);
	color: var(--text-secondary);
}
.modal__close:hover { color: var(--text-primary); background: var(--bg-surface); }
.modal h2 {
	font-size: var(--fs-h3);
	margin-bottom: var(--s-4);
}
.modal p { color: var(--text-secondary); margin-bottom: var(--s-6); }
.modal__demo-note {
	margin-top: var(--s-4);
	font-size: var(--fs-small);
	color: var(--text-tertiary);
	font-style: italic;
}

/* ───── Cookie banner ───────────────────────────────────────────────────── */
.cookie-banner {
	position: fixed;
	bottom: var(--s-4);
	left: var(--s-4);
	right: var(--s-4);
	z-index: 150;
	background: var(--bg-surface);
	border: 1px solid var(--border-subtle);
	border-radius: var(--r-md);
	padding: var(--s-6);
	box-shadow: var(--shadow-soft);
	display: none;
	flex-direction: column;
	gap: var(--s-4);
	max-width: 480px;
}
.cookie-banner[data-visible="true"] { display: flex; }
.cookie-banner p {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--text-secondary);
}
.cookie-banner__actions {
	display: flex;
	gap: var(--s-3);
}
.cookie-banner .btn { padding: var(--s-2) var(--s-4); font-size: var(--fs-small); }
@media (min-width: 768px) {
	.cookie-banner { bottom: var(--s-6); left: var(--s-6); right: auto; max-width: 420px; }
}

/* ───── CTA final (bandeau plein) ───────────────────────────────────────── */
.cta-band {
	background: var(--bg-surface);
	padding-block: var(--s-16);
	text-align: center;
}
@media (min-width: 768px) {
	.cta-band { padding-block: var(--s-24); }
}
.cta-band h2 {
	font-size: clamp(1.75rem, 2.5vw + .5rem, var(--fs-h2));
	max-width: 18ch;
	margin-inline: auto;
	margin-bottom: var(--s-8);
}

/* ───── Footer ──────────────────────────────────────────────────────────── */
.site-footer {
	background: var(--bg-primary);
	border-top: 1px solid var(--border-subtle);
	padding-block: var(--s-12);
}
.site-footer__grid {
	display: grid;
	gap: var(--s-8);
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.site-footer__grid {
		grid-template-columns: 2fr 1fr 1fr;
		gap: var(--s-12);
	}
}
.site-footer h4 {
	font-size: var(--fs-body);
	font-weight: 500;
	color: var(--text-primary);
	margin-bottom: var(--s-4);
}
.site-footer__brand {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--fs-h4);
	color: var(--text-primary);
	margin-bottom: var(--s-3);
	display: block;
	letter-spacing: 0.01em;
}
.site-footer p,
.site-footer li,
.site-footer a {
	font-size: var(--fs-small);
	color: var(--text-secondary);
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--accent-primary); }
.site-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}
.site-footer__bottom {
	margin-top: var(--s-12);
	padding-top: var(--s-6);
	border-top: 1px solid var(--border-subtle);
	text-align: center;
}
.site-credit {
	font-size: var(--fs-micro);
	opacity: 0.5;
	margin: 0;
}
.site-credit a { color: inherit; text-decoration: underline; text-decoration-color: currentColor; }

/* ───── Map iframe (Contact) ────────────────────────────────────────────── */
.map-frame {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--border-subtle);
	border-radius: var(--r-md);
	overflow: hidden;
}
.map-frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	filter: saturate(0.85);
}

/* ───── Infos pratiques ─────────────────────────────────────────────────── */
.info-block {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}
.info-block__row {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	color: var(--text-primary);
}
.info-block__row .icon {
	color: var(--accent-primary);
	flex-shrink: 0;
	margin-top: 3px;
}
.info-block a { color: var(--text-primary); text-decoration: none; border-bottom: 1px solid var(--border-default); }
.info-block a:hover { color: var(--accent-primary); border-bottom-color: var(--accent-primary); }

/* ───── Callout générique ───────────────────────────────────────────────── */
.callout {
	background: var(--bg-surface);
	border-radius: var(--r-md);
	padding: var(--s-8);
	border-left: 3px solid var(--accent-secondary);
}
@media (min-width: 768px) {
	.callout { padding: var(--s-12); }
}
.callout h3 { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

/* ───── Image placeholder (cabinet) ─────────────────────────────────────── */
.image-placeholder {
	aspect-ratio: 4 / 5;
	background: var(--bg-surface);
	border-radius: var(--r-md);
	border: 1px dashed var(--border-default);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-tertiary);
	font-family: var(--font-display);
	font-size: var(--fs-small);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
	padding: var(--s-4);
}