/* ==========================================================================
   Innadvise — base : reset, typographie, mise en page, boutons, utilitaires
   Règle : uniquement des alias de tokens.css (aucune couleur ni taille en dur,
   sauf les dimensions de mise en page issues des wireframes).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 16px); }
body {
	margin: 0;
	min-width: 320px;
	background: var(--color-base);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: var(--line-height-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
p, ul, ol, figure, h1, h2, h3, h4 { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
sup { font-size: .6em; line-height: 0; vertical-align: .55em; }

h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: var(--font-weight-display);
	line-height: var(--line-height-heading);
	letter-spacing: var(--letter-spacing-heading);
	color: var(--color-primary-deep);
	text-wrap: balance;
}
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
em { font-style: italic; }

:focus-visible { outline: var(--focus-ring); outline-offset: 3px; border-radius: 6px; }

/* ---------- Accessibilité ---------- */
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 100; background: var(--color-primary-deep); color: var(--color-base); padding: 12px 18px; border-radius: var(--radius-md); font-weight: var(--font-weight-strong); text-decoration: none; }
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }

/* ---------- Mise en page ---------- */
.wrap {
	width: 100%;
	max-width: var(--width-page);
	margin-inline: auto;
	padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
	padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.section { padding-block: var(--space-70); background: var(--color-base); }
.section--alt { background: var(--color-surface); }
.section__stack { display: flex; flex-direction: column; align-items: center; gap: var(--space-50); }
.section__head { display: grid; gap: 12px; text-align: center; justify-items: center; }
.section__title { text-align: center; }
.section__title--prose { max-width: var(--width-prose); margin-inline: auto; }
.section__sub { font-size: var(--fs-subtitle); color: var(--color-muted); max-width: 60ch; }

/* ---------- Surtitre ---------- */
.eyebrow { font-size: var(--fs-eyebrow); font-weight: var(--font-weight-strong); letter-spacing: var(--letter-spacing-eyebrow); text-transform: uppercase; color: var(--color-accent-text); }

/* ---------- Boutons (pilule) ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 13px 24px;
	border-radius: var(--radius-pill);
	border: var(--border-button) solid transparent;
	font: var(--font-weight-strong) var(--fs-small)/1 var(--font-body);
	text-decoration: none; white-space: nowrap; cursor: pointer;
	transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn--navy { background: var(--color-primary); color: var(--color-base); }
.btn--navy:hover { background: var(--color-primary-deep); }
.btn--line { border-color: var(--color-primary); color: var(--color-primary); background: transparent; }
.btn--line:hover { background: var(--color-primary); color: var(--color-base); }
.btn--peach { background: var(--color-accent); color: var(--color-primary-deep); }
.btn--peach:hover { background: var(--color-accent-hover); }
.btn--white { background: var(--color-base); color: var(--color-primary); }
.btn--white:hover { background: var(--color-accent-soft); }
.arrow { display: inline-block; transition: transform var(--duration-fast); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Emplacements média (en attente des fichiers) ---------- */
.media-slot { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--gradient-stage); color: var(--color-primary); }
.media-slot--dark { background:
	radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 55%),
	radial-gradient(90% 80% at 10% 100%, color-mix(in srgb, var(--color-primary) 90%, transparent), transparent 70%),
	var(--color-primary-deep);
	color: var(--color-base);
}
.media-slot > img, .media-slot > video, .media-slot > picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-slot__icon { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .45; }

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