/*
 * Welia · Base
 * Reset moderne, typographie globale, layout fondamental.
 */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

section[id] { scroll-margin-top: calc(var(--header-h) + var(--space-5)); }

body {
	margin: 0;
	font-family: var(--font-sans);
	/* Body fluide : 17px sur 768px → 18px sur 1280px → 19px sur 1600px → 20px sur 2000px+. */
	font-size: clamp(17px, 0.45vw + 14px, 20px);
	line-height: var(--lh-normal);
	color: var(--text-1);
	background: var(--bg);
	font-feature-settings: "ss01", "cv11";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Headings — par défaut serif éditorial */
h1, h2, h3, h4 {
	font-family: var(--font-serif);
	font-weight: 500;
	color: var(--text-1);
	margin: 0;
	letter-spacing: var(--ls-tight);
	line-height: var(--lh-snug);
}

h5, h6 {
	font-family: var(--font-sans);
	font-weight: 500;
	margin: 0;
	color: var(--text-1);
	letter-spacing: var(--ls-snug);
}

p, ul, ol { margin: 0; }
ul, ol { padding-left: 1.2em; }

a {
	color: var(--accent-1);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--accent-1-hover); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
	border-radius: var(--radius-sm);
}

img, svg, video { max-width: 100%; display: block; height: auto; }

button {
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
	border: 0;
	background: none;
}

input, textarea, select {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

hr {
	border: 0;
	border-top: 1px solid var(--border-subtle);
	margin: var(--space-8) 0;
}

mark { background: var(--accent-2-soft); color: inherit; padding: 0 .2em; }

::selection {
	background: var(--accent-1);
	color: var(--text-inverse);
}

/* Skip link */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--accent-1);
	color: var(--text-inverse);
	padding: var(--space-3) var(--space-4);
	font-size: var(--text-sm);
	z-index: 9999;
	border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: var(--text-inverse); }

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

/* Container */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: 1440px; }

/* Contenu aligné sur la navbar/héros (1440px). Appliqué aux nouveaux templates via
   .site-main--wide sur le <main> : élargit aussi les .container des parts partagés
   imbriqués (FAQ, feature-showcase…) SANS modifier ces parts ni les anciennes pages.
   Le :not(--narrow) préserve d'éventuelles sections volontairement étroites. */
.site-main--wide .container:not(.container--narrow) { max-width: 1440px; }

/* Section pattern */
.section {
	padding-block: var(--section-py);
	position: relative;
}
.section + .section { padding-top: 0; }
.section--bordered { border-top: 1px solid var(--border-subtle); padding-top: var(--section-py); }
.section--surface { background: var(--surface); }
.section--accent  { background: var(--accent-1); color: var(--text-inverse); }
.section--accent h1, .section--accent h2, .section--accent h3 { color: inherit; }

/* Prose */
.prose {
	max-width: 68ch;
	color: var(--text-2);
	line-height: var(--lh-relaxed);
}
.prose > * + * { margin-top: var(--space-5); }
.prose h2 { font-size: var(--text-2xl); color: var(--text-1); margin-top: var(--space-7); }
.prose h3 { font-size: var(--text-xl); color: var(--text-1); margin-top: var(--space-6); }
.prose strong { color: var(--text-1); font-weight: 600; }
.prose a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--accent-1); }
.prose a:hover { text-decoration-color: currentColor; color: var(--accent-1); }
.prose blockquote {
	border-left: 2px solid var(--accent-1);
	padding-left: var(--space-5);
	font-family: var(--font-serif);
	font-style: italic;
	color: var(--text-1);
}
.prose code {
	font-family: var(--font-mono);
	font-size: 0.92em;
	background: var(--surface-2);
	padding: 0.1em 0.4em;
	border-radius: var(--radius-xs);
}

/* Scroll reveal */
[data-reveal] {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* No-scroll lock pour mobile nav */
body.is-nav-open { overflow: hidden; }