*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-sticky, 0px) + 16px); }
body {
	margin: 0;
	background: var(--blanc);
	color: var(--encre);
	font-family: var(--police-texte);
	font-size: var(--fs-texte);
	line-height: var(--lh-texte);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--vert-texte); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus, var(--vert-texte)); outline-offset: 2px; }
/* Fonds sombres : anneau de focus blanc. */
.site-footer, .utility-bar, .bandeau:not(.bandeau--plain), .section--institution, dialog.lightbox { --focus: var(--blanc); }
/* Boutons à fond vert : anneau intérieur blanc en plus du contour, visible sur tout fond. */
.btn--primary:focus-visible, .back-to-top:focus-visible { box-shadow: inset 0 0 0 2px var(--blanc); }
h1, h2, h3, h4, .h1, .h2, .h3 { margin: 0; font-family: var(--police-titre); color: var(--vert-institution); }
h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 700; }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 700; }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; color: var(--encre); }
p { margin: 0 0 1em; }
.prose { max-width: 72ch; }
.prose > * + * { margin-top: 1em; }
.prose h3 { margin-top: 1.6em; }
.lead { font-size: clamp(17px, 1.2vw + 12px, 20px); line-height: 1.55; }
.small { font-size: var(--fs-petit); line-height: 22px; color: var(--encre-2); }
.eyebrow {
	display: block;
	font: 600 var(--fs-surtitre)/1.4 var(--police-titre);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vert-texte);
}
.title-rule { display: block; width: 56px; height: 3px; background: var(--orange-accent); margin: 16px 0 24px; border: 0; }
.text-center .title-rule, .title-rule--center { margin-inline: auto; }

.container { width: 100%; max-width: var(--conteneur); margin-inline: auto; padding-inline: var(--gouttiere); }
.container--narrow { max-width: calc(800px + 2 * var(--gouttiere)); }
.section { padding-block: var(--section-y); }
.section--vert { background: var(--teinte-verte); }
.section--orange { background: var(--teinte-orange); }
.section--gris { background: var(--fond-gris); }
.section--institution { background: var(--vert-institution); color: var(--blanc); }
.section--bordure { border-top: 1px solid var(--filet); }
.text-center { text-align: center; }

.stack > * + * { margin-top: var(--stack, 16px); }
.grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 768px) {
	.grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
	.grid--3 { grid-template-columns: repeat(3, 1fr); }
	.grid--4 { grid-template-columns: repeat(4, 1fr); }
}

[hidden] { display: none !important; }
.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;
}
.skip-link { position: absolute; left: 16px; top: -48px; z-index: 1000; background: var(--blanc); padding: 8px 16px; }
.skip-link:focus { top: 8px; }
.icon { width: 1em; height: 1em; flex: none; stroke: currentColor; }

/* Apparition au défilement (main.js) : la classe .reveal n'est posée que par le script. */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}