/* ==========================================================================
   Bien-être Mental · base.css (chargé partout)
   Tokens « Bleu apaisant », polices locales, typographie, header, méga-menu,
   menu mobile, pied de page, composants communs.
   Mobile d'abord. Points de rupture : 768 px (tablette), 1024 px (header desktop), 1280 px (marges 80 px).
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Polices (hébergées dans le thème, font-display: swap)
   ---------------------------------------------------------------------- */
/* Repli des titres aux métriques de Caprasimo (police système, aucune requête) : le titre garde son nombre de lignes
   quand Caprasimo arrive, la page ne bouge plus (CLS 0,03 → 0,002 mesuré). */
@font-face {
	font-family: "Caprasimo Fallback";
	src: local("Arial"), local("Roboto");
	size-adjust: 112.4%;
	ascent-override: 81.7%;
	descent-override: 20.4%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Caprasimo";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/Caprasimo-400-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Caprasimo";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/Caprasimo-400-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/Figtree-var-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/Figtree-var-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -------------------------------------------------------------------------
   2. Tokens (design system Organic + thème « Bleu apaisant »)
   ---------------------------------------------------------------------- */
:root {
	--color-bg: #f8fafd;
	--color-surface: #eaf1fa;
	--color-text: #182232;
	--color-accent: #457ac8;
	--color-accent-2: #418887;
	--color-divider: rgba(24, 34, 50, 0.16);

	--color-neutral-100: #f3f5f8;
	--color-neutral-200: #e5e8ed;
	--color-neutral-300: #cfd5dc;
	--color-neutral-400: #b1b8c1;
	--color-neutral-500: #9299a2;
	--color-neutral-600: #747b83;
	--color-neutral-700: #595e65;
	--color-neutral-800: #3e4348;
	--color-neutral-900: #26292d;

	--color-accent-100: #eff6ff;
	--color-accent-200: #dbe9fe;
	--color-accent-300: #bbd6ff;
	--color-accent-400: #8ab9fe;
	--color-accent-500: #5f99ed;
	--color-accent-600: #457ac8;
	--color-accent-700: #2f5d9f;
	--color-accent-800: #1e4275;
	--color-accent-900: #11284b;

	--color-accent-2-100: #e8f9f9;
	--color-accent-2-200: #cfefef;
	--color-accent-2-300: #ade0df;
	--color-accent-2-400: #83c5c5;
	--color-accent-2-500: #5ca7a7;
	--color-accent-2-600: #418887;
	--color-accent-2-700: #2a6969;
	--color-accent-2-800: #194b4b;
	--color-accent-2-900: #0e2f2f;

	--font-heading: "Caprasimo", "Caprasimo Fallback", system-ui, sans-serif;
	--font-heading-weight: 400;
	--font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--space-1: 4.4px;
	--space-2: 8.8px;
	--space-3: 13.2px;
	--space-4: 17.6px;
	--space-6: 26.4px;
	--space-8: 35.2px;

	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 28px;
	--radius-pill: 999px;

	--shadow-sm: 0 1px 2px rgba(46, 43, 37, 0.14);
	--shadow-md: 0 3px 10px rgba(46, 43, 37, 0.16);
	--shadow-lg: 0 12px 32px rgba(46, 43, 37, 0.22);

	--scrim: rgba(38, 41, 45, 0.45);
	--focus: var(--color-accent-700);

	--gutter: 20px;
	--wrap: 1440px;
	--header-offset: 72px;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	:root {
		--color-divider: color-mix(in srgb, #182232 16%, transparent);
	}
}

@media (min-width: 768px) {
	:root {
		--gutter: 32px;
	}
}

@media (min-width: 1024px) {
	:root {
		--gutter: 40px;
		--header-offset: 96px;
	}
}

@media (min-width: 1280px) {
	:root {
		--gutter: 80px;
	}
}

/* -------------------------------------------------------------------------
   3. Base
   ---------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: var(--header-offset);
	scrollbar-gutter: stable;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

html.bem-lock {
	overflow: hidden;
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	line-height: 1.12;
	letter-spacing: -0.01em;
}

h1 {
	font-size: 32px;
	line-height: 1.08;
	text-wrap: balance;
}

h2 {
	font-size: 25px;
	text-wrap: balance;
}

h3 {
	font-size: 20px;
	line-height: 1.2;
}

h4 {
	font-size: 18px;
	line-height: 1.25;
}

h5,
h6 {
	font-size: 16px;
	line-height: 1.3;
}

@media (min-width: 1024px) {
	h1 {
		font-size: 52px;
		line-height: 1.05;
		letter-spacing: -0.015em;
	}

	h2 {
		font-size: 36px;
		line-height: 1.1;
	}

	h3 {
		font-size: 24px;
	}
}

p {
	margin: 0 0 var(--space-3);
}

a {
	color: var(--color-accent-700);
	text-underline-offset: 3px;
}

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

img,
svg,
video {
	max-width: 100%;
}

img {
	display: block;
	height: auto;
}

figure {
	margin: 0;
}

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

button {
	cursor: pointer;
}

input[type="search"] {
	-webkit-appearance: none;
	appearance: none;
}

input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

::selection {
	background: rgba(69, 122, 200, 0.3);
}

:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

[hidden]:not([hidden="until-found"]) {
	display: none !important;
}

/* Quiz Alpine (Wisewand) : rien ne s'affiche avant l'initialisation. */
[x-cloak] {
	display: none !important;
}

.bem-main {
	display: block;
}

.bem-main:focus {
	outline: none;
}

.bem-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Texte réservé aux lecteurs d'écran (classe WordPress standard). */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	z-index: 100000;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	padding: 12px 18px;
	clip: auto;
	clip-path: none;
	border-radius: var(--radius-pill);
	background: var(--color-bg);
	color: var(--color-text);
	box-shadow: var(--shadow-lg);
	font-size: 15px;
	font-weight: 700;
}

.bem-skip {
	position: absolute;
	z-index: 1000;
	top: -80px;
	left: 12px;
	padding: 12px 18px;
	border-radius: var(--radius-pill);
	background: var(--color-accent-700);
	color: var(--color-accent-100);
	font-weight: 700;
	text-decoration: none;
}

.bem-skip:focus {
	top: 12px;
	color: var(--color-accent-100);
}

/* -------------------------------------------------------------------------
   4. Typographie utilitaire
   ---------------------------------------------------------------------- */
.bem-eyebrow {
	margin: 0;
	color: var(--color-accent-700);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.55;
	text-transform: uppercase;
}

.bem-eyebrow--neutral {
	color: var(--color-neutral-700);
}

.bem-lead {
	margin: 0;
	color: var(--color-neutral-800);
	font-size: 16.5px;
	line-height: 1.55;
}

.bem-meta {
	margin: 0;
	color: var(--color-neutral-700);
	font-size: 13px;
}

@media (min-width: 1024px) {
	.bem-lead {
		font-size: 19px;
	}

	.bem-meta {
		font-size: 14px;
	}
}

.bem-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
}

.bem-link-arrow .bem-icon {
	flex: none;
}

/* -------------------------------------------------------------------------
   5. Icônes, boutons, étiquettes, pastilles
   ---------------------------------------------------------------------- */
.bem-icon {
	display: block;
	flex: none;
}

.bem-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 12px 20px;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.55;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.bem-btn:hover {
	color: var(--color-text);
}

.bem-btn:disabled,
.bem-btn[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
}

.bem-btn--primary,
.bem-btn--primary:hover {
	color: var(--color-accent-100);
}

.bem-btn--primary {
	background: var(--color-accent-700);
}

.bem-btn--primary:hover {
	background: var(--color-accent-800);
}

.bem-btn--secondary {
	box-shadow: inset 0 0 0 1.5px var(--color-neutral-400);
}

.bem-btn--secondary:hover {
	background: var(--color-neutral-100);
}

.bem-btn--teal,
.bem-btn--teal:hover {
	color: var(--color-accent-2-100);
}

.bem-btn--teal {
	background: var(--color-accent-2-700);
}

.bem-btn--teal:hover {
	background: var(--color-accent-2-800);
}

.bem-btn--dark,
.bem-btn--dark:hover {
	color: var(--color-bg);
}

.bem-btn--dark {
	background: var(--color-text);
}

.bem-btn--dark:hover {
	background: var(--color-neutral-900);
}

.bem-btn--display {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
}

.bem-btn--lg {
	padding: 16px 18px;
	line-height: 1.2;
	font-size: 16px;
	gap: 10px;
}

.bem-btn--block {
	display: flex;
	width: 100%;
}

.bem-btn--shadow {
	box-shadow: var(--shadow-lg);
}

.bem-icon-btn {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-text);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.bem-icon-btn:hover {
	background: rgba(69, 122, 200, 0.1);
	color: var(--color-text);
}

.bem-icon-btn:active {
	background: rgba(69, 122, 200, 0.18);
}

.bem-tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.55;
	text-decoration: none;
}

.bem-tag--accent {
	background: var(--color-accent-100);
	color: var(--color-accent-800);
}

.bem-tag--accent-2 {
	background: var(--color-accent-2-100);
	color: var(--color-accent-2-800);
}

.bem-tag--neutral {
	background: var(--color-neutral-100);
	color: var(--color-neutral-800);
}

a.bem-tag:hover {
	text-decoration: underline;
}

.bem-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.bem-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bem-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.55;
	text-decoration: none;
	white-space: nowrap;
}

.bem-chip:hover {
	background: var(--color-neutral-300);
	color: var(--color-text);
}

.bem-chip--teal {
	background: var(--color-accent-2-200);
	color: var(--color-accent-2-900);
}

.bem-chip--teal:hover {
	background: var(--color-accent-2-300);
	color: var(--color-accent-2-900);
}

.bem-chip--accent {
	background: var(--color-accent-200);
	color: var(--color-accent-900);
}

.bem-chip--accent:hover {
	background: var(--color-accent-300);
	color: var(--color-accent-900);
}

/* -------------------------------------------------------------------------
   6. Champ de recherche en pilule
   ---------------------------------------------------------------------- */
.bem-search-pill {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 52px;
	margin: 0;
	padding: 0 18px;
	border-radius: var(--radius-pill);
	background: var(--color-neutral-100);
	color: var(--color-neutral-700);
}

.bem-search-pill:focus-within {
	box-shadow: 0 0 0 2px var(--focus);
}

.bem-search-pill input {
	flex: 1;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
	background: transparent;
	color: var(--color-text);
	font-size: 16px;
}

.bem-search-pill input::placeholder {
	color: var(--color-neutral-700);
	opacity: 1;
}

.bem-search-pill--md {
	height: 50px;
}

.bem-search-pill--shadow {
	box-shadow: var(--shadow-md);
}

.bem-search-pill--shadow:focus-within {
	box-shadow: var(--shadow-md), 0 0 0 2px var(--focus);
}

/* -------------------------------------------------------------------------
   7. Bandeau 3114
   ---------------------------------------------------------------------- */
.bem-urgence {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px var(--gutter);
	background: var(--color-accent-2-200);
	color: var(--color-accent-2-900);
	font-size: 13px;
	line-height: 1.35;
}

.bem-urgence__text {
	margin: 0;
}

.bem-urgence a {
	color: var(--color-accent-2-900);
}

.bem-urgence a:focus-visible {
	outline-color: var(--color-accent-2-900);
}

.bem-urgence__tel {
	text-decoration: none;
}

.bem-urgence__tel:hover {
	text-decoration: underline;
}

.bem-urgence__more {
	display: none;
	font-weight: 700;
}

/* Mobile, /aide/ publiée : la phrase entière est un seul lien vers /aide/ (maquette 1C) ;
   la version avec tel:3114 et « Tous les numéros d'aide » est réservée aux écrans ≥ 768 px (Desktop 1a). */
.bem-urgence .bem-urgence__link {
	color: inherit;
	text-decoration: none;
}

.bem-urgence .bem-urgence__link:hover {
	text-decoration: underline;
}

.bem-urgence__text--d {
	display: none;
}

@media (min-width: 768px) {
	.bem-urgence {
		justify-content: center;
		font-size: 13.5px;
		line-height: 1.55;
	}

	.bem-urgence__text--m {
		display: none;
	}

	.bem-urgence__text--d {
		display: block;
	}

	.bem-urgence__more {
		display: inline;
	}
}

/* -------------------------------------------------------------------------
   8. Header collant
   ---------------------------------------------------------------------- */
.bem-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--color-bg);
}

.admin-bar .bem-header {
	top: 46px;
}

@media (min-width: 783px) {
	.admin-bar .bem-header {
		top: 32px;
	}
}

@media (max-width: 600px) {
	.admin-bar .bem-header {
		top: 0;
	}
}

.bem-header__bar {
	display: flex;
	align-items: center;
	gap: 2px;
	max-width: var(--wrap);
	min-height: 60px;
	margin-inline: auto;
	padding: 8px 8px 8px var(--gutter);
}

.bem-logo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin-right: auto;
	color: var(--color-text);
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: var(--font-heading-weight);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.bem-logo:hover {
	color: var(--color-text);
}

.bem-logo__dot {
	flex: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--color-accent);
}

/* Éléments desktop masqués en mobile. */
.bem-nav,
.bem-header__search,
.bem-header__start {
	display: none;
}

@media (min-width: 1024px) {
	.bem-header {
		box-shadow: 0 1px 0 var(--color-neutral-200);
	}

	.bem-header__bar {
		gap: 28px;
		min-height: 0;
		padding: 16px var(--gutter);
	}

	.bem-logo {
		gap: 9px;
		margin-right: 0;
		font-size: 23px;
	}

	.bem-logo__dot {
		width: 16px;
		height: 16px;
	}

	.bem-nav {
		display: block;
	}

	.bem-header .bem-header__search {
		display: flex;
		flex: 1;
		min-width: 140px;
		max-width: 360px;
		height: 44px;
		margin-left: auto;
		padding: 0 16px;
		font-size: 15px;
	}

	.bem-header .bem-header__search input {
		font-size: 15px;
	}

	.bem-header__start {
		display: inline-flex;
		flex: none;
	}

	.bem-header__search-btn,
	.bem-header__menu-btn {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   9. Navigation desktop et méga-menu (cf. Desktop 2a)
   ---------------------------------------------------------------------- */
.bem-nav__list {
	display: flex;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bem-nav__trigger {
	display: flex;
	align-items: center;
	gap: 5px;
	min-height: 44px;
	padding: 10px 12px;
	border: 0;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-text);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.55;
	cursor: pointer;
}

.bem-nav__trigger:hover,
.bem-nav__trigger[aria-expanded="true"] {
	background: var(--color-neutral-100);
}

.bem-nav__chevron {
	transition: transform 0.2s ease;
}

.bem-nav__trigger[aria-expanded="true"] .bem-nav__chevron {
	transform: rotate(180deg);
}

/* Le panneau est positionné par rapport au header (élément sticky). */
.bem-mega {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	display: none;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	background: var(--color-bg);
	box-shadow: var(--shadow-lg);
}

.bem-mega.is-open {
	display: block;
	animation: bem-fade-in 0.15s ease-out;
}

/* Sans JavaScript : ouverture au survol et au clavier. */
.no-js .bem-nav:hover .bem-mega,
.no-js .bem-nav:focus-within .bem-mega {
	display: block;
}

.bem-mega__inner {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
	gap: 40px;
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 32px var(--gutter) 40px;
}

.bem-mega__inner--no-sujets {
	grid-template-columns: 1fr 1fr 1.1fr;
}

.bem-mega__title {
	margin: 0;
	color: var(--color-neutral-700);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.55;
	text-transform: uppercase;
}

.bem-mega__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.bem-mega__list--grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 12px;
}

.bem-mega__link {
	display: block;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	color: var(--color-text);
	text-decoration: none;
}

.bem-mega__link:hover,
.bem-mega__link[aria-current="page"] {
	background: var(--color-neutral-100);
	color: var(--color-text);
}

.bem-mega__label {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.55;
}

.bem-mega__desc {
	display: block;
	color: var(--color-neutral-700);
	font-size: 13.5px;
	line-height: 1.55;
}

.bem-mega__aside {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bem-mega__start {
	display: block;
	width: 100%;
	padding: 20px;
	border: 0;
	border-radius: var(--radius-lg);
	background: var(--color-accent-200);
	color: var(--color-accent-900);
	text-align: left;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.bem-mega__start:hover {
	background: var(--color-accent-300);
}

.bem-mega__start-title {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.55;
}

.bem-mega__start-desc {
	display: block;
	margin-top: 3px;
	font-size: 14px;
	line-height: 1.55;
}

.bem-mega__az {
	display: block;
	padding: 16px 20px;
	border-radius: var(--radius-lg);
	background: var(--color-neutral-100);
	color: var(--color-text);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.bem-mega__az:hover {
	background: var(--color-neutral-200);
	color: var(--color-text);
}

.bem-mega__help {
	margin: 4px 0 0;
	color: var(--color-neutral-800);
	font-size: 13.5px;
	line-height: 1.45;
}

.bem-mega__help a {
	color: inherit;
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   10. Menu mobile plein écran (cf. Gabarits 4a)
   ---------------------------------------------------------------------- */
.bem-menu {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: var(--color-bg);
	color: var(--color-text);
}

.bem-menu[open] {
	display: flex;
	flex-direction: column;
	animation: bem-fade-in 0.18s ease-out;
}

.bem-menu::backdrop {
	background: transparent;
}

.bem-menu__head {
	display: flex;
	flex: none;
	align-items: center;
	gap: 2px;
	min-height: 60px;
	padding: 8px 8px 8px 20px;
}

.bem-menu__body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 4px 20px 20px;
}

.bem-menu__start {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin-top: 10px;
	padding: 16px 18px;
	border: 0;
	border-radius: var(--radius-md);
	background: var(--color-accent-200);
	color: var(--color-accent-900);
	text-align: left;
	cursor: pointer;
}

.bem-menu__start:hover {
	background: var(--color-accent-300);
}

.bem-menu__start-text {
	flex: 1;
	min-width: 0;
}

.bem-menu__start-title {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.55;
}

.bem-menu__start-desc {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	line-height: 1.55;
}

.bem-menu__nav {
	margin-top: 14px;
}

.bem-menu__section {
	box-shadow: 0 1px 0 var(--color-neutral-300);
}

.bem-menu__toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 18px 0;
	border: 0;
	background: transparent;
	color: var(--color-text);
	text-align: left;
	cursor: pointer;
}

.bem-menu__label {
	flex: 1;
	font-family: var(--font-heading);
	font-size: 22px;
	line-height: 1.1;
}

.bem-menu__count {
	color: var(--color-neutral-700);
	font-size: 13px;
}

.bem-menu__chevron {
	transition: transform 0.2s ease;
}

.bem-menu__toggle[aria-expanded="true"] .bem-menu__chevron {
	transform: rotate(180deg);
}

.bem-menu__panel {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0 0 14px;
	list-style: none;
}

.bem-menu__link {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 11px 12px;
	border-radius: var(--radius-sm);
	color: var(--color-text);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.55;
	text-decoration: none;
}

.bem-menu__link:hover,
.bem-menu__link[aria-current="page"] {
	background: var(--color-neutral-100);
	color: var(--color-text);
}

.bem-menu__link > span {
	flex: 1;
}

.bem-menu__more {
	display: flex;
	flex-direction: column;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.bem-menu__more a {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var(--color-neutral-800);
	font-size: 15px;
	text-decoration: none;
}

.bem-menu__more a:hover {
	color: var(--color-text);
	text-decoration: underline;
}

.bem-menu__help {
	flex: none;
	padding: 14px 20px calc(18px + env(safe-area-inset-bottom, 0px));
	background: var(--color-accent-2-200);
	color: var(--color-accent-2-900);
}

.bem-menu__help p {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
}

.bem-menu__call {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	margin-top: 10px;
	padding: 13px;
	border-radius: var(--radius-pill);
	background: var(--color-accent-700);
	color: var(--color-accent-100);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.bem-menu__call:hover {
	background: var(--color-accent-800);
	color: var(--color-accent-100);
}

@media (min-width: 1024px) {
	.bem-menu {
		display: none !important;
	}
}

/* -------------------------------------------------------------------------
   11. Pied de page
   ---------------------------------------------------------------------- */
.bem-footer {
	padding: 32px 0 40px;
	background: var(--color-neutral-900);
	color: var(--color-neutral-200);
}

/* Place pour le CTA collant mobile. */
body:has(.bem-sticky-cta) .bem-footer {
	padding-bottom: 100px;
}

.bem-footer__inner {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.bem-footer a {
	color: var(--color-neutral-200);
	text-decoration: none;
}

.bem-footer a:hover {
	color: var(--color-accent-300);
}

.bem-footer a:focus-visible {
	outline-color: var(--color-accent-300);
}

.bem-footer__name {
	margin: 0;
	color: var(--color-neutral-100);
	font-family: var(--font-heading);
	font-size: 22px;
	line-height: 1.1;
}

.bem-footer__disclaimer {
	margin: 8px 0 0;
	color: var(--color-neutral-300);
	font-size: 14px;
	line-height: 1.5;
}

.bem-footer__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px 16px;
	margin-top: 24px;
	font-size: 14px;
}

.bem-footer__title {
	margin: 0 0 9px; /* maquette : gap 7 px de la colonne + 2 px de marge */
	color: var(--color-neutral-400);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.55;
	text-transform: uppercase;
}

.bem-footer__links {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bem-footer__urgence {
	margin: 24px 0 0;
	color: var(--color-neutral-300);
	font-size: 13px;
}

/* 1.0.2 (CRIT-03) : les numéros d'urgence se distinguaient du texte par la seule couleur (contraste 1,2:1) ;
   soulignés et en gras (audit Lighthouse link-in-text-block). */
.bem-footer__urgence a {
	color: var(--color-neutral-200);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* Cibles tactiles ≥ 44 px sur écran tactile (les liens de 44 px créent déjà l'espace sous le titre). */
@media (pointer: coarse) {
	.bem-footer__title {
		margin-bottom: 2px;
	}

	.bem-footer__links {
		gap: 0;
	}

	.bem-footer__links a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}
}

@media (min-width: 1024px) {
	.bem-footer {
		padding: 56px 0 48px;
	}

	body:has(.bem-sticky-cta) .bem-footer {
		padding-bottom: 48px;
	}

	/* Grille de la maquette : 1.6fr + 4 × 1fr ; la nav occupe les 4 dernières pistes. */
	.bem-footer__grid {
		display: grid;
		grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
		gap: 40px;
	}

	.bem-footer__grid > .bem-footer__nav {
		grid-column: 2 / -1;
	}

	.bem-footer__name {
		font-size: 26px;
	}

	.bem-footer__disclaimer {
		max-width: 320px;
		margin-top: 12px;
		font-size: 14.5px;
		line-height: 1.55;
	}

	.bem-footer__nav {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 40px;
		margin-top: 0;
		font-size: 15px;
	}

	.bem-footer__title {
		margin-bottom: 13px; /* maquette : gap 9 px de la colonne + 4 px de marge */
	}

	.bem-footer__links {
		gap: 9px;
	}

	.bem-footer__urgence {
		margin-top: 40px;
		padding-top: 20px;
		box-shadow: 0 -1px 0 var(--color-neutral-800);
		font-size: 13.5px;
	}
}

@media (min-width: 1024px) and (pointer: coarse) {
	.bem-footer__title {
		margin-bottom: 4px;
	}
}

/* -------------------------------------------------------------------------
   12. Fil d'Ariane
   ---------------------------------------------------------------------- */
.bem-breadcrumb {
	color: var(--color-neutral-700);
	font-size: 13px;
	line-height: 1.55;
}

.bem-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bem-breadcrumb li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.bem-breadcrumb a {
	color: var(--color-neutral-700);
	text-decoration: none;
}

.bem-breadcrumb a:hover {
	color: var(--color-text);
	text-decoration: underline;
}

.bem-breadcrumb [aria-current="page"] {
	color: var(--color-neutral-800);
}

@media (pointer: coarse) {
	.bem-breadcrumb a {
		display: inline-block;
		margin-block: -12px;
		padding-block: 12px;
	}
}

@media (min-width: 1024px) {
	.bem-breadcrumb {
		font-size: 14px;
	}

	.bem-breadcrumb ol,
	.bem-breadcrumb li {
		gap: 8px;
	}
}

/* -------------------------------------------------------------------------
   13. Cartes article
   ---------------------------------------------------------------------- */
.bem-card-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bem-card {
	position: relative;
	display: flex;
	gap: 14px;
	align-items: flex-start;
	border-radius: var(--radius-md);
}

.bem-card--boxed {
	padding: 12px;
	background: var(--color-neutral-100);
	transition: background-color 0.15s ease;
}

.bem-card--boxed:hover {
	background: var(--color-neutral-200);
}

.bem-card__media {
	position: relative;
	flex: none;
	width: 76px;
	height: 76px;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--color-surface);
}

.bem-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Visuel absent : cercle décoratif de la maquette. */
.bem-card__media.is-empty::after {
	content: "";
	position: absolute;
	bottom: -18px;
	left: -14px;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: var(--color-accent-300);
}

.bem-card__media--dot-1.is-empty::after {
	background: var(--color-accent-2-300);
}

.bem-card__media--dot-2.is-empty::after {
	background: var(--color-neutral-300);
}

.bem-card--media-md .bem-card__media {
	width: 88px;
	height: 88px;
	border-radius: var(--radius-md);
}

.bem-card--media-md .bem-card__media.is-empty::after {
	bottom: -20px;
	left: -16px;
	width: 72px;
	height: 72px;
}

.bem-card__body {
	flex: 1;
	min-width: 0;
}

.bem-card__title {
	margin: 6px 0 0;
	font-family: var(--font-body);
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
	text-wrap: pretty;
}

.bem-card__body > .bem-card__title:first-child {
	margin-top: 0;
}

.bem-card--media-md .bem-card__title {
	font-size: 16px;
}

.bem-card__link {
	color: var(--color-text);
	text-decoration: none;
}

.bem-card__link:hover {
	color: var(--color-text);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
}

/* Le lien du titre couvre toute la carte. */
.bem-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--radius-md);
}

.bem-card__link:focus-visible {
	outline: none;
}

.bem-card__link:focus-visible::after {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.bem-card__excerpt {
	margin: 4px 0 0;
	color: var(--color-neutral-800);
	font-size: 13.5px;
	line-height: 1.45;
}

.bem-card__date {
	margin: 4px 0 0;
	color: var(--color-neutral-700);
	font-size: 12px;
}

.bem-card--media-md .bem-card__date {
	font-size: 13px;
}

/* Carte empilée : visuel 16:9 au-dessus (Pour aller plus loin, desktop). */
.bem-card--stack {
	flex-direction: column;
	gap: 0;
}

.bem-card--stack .bem-card__media {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-md);
}

.bem-card--stack .bem-card__media.is-empty::after {
	bottom: -60px;
	left: -30px;
	width: 190px;
	height: 190px;
}

.bem-card--stack .bem-card__body {
	width: 100%;
	padding-top: 14px;
}

.bem-card--stack .bem-card__title {
	margin-top: 10px;
	font-size: 17px;
	line-height: 1.35;
}

@media (min-width: 1024px) {
	.bem-card--boxed {
		gap: 16px;
		padding: 16px;
	}

	.bem-card--boxed .bem-card__media {
		width: 96px;
		height: 96px;
	}

	.bem-card--boxed .bem-card__media.is-empty::after {
		bottom: -24px;
		left: -16px;
		width: 80px;
		height: 80px;
	}

	.bem-card--boxed .bem-card__title {
		margin-top: 8px;
		font-size: 16.5px;
	}

	.bem-card--boxed .bem-card__excerpt {
		margin-top: 6px;
		font-size: 14px;
	}

	.bem-card--boxed .bem-card__date {
		margin-top: 6px;
		font-size: 12.5px;
	}
}

/* -------------------------------------------------------------------------
   14. FAQ accordéon (un élément ouvert, icônes plus / moins)
   ---------------------------------------------------------------------- */
.bem-faq {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bem-faq__item {
	border-radius: var(--radius-md);
	background: var(--color-surface);
}

.bem-faq--neutral .bem-faq__item {
	background: var(--color-neutral-100);
}

.bem-faq__q {
	margin: 0;
	font-family: var(--font-body);
	font-size: inherit;
	font-weight: 700;
	letter-spacing: 0;
	line-height: inherit;
}

.bem-faq__btn {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 44px;
	padding: 15px 16px;
	border: 0;
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--color-text);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
}

.bem-faq__label {
	flex: 1;
}

.bem-faq__minus,
.bem-faq__btn[aria-expanded="true"] .bem-faq__plus {
	display: none;
}

.bem-faq__btn[aria-expanded="true"] .bem-faq__minus {
	display: block;
}

.bem-faq__a {
	padding: 0 16px 16px;
	color: var(--color-neutral-800);
	font-size: 15px;
	line-height: 1.5;
}

.bem-faq__a > :first-child {
	margin-top: 0;
}

.bem-faq__a > :last-child {
	margin-bottom: 0;
}

.bem-faq__a p,
.bem-faq__a ul,
.bem-faq__a ol {
	margin: 0 0 8px;
}

.bem-faq__a ul,
.bem-faq__a ol {
	padding-left: 1.2em;
}

@media (min-width: 1024px) {
	.bem-faq__btn {
		gap: 14px;
		padding: 18px 22px;
		font-size: 17px;
		line-height: 1.55; /* maquette desktop : interligne hérité (font: inherit) */
	}

	.bem-faq__a {
		padding: 0 22px 20px;
		font-size: 16px;
		line-height: 1.6;
	}
}

/* 1.0.2 (VR-02) : une réponse fermée (hidden="until-found", que Chrome masque par content-visibility sans retirer la
   boîte) gardait sa marge interne basse : 16 px (mobile) ou 20 px (desktop) de vide sous la question. Ouverte, ou
   révélée par la recherche du navigateur (l'attribut hidden est alors retiré), elle retrouve sa marge. L'impression
   n'est pas concernée (réponses affichées en entier). */
@media screen {
	.bem-faq__a[hidden] {
		padding-bottom: 0;
	}
}

/* -------------------------------------------------------------------------
   15. Bloc « Quand consulter ? »
   ---------------------------------------------------------------------- */
.bem-qc {
	position: relative;
	overflow: hidden;
	padding: 20px;
	border-radius: var(--radius-lg);
	background: var(--color-accent-2-200);
	color: var(--color-accent-2-900);
}

.bem-qc > :not(.bem-qc__decor) {
	position: relative;
}

.bem-qc__decor {
	position: absolute;
	right: -50px;
	bottom: -60px;
	width: 170px;
	height: 170px;
	border-radius: 50%;
	background: var(--color-accent-2-300);
	pointer-events: none;
}

.bem-qc__title {
	margin: 0;
	color: inherit;
	font-family: var(--font-heading);
	font-size: 23px;
	font-weight: var(--font-heading-weight);
	letter-spacing: -0.01em;
	line-height: 1.12;
}

.bem-qc__text p {
	margin: 8px 0 0;
	font-size: 15.5px;
	line-height: 1.5;
}

.bem-qc__text p:first-child {
	margin-top: 10px;
}

.bem-qc a {
	color: var(--color-accent-2-900);
}

.bem-qc a:focus-visible {
	outline-color: var(--color-accent-2-900);
}

.bem-qc__tel {
	text-decoration: none;
}

.bem-qc__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	font-size: 15px;
	font-weight: 700;
}

.bem-qc--aside {
	padding: 24px;
}

.bem-qc--aside .bem-qc__title {
	font-size: 24px;
}

.bem-qc--aside .bem-qc__text p {
	font-size: 15px;
}

.bem-qc--aside .bem-qc__link {
	font-size: 14.5px;
}

/* Variante courte dans le corps d'un article. */
.bem-qc--inline {
	display: flex;
	gap: 12px;
	padding: 16px;
	border-radius: var(--radius-md);
	font-size: 15px;
	line-height: 1.5;
}

.bem-qc--inline .bem-qc__icon {
	margin-top: 1px;
}

.bem-qc--inline .bem-qc__text p,
.bem-qc--inline .bem-qc__text p:first-child {
	margin: 0;
	font-size: inherit;
}

.bem-qc--inline .bem-qc__text p + p {
	margin-top: 6px;
}

.bem-qc--inline strong {
	font-weight: 700;
}

@media (min-width: 1024px) {
	.bem-qc--inline {
		padding: 20px 22px;
		font-size: 16.5px;
		line-height: 1.55;
	}

	.bem-qc--inline .bem-qc__icon {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   16. Feuilles (dialogues) et CTA collant mobile
   ---------------------------------------------------------------------- */
.bem-sheet {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: var(--scrim);
	color: var(--color-text);
}

.bem-sheet[open] {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.bem-sheet::backdrop {
	background: transparent;
}

.bem-sheet__panel {
	max-height: 88vh;
	max-height: 88dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 20px 20px calc(26px + env(safe-area-inset-bottom, 0px));
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	background: var(--color-bg);
	box-shadow: var(--shadow-lg);
}

.bem-sheet[open] .bem-sheet__panel {
	animation: bem-sheet-up 0.22s ease-out;
}

.bem-sheet__head {
	display: flex;
	align-items: center;
	gap: 8px;
}

.bem-sheet__title {
	margin: 0 auto 0 0;
	font-family: var(--font-heading);
	font-size: 25px;
	font-weight: var(--font-heading-weight);
	line-height: 1.1;
}

.bem-sheet__head .bem-icon-btn {
	margin-right: -8px;
}

.bem-sheet__intro {
	margin: 4px 0 14px;
	color: var(--color-neutral-800);
	font-size: 15px;
}

.bem-sheet__sub {
	margin: 16px 0 8px;
	color: var(--color-neutral-700);
	font-size: 13px;
	font-weight: 700;
}

.bem-choices {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bem-choice {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 48px;
	padding: 13px 16px;
	border: 0;
	border-radius: var(--radius-md);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.55;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.bem-choice:hover {
	background: var(--color-neutral-200);
	color: var(--color-text);
}

.bem-choice > span {
	flex: 1;
}

@media (pointer: coarse) {
	.bem-chip {
		min-height: 44px;
	}
}

@media (min-width: 768px) {
	.bem-sheet[open] {
		align-items: center;
		justify-content: center;
		padding: 24px;
	}

	.bem-sheet__panel {
		width: min(480px, 100%);
		max-height: calc(100vh - 48px);
		padding: 24px;
		border-radius: var(--radius-lg);
	}

	.bem-sheet[open] .bem-sheet__panel {
		animation: bem-fade-in 0.18s ease-out;
	}
}

/* CTA collant mobile (« Par où commencer ? » sur home et hub, « Sommaire » sur l'article). */
.bem-sticky-cta {
	position: fixed;
	right: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	left: 16px;
	z-index: 40;
	display: flex;
	justify-content: center;
	pointer-events: none;
}

.bem-sticky-cta > * {
	pointer-events: auto;
}

@media (min-width: 1024px) {
	.bem-sticky-cta {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   17. Façade YouTube
   ---------------------------------------------------------------------- */
.bem-yt {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--color-neutral-900);
}

.bem-yt__btn {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
}

.bem-yt__btn:focus-visible {
	outline-offset: -4px;
	outline-color: #fff;
}

.bem-yt__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bem-yt__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 48px;
	border-radius: 14px;
	background: rgba(17, 40, 75, 0.88);
	transform: translate(-50%, -50%);
	transition: background-color 0.15s ease;
}

.bem-yt__play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 17px solid #fff;
	transform: translate(-38%, -50%);
}

.bem-yt__btn:hover .bem-yt__play {
	background: var(--color-accent-700);
}

.bem-yt__label {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 10px 14px;
	background: rgba(17, 40, 75, 0.82); /* accent-900 à 82 % : bandeau plein, pas de dégradé (design system) */
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	text-align: left;
}

.bem-yt iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* -------------------------------------------------------------------------
   18. Gabarit texte simple (page.php) et texte courant des pages
   ---------------------------------------------------------------------- */
.bem-page {
	padding-top: 14px;
	padding-bottom: 40px;
}

.bem-page__title {
	margin: 16px 0 0;
	font-size: 32px;
	line-height: 1.08;
}

.bem-page__intro {
	margin: 12px 0 0;
	color: var(--color-neutral-800);
	font-size: 16.5px;
	line-height: 1.55;
}

.bem-page__date {
	margin: 10px 0 0;
	color: var(--color-neutral-700);
	font-size: 13px;
}

.bem-page__body {
	max-width: 720px;
	margin-top: 24px;
}

.bem-index {
	padding-top: 14px;
	padding-bottom: 40px;
}

.bem-index .bem-card-list,
.bem-index__search,
.bem-index__single .bem-prose {
	margin-top: 24px;
}

.bem-index .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
}

.bem-index .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border-radius: var(--radius-pill);
	background: var(--color-neutral-100);
	color: var(--color-text);
	font-weight: 700;
	text-decoration: none;
}

.bem-index .page-numbers.current {
	background: var(--color-accent-700);
	color: var(--color-accent-100);
}

@media (min-width: 1024px) {
	.bem-page {
		display: grid;
		grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
		gap: 80px;
		align-items: start;
		padding-top: 40px;
		padding-bottom: 80px;
	}

	.bem-page__head {
		position: sticky;
		top: var(--header-offset);
	}

	.bem-page__title {
		margin-top: 20px;
		font-size: 48px;
		line-height: 1.04;
		letter-spacing: -0.015em;
	}

	.bem-page__intro {
		margin-top: 16px;
		font-size: 18px;
	}

	.bem-page__date {
		margin-top: 12px;
		font-size: 14px;
	}

	.bem-page__body {
		margin-top: 0;
		padding-top: 40px;
	}

	.bem-index {
		padding-top: 36px;
		padding-bottom: 80px;
	}
}

.bem-prose {
	font-size: 16.5px;
	line-height: 1.6;
}

.bem-prose > :first-child {
	margin-top: 0;
}

.bem-prose p,
.bem-prose ul,
.bem-prose ol,
.bem-prose blockquote,
.bem-prose figure,
.bem-prose table {
	margin: 12px 0 0;
}

.bem-prose h2 {
	margin: 32px 0 0;
	font-size: 24px;
	line-height: 1.15;
}

.bem-prose h3 {
	margin: 24px 0 0;
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
}

.bem-prose h4 {
	margin: 20px 0 0;
	font-family: var(--font-body);
	font-size: 16.5px;
	font-weight: 700;
	letter-spacing: 0;
}

.bem-prose ul,
.bem-prose ol {
	padding-left: 1.3em;
}

.bem-prose li + li {
	margin-top: 6px;
}

.bem-prose a {
	color: var(--color-accent-700);
	text-decoration: underline;
}

.bem-prose img {
	border-radius: var(--radius-md);
}

.bem-prose blockquote {
	padding: 16px 20px;
	border-radius: var(--radius-md);
	background: var(--color-neutral-100);
}

.bem-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.bem-prose th,
.bem-prose td {
	padding: 8px;
	border-bottom: 1px solid var(--color-divider);
	text-align: left;
	vertical-align: top;
}

.bem-prose hr {
	height: 1px;
	margin: 24px 0;
	border: 0;
	background: var(--color-divider);
}

@media (min-width: 1024px) {
	.bem-prose {
		font-size: 17px;
		line-height: 1.65;
	}

	.bem-prose h2 {
		margin-top: 40px;
		font-size: 28px;
	}
}

.bem-page-links {
	margin-top: 24px;
	font-weight: 700;
}

/* -------------------------------------------------------------------------
   19. Animations et préférences
   ---------------------------------------------------------------------- */
@keyframes bem-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes bem-sheet-up {
	from {
		transform: translateY(24px);
		opacity: 0;
	}

	to {
		transform: none;
		opacity: 1;
	}
}

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

@media print {
	.bem-urgence,
	.bem-header,
	.bem-menu,
	.bem-sheet,
	.bem-sticky-cta,
	.bem-footer__nav {
		display: none !important;
	}

	body {
		background: #fff;
	}
}