/*
 * Aquanubia — feuille de style unique (refonte du 8 novembre 2026).
 * CSS natif récent : couches, imbrication, requêtes de conteneur,
 * transitions entre pages, animation liée au défilement, <details> animé.
 * Chaque fonction récente a un repli : le site reste correct sans elle.
 */

@font-face {
	font-family: "Familjen Grotesk";
	src: url("fonts/familjen-grotesk-latin-wght-normal.woff2") format("woff2-variations");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* Pas de couches @layer : les styles de WordPress, non rangés en couches, passeraient devant. */

:root {
	/* Eau profonde, sable de fond de bac, eau claire. */
	--eau: #10292b;
	--eau-2: #163739;
	--eau-3: #1f4a48;
	--clair: #e3ebe4;
	--clair-2: #f2f5f1;
	--blanc: #ffffff;
	--sable: #f7890c;     /* orange du logo */
	--sable-2: #ffa23a;
	--encre: #10292b;
	--texte: #e9f0eb;
	--texte-doux: #b3c6bf;
	--texte-clair-doux: #4b625d;
	--ligne: rgb(255 255 255 / .13);
	--ligne-claire: rgb(16 41 43 / .15);
	--rayon: 16px;
	--rayon-petit: 10px;
	--marge: clamp(20px, 5vw, 64px);
	--police: "Familjen Grotesk", "Segoe UI", system-ui, sans-serif;
	color-scheme: dark;
	interpolate-size: allow-keywords;
}

/* Transition douce entre l'accueil et le questionnaire (navigateurs récents). */
@view-transition { navigation: auto; }

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, figure, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
	background: var(--eau);
	color: var(--texte);
	font-family: var(--police);
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-weight: 600; line-height: 1.08; letter-spacing: -.022em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 1.4rem + 3vw, 3.9rem); }
h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.05rem); }
h3 { font-size: 1.3rem; line-height: 1.25; letter-spacing: -.012em; }
p { text-wrap: pretty; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
em { font-style: inherit; }
:focus-visible { outline: 2px solid var(--sable); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--sable); color: var(--encre); }

.wp-site-blocks { padding: 0; }
.wp-site-blocks > * { margin-block-start: 0 !important; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
	@view-transition { navigation: none; }
}

.shell { width: min(1200px, 100% - 2 * var(--marge)); margin-inline: auto; }
.section { padding-block: clamp(64px, 9vw, 120px); }
.section--claire {
	background: var(--clair);
	color: var(--encre);
	color-scheme: light;
	& p { color: var(--texte-clair-doux); }
}
.section--blanche { background: var(--clair-2); color: var(--encre); color-scheme: light; }
.section--blanche p { color: var(--texte-clair-doux); }

/* Accès rapide et bandeau de version locale */
.skip-link {
	position: absolute; top: -100px; left: 16px; z-index: 30;
	padding: 12px 16px; background: var(--sable); color: var(--encre); border-radius: var(--rayon-petit);
	&:focus { top: 12px; }
}
.local-banner {
	background: #0b1f21; color: var(--texte-doux);
	font-size: .8rem; text-align: center; padding: 6px 16px;
}
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* En-tête */
.site-header {
	display: flex; align-items: center; gap: 32px;
	padding-block: 22px;
	view-transition-name: en-tete;
}
.brand {
	display: inline-flex; align-items: center; gap: 12px;
	font-size: 1.45rem; font-weight: 650; letter-spacing: -.025em; line-height: 1.1;
	text-decoration: none; color: var(--texte);
	& small { display: block; margin-top: 4px; font-size: .78rem; font-weight: 400; letter-spacing: 0; color: var(--texte-doux); }
}
.brand-symbol { width: 36px; height: 28px; color: var(--sable); flex: none; }
.brand-logo { display: block; height: 54px; width: auto; }
.site-footer .brand-logo { height: 62px; }
@media (max-width: 760px) { .brand-logo { height: 42px; } }
#main-nav {
	display: flex; gap: 28px; margin-left: auto; font-size: .95rem;
	& a { color: var(--texte-doux); text-decoration: none; transition: color .2s; }
	& a:hover { color: var(--texte); text-decoration: underline; }
}
.header-cta {
	padding: 10px 18px; border-radius: 999px; font-size: .95rem; text-decoration: none;
	border: 1px solid color-mix(in srgb, var(--sable) 55%, transparent);
	color: var(--sable); transition: background-color .2s, color .2s;
	&:hover { background: var(--sable); color: var(--encre); }
	& span[aria-hidden] { display: none; }
}
.menu-toggle { display: none; }

/* Boutons et liens d'action : pas de flèches décoratives. */
.button {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 52px; padding: 14px 26px; border: 0; border-radius: 999px;
	background: var(--sable); color: var(--encre);
	font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer;
	transition: background-color .2s;
	&:hover { background: var(--sable-2); }
	& span[aria-hidden] { display: none; }
}
.text-link {
	display: inline-flex; align-items: center; min-height: 44px;
	font-weight: 600; text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	&:hover { text-decoration-color: currentColor; }
	& span[aria-hidden] { display: none; }
}
button:disabled { cursor: wait; opacity: .65; }

/* Messages */
.form-error {
	padding: 14px 18px; border-radius: var(--rayon-petit);
	background: #fbebe5; color: #7a2e1e; border-left: 3px solid #b2462f; font-size: .95rem; margin: 12px 0;
}
.form-success {
	padding: 32px; border-radius: var(--rayon);
	background: var(--clair); color: var(--encre);
	& h2 { font-size: 1.8rem; margin-bottom: 12px; }
	& p { color: var(--texte-clair-doux); }
	& .eyebrow { display: none; }
	& .text-link { margin-top: 12px; color: var(--encre); }
}

/* Inscription au lancement */
.signup-form {
	& > label:not(.signup-consent) { display: block; font-size: .95rem; margin-bottom: 8px; }
	& .form-success { padding: 18px 20px; font-size: .95rem; }
}
.signup-row {
	display: flex; gap: 8px; margin-bottom: 16px;
	& input {
		flex: 1; min-width: 0; min-height: 52px; padding: 12px 20px; border-radius: 999px;
		border: 1px solid var(--ligne); background: rgb(255 255 255 / .05); color: var(--texte);
	}
	& input::placeholder { color: color-mix(in srgb, var(--texte-doux) 70%, transparent); }
	& button {
		min-height: 52px; padding: 0 22px; border: 0; border-radius: 999px;
		background: var(--sable); color: var(--encre); font-weight: 600; cursor: pointer;
	}
	& button:hover { background: var(--sable-2); }
}
.signup-consent {
	display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; line-height: 1.55; color: var(--texte-doux);
	& input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: var(--sable); }
}
.signup-help { font-size: .82rem; color: var(--texte-doux); margin-top: 14px; }

/* Pied de page */
.site-footer { border-top: 1px solid var(--ligne); padding-top: 56px; }
.footer-main {
	display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding-bottom: 44px;
	& p { color: var(--texte-doux); font-size: .95rem; max-width: 30ch; margin-top: 10px; }
	& .eyebrow { font-size: .85rem; color: var(--texte-doux); margin: 0 0 10px; }
	& a:not(.brand) { display: block; padding: 4px 0; text-decoration: none; }
	& a:not(.brand):hover { text-decoration: underline; }
	& p:empty { display: none; }
}
.footer-bottom {
	display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
	padding: 20px 0 28px; border-top: 1px solid var(--ligne);
	font-size: .85rem; color: var(--texte-doux);
}

/* ---------- Accueil ---------- */
.hero { padding-top: clamp(32px, 5vw, 72px); }
.hero-grid {
	display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 80px); align-items: end;
}
.hero h1 { max-width: 17ch; }
.hero-lead { margin-top: 26px; font-size: 1.2rem; line-height: 1.55; color: var(--texte-doux); max-width: 34em; }

/* La première question du questionnaire, directement dans l'accueil. */
.first-question {
	padding: clamp(22px, 3vw, 32px);
	border-radius: var(--rayon);
	background: var(--eau-2);
	border: 1px solid var(--ligne);
	& h2 { font-size: 1.45rem; letter-spacing: -.015em; }
	& > p { margin-top: 6px; color: var(--texte-doux); font-size: .95rem; }
}
.level-choices {
	display: grid; gap: 10px; margin-top: 20px; list-style: none;
	& a {
		display: flex; align-items: center; gap: 14px;
		min-height: 54px; padding: 12px 18px;
		border-radius: var(--rayon-petit); border: 1px solid var(--ligne);
		background: rgb(255 255 255 / .03);
		font-weight: 550; text-decoration: none;
		transition: background-color .2s, border-color .2s;
	}
	& a::before {
		content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
		border: 1.5px solid var(--texte-doux);
		transition: background-color .2s, border-color .2s, box-shadow .2s;
	}
	& a:hover, & a:focus-visible { background: rgb(247 137 12 / .12); border-color: var(--sable); }
	& a:hover::before, & a:focus-visible::before { border-color: var(--sable); background: var(--sable); box-shadow: inset 0 0 0 3px var(--eau-2); }
}
.first-question-note { margin-top: 16px; font-size: .9rem; color: var(--texte-doux); }

/* Le bac : photo panoramique posée sur un meuble. */
.tank { margin-top: clamp(40px, 6vw, 72px); }
.tank-glass {
	position: relative; overflow: hidden; aspect-ratio: 3 / 1;
	border: 1px solid rgb(255 255 255 / .2); border-top-color: rgb(255 255 255 / .38);
	border-radius: 4px 4px 0 0; background: #0b2022;
	& img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
}
.tank-stand { height: 14px; background: #0a1c1e; border-radius: 0 0 4px 4px; }
.tank figcaption { margin-top: 10px; font-size: .85rem; color: var(--texte-doux); }

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.tank-glass img {
			animation: profondeur linear both;
			animation-timeline: view();
			animation-range: entry 20% exit 80%;
		}
	}
}
@keyframes profondeur {
	from { transform: scale(1.1) translateY(-3%); }
	to { transform: scale(1.02) translateY(2%); }
}

/* Qui on est */
.who-grid {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px);
}
.who-names { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.4rem); line-height: 1; }
.who-place { margin-top: 18px; font-size: 1rem; }
.who-text {
	max-width: 36em;
	& p + p { margin-top: 1.1em; }
	& .who-lead { font-size: 1.35rem; line-height: 1.45; color: var(--encre); letter-spacing: -.01em; }
	& .who-sign { margin-top: 28px; color: var(--encre); font-weight: 600; }
}

/* Ce qu'on envisage de proposer */
.offer-head {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 80px; align-items: end;
	margin-bottom: 40px;
	& p { max-width: 34em; }
}
.offer-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.tile {
	container-type: inline-size;
	display: flex; flex-direction: column;
	border-radius: var(--rayon); overflow: hidden;
	& h3 { font-size: 1.5rem; }
	& p { margin-top: 10px; }
}
.tile--wide { grid-column: span 7; }
.tile--narrow { grid-column: span 5; }
.tile--photo {
	background: var(--blanc); color: var(--encre);
	& img { width: 100%; height: 260px; object-fit: contain; padding: 18px 18px 0; }
	& .tile-body { padding: 8px 28px 28px; }
}
.tile--dense {
	background: var(--eau); color: var(--texte); padding: 28px; justify-content: space-between; gap: 32px;
	& p { color: var(--texte-doux); }
}
.tile-items {
	display: flex; flex-wrap: wrap; gap: 8px; list-style: none;
	& li { padding: 6px 14px; border: 1px solid var(--ligne); border-radius: 999px; font-size: .95rem; }
}
@container (min-width: 560px) {
	.tile--photo .tile-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; height: 100%; }
	.tile--photo img { height: 300px; padding: 18px; }
	.tile--photo .tile-body { padding: 28px 28px 28px 8px; }
}
.offer-note { margin-top: 24px; font-size: .95rem; }

/* La suite du projet : une vraie séquence, donc numérotée. */
.roadmap-head { max-width: 40rem; margin-bottom: 48px; & p { margin-top: 16px; color: var(--texte-doux); } }
.roadmap {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; list-style: none;
	counter-reset: etape;
	& li { position: relative; padding-top: 40px; counter-increment: etape; }
	& li::before {
		content: counter(etape);
		position: absolute; top: 0; left: 0;
		display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
		border: 1px solid var(--texte-doux); color: var(--texte-doux); font-size: .85rem; font-weight: 600;
		background: var(--eau);
		z-index: 1;
	}
	& li::after { content: ""; position: absolute; top: 14px; left: 0; right: -32px; border-top: 1px solid var(--ligne); }
	& li:last-child::after { right: 0; }
	& li.is-now::before { background: var(--sable); border-color: var(--sable); color: var(--encre); }
	& .when { font-size: .9rem; color: var(--texte-doux); }
	& li.is-now .when { color: var(--sable); }
	& h3 { margin-top: 4px; }
	& p { margin-top: 10px; color: var(--texte-doux); font-size: 1rem; }
}
.roadmap-cta { margin-top: 48px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; & p { color: var(--texte-doux); font-size: .95rem; } }

/* Questions fréquentes */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); }
.faq-list {
	border-top: 1px solid var(--ligne-claire);
	& details { border-bottom: 1px solid var(--ligne-claire); }
	& summary {
		display: flex; justify-content: space-between; gap: 24px; align-items: center;
		padding: 20px 0; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.1rem; color: var(--encre);
	}
	& summary::-webkit-details-marker { display: none; }
	& summary::after {
		content: ""; flex: none; width: 12px; height: 12px;
		border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
		transform: translateY(-3px) rotate(45deg); transition: transform .25s;
	}
	& details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
	& details p { padding-bottom: 22px; max-width: 38em; }
	& a { color: var(--encre); }
}
@supports selector(::details-content) {
	.faq-list details::details-content {
		block-size: 0; overflow: hidden;
		transition: block-size .3s ease, content-visibility .3s allow-discrete;
	}
	.faq-list details[open]::details-content { block-size: auto; }
}

/* Être prévenu de l'ouverture */
.launch { background: var(--eau-2); border-top: 1px solid var(--ligne); }
.launch-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.launch h2 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem); }
.launch-grid > div > p { margin-top: 14px; color: var(--texte-doux); max-width: 32em; }

/* ---------- Pages de contenu ---------- */
.content-page {
	padding-block: 48px 96px; min-height: 55vh;
	& :where(h1) { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); margin-bottom: 32px; }
	& :where(.wp-block-post-content > h2) { font-size: 1.6rem; margin: 2em 0 .6em; }
	& :where(p, li) { line-height: 1.75; }
	& :where(p + p) { margin-top: 1em; }
	& :where(.wp-block-post-content > p a, li a) { color: var(--sable); }
}
.content-page:has(.survey-app) {
	width: min(1200px, 100% - 2 * var(--marge)); padding-top: 24px;
	& > .wp-block-post-title { display: none; }
}
.content-page .wp-block-post-content:has(.survey-app),
.content-page .survey-app { max-width: none !important; }

/* ---------- Questionnaire (style seulement, structure inchangée) ---------- */
.survey-header {
	margin-bottom: 36px; padding: clamp(28px, 4vw, 48px);
	border-radius: var(--rayon); border: 1px solid var(--ligne);
	background:
		linear-gradient(90deg, var(--eau-2) 0%, var(--eau-2) 45%, rgb(22 55 57 / .55) 75%, rgb(22 55 57 / .2) 100%),
		url("jardin-aquatique.webp") right center / cover;
	& > div { max-width: 40rem; }
	& .eyebrow { display: none; }
	& h1 { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem); margin-bottom: 18px; }
	& p { color: var(--texte-doux); }
	& p + p { margin-top: 10px; }
	& .survey-reassurance { margin-top: 18px; font-size: .9rem; color: var(--sable); }
}
.survey-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.steps {
	display: flex; gap: 12px; margin-bottom: 20px; list-style: none;
	& li { flex: 1; padding-top: 10px; border-top: 3px solid var(--ligne); font-size: .92rem; color: var(--texte-doux); }
	& li.active { border-color: var(--sable); color: var(--texte); font-weight: 600; }
	& li span { margin-right: 8px; }
}
.survey-panel {
	background: var(--clair-2); color: var(--encre); color-scheme: light;
	padding: clamp(22px, 3.5vw, 40px); border-radius: var(--rayon);
	& h2 { font-size: 1.8rem; outline-offset: 6px; }
	& .button { background: var(--eau); color: var(--blanc); }
	& .button:hover { background: var(--eau-3); }
}
.question {
	border: 0; padding: 0; margin: 28px 0 0; min-width: 0;
	& legend, & > label { display: block; font-weight: 600; font-size: 1.05rem; margin-bottom: 12px; padding: 0; }
	& input[type=text], & textarea {
		width: 100%; padding: 12px 14px; border: 1px solid #b8c7bf; border-radius: var(--rayon-petit);
		background: var(--blanc); color: var(--encre);
	}
	& input[name=postal] { max-width: 200px; }
	& textarea { min-height: 100px; resize: vertical; }
}
.question-hint { display: block; margin-top: 4px; font-size: .88rem; font-weight: 400; color: var(--texte-clair-doux); }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice {
	display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px;
	border: 1px solid var(--ligne-claire); border-radius: var(--rayon-petit); background: var(--blanc);
	cursor: pointer; transition: border-color .15s, background-color .15s;
	&:hover { border-color: var(--eau-3); }
	&:has(input:checked) { border-color: var(--eau); background: #e7efe8; box-shadow: inset 0 0 0 1px var(--eau); }
	& input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--eau); }
}
.survey-actions {
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--ligne-claire);
}
.back-button { border: 0; background: none; padding: 12px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: .22em; color: var(--encre); }
.survey-data-note { margin-top: 20px; text-align: center; font-size: .88rem; color: var(--texte-doux); & a { color: var(--texte); } }
.survey-aside {
	padding: 26px; border-radius: var(--rayon); background: var(--eau-2); border: 1px solid var(--ligne);
	& .eyebrow { display: none; }
	& h2 { font-size: 1.4rem; margin-bottom: 18px; }
	& .text-link { margin-top: 12px; font-size: .95rem; }
}
.aside-item, .aside-note {
	padding: 16px 0; border-top: 1px solid var(--ligne);
	& h3, & strong { display: block; font-size: 1rem; font-weight: 600; margin-bottom: 6px; }
	& p { font-size: .95rem; color: var(--texte-doux); }
}

/* ---------- Adaptations ---------- */
@media (max-width: 960px) {
	.hero-grid, .who-grid, .offer-head, .faq-grid, .launch-grid { grid-template-columns: 1fr; }
	.hero h1 { max-width: 18ch; }
	.tile--wide, .tile--narrow { grid-column: span 12; }
	.survey-layout { grid-template-columns: 1fr; }
	.footer-main { grid-template-columns: 1fr 1fr; & > div:first-child { grid-column: 1 / -1; } }
}

@media (max-width: 760px) {
	body { font-size: 1rem; }
	.site-header { flex-wrap: wrap; gap: 12px; padding-block: 16px; }
	.brand { font-size: 1.3rem; }
	.menu-toggle {
		display: inline-flex; align-items: center; gap: 10px; margin-left: auto;
		min-height: 44px; padding: 8px 16px; border-radius: 999px;
		border: 1px solid var(--ligne); background: transparent; color: var(--texte); cursor: pointer;
	}
	.menu-toggle span[aria-hidden] { display: none; }
	#main-nav {
		display: none; width: 100%; flex-direction: column; gap: 0; margin: 0;
		border-top: 1px solid var(--ligne); font-size: 1.05rem;
		& a { padding: 14px 0; color: var(--texte); border-bottom: 1px solid var(--ligne); }
	}
	#main-nav.is-open { display: flex; }
	.header-cta { display: none; }
	.hero-lead { font-size: 1.08rem; }
	.tank-glass { aspect-ratio: 16 / 10; & img { object-position: 62% 50%; } }
	.roadmap { grid-template-columns: 1fr; gap: 28px; & li { padding: 0 0 0 48px; } & li::after { top: 28px; bottom: -28px; left: 14px; right: auto; border-top: 0; border-left: 1px solid var(--ligne); } & li:last-child::after { display: none; } }
	.choices { grid-template-columns: 1fr; }
	.steps li { font-size: .82rem; & span { display: block; } }
	.signup-row { flex-direction: column; }
	.tile--photo img { height: 220px; }
}

/* ---------- Pied de page sombre (toutes les pages) ---------- */
.site-footer { background: #0b1f21; border-top: 0; }
.site-footer .brand-logo { height: 62px; }

/* ---------- Questionnaire version 2 : parcours adapté, conditions, erreurs ---------- */
.survey-panel:not([data-profile="starting"]) .t-starting { display: none; }
.survey-panel[data-profile="starting"] .t-current { display: none; }
.question[hidden] { display: none !important; }
.survey-count { font-size: .92rem; color: var(--texte-clair-doux); margin-bottom: 6px; }
.step-intro { margin-top: 10px; color: var(--texte-clair-doux); max-width: 40em; }
.question-extra { margin-top: 16px; }
.question-extra label { display: block; font-weight: 600; font-size: .98rem; margin-bottom: 8px; }
.question-extra input {
	width: 100%; padding: 12px 14px; border: 1px solid #b8c7bf; border-radius: var(--rayon-petit);
	background: var(--blanc); color: var(--encre);
}
.question-error {
	margin-top: 10px; padding: 8px 12px; border-left: 3px solid #b2462f; border-radius: 0 8px 8px 0;
	background: #fbebe5; color: #7a2e1e; font-size: .92rem;
}
.question[aria-invalid="true"] .choice,
.question[aria-invalid="true"] input[type=text],
.question[aria-invalid="true"] textarea { border-color: #b2462f; }
.survey-aside h3 { font-size: 1rem; }

/* Lien « Donner mon avis » dans le menu mobile (le bouton d'en-tête est masqué sur petit écran). */
#main-nav .nav-avis { display: none; }
@media (max-width: 760px) { #main-nav .nav-avis { display: block; color: var(--sable); font-weight: 600; } }

/* ---------- Pages Mentions légales et Vos données ---------- */
main.legal { background: #fff; color: var(--encre); color-scheme: light; padding-block: clamp(48px, 7vw, 96px) clamp(80px, 10vw, 130px); }
.legal-inner { max-width: 760px; }
.legal h1 { font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem); color: var(--encre); }
.legal-intro { margin-top: 16px; font-size: 1.2rem; color: var(--texte-clair-doux); }
.legal section { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--ligne-claire); }
.legal h2 { font-size: 1.45rem; color: var(--encre); }
.legal section p { margin-top: 12px; line-height: 1.7; color: #33494a; }
.legal a { color: #a85400; }
.legal strong { color: var(--encre); }
.legal-date { margin-top: 44px; font-size: .9rem; color: var(--texte-clair-doux); }