/* ==========================================================================
   Base : remise à zéro, typographie, mise en page, accessibilité
   ========================================================================== */

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Compense la hauteur de l'en-tête collant lors des sauts d'ancre. */
	scroll-padding-top: 6.5rem;
}

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

body {
	font-family: var(--police-texte);
	font-size: var(--txt-base);
	font-weight: 400;
	line-height: var(--interligne-texte);
	color: var(--c-texte);
	background-color: var(--fond);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

body.nav-ouverte {
	overflow: hidden;
}

img,
picture,
video,
canvas,
svg,
iframe {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

/* ---- Titres ---- */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--police-titre);
	font-weight: 700;
	line-height: var(--interligne-titre);
	letter-spacing: -0.02em;
	color: var(--marine-900);
	text-wrap: balance;
}

h1 { font-size: var(--titre-xl); font-weight: 800; }
h2 { font-size: var(--titre-l); }
h3 { font-size: var(--titre-m); }
h4 { font-size: var(--titre-s); }
h5,
h6 { font-size: var(--txt-lg); }

p {
	text-wrap: pretty;
}

a {
	color: var(--c-primaire);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--transition-rapide);
}

a:hover {
	color: var(--c-accent);
}

strong,
b {
	font-weight: 700;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

/* ---- Accessibilité ---- */

:focus-visible {
	outline: 3px solid var(--c-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.screen-reader-text {
	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:focus {
	position: fixed !important;
	top: 1rem;
	left: 1rem;
	z-index: 999;
	width: auto;
	height: auto;
	clip: auto;
	padding: 0.75rem 1.25rem;
	font-weight: 700;
	color: #fff;
	background: var(--c-primaire);
	border-radius: var(--r-s);
	box-shadow: var(--ombre-m);
}

/* ---- Mise en page ---- */

.site-wrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main {
	flex: 1;
}

.conteneur {
	width: 100%;
	max-width: var(--largeur-conteneur);
	margin-inline: auto;
	padding-inline: var(--gouttiere);
}

.section {
	padding-block: var(--espace-section);
}

.section--claire {
	background: var(--surface-2);
}

.section--marine {
	color: #fff;
	background: var(--marine-800);
}

.section--marine h1,
.section--marine h2,
.section--marine h3 {
	color: #fff;
}

/* ---- Apparition au défilement ---- */

/*
 * L'état masqué n'est appliqué que si la classe « js » a été posée sur <html>
 * par le script inline de l'en-tête. Sans JavaScript, rien n'est jamais caché :
 * une révélation ratée rendrait la moitié de la page d'accueil invisible.
 */
.js .js-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity var(--transition-reveal) var(--delai, 0ms),
		transform var(--transition-reveal) var(--delai, 0ms);
}

/*
 * Variantes directionnelles : dans une section à deux colonnes, faire entrer
 * chaque moitié depuis son propre bord accompagne la lecture au lieu de faire
 * monter les deux blocs à l'identique.
 */
.js .js-reveal--gauche { transform: translate3d(-32px, 0, 0); }
.js .js-reveal--droite { transform: translate3d(32px, 0, 0); }
.js .js-reveal--zoom   { transform: scale(0.96); }

.js .js-reveal.est-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js .js-reveal,
	.js .js-reveal--gauche,
	.js .js-reveal--droite,
	.js .js-reveal--zoom {
		opacity: 1;
		transform: none;
	}
}

/* ---- Battement discret, repris du point pulsant de la référence ---- */

@keyframes sema-battement {
	0%   { box-shadow: 0 0 0 0 rgba(212, 10, 16, 0.45); }
	70%  { box-shadow: 0 0 0 10px rgba(212, 10, 16, 0); }
	100% { box-shadow: 0 0 0 0 rgba(212, 10, 16, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__badge-point {
		animation: none !important;
	}
}

/* ---- Contenu rédactionnel (the_content) ---- */

.prose {
	max-width: var(--largeur-texte);
	margin-inline: auto;
	font-size: var(--txt-lg);
	color: var(--c-texte-2);
}

.prose > * + * {
	margin-top: var(--e-6);
}

.prose h2,
.prose h3,
.prose h4 {
	margin-top: var(--e-12);
	color: var(--marine-900);
}

.prose h2 + *,
.prose h3 + *,
.prose h4 + * {
	margin-top: var(--e-4);
}

.prose ul,
.prose ol {
	padding-left: var(--e-6);
}

.prose ul { list-style: none; }
.prose ol { list-style: decimal; }

.prose ul li {
	position: relative;
	padding-left: var(--e-5);
}

.prose ul li::before {
	content: '';
	position: absolute;
	top: 0.72em;
	left: 0;
	width: 7px;
	height: 7px;
	background: var(--c-accent);
	border-radius: 50%;
}

.prose li + li {
	margin-top: var(--e-2);
}

.prose blockquote {
	padding: var(--e-6) var(--e-8);
	font-family: var(--police-citation);
	font-size: var(--txt-xl);
	font-style: italic;
	line-height: 1.5;
	color: var(--marine-800);
	background: var(--marine-50);
	border-left: 4px solid var(--c-accent);
	border-radius: 0 var(--r-m) var(--r-m) 0;
}

.prose img,
.prose figure {
	border-radius: var(--r-m);
}

.prose figcaption {
	margin-top: var(--e-3);
	font-size: var(--txt-sm);
	color: var(--encre-3);
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--txt-sm);
}

.prose th,
.prose td {
	padding: var(--e-3) var(--e-4);
	text-align: left;
	border-bottom: 1px solid var(--c-bordure);
}

.prose th {
	font-weight: 700;
	color: var(--marine-900);
	background: var(--marine-50);
}

.prose code {
	padding: 0.15em 0.4em;
	font-size: 0.9em;
	background: var(--marine-50);
	border-radius: 4px;
}

/* ==========================================================================
   Vocabulaire de mouvement
   Inspire de cliniqueachifaaoujda.com, dont la signature tient a une courbe
   d'entree franche puis longuement freinee, et a des durees d'entree d'environ
   1,2 s — inhabituellement lentes, et c'est ce qui donne l'impression de calme.
   ========================================================================== */

@keyframes sema-monte {
	from { opacity: 0; transform: translate3d(0, 26px, 0); }
	to   { opacity: 1; transform: none; }
}

@keyframes sema-trait {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* Ken Burns : derive tres lente d'une photographie de fond. */
@keyframes sema-derive {
	from { transform: scale(1) translate3d(0, 0, 0); }
	to   { transform: scale(1.12) translate3d(-1.5%, -1.5%, 0); }
}

@keyframes sema-defile {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes sema-lueur {
	from { transform: translateX(-120%) skewX(-18deg); }
	to   { transform: translateX(220%) skewX(-18deg); }
}

@keyframes sema-descente {
	0%, 100% { transform: translateY(0); opacity: 0.5; }
	50%      { transform: translateY(8px); opacity: 1; }
}

/*
 * Entrée orchestrée du premier écran. Chaque élément part avec son propre
 * retard : l'œil suit l'ordre de lecture au lieu de recevoir toute la page
 * d'un bloc. Les retards sont portés par --pas, réglé dans le gabarit.
 */
.js .entree {
	animation: sema-monte var(--duree-entree) var(--courbe-entree) var(--pas, 0ms) both;
}

@media (prefers-reduced-motion: reduce) {
	.js .entree,
	.hero__figure img,
	.croyances__fond img,
	.bandeau__piste {
		animation: none !important;
	}
}