/*
Theme Name: Plateformes Mobilité Alter & Go
Theme URI: https://mobilite33.com/
Author: ALTER & GO
Description: Thème bloc des Plateformes Mobilité ALTER & GO (Libournais, Médoc, Bassin d'Arcachon – Val de l'Eyre), construit sur la charte graphique : vert et jaune, cercle, Plus Jakarta Sans chargée en local.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: plateformes-mobilite
*/

/* Jetons de la charte (tokens.css), reliés aux préréglages de theme.json. */
:root {
	--vert-900: var(--wp--preset--color--vert-900);
	--vert-800: var(--wp--preset--color--vert-800);
	--vert-700: var(--wp--preset--color--vert-700);
	--vert-500: var(--wp--preset--color--vert-500);
	--vert-100: var(--wp--preset--color--vert-100);
	--jaune-500: var(--wp--preset--color--jaune-500);
	--jaune-600: var(--wp--preset--color--jaune-600);
	--jaune-100: var(--wp--preset--color--jaune-100);
	--encre: var(--wp--preset--color--encre);
	--encre-douce: var(--wp--preset--color--encre-douce);
	--fond: var(--wp--preset--color--fond);
	--filet: var(--wp--preset--color--filet);
	--radius-sm: var(--wp--custom--radius--sm);
	--radius-md: var(--wp--custom--radius--md);
	--radius-lg: var(--wp--custom--radius--lg);
	--radius-pill: var(--wp--custom--radius--pill);
	--ombre-carte: var(--wp--preset--shadow--ombre-carte);
	--section: var(--wp--preset--spacing--section);
}

/* ---------- Base ---------- */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Pas d'espace blanc entre en-tête, contenu et pied de page. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Sections pleine largeur collées les unes aux autres (alternance blanc / vert-100). */
.is-layout-constrained > .alignfull.section,
.is-layout-flow > .alignfull.section {
	margin-block-start: 0;
	margin-block-end: 0;
}

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

.section--serree {
	padding-block: var(--wp--preset--spacing--space-12);
}

.section > :first-child {
	margin-block-start: 0;
}

/* Texte courant : jamais sous 17 px. */
p,
li,
dd,
td {
	font-size: max(1em, var(--wp--preset--font-size--corps));
}

.has-corps-petit-font-size,
p.has-corps-petit-font-size {
	font-size: var(--wp--preset--font-size--corps-petit);
	line-height: 24px;
}

h1, h2, h3, h4 {
	text-wrap: balance;
}

a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

a:hover {
	text-decoration-thickness: 2px;
}

img {
	height: auto;
	max-width: 100%;
}

/* ---------- Focus visible (contraste ≥ 3:1 sur chaque fond) ---------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.wp-element-button:focus-visible,
.wp-block-navigation-item__content:focus-visible {
	outline: 3px solid var(--vert-900);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--fond);
	border-radius: 4px;
}

.wp-element-button:focus-visible {
	border-radius: var(--radius-pill);
}

/* Sur vert foncé : anneau jaune (6,8:1). Sur vert-500 : anneau blanc (5,4:1). */
.has-vert-900-background-color :focus-visible,
.has-vert-800-background-color :focus-visible,
.has-vert-700-background-color :focus-visible {
	outline-color: var(--jaune-500);
	box-shadow: none;
}

.has-vert-500-background-color :focus-visible {
	outline-color: var(--fond);
	box-shadow: none;
}

.skip-link.screen-reader-text:focus {
	background: var(--fond);
	color: var(--vert-800);
	font-weight: 700;
	outline: 3px solid var(--vert-900);
}

/* ---------- Fonds sombres : texte et liens en blanc ---------- */

/* Spécificité réelle (pas de :where) : ces règles doivent l'emporter sur les couleurs globales de theme.json. */
.has-vert-500-background-color,
.has-vert-700-background-color,
.has-vert-800-background-color,
.has-vert-900-background-color {
	color: var(--fond);
}

.has-vert-500-background-color :is(h1, h2, h3, h4, h5, h6),
.has-vert-700-background-color :is(h1, h2, h3, h4, h5, h6),
.has-vert-800-background-color :is(h1, h2, h3, h4, h5, h6),
.has-vert-900-background-color :is(h1, h2, h3, h4, h5, h6),
.has-vert-500-background-color a:not(.wp-element-button),
.has-vert-700-background-color a:not(.wp-element-button),
.has-vert-800-background-color a:not(.wp-element-button),
.has-vert-900-background-color a:not(.wp-element-button) {
	color: var(--fond);
}

.has-vert-500-background-color a:not(.wp-element-button):hover,
.has-vert-700-background-color a:not(.wp-element-button):hover,
.has-vert-800-background-color a:not(.wp-element-button):hover,
.has-vert-900-background-color a:not(.wp-element-button):hover {
	color: var(--fond);
	text-decoration-thickness: 2px;
}

/* Sur fond vert, un bouton par défaut (vert) deviendrait invisible : on le passe en blanc. */
.has-vert-500-background-color .wp-block-button:not([class*="is-style-"]) .wp-block-button__link,
.has-vert-700-background-color .wp-block-button:not([class*="is-style-"]) .wp-block-button__link,
.has-vert-800-background-color .wp-block-button:not([class*="is-style-"]) .wp-block-button__link,
.has-vert-900-background-color .wp-block-button:not([class*="is-style-"]) .wp-block-button__link {
	background: var(--fond);
	color: var(--vert-800);
}

/* ---------- Boutons (maquette Bouton.html) ---------- */

.wp-block-button__link {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Accent jaune : « Prendre rendez-vous ». Survol en jaune-600 avec texte vert-900 (5,1:1),
   car vert-800 sur jaune-600 n'atteint que 4,1:1. */
.wp-block-button.is-style-accent .wp-block-button__link {
	background-color: var(--jaune-500);
	color: var(--vert-800);
}

.wp-block-button.is-style-accent .wp-block-button__link:hover {
	background-color: var(--jaune-600);
	color: var(--vert-900);
}

/* Secondaire : contour vert sur blanc. */
.wp-block-button.is-style-secondaire .wp-block-button__link {
	background-color: var(--fond);
	color: var(--vert-500);
	border-color: var(--vert-500);
}

.wp-block-button.is-style-secondaire .wp-block-button__link:hover {
	background-color: var(--vert-100);
	color: var(--vert-700);
	border-color: var(--vert-700);
}

/* Contour blanc : bouton secondaire posé sur un fond vert (bandeau). */
.wp-block-button.is-style-contour-blanc .wp-block-button__link {
	background-color: transparent;
	color: var(--fond);
	border-color: var(--fond);
}

.wp-block-button.is-style-contour-blanc .wp-block-button__link:hover {
	background-color: var(--fond);
	color: var(--vert-800);
}

/* ---------- Surtitre, route, trait ---------- */

.is-style-surtitre {
	font-size: var(--wp--preset--font-size--surtitre) !important;
	line-height: 20px;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--vert-500);
	margin-block-end: 0;
}

.has-vert-500-background-color .is-style-surtitre,
.has-vert-700-background-color .is-style-surtitre,
.has-vert-800-background-color .is-style-surtitre,
.has-vert-900-background-color .is-style-surtitre {
	color: var(--fond);
}

.is-style-surtitre + :where(h1, h2, h3) {
	margin-block-start: var(--wp--preset--spacing--space-2);
}

/* Motif « route » : pointillé jaune sous un titre. */
.wp-block-separator.is-style-route {
	width: 200px;
	max-width: 100%;
	height: 6px;
	border: 0;
	border-radius: 3px;
	background: repeating-linear-gradient(90deg, var(--jaune-500) 0 18px, transparent 18px 30px) !important;
	opacity: 1;
	margin-inline-start: 0;
	margin-inline-end: auto;
}

.wp-block-separator.is-style-route.has-text-align-center,
.has-text-align-center + .wp-block-separator.is-style-route {
	margin-inline: auto;
}

/* Petit trait jaune des cartes. */
.wp-block-separator.is-style-trait {
	width: 48px;
	height: 4px;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--jaune-500) !important;
	opacity: 1;
	margin-inline-start: 0;
	margin-inline-end: auto;
}

/* ---------- Pastille (logo) ---------- */

.wp-block-image.is-style-pastille img {
	border-radius: 50%;
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--fond);
}

/* Sur fond vert, la pastille garde un disque blanc autour d'elle (marge libre). */
.wp-block-image.is-style-pastille-sur-fond img {
	border-radius: 50%;
	aspect-ratio: 1;
	object-fit: contain;
	background: var(--fond);
	padding: 8%;
	box-sizing: border-box;
}

/* ---------- En-tête ---------- */

.en-tete {
	border-top: 6px solid var(--vert-500);
	border-bottom: 1px solid var(--filet);
	padding-block: var(--wp--preset--spacing--space-4);
}

.en-tete .wp-block-image {
	margin: 0;
	flex-shrink: 0;
}

.en-tete .wp-block-image img {
	width: 96px;
	height: 96px;
	display: block;
}

.en-tete .wp-block-navigation {
	gap: var(--wp--preset--spacing--space-6);
}

.en-tete .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--encre);
	text-decoration: none;
	padding-block: 6px;
	border-bottom: 3px solid transparent;
}

.en-tete .wp-block-navigation .wp-block-navigation-item__content:hover,
.en-tete .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--vert-500);
	border-bottom-color: var(--jaune-500);
}

.en-tete .wp-block-navigation__submenu-container {
	border: 1px solid var(--filet) !important;
	border-radius: var(--radius-sm);
	box-shadow: var(--ombre-carte);
	padding: var(--wp--preset--spacing--space-2) 0;
	min-width: 18rem !important;
}

.en-tete .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 10px 16px;
	border-bottom: 0;
}

.en-tete .wp-block-navigation__responsive-container-open,
.en-tete .wp-block-navigation__responsive-container-close {
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	color: var(--vert-800);
	border-radius: var(--radius-pill);
}

.en-tete .wp-block-navigation__responsive-container-open {
	border: 2px solid var(--vert-500);
}

.en-tete .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--space-6);
}

.en-tete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 20px;
	padding-block: 8px;
}

.en-tete .navigation-et-action {
	gap: var(--wp--preset--spacing--space-6);
}

@media (max-width: 599px) {
	.en-tete .wp-block-image img {
		width: 96px;
		height: 96px;
	}

	.en-tete .bouton-en-tete {
		display: none;
	}
}

/* ---------- Bandeau (maquette Bandeau.html) ---------- */

.bandeau {
	/* Un bandeau d'introduction, pas un écran entier : deux crans de moins qu'avant. */
	padding-block: clamp(28px, 4vw, 44px);
}

/* Pages intérieures : titre plus court, texte plus serré. */
.bandeau:not(.bandeau--accueil) h1 {
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.12;
}

.bandeau:not(.bandeau--accueil) .bandeau-texte > * + *,
.bandeau:not(.bandeau--accueil) > * + * {
	margin-block-start: var(--wp--preset--spacing--space-3);
}

.bandeau:not(.bandeau--accueil) .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--space-4) !important;
}

.bandeau .bandeau-contenu {
	align-items: center;
	gap: var(--wp--preset--spacing--space-12);
}

.bandeau .bandeau-texte {
	flex: 1 1 420px;
	max-width: 640px;
}

.bandeau .bandeau-texte > * {
	margin-block: 0;
}

.bandeau .bandeau-texte > * + * {
	margin-block-start: var(--wp--preset--spacing--space-4);
}

.bandeau h1 {
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.07;
	letter-spacing: -1px;
}

.bandeau p {
	max-width: 520px;
}

.bandeau .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--space-6) !important;
}

.bandeau .wp-block-image {
	flex: 0 0 auto;
	margin: 0;
}

.bandeau .wp-block-image img {
	width: clamp(180px, 24vw, 260px);
	height: auto;
}

/* ---------- Cartes (maquette CarteTerritoire.html) ---------- */

.wp-block-group.is-style-carte {
	background: var(--fond);
	color: var(--encre);
	border-radius: var(--radius-md);
	box-shadow: var(--ombre-carte);
	padding: var(--wp--preset--spacing--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-3);
	height: 100%;
	box-sizing: border-box;
}

.wp-block-group.is-style-carte > * {
	margin-block: 0;
}

.wp-block-group.is-style-carte h3 {
	color: var(--encre);
}

.wp-block-group.is-style-carte p:not(.is-style-surtitre):not(.lien-carte) {
	color: var(--encre-douce);
}

.wp-block-group.is-style-carte .lien-carte {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--space-2);
	font-weight: 700;
}

.wp-block-group.is-style-carte .lien-carte a {
	color: var(--vert-500);
	text-decoration: none;
}

.wp-block-group.is-style-carte .lien-carte a:hover {
	text-decoration: underline;
}

/* Carte cliquable en entier, le lien reste le seul élément focalisable. */
.wp-block-group.is-style-carte:has(.lien-carte a) {
	position: relative;
}

.wp-block-group.is-style-carte .lien-carte a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius-md);
}

.wp-block-group.is-style-carte .wp-block-image {
	margin: 0;
}

.wp-block-group.is-style-carte .wp-block-image img {
	border-radius: var(--radius-sm);
}

/* Encadré d'information jaune clair. */
.wp-block-group.is-style-encadre {
	background: var(--jaune-100);
	color: var(--encre);
	border-radius: var(--radius-md);
	border-left: 6px solid var(--jaune-500);
	padding: var(--wp--preset--spacing--space-6);
}

.wp-block-group.is-style-encadre > :first-child {
	margin-block-start: 0;
}

.wp-block-group.is-style-encadre > :last-child {
	margin-block-end: 0;
}

/* ---------- Parcours en étapes (maquette Parcours.html) ---------- */

.parcours {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--space-6);
	position: relative;
	padding-block: var(--wp--preset--spacing--space-8);
}

.parcours > * {
	margin: 0 !important;
}

.parcours::before {
	content: "";
	position: absolute;
	left: 12.5%;
	right: 12.5%;
	top: calc(var(--wp--preset--spacing--space-8) + 26px);
	border-top: 4px dashed var(--jaune-500);
}

.parcours-etape {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--wp--preset--spacing--space-3);
}

.parcours-etape > * {
	margin: 0;
}

.parcours-etape p:not(.parcours-num) {
	color: var(--encre-douce);
}

.parcours-num {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--vert-500);
	color: var(--fond);
	font-size: 22px !important;
	line-height: 1;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 6px var(--fond);
	flex-shrink: 0;
}

.has-vert-100-background-color .parcours-num {
	box-shadow: 0 0 0 6px var(--vert-100);
}

@media (max-width: 899px) {
	.parcours {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--space-8);
		padding-inline-start: 0;
	}

	.parcours::before {
		left: 26px;
		right: auto;
		top: var(--wp--preset--spacing--space-8);
		bottom: var(--wp--preset--spacing--space-8);
		border-top: 0;
		border-left: 4px dashed var(--jaune-500);
	}

	.parcours-etape {
		display: grid;
		grid-template-columns: 56px 1fr;
		column-gap: var(--wp--preset--spacing--space-4);
		row-gap: var(--wp--preset--spacing--space-1);
		align-items: start;
		text-align: left;
	}

	.parcours-etape .parcours-num {
		grid-row: span 2;
	}

	.parcours-etape .has-text-align-center {
		text-align: left;
	}
}

/* ---------- Grilles ---------- */

.grille-cartes {
	align-items: stretch;
}

/* ---------- Coordonnées ---------- */

.coordonnees p {
	margin-block: 0;
}

.coordonnees p + p {
	margin-block-start: var(--wp--preset--spacing--space-2);
}

.coordonnees strong {
	font-weight: 700;
}

/* ---------- Logos des financeurs ---------- */

.logos-financeurs {
	align-items: center;
	gap: var(--wp--preset--spacing--space-8) !important;
}

.logos-financeurs .wp-block-image {
	margin: 0;
}

.logos-financeurs .wp-block-image img {
	height: 96px;
	width: auto;
	object-fit: contain;
}

.emplacement-logo {
	min-height: 96px;
	min-width: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--space-3);
	border: 2px dashed var(--encre-douce);
	border-radius: var(--radius-sm);
	color: var(--encre-douce);
	text-align: center;
}

.emplacement-logo p {
	margin: 0;
	font-size: var(--wp--preset--font-size--corps-petit);
	line-height: 1.4;
}

/* ---------- Pied de page ---------- */

.pied-de-page h2 {
	font-size: var(--wp--preset--font-size--titre-3);
	line-height: 1.4;
	font-weight: 700;
	margin-block-end: var(--wp--preset--spacing--space-3);
}

.pied-de-page .wp-block-columns {
	gap: var(--wp--preset--spacing--space-8);
}

.pied-de-page ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.pied-de-page li + li {
	margin-block-start: var(--wp--preset--spacing--space-2);
}

.pied-de-page .pied-de-page-bas {
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	padding-block-start: var(--wp--preset--spacing--space-6);
	margin-block-start: var(--wp--preset--spacing--space-12);
	gap: var(--wp--preset--spacing--space-3) var(--wp--preset--spacing--space-6);
}

.pied-de-page .pied-de-page-bas p {
	margin: 0;
}

/* ---------- Titres de page ---------- */

.titre-de-page {
	padding-block: var(--wp--preset--spacing--space-12);
}

.titre-de-page h1 {
	margin-block: 0;
}

.titre-de-page .wp-block-separator.is-style-route {
	margin-block-start: var(--wp--preset--spacing--space-4);
}

/* ---------- Contenus éditoriaux ---------- */

.wp-block-post-content :where(h2) {
	margin-block-start: var(--wp--preset--spacing--space-12);
}

.wp-block-post-content > .alignfull.section :where(h2):first-child,
.wp-block-post-content .is-style-surtitre + h2,
.wp-block-post-content .is-style-carte h2 {
	margin-block-start: 0;
}

.wp-block-list li + li {
	margin-block-start: var(--wp--preset--spacing--space-2);
}

/* Puces jaunes (charte : le jaune pour les puces). */
.wp-block-post-content ul.wp-block-list:not(.is-style-sans-puces) {
	list-style: none;
	padding-left: 1.4em;
}

.wp-block-post-content ul.wp-block-list:not(.is-style-sans-puces) > li {
	position: relative;
}

.wp-block-post-content ul.wp-block-list:not(.is-style-sans-puces) > li::before {
	content: "";
	position: absolute;
	left: -1.1em;
	top: 0.62em;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: var(--jaune-500);
}

.marqueur-a-completer {
	background: var(--jaune-100);
	outline: 2px dashed var(--jaune-600);
	padding: 0 4px;
	border-radius: 4px;
}

/* Cartes géographiques intégrées. */
.carte-geo iframe {
	width: 100%;
	min-height: 360px;
	border: 0;
	border-radius: var(--radius-md);
}

/* Formulaires (MetForm et autres). */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
select,
textarea {
	font: inherit;
	font-size: 17px;
	border: 1px solid var(--encre-douce);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	background: var(--fond);
	color: var(--encre);
}

/* Pagination et métadonnées. */
.wp-block-query-pagination {
	margin-block-start: var(--wp--preset--spacing--space-12);
	gap: var(--wp--preset--spacing--space-4);
	font-weight: 700;
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* Menu replié jusqu’à 1199 px : au-delà, les six entrées et le bouton tiennent sur une ligne. */
@media (max-width: 1199px) {
	.en-tete .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: inline-flex;
	}

	.en-tete .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Bandeau clair des pages intérieures (fond vert-100, pastille sur disque blanc). */
.bandeau--clair {
	color: var(--encre);
}

.bandeau--clair h1 {
	font-size: var(--wp--preset--font-size--titre-1);
	line-height: 1.2;
	letter-spacing: 0;
}

.bandeau--clair .wp-block-image img {
	width: clamp(140px, 18vw, 200px);
}

/* Marqueur [À COMPLÉTER] lisible sur tous les fonds. */
mark.marqueur-a-completer {
	color: var(--encre);
	font-weight: 700;
}

/* Titres de cartes en h2 mis à la taille h3. */
.is-style-carte h2.has-titre-3-font-size {
	line-height: 1.4;
	font-weight: 700;
	margin-block-start: 0;
}

/* Libellés de l'en-tête sur une seule ligne. */
.en-tete .wp-block-navigation-item__content,
.en-tete .bouton-en-tete .wp-block-button__link {
	white-space: nowrap;
}

/* Logos : largeur bornée (évite la taille intrinsèque de 3000 px des images en chargement différé). */
.logos-financeurs .wp-block-image {
	flex: 0 1 auto;
	max-width: 100%;
}

.logos-financeurs .wp-block-image img {
	width: auto;
	max-width: min(100%, 260px);
	contain-intrinsic-size: 160px 96px;
}

/* Menu mobile ouvert : entrées alignées à gauche, sous-menu intégré à la liste. */
.en-tete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.en-tete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.en-tete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start !important;
	justify-content: flex-start;
	text-align: left;
}

.en-tete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	position: static !important;
	border: 0 !important;
	box-shadow: none;
	min-width: 0 !important;
	width: auto !important;
	padding: 0 0 0 var(--wp--preset--spacing--space-4) !important;
	border-left: 3px solid var(--jaune-500) !important;
	margin-block: var(--wp--preset--spacing--space-2);
}

.en-tete .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 18px;
	white-space: normal;
}

/* ==========================================================================
   Mouvement, bande des financeurs, pied de page et schéma en rouages
   Ajouté le 2026-10-17.
   Règle tenue partout : rien ne bouge si la personne a demandé à son appareil
   de réduire les animations (`prefers-reduced-motion`). Le public de ces pages
   compte des personnes que le mouvement gêne pour lire.
   ========================================================================== */

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

.apparait {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.55s ease-out, transform 0.55s ease-out;
	transition-delay: var(--retard, 0s);
	will-change: opacity, transform;
}

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

/* --- Cartes : relief au survol ------------------------------------------ */

.is-style-carte {
	transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}

.is-style-carte:hover,
.is-style-carte:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(18, 61, 29, 0.14);
}

.lien-carte a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.lien-carte a span {
	transition: transform 0.2s ease-out;
}

.is-style-carte:hover .lien-carte a span,
.lien-carte a:hover span,
.lien-carte a:focus span {
	transform: translateX(5px);
}

/* --- Boutons ------------------------------------------------------------- */

.wp-block-button__link {
	transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, background-color 0.18s ease-out;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(18, 61, 29, 0.22);
}

/* --- Parcours : le trait se trace --------------------------------------- */

.parcours-etape .parcours-num {
	transition: transform 0.3s ease-out;
}

.parcours-etape:hover .parcours-num {
	transform: scale(1.08);
}

/* --- Bande des financeurs ------------------------------------------------ */

.bande-financeurs {
	border-top: 1px solid var(--filet);
}

.logos-financeurs {
	list-style: none;
	margin: var(--wp--preset--spacing--space-6) auto 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: var(--wp--preset--spacing--space-4);
	max-width: var(--wp--style--global--wide-size, 1200px);
}

.logo-financeur {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 150px;
	min-height: 96px;
	padding: var(--wp--preset--spacing--space-3) var(--wp--preset--spacing--space-4);
	background: var(--fond);
	border: 1px solid var(--filet);
	border-radius: var(--radius-md);
	transition: transform 0.22s ease-out, box-shadow 0.22s ease-out, border-color 0.22s ease-out;
}

.logo-financeur:hover {
	transform: translateY(-3px);
	border-color: var(--vert-500);
	box-shadow: 0 10px 24px rgba(18, 61, 29, 0.12);
}

/* Les emblèmes imposés restent en couleur et un peu plus grands : leurs règles
   de publicité demandent un logo visible et lisible. */
.logo-financeur--obligatoire {
	min-width: 180px;
}

.logo-financeur img {
	display: block;
	width: auto;
	height: 62px;
	max-width: 100%;
	object-fit: contain;
}

.logo-financeur--obligatoire img {
	height: 76px;
}

.emplacement-logo {
	display: block;
	/* Le cadre en pointillés est porté par la tuile, pas par le texte :
	   sans ce rappel, l'ancienne règle plus haut dessinait un second cadre. */
	border: 0;
	min-height: 0;
	min-width: 0;
	padding: 0;
	max-width: 190px;
	font-size: 13px;
	line-height: 1.35;
	color: var(--encre-douce);
	text-align: center;
}

.emplacement-logo small {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.75;
}

.logo-financeur:has(.emplacement-logo) {
	border-style: dashed;
	background: transparent;
}

/* --- Pied de page -------------------------------------------------------- */

.pied-de-page-contact {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-2);
}

.pied-de-page-contact .contact-fort a {
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 800;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
}

.pied-de-page-contact .contact-fort a:hover,
.pied-de-page-contact .contact-fort a:focus-visible {
	text-decoration: underline;
}

.pied-de-page .wp-block-list.is-style-sans-puces li {
	margin-bottom: 0.45em;
}

.pied-de-page .wp-block-list.is-style-sans-puces a {
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease-out;
}

.pied-de-page .wp-block-list.is-style-sans-puces a:hover,
.pied-de-page .wp-block-list.is-style-sans-puces a:focus-visible {
	border-bottom-color: currentColor;
}

.pied-de-page-lieu {
	font-size: 15px;
	opacity: 0.85;
}

/* --- Schéma en rouages --------------------------------------------------- */

.schema-rouages-bloc {
	margin-block: var(--wp--preset--spacing--space-12);
	text-align: center;
}

.schema-rouages {
	display: block;
	width: 100%;
	max-width: 960px;
	height: auto;
	margin-inline: auto;
	overflow: visible;
}

.rouage {
	transform-box: view-box;
	transform-origin: var(--cx) var(--cy);
	animation: rouage-tourne 26s linear infinite;
	animation-delay: var(--retard, 0s);
}

.rouage--antihoraire {
	animation-direction: reverse;
}

@keyframes rouage-tourne {
	to { transform: rotate(360deg); }
}

.rouage-num {
	font-family: var(--wp--preset--font-family--sans, inherit);
	font-size: 40px;
	font-weight: 800;
	fill: var(--encre);
}

.rouage-titre {
	font-family: var(--wp--preset--font-family--sans, inherit);
	font-size: 26px;
	font-weight: 800;
	fill: var(--encre);
}

.rouage-sous {
	font-family: var(--wp--preset--font-family--sans, inherit);
	font-size: 17px;
	fill: var(--encre-douce);
}

.schema-fleches path {
	stroke-dasharray: 190;
	stroke-dashoffset: 190;
	animation: fleche-se-trace 1.1s ease-out forwards;
}

.schema-fleches path:nth-child(2) {
	animation-delay: 0.5s;
}

@keyframes fleche-se-trace {
	to { stroke-dashoffset: 0; }
}

@media (max-width: 782px) {
	.rouage-titre { font-size: 30px; }
	.rouage-sous  { font-size: 20px; }
	.rouage-num   { font-size: 44px; }
}

/* --- On ne bouge pas quand on nous demande de ne pas bouger -------------- */

@media (prefers-reduced-motion: reduce) {
	.apparait {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.is-style-carte,
	.wp-block-button__link,
	.logo-financeur,
	.lien-carte a span,
	.parcours-etape .parcours-num {
		transition: none;
	}

	.is-style-carte:hover,
	.wp-block-button__link:hover,
	.logo-financeur:hover,
	.parcours-etape:hover .parcours-num {
		transform: none;
	}

	.rouage {
		animation: none;
	}

	.schema-fleches path {
		stroke-dasharray: none;
		stroke-dashoffset: 0;
		animation: none;
	}
}

/* À l'impression, rien n'est caché : on imprime la page entière. */
@media print {
	.apparait {
		opacity: 1 !important;
		transform: none !important;
	}

	.rouage,
	.schema-fleches path {
		animation: none !important;
	}
}

/* ==========================================================================
   Étapes illustrées — le parcours raconté, pas trois cartes posées là
   La route en pointillé jaune de la charte relie les étapes. Elle se dessine
   à l'arrivée en vue, et reste droite et immobile si on demande moins d'animation.
   ========================================================================== */

.etapes {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--wp--preset--spacing--space-8);
	margin-top: var(--wp--preset--spacing--space-12);
}

/* La route : un trait pointillé derrière la rangée d'icônes. */
.etapes::before {
	content: "";
	position: absolute;
	top: 58px;
	left: 12%;
	right: 12%;
	height: 4px;
	background-image: linear-gradient(to right, var(--jaune-500) 0 18px, transparent 18px 32px);
	background-size: 32px 4px;
	background-repeat: repeat-x;
	z-index: 0;
}

.etape {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--wp--preset--spacing--space-2);
}

.etape-pastille {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 116px;
	height: 116px;
	border-radius: 50%;
	background: var(--fond);
	border: 4px solid var(--vert-500);
	box-shadow: 0 10px 26px rgba(18, 61, 29, 0.12);
	transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.etape:hover .etape-pastille {
	transform: translateY(-5px);
	box-shadow: 0 18px 36px rgba(18, 61, 29, 0.2);
}

.etape-pastille svg {
	width: 52px;
	height: 52px;
	stroke: var(--vert-500);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

.etape-num {
	position: absolute;
	right: -6px;
	bottom: -6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--jaune-500);
	color: var(--vert-800);
	font-weight: 800;
	font-size: 18px;
	border: 3px solid var(--fond);
}

.etape h3 {
	margin: var(--wp--preset--spacing--space-3) 0 0;
	font-size: clamp(19px, 1.6vw, 22px);
}

.etape p {
	margin: 0;
	max-width: 28ch;
	color: var(--encre-douce);
}

/* Sur téléphone, la route se redresse à gauche des étapes. */
@media (max-width: 781px) {
	.etapes {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--space-6);
	}

	.etapes::before {
		top: 40px;
		bottom: 40px;
		left: 50%;
		right: auto;
		width: 4px;
		height: auto;
		transform: translateX(-2px);
		background-image: linear-gradient(to bottom, var(--jaune-500) 0 18px, transparent 18px 32px);
		background-size: 4px 32px;
		background-repeat: repeat-y;
	}
}

@media (prefers-reduced-motion: reduce) {
	.etape-pastille { transition: none; }
	.etape:hover .etape-pastille { transform: none; }
}

/* Photos de terrain : coins arrondis, légère ombre, légende discrète. */
.photo-terrain img {
	border-radius: var(--radius-lg);
	box-shadow: 0 16px 36px rgba(18, 61, 29, 0.16);
	width: 100%;
	height: auto;
}

.photo-terrain figcaption {
	margin-top: var(--wp--preset--spacing--space-2);
	font-size: 15px;
	color: var(--encre-douce);
	text-align: center;
}

/* ==========================================================================
   Ruban des partenaires — il défile, lentement, et s'arrête sous la souris
   Les trois emblèmes de financeurs restent fixes au-dessus : leurs règles de
   publicité exigent un logo visible et lisible, un ruban ne le garantit pas.
   ========================================================================== */

.logos-financeurs--fixes {
	margin-bottom: var(--wp--preset--spacing--space-6);
}

.ruban-titre {
	margin-top: var(--wp--preset--spacing--space-4) !important;
}

.ruban-partenaires {
	--vitesse: 38s;
	position: relative;
	display: flex;
	overflow: hidden;
	width: 100%;
	margin-top: var(--wp--preset--spacing--space-4);
	padding-block: var(--wp--preset--spacing--space-2);
	/* fondu sur les bords pour que les logos entrent et sortent en douceur */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.ruban-piste {
	flex-shrink: 0;
	display: flex;
	align-items: stretch;
	gap: var(--wp--preset--spacing--space-4);
	min-width: 100%;
	list-style: none;
	margin: 0;
	padding: 0 calc(var(--wp--preset--spacing--space-4) / 2);
	animation: ruban-defile var(--vitesse) linear infinite;
}

.ruban-partenaires:hover .ruban-piste,
.ruban-partenaires:focus-within .ruban-piste {
	animation-play-state: paused;
}

.ruban-piste .logo-financeur {
	flex: 0 0 auto;
}

@keyframes ruban-defile {
	to { transform: translateX(-100%); }
}

/* Moins d'animation demandée : le ruban devient une grille sage. */
@media (prefers-reduced-motion: reduce) {
	.ruban-partenaires {
		flex-wrap: wrap;
		justify-content: center;
		-webkit-mask-image: none;
		        mask-image: none;
	}
	.ruban-piste {
		animation: none;
		min-width: 0;
		flex-wrap: wrap;
		justify-content: center;
	}
	.ruban-piste[aria-hidden="true"] {
		display: none;
	}
}

/* ==========================================================================
   Bandeau d'accueil : la route se trace, un vélo la parcourt, la pastille flotte
   ========================================================================== */

.bandeau--accueil {
	position: relative;
	overflow: hidden;
	padding-block: clamp(40px, 5vw, 64px) calc(clamp(40px, 5vw, 64px) + 72px);
}

.hero-route {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 150px;
	pointer-events: none;
}

.hero-route svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Un seul trait fin, qui se trace une fois à l'arrivée. */
.route-ligne {
	fill: none;
	stroke: var(--jaune-500);
	stroke-width: 2;
	stroke-linecap: round;
	opacity: 0.9;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: route-se-trace 2.2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

@keyframes route-se-trace {
	to { stroke-dashoffset: 0; }
}

/* Une lueur courte qui parcourt lentement le trait, comme un trajet sur une carte. */
.route-lueur {
	fill: none;
	stroke: #FFFFFF;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 0.06 0.94;
	stroke-dashoffset: 1;
	opacity: 0;
	animation: route-lueur 9s linear 2.6s infinite, route-lueur-apparait 0.6s ease-out 2.6s forwards;
}

@keyframes route-lueur {
	to { stroke-dashoffset: -1; }
}

@keyframes route-lueur-apparait {
	to { opacity: 0.85; }
}

/* Trois repères discrets, qui apparaissent quand le trait les atteint. */
.route-reperes circle {
	fill: var(--vert-500);
	stroke: var(--jaune-500);
	stroke-width: 2;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation: repere-apparait 0.6s ease-out forwards;
}

.route-reperes circle:nth-child(1) { animation-delay: 0.9s; }
.route-reperes circle:nth-child(2) { animation-delay: 1.5s; }
.route-reperes circle:nth-child(3) { animation-delay: 2.1s; }

.route-reperes .halo {
	fill: none;
	stroke: var(--jaune-500);
	stroke-width: 1.5;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation: halo-respire 6s ease-in-out 2.8s infinite;
}

.route-reperes .halo:nth-of-type(2) { animation-delay: 4.8s; }
.route-reperes .halo:nth-of-type(3) { animation-delay: 6.8s; }

@keyframes repere-apparait {
	from { opacity: 0; transform: scale(0.4); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes halo-respire {
	0%   { opacity: 0; transform: scale(0.6); }
	20%  { opacity: 0.55; }
	60%  { opacity: 0; transform: scale(2.4); }
	100% { opacity: 0; transform: scale(2.4); }
}

.route-etiquette {
	font-family: var(--wp--preset--font-family--sans, inherit);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	fill: rgba(255, 255, 255, 0.75);
	opacity: 0;
	animation: repere-apparait 0.6s ease-out forwards;
}

.route-etiquette:nth-of-type(1) { animation-delay: 1.1s; }
.route-etiquette:nth-of-type(2) { animation-delay: 1.7s; }
.route-etiquette:nth-of-type(3) { animation-delay: 2.3s; }

/* La pastille respire. */
.bandeau .is-style-pastille-sur-fond img {
	animation: pastille-flotte 9s ease-in-out infinite;
}

@keyframes pastille-flotte {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-4px); }
}

@media (max-width: 781px) {
	.bandeau--accueil { padding-bottom: calc(var(--wp--preset--spacing--space-8) + 56px); }
	.hero-route { height: 96px; }
}

@media (prefers-reduced-motion: reduce) {
	.route-ligne { animation: none; stroke-dashoffset: 0; }
	.route-lueur { display: none; }
	.route-reperes circle, .route-etiquette { animation: none; opacity: 1; transform: none; }
	.route-reperes .halo { display: none; }
	.bandeau .is-style-pastille-sur-fond img { animation: none; }
}

/* ==========================================================================
   Formulaire de contact
   ========================================================================== */

.formulaire-contact {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-4);
	padding: var(--wp--preset--spacing--space-6);
	background: var(--fond);
	border: 1px solid var(--filet);
	border-radius: var(--radius-lg);
	box-shadow: var(--ombre-carte);
}

.contact-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--wp--preset--spacing--space-4);
}

.contact-champ { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.contact-champ label { font-weight: 700; }
.contact-champ label small { font-weight: 400; color: var(--encre-douce); }

.formulaire-contact input[type="text"],
.formulaire-contact input[type="email"],
.formulaire-contact input[type="tel"],
.formulaire-contact select,
.formulaire-contact textarea {
	width: 100%;
	font: inherit;
	font-size: 17px;
	padding: 12px 14px;
	border: 2px solid var(--filet);
	border-radius: var(--radius-md);
	background: var(--fond);
	color: var(--encre);
	transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

.formulaire-contact input:focus,
.formulaire-contact select:focus,
.formulaire-contact textarea:focus {
	outline: none;
	border-color: var(--vert-500);
	box-shadow: 0 0 0 4px rgba(38, 122, 58, 0.18);
}

.contact-profil {
	border: 0;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 10px;
}

.contact-profil legend { font-weight: 700; margin-bottom: 8px; }

.contact-radio {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 2px solid var(--filet);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: border-color 0.15s ease-out, background-color 0.15s ease-out;
}

.contact-radio:has(input:checked) {
	border-color: var(--vert-500);
	background: var(--vert-100);
}

.contact-radio input { accent-color: var(--vert-500); width: 20px; height: 20px; }

.contact-consentement label { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--encre-douce); }
.contact-consentement input { margin-top: 4px; accent-color: var(--vert-500); width: 20px; height: 20px; flex: 0 0 auto; }

.contact-envoi { display: flex; align-items: center; flex-wrap: wrap; gap: var(--wp--preset--spacing--space-4); margin: 0; }
.contact-envoi button { cursor: pointer; border: 0; }
.contact-ou { color: var(--encre-douce); }

.obligatoire { color: var(--jaune-600); }
.contact-piege { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.contact-retour {
	padding: var(--wp--preset--spacing--space-4);
	border-radius: var(--radius-md);
	margin-bottom: var(--wp--preset--spacing--space-4);
	border-left: 6px solid;
}
.contact-retour--ok { background: var(--vert-100); border-color: var(--vert-500); }
.contact-retour--erreur { background: var(--jaune-100); border-color: var(--jaune-600); }

/* ==========================================================================
   Cartes à icône, captures produit, galerie
   ========================================================================== */

.grille-icones { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--wp--preset--spacing--space-4); margin-top: var(--wp--preset--spacing--space-8); }
.carte-icone { display: flex; flex-direction: column; gap: 10px; }
.carte-icone h3 { margin: 4px 0 0; font-size: 20px; }
.carte-icone p { margin: 0; color: var(--encre-douce); }
.carte-icone-rond {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; border-radius: 50%;
	background: var(--vert-100); color: var(--vert-500);
	transition: transform 0.25s ease-out, background-color 0.25s ease-out, color 0.25s ease-out;
}
.carte-icone-rond svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.is-style-carte:hover .carte-icone-rond { background: var(--vert-500); color: #fff; transform: rotate(-6deg) scale(1.06); }

.capture-produit img { border-radius: var(--radius-lg); box-shadow: 0 30px 60px rgba(18, 61, 29, 0.22); border: 1px solid var(--filet); }
.capture-produit figcaption { text-align: center; color: var(--encre-douce); font-size: 15px; margin-top: var(--wp--preset--spacing--space-2); }

.galerie-captures {
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 70vw); gap: var(--wp--preset--spacing--space-4);
	overflow-x: auto; padding: var(--wp--preset--spacing--space-2) var(--wp--preset--spacing--space-2) var(--wp--preset--spacing--space-4);
	scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin-top: var(--wp--preset--spacing--space-6);
}
@media (min-width: 900px) { .galerie-captures { grid-auto-columns: minmax(360px, 38%); } }
.galerie-captures figure { margin: 0; scroll-snap-align: start; }
.galerie-captures img { width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--filet); box-shadow: 0 14px 32px rgba(18, 61, 29, 0.14); }
.galerie-captures figcaption { margin-top: 8px; font-size: 15px; color: var(--encre-douce); text-align: center; }

.bandeau--produit .wp-block-group { max-width: 760px; }

@media (prefers-reduced-motion: reduce) { .is-style-carte:hover .carte-icone-rond { transform: none; } }

.is-style-carte .carte-icone-rond { margin-bottom: 4px; }
.capture-produit--penchee img { transform: perspective(1200px) rotateY(-8deg) rotateX(2deg); transition: transform 0.5s ease-out; }
.capture-produit--penchee:hover img { transform: perspective(1200px) rotateY(0) rotateX(0); }
@media (prefers-reduced-motion: reduce) { .capture-produit--penchee img, .capture-produit--penchee:hover img { transform: none; } }

/* Les cartes à icône posées en HTML brut héritent du même habillage que les groupes. */
.grille-icones .carte-icone,
.grille-cartes > div.carte-icone {
	background: var(--fond);
	border-radius: var(--radius-lg);
	padding: var(--wp--preset--spacing--space-6);
	box-shadow: var(--ombre-carte);
	border: 1px solid var(--filet);
	transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}
.grille-icones .carte-icone:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(18, 61, 29, 0.14); }
.grille-icones .carte-icone:hover .carte-icone-rond { background: var(--vert-500); color: #fff; transform: rotate(-6deg) scale(1.06); }
@media (prefers-reduced-motion: reduce) { .grille-icones .carte-icone:hover { transform: none; } }
.grille-trois { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 900px) { .grille-trois { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) { .grille-trois { grid-template-columns: 1fr !important; } }

/* ==========================================================================
   « Tapez votre commune »
   ========================================================================== */
.trouver-plateforme { max-width: 640px; margin: var(--wp--preset--spacing--space-6) auto 0; text-align: left; }
.trouver-plateforme > label { display: block; font-weight: 800; font-size: 19px; margin-bottom: 8px; text-align: center; }
.trouver-ligne { display: flex; gap: 10px; flex-wrap: wrap; }
.trouver-ligne input { flex: 1 1 260px; font: inherit; font-size: 18px; padding: 14px 18px; border: 2px solid var(--vert-500); border-radius: var(--radius-pill); background: var(--fond); color: var(--encre); }
.trouver-ligne input:focus { outline: none; box-shadow: 0 0 0 4px rgba(38, 122, 58, 0.18); }
.trouver-ligne button { border: 0; cursor: pointer; }
.trouver-resultat { margin-top: var(--wp--preset--spacing--space-4); padding: var(--wp--preset--spacing--space-4); border-radius: var(--radius-md); background: var(--fond); border-left: 6px solid var(--vert-500); box-shadow: var(--ombre-carte); animation: trouver-pop 0.35s ease-out; }
.trouver-resultat--inconnu { border-left-color: var(--jaune-500); }
.trouver-resultat p { margin: 0 0 10px; }
.trouver-resultat p:last-child { margin: 0; }
@keyframes trouver-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .trouver-resultat { animation: none; } }

/* ==========================================================================
   Chiffres clés et témoignages
   ========================================================================== */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--wp--preset--spacing--space-4); margin-top: var(--wp--preset--spacing--space-8); }
.chiffre { text-align: center; padding: var(--wp--preset--spacing--space-6) var(--wp--preset--spacing--space-4); background: var(--fond); border-radius: var(--radius-lg); box-shadow: var(--ombre-carte); border-top: 5px solid var(--jaune-500); }
.chiffre-valeur { display: block; font-size: clamp(34px, 4.2vw, 52px); font-weight: 800; line-height: 1; color: var(--vert-700); font-variant-numeric: tabular-nums; }
.chiffre-libelle { display: block; margin-top: 10px; color: var(--encre-douce); font-size: 16px; }
.chiffres-source { text-align: center; font-size: 14px; color: var(--encre-douce); margin-top: var(--wp--preset--spacing--space-4); }

.temoignages { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--wp--preset--spacing--space-6); margin-top: var(--wp--preset--spacing--space-8); align-items: start; }
.temoignage { position: relative; background: var(--fond); border-radius: var(--radius-lg); padding: var(--wp--preset--spacing--space-8) var(--wp--preset--spacing--space-6) var(--wp--preset--spacing--space-6); box-shadow: var(--ombre-carte); }
.temoignage::before { content: "“"; position: absolute; top: -18px; left: 22px; font-size: 92px; line-height: 1; font-weight: 800; color: var(--jaune-500); font-family: Georgia, "Times New Roman", serif; }
.temoignage:nth-child(2n) { transform: translateY(18px); }
.temoignage blockquote { margin: 0; font-size: 18px; line-height: 1.5; color: var(--encre); }
.temoignage blockquote p { margin: 0 0 8px; }
.temoignage footer { margin-top: 14px; font-size: 15px; color: var(--encre-douce); display: flex; align-items: center; gap: 10px; }
.temoignage footer::before { content: ""; width: 26px; height: 3px; background: var(--jaune-500); border-radius: 2px; }
.temoignage footer strong { color: var(--vert-700); }
@media (max-width: 781px) { .temoignage:nth-child(2n) { transform: none; } }
.chapo { font-size: 20px; line-height: 1.5; color: var(--encre-douce); }

/* Lien d'évitement : invisible jusqu'au focus clavier. */
.lien-evitement { position: absolute; left: 16px; top: -60px; z-index: 1000; padding: 12px 18px; background: var(--vert-800); color: #fff; border-radius: var(--radius-pill); font-weight: 700; text-decoration: none; transition: top 0.15s ease-out; }
.lien-evitement:focus { top: 16px; outline: 3px solid var(--jaune-500); outline-offset: 2px; }

/* ==========================================================================
   Carte des plateformes
   ========================================================================== */
.carte-plateformes { margin-top: var(--wp--preset--spacing--space-6); }
.carte-attente { background: var(--fond); border-radius: var(--radius-lg); padding: var(--wp--preset--spacing--space-6); box-shadow: var(--ombre-carte); border: 1px solid var(--filet); }
.carte-adresses { list-style: none; margin: 0 0 var(--wp--preset--spacing--space-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--wp--preset--spacing--space-4); }
.carte-adresses li { padding-left: 14px; border-left: 4px solid var(--jaune-500); }
.carte-adresses a { font-weight: 700; text-decoration: none; }
.carte-adresses span { color: var(--encre-douce); font-size: 16px; }
.carte-bouton { border: 0; cursor: pointer; }
.carte-mention { margin: 10px 0 0; font-size: 14px; color: var(--encre-douce); }
.carte-conteneur { height: 460px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--ombre-carte); border: 1px solid var(--filet); }
.leaflet-container { font-family: inherit; font-size: 15px; }
.leaflet-popup-content a { font-weight: 700; }
@media (max-width: 600px) { .carte-conteneur { height: 340px; } }
.grille-quatre { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 1100px) { .grille-quatre { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) { .grille-quatre { grid-template-columns: 1fr !important; } }
.grille-icones .carte-icone .lien-carte { margin-top: auto; padding-top: 10px; font-weight: 700; }

/* Trio de photos de terrain */
.photos-terrain { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--wp--preset--spacing--space-4); margin-top: var(--wp--preset--spacing--space-4); }
.photos-terrain figure { margin: 0; }
.photos-terrain img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: 0 14px 32px rgba(18, 61, 29, 0.14); transition: transform 0.3s ease-out; }
.photos-terrain figure:hover img { transform: scale(1.02); }
.photos-terrain figcaption { margin-top: 8px; font-size: 15px; color: var(--encre-douce); text-align: center; }
@media (prefers-reduced-motion: reduce) { .photos-terrain figure:hover img { transform: none; } }

/* Formulaire : champs à hauteur égale, alignés en bas quand une étiquette passe sur deux lignes. */
.formulaire-contact.alignwide { max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; }
.contact-champ { justify-content: flex-end; }
.formulaire-contact input[type="text"],
.formulaire-contact input[type="email"],
.formulaire-contact input[type="tel"],
.formulaire-contact select { height: 54px; flex: 0 0 auto; align-self: stretch; padding: 0 16px !important; line-height: 52px; box-sizing: border-box; }
.formulaire-contact textarea { padding: 12px 16px !important; min-height: 180px; resize: vertical; }
.contact-intro-profil { margin: 0; padding: 12px 16px; background: var(--jaune-100); border-left: 5px solid var(--jaune-500); border-radius: var(--radius-sm); color: var(--encre); }

/* ==========================================================================
   Bandeau des pages intérieures : tout part du même bord gauche
   La mise en page « contrainte » centrait chaque élément sur sa propre largeur :
   titre, trait jaune, texte et boutons ne commençaient pas au même endroit.
   ========================================================================== */
.bandeau:not(.bandeau--accueil) > * {
	--colonne: min(760px, 100%);
	max-width: var(--colonne) !important;
	margin-left: max(0px, calc((100% - var(--colonne)) / 2)) !important;
	margin-right: auto !important;
}
.bandeau:not(.bandeau--accueil) > p:not(.is-style-surtitre) { max-width: min(620px, 100%) !important; }
.bandeau:not(.bandeau--accueil) > hr.is-style-route { width: 100px; }

/* ==========================================================================
   Mise en page éditoriale : texte et image côte à côte
   La photo est un objet de la page, pas une bande entre deux paragraphes.
   ========================================================================== */
.wp-block-columns.duo {
	gap: clamp(32px, 5vw, 80px);
	margin-block: var(--wp--preset--spacing--space-4);
}

.duo-texte > * + * { margin-block-start: var(--wp--preset--spacing--space-4); }
.duo-texte > .wp-block-heading:first-child { margin-top: 0; }

.duo-media { position: relative; }

.duo-media .photo-terrain { margin: 0; position: relative; }

.duo-media .photo-terrain img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: none;
	position: relative;
	z-index: 1;
}

/* Le décalage coloré derrière la photo : un aplat de la charte, pas une ombre. */
.duo-media .photo-terrain::before {
	content: "";
	position: absolute;
	inset: 22px -22px -22px 22px;
	border-radius: var(--radius-lg);
	background: var(--vert-100);
	z-index: 0;
}
.has-vert-100-background-color .duo-media .photo-terrain::before { background: var(--fond); }
.duo--inverse .duo-media .photo-terrain::before { inset: 22px 22px -22px -22px; background: var(--jaune-100); }

.duo-media .photo-terrain figcaption {
	position: relative;
	z-index: 1;
	margin-top: 34px;
	font-size: 14px;
	text-align: left;
	color: var(--encre-douce);
	padding-left: 34px;
}
.duo-media .photo-terrain figcaption::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 24px;
	height: 3px;
	border-radius: 2px;
	background: var(--jaune-500);
}

/* Deux photos : la seconde chevauche le coin de la première. */
.duo-media--collage { padding-bottom: 90px; }
.duo-media--collage .photo-terrain:nth-of-type(1) img { aspect-ratio: 4 / 5; }
.duo-media--collage .photo-terrain:nth-of-type(2) {
	position: absolute;
	width: 58%;
	right: -6%;
	bottom: 0;
	z-index: 2;
}
.duo--inverse .duo-media--collage .photo-terrain:nth-of-type(2) { right: auto; left: -6%; }
.duo-media--collage .photo-terrain:nth-of-type(2) img {
	aspect-ratio: 4 / 3;
	border: 6px solid var(--fond);
	box-shadow: 0 24px 48px rgba(18, 61, 29, 0.22);
}
.duo-media--collage .photo-terrain:nth-of-type(2)::before { display: none; }
.duo-media--collage .photo-terrain:nth-of-type(2) figcaption { display: none; }

/* Entrée en scène : la photo glisse légèrement depuis son côté. */
.duo-media.apparait { transform: translateX(26px); }
.duo--inverse .duo-media.apparait { transform: translateX(-26px); }
.duo-media.apparait.est-visible { transform: none; }

@media (max-width: 781px) {
	.duo-media { order: -1; }
	.duo-media .photo-terrain img { aspect-ratio: 4 / 3; }
	.duo-media .photo-terrain::before { inset: 14px -10px -14px 14px; }
	.duo--inverse .duo-media .photo-terrain::before { inset: 14px 14px -14px -10px; }
	.duo-media--collage { padding-bottom: 70px; }
	.duo-media--collage .photo-terrain:nth-of-type(2) { width: 52%; right: 0; }
	.duo--inverse .duo-media--collage .photo-terrain:nth-of-type(2) { left: 0; }
}

/* Correctifs duo : l'aplat suit la photo seule, pas la légende ; cadrage moins serré. */
.duo-media .photo-terrain::before { display: none; }
.duo-media .photo-terrain img { aspect-ratio: 5 / 4; box-shadow: 22px 22px 0 var(--vert-100); }
.has-vert-100-background-color .duo-media .photo-terrain img { box-shadow: 22px 22px 0 var(--fond); }
.duo--inverse .duo-media .photo-terrain img { box-shadow: -22px 22px 0 var(--jaune-100); }
.duo-media .photo-terrain figcaption { margin-top: 36px; }
/* Collage : pas de légende (elle passait sous la seconde photo), la grande photo un peu plus haute. */
.duo-media--collage .photo-terrain figcaption { display: none; }
.duo-media--collage .photo-terrain:nth-of-type(1) img { aspect-ratio: 4 / 5; }
.duo-media--collage .photo-terrain:nth-of-type(2) img { box-shadow: 0 24px 48px rgba(18, 61, 29, 0.22); }
@media (max-width: 781px) {
	.duo-media .photo-terrain img { aspect-ratio: 4 / 3; box-shadow: 12px 12px 0 var(--vert-100); }
	.duo--inverse .duo-media .photo-terrain img { box-shadow: -12px 12px 0 var(--jaune-100); }
	.duo-media--collage .photo-terrain:nth-of-type(1) img { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   Bandeau d'accueil — la scène (inspiration Dala, charte ALTER & GO)
   Fond vert profond, titre grand et serré, la Gironde en nuage de points.
   ========================================================================== */
.bandeau--accueil {
	padding-block: clamp(48px, 6vw, 88px) !important;
	overflow: hidden;
	position: relative;
	background-image: radial-gradient(ellipse 60% 70% at 78% 50%, rgba(38, 122, 58, 0.55), transparent 70%);
}
.bandeau--accueil .bandeau-contenu { align-items: center; gap: clamp(24px, 4vw, 64px); }
.bandeau--accueil .bandeau-texte { flex: 1 1 520px; max-width: 640px; }
.bandeau--accueil h1 {
	font-size: clamp(42px, 5.6vw, 80px) !important;
	line-height: 1.02;
	letter-spacing: -0.035em;
}
.bandeau--accueil .is-style-surtitre { color: var(--jaune-500); }
.bandeau--accueil p:not(.is-style-surtitre) { color: rgba(255, 255, 255, 0.82); font-size: 19px; }
.bandeau--accueil .wp-block-separator.is-style-route { display: none; }

.carte-hero {
	position: relative;
	flex: 0 1 460px;
	width: min(460px, 100%);
	aspect-ratio: 520 / 620;
	margin-inline: auto;
}
.carte-hero canvas, .carte-hero svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.carte-hero svg { overflow: visible; }

/* Contour : visible tant que les points ne sont pas là, puis presque effacé. */
.carte-hero-contour {
	fill: rgba(255, 255, 255, 0.03);
	stroke: rgba(230, 242, 232, 0.45);
	stroke-width: 1;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: hero-trace 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	transition: stroke 1.2s ease;
}
.carte-hero--prete .carte-hero-contour { stroke: rgba(230, 242, 232, 0.14); }

.carte-hero-liaisons path {
	fill: none;
	stroke: var(--jaune-500);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	opacity: 0.85;
	animation: hero-trace 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.carte-hero-liaisons path:nth-child(1) { animation-delay: 1.2s; }
.carte-hero-liaisons path:nth-child(2) { animation-delay: 1.5s; }
.carte-hero-liaisons path:nth-child(3) { animation-delay: 1.8s; }
@keyframes hero-trace { to { stroke-dashoffset: 0; } }

.carte-hero-bordeaux circle { fill: #fff; opacity: 0.9; }
.carte-hero-bordeaux text { fill: rgba(255, 255, 255, 0.55); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }

.carte-hero-lieu { cursor: pointer; text-decoration: none; opacity: 0; animation: hero-lieu 0.7s ease-out forwards; }
.carte-hero-lieu--medoc { animation-delay: 2.4s; }
.carte-hero-lieu--libournais { animation-delay: 2.7s; }
.carte-hero-lieu--bassin { animation-delay: 3s; }
@keyframes hero-lieu { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.carte-hero-lieu .point { fill: var(--jaune-500); stroke: var(--vert-900); stroke-width: 3; transition: r 0.2s ease; }
.carte-hero-lieu .halo {
	fill: none; stroke: var(--jaune-500); stroke-width: 1.5; opacity: 0;
	transform-box: fill-box; transform-origin: center;
	animation: hero-halo 4.5s ease-out infinite;
}
.carte-hero-lieu--medoc .halo { animation-delay: 3.2s; }
.carte-hero-lieu--libournais .halo { animation-delay: 4.7s; }
.carte-hero-lieu--bassin .halo { animation-delay: 6.2s; }
@keyframes hero-halo { 0% { opacity: 0.7; transform: scale(0.7); } 70%, 100% { opacity: 0; transform: scale(3.2); } }
.carte-hero-lieu text { fill: #fff; }
.carte-hero-lieu .nom { font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.carte-hero-lieu .ville { font-size: 13px; fill: rgba(255, 255, 255, 0.6); }
.carte-hero-lieu:hover .point, .carte-hero-lieu:focus-visible .point { r: 8; }
.carte-hero-lieu:hover .nom, .carte-hero-lieu:focus-visible .nom { fill: var(--jaune-500); }
.carte-hero-lieu:focus-visible { outline: none; }
.carte-hero-lieu:focus-visible .point { stroke: #fff; }

@media (max-width: 781px) {
	.carte-hero { width: min(340px, 92%); margin-top: 8px; }
	.carte-hero-lieu .nom { font-size: 20px; }
	.carte-hero-lieu .ville { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.carte-hero-contour, .carte-hero-liaisons path { animation: none; stroke-dashoffset: 0; }
	.carte-hero-lieu { animation: none; opacity: 1; }
	.carte-hero-lieu .halo { animation: none; }
}

/* Retouches de la scène */
.bandeau--accueil h1 + p, .bandeau--accueil h1 + hr + p { margin-top: var(--wp--preset--spacing--space-6) !important; }
.carte-hero { flex-basis: 520px; width: min(520px, 100%); }
.carte-hero-lieu text, .carte-hero-bordeaux text {
	paint-order: stroke;
	stroke: var(--vert-900);
	stroke-width: 5px;
	stroke-linejoin: round;
}

/* Inscription à la lettre trimestrielle (page Lettre d’information et page prescripteur) : même habillage que le contact, en plus compact. */
.lettre-bloc { scroll-margin-top: 120px; margin-block: var(--wp--preset--spacing--space-4); }
.formulaire-lettre { padding: var(--wp--preset--spacing--space-6); }
.formulaire-lettre .lettre-titre { margin: 0; font-size: 1.15em; }
.lettre-bloc .contact-retour { margin-bottom: var(--wp--preset--spacing--space-4); }

/* Grille de cartes centrée (page Contact) : les colonnes vides de la grille auto ne laissent plus les cartes collées à gauche. */
.wp-block-group.grille-cartes--centree {
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 24rem)) !important;
	justify-content: center;
}

/* Menu du haut sur une seule ligne dès 1200 px : l'en-tête prend jusqu'à 1440 px (au lieu de 1200)
   et les espaces entre entrées se resserrent sur les écrans moyens, au lieu de renvoyer « Contact » à la ligne. */
@media (min-width: 1200px) {
	.en-tete > .alignwide { max-width: min(100%, 1440px) !important; }
	.en-tete .wp-block-navigation,
	.en-tete .wp-block-navigation__container { flex-wrap: nowrap !important; }
	.en-tete .wp-block-navigation,
	.en-tete .wp-block-navigation__container { gap: clamp(14px, 1.6vw, 32px) !important; }
	.en-tete .navigation-et-action { gap: clamp(16px, 1.8vw, 32px); }
}
@media (min-width: 1200px) and (max-width: 1279px) {
	.en-tete .wp-block-image img { width: 80px; height: 80px; }
	.en-tete .bouton-en-tete .wp-block-button__link { padding-inline: 18px; }
}

/* Page Partenaires et financeurs : les logos y sont déjà présentés, pas de bandeau en double (demande de Marion, 20/10/2026). */
.page-id-11 .bande-financeurs { display: none; }

/* Bandeau des financeurs en mobile : deux logos par ligne au lieu d'un, le bandeau compte désormais neuf financeurs. */
@media (max-width: 599px) {
	.logos-financeurs--fixes { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.logos-financeurs--fixes .logo-financeur { width: auto !important; min-width: 0; padding: 12px; }
	.logos-financeurs--fixes .logo-financeur:first-child { grid-column: 1 / -1; }
	.logos-financeurs--fixes .logo-financeur img { max-width: 100%; max-height: 64px; width: auto; height: auto; }
}

/* ==========================================================================
   Schémas animés (assets/js/schemas.js)
   État par défaut = état final, lisible sans JavaScript.
   .schema-pret = état de départ ; .schema-joue = l'animation se déroule.
   ========================================================================== */

.lecteur-ecran {
	position: absolute !important;
	width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.schema-anime { margin: var(--wp--preset--spacing--space-8) auto; position: relative; }
.schema-anime svg { display: block; width: 100%; height: auto; overflow: visible; }
.schema-anime text { font-family: var(--wp--preset--font-family--sans, inherit); }

/* --- Route du parcours ---------------------------------------------------- */

.schema-parcours { max-width: 1000px; }
.schema-parcours-svg--mobile { display: none !important; max-width: 420px; margin-inline: auto; }
@media (max-width: 700px) {
	.schema-parcours-svg--large { display: none !important; }
	.schema-parcours-svg--mobile { display: block !important; }
}

.parcours-route-bord { fill: none; stroke: var(--vert-100); stroke-width: 58; stroke-linecap: round; }
.parcours-route { fill: none; stroke: #3B4A41; stroke-width: 40; stroke-linecap: round; }
.parcours-route-ligne { fill: none; stroke: #fff; stroke-width: 3; stroke-dasharray: 14 14; stroke-linecap: round; opacity: .85; }

.borne-halo { fill: var(--c); opacity: .18; }
.borne-disque { fill: var(--c); stroke: #fff; stroke-width: 5; }
.borne-num { font-size: 22px; font-weight: 800; fill: #fff; }
.borne-titre { font-size: 23px; font-weight: 800; fill: var(--encre); }
.borne-sous { font-size: 17px; fill: var(--encre-douce); }
.borne-titre--m { font-size: 25px; }
.borne-sous--m { font-size: 19px; }

.parcours-ref-texte { font-size: 19px; font-weight: 700; fill: var(--vert-800); }
.parcours-ref-texte--m { font-size: 18px; }
.parcours-ping { fill: none; stroke: var(--jaune-600); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.parcours-duree path { stroke: var(--jaune-600); stroke-width: 3; fill: none; }
.parcours-duree text { font-size: 19px; font-weight: 800; fill: var(--vert-800); }

.voiture-mobile { display: none; }

/* Avec JavaScript : état de départ */
.schema-pret.schema-parcours .voiture-fixe { display: none; }
.schema-pret.schema-parcours .voiture-mobile { display: inline; }
.schema-pret.schema-parcours .voiture-mobile { opacity: 0; }
.schema-pret .parcours-borne .borne-disque { fill: #C9D3CC; }
.schema-pret .parcours-borne .borne-halo { opacity: 0; }
.schema-pret .parcours-borne text.borne-titre,
.schema-pret .parcours-borne text.borne-sous { opacity: 0; }
.schema-pret .parcours-ping,
.schema-pret .parcours-referent,
.schema-pret .parcours-duree { opacity: 0; }

/* Lecture */
.schema-joue.schema-parcours .voiture-mobile { opacity: 1; transition: opacity .3s; }
.schema-joue .parcours-borne .borne-disque { animation: borne-allume .5s ease-out var(--t) forwards; }
.schema-joue .parcours-borne .borne-halo { animation: borne-halo 1.2s ease-out var(--t) forwards, borne-respire 3.2s ease-in-out calc(var(--t) + 1.2s) infinite; }
.schema-joue .parcours-borne text.borne-titre,
.schema-joue .parcours-borne text.borne-sous { animation: texte-monte .6s ease-out calc(var(--t) + .1s) forwards; }
.schema-joue .parcours-referent { animation: fondu .6s ease-out 1s forwards; }
/* Le badge « référent » envoie une onde à chaque borne franchie (toutes les 1,4 s environ). */
.schema-joue .parcours-ping { animation: ping 1.4s ease-out .9s 5; }
.schema-joue .parcours-duree { animation: fondu .8s ease-out 6.6s forwards; }

@keyframes borne-allume { 0% { fill: #C9D3CC; transform: scale(1); } 60% { fill: var(--c); } 100% { fill: var(--c); } }
@keyframes borne-halo { 0% { opacity: 0; r: 22; } 40% { opacity: .45; } 100% { opacity: .18; r: 30; } }
@keyframes borne-respire { 0%, 100% { opacity: .18; } 50% { opacity: .32; } }
@keyframes texte-monte { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fondu { to { opacity: 1; } }
@keyframes ping { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18, 1.6); } }
.parcours-borne text { transform-box: fill-box; }

/* --- Chemin du permis ------------------------------------------------------ */

.schema-permis { max-width: 1120px; display: grid; grid-template-columns: 70px 1fr; gap: 24px; align-items: start; }
.permis-feu svg { width: 60px; height: auto; position: sticky; top: 120px; }
.feu { fill: #3C463F; }
.feu--vert { fill: #2ECC5C; filter: drop-shadow(0 0 8px #2ECC5C); }

.permis-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; position: relative; }
.permis-etapes::before { content: ""; position: absolute; left: 6%; right: 6%; top: 52px; border-top: 4px dashed var(--jaune-600); z-index: 0; }
.permis-etape { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.permis-etape strong { font-size: 1.05rem; color: var(--encre); margin-top: 6px; }
.permis-etape span { font-size: .92rem; color: var(--encre-douce); line-height: 1.4; }
.panneau { width: 104px; height: 104px; filter: drop-shadow(0 6px 10px rgba(22, 56, 40, .18)); }
.panneau-question { font: 800 46px/1 var(--wp--preset--font-family--sans, sans-serif); fill: #26302A; }
.panneau-coche { opacity: 0; }
.panneau-euro { font: 800 52px/1 var(--wp--preset--font-family--sans, sans-serif); fill: #fff; }
.permis-jetons { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.permis-jetons em { font-style: normal; font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--jaune-100); color: var(--vert-800); border: 1px solid var(--jaune-500); }
.schema-chiffre { grid-column: 1 / -1; text-align: center; font-size: 1.1rem; color: var(--encre); margin-top: 10px; }
.schema-chiffre-valeur { display: inline-block; font-size: 2.6rem; font-weight: 800; color: var(--vert-700); margin-right: 8px; vertical-align: -6px; font-variant-numeric: tabular-nums; }

/* état final sans JS : le « ? » laisse place à la coche */
.schema-permis:not(.schema-pret) .panneau-question { opacity: 0; }
.schema-permis:not(.schema-pret) .panneau-coche { opacity: 1; }

/* état de départ */
.schema-pret.schema-permis .feu--vert { fill: #3C463F; filter: none; }
.schema-pret .permis-etape { opacity: .25; transform: translateY(14px) scale(.96); }
.schema-pret .permis-jetons em { opacity: 0; transform: translateY(-18px); }
.schema-pret.schema-permis .permis-etapes::before { clip-path: inset(0 100% 0 0); }

/* lecture : 0,8 s par étape */
.schema-joue.schema-permis .feu--rouge { animation: feu-rouge 1.6s linear 0s 1; }
.schema-joue.schema-permis .feu--orange { animation: feu-orange 1.6s linear 1.6s 1; }
.schema-joue.schema-permis .feu--vert { animation: feu-vert .4s ease-out 3.6s forwards; }
.schema-joue.schema-permis .permis-etapes::before { animation: route-se-trace 4s linear .2s forwards; }
.schema-joue .permis-etape { animation: etape-arrive .6s cubic-bezier(.2, .8, .3, 1.2) calc(.3s + var(--n) * .8s) forwards; }
.schema-joue .permis-jetons em { animation: jeton-tombe .5s cubic-bezier(.3, 1.6, .5, 1) calc(2s + var(--j) * .18s) forwards; }
.schema-joue .panneau-question { animation: fondu-sortie .3s ease-in 1.5s forwards; }
.schema-joue .panneau-coche { stroke-dasharray: 60; stroke-dashoffset: 60; opacity: 1; animation: coche 0.5s ease-out 1.7s forwards; }
.schema-joue .panneau-voiture { animation: voiture-roule 1.4s ease-in-out 2.8s 2 alternate; }
.schema-joue .permis-carte { transform-box: fill-box; transform-origin: center; animation: carte-retourne .8s ease-out 3.5s; }

@keyframes feu-rouge { 0%, 100% { fill: #E5383B; filter: drop-shadow(0 0 8px #E5383B); } }
@keyframes feu-orange { 0%, 100% { fill: #F5A623; filter: drop-shadow(0 0 8px #F5A623); } }
@keyframes feu-vert { to { fill: #2ECC5C; filter: drop-shadow(0 0 8px #2ECC5C); } }
@keyframes route-se-trace { to { clip-path: inset(0 0 0 0); } }
@keyframes etape-arrive { to { opacity: 1; transform: none; } }
@keyframes jeton-tombe { to { opacity: 1; transform: none; } }
@keyframes fondu-sortie { to { opacity: 0; } }
@keyframes coche { to { stroke-dashoffset: 0; } }
@keyframes voiture-roule { to { transform: translateX(6px); } }
@keyframes carte-retourne { 0% { transform: rotateY(90deg) scale(.8); } 100% { transform: none; } }

@media (max-width: 780px) {
	.schema-permis { grid-template-columns: 56px 1fr; gap: 14px; }
	.permis-feu svg { width: 48px; }
	.permis-etapes { grid-template-columns: 1fr; gap: 14px; }
	.permis-etapes::before { left: 50px; right: auto; top: 20px; bottom: 20px; border-top: 0; border-left: 4px dashed var(--jaune-600); }
	.schema-pret.schema-permis .permis-etapes::before { clip-path: inset(0 0 100% 0); }
	.permis-etape { display: grid; grid-template-columns: 104px 1fr; text-align: left; column-gap: 14px; align-items: center; }
	.permis-etape .panneau { grid-row: 1 / span 2; }
	.permis-etape strong { margin: 0; align-self: end; }
	.permis-etape span { align-self: start; }
	.permis-jetons { justify-content: flex-start; }
	.schema-chiffre-valeur { display: block; margin: 0 0 4px; }
}

/* --- Véhicules : un territoire, une solution -------------------------------- */

.schema-vehicules { max-width: 1120px; }
.vehicules-voies { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.vehicules-voie { background: var(--fond, #fff); border: 1px solid var(--filet); border-radius: var(--radius-lg, 18px); box-shadow: var(--ombre-carte); overflow: hidden; display: flex; flex-direction: column; }
.voie-route { position: relative; height: 112px; background: linear-gradient(to bottom, var(--vert-100) 0 64%, #3B4A41 64% 100%); display: flex; align-items: flex-end; gap: 4px; padding: 0 12px 10px; overflow: hidden; }
.voie-route::after { content: ""; position: absolute; left: 0; right: 0; bottom: 18px; border-top: 3px dashed rgba(255, 255, 255, .7); }
.voie-panneau { position: absolute; top: 10px; right: 10px; background: var(--vert-700); color: #fff; font-weight: 800; font-size: .82rem; padding: 4px 10px; border-radius: 6px; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); z-index: 2; }
.engin { position: relative; z-index: 1; width: 62px; height: auto; flex: 0 0 auto; overflow: visible; }
.engin .roue { fill: none; stroke: var(--encre); stroke-width: 5; transform-box: fill-box; transform-origin: center; }
.engin .roue path { stroke-width: 2; opacity: .6; }
.engin .cadre { fill: none; stroke: var(--vert-700); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.engin--vae .cadre { stroke: var(--vert-500); }
.engin .batterie { fill: var(--jaune-500); }
.engin .eclair { fill: var(--jaune-600); }
.engin .carrosserie { fill: var(--jaune-500); }
.engin .selle { fill: var(--encre); }
.vehicules-voie p { margin: 0; padding: 14px 16px 18px; font-size: .95rem; line-height: 1.5; color: var(--encre-douce); }
.vehicules-voie p strong { color: var(--encre); }
.vehicules-dons { text-align: center; margin-top: 18px; font-size: 1rem; color: var(--encre); }
.vehicules-dons svg { width: 20px; height: 20px; fill: #D2405A; vertical-align: -4px; margin-right: 4px; }

/* état de départ : les engins attendent hors champ, à gauche */
.schema-pret .engin { transform: translateX(-340px); }
.schema-pret .vehicules-voie { opacity: 0; transform: translateY(16px); }
.schema-pret .vehicules-dons svg { transform: scale(0); }

/* lecture */
.schema-joue .vehicules-voie { animation: etape-arrive .5s ease-out calc(var(--n) * .25s) forwards; }
.schema-joue .engin { animation: engin-arrive 1.6s cubic-bezier(.25, .8, .35, 1) calc(.3s + var(--n) * .25s) forwards; }
.schema-joue .engin:nth-of-type(2) { animation-delay: calc(.5s + var(--n) * .25s); }
.schema-joue .engin:nth-of-type(3) { animation-delay: calc(.7s + var(--n) * .25s); }
.schema-joue .engin .roue { animation: roue-tourne .5s linear calc(.3s + var(--n) * .25s) 4; }
.schema-joue .engin .eclair { animation: eclair-clignote 1.8s ease-in-out 2.4s infinite; }
.schema-joue .vehicules-dons svg { animation: coeur-bat 1s cubic-bezier(.3, 1.6, .5, 1) 2.6s forwards; }

@keyframes engin-arrive { to { transform: none; } }
@keyframes roue-tourne { to { transform: rotate(360deg); } }
@keyframes eclair-clignote { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes coeur-bat { 0% { transform: scale(0); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }

@media (max-width: 960px) { .vehicules-voies { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vehicules-voies { grid-template-columns: 1fr; } }
/* Tailles des petits dessins (plus précises que la règle générale .schema-anime svg). */
.schema-anime .engin { width: 64px; display: block; }
.schema-anime .panneau { width: 104px; height: 104px; }
.schema-anime .permis-feu svg { width: 60px; }
.schema-anime .vehicules-dons svg { display: inline-block; width: 20px; height: 20px; }
@media (max-width: 780px) { .schema-anime .permis-feu svg { width: 48px; } }
.schema-anime .engin { width: 84px; margin-bottom: -4px; }
.voie-route { height: 128px; gap: 0; padding: 0 10px 8px; background: linear-gradient(to bottom, var(--vert-100) 0 72%, #3B4A41 72% 100%); }
.voie-route::after { bottom: 15px; }
@media (max-width: 560px) { .schema-anime .engin { width: 96px; } }

/* --- Réparer, acheter, financer ----------------------------------------------- */

.schema-financer { max-width: 1060px; }
.schema-anime .financer-scene { max-width: 900px; margin: 0 auto 10px; }
.financer-voiture { transform: translateX(300px); }
.financer-fumee circle { fill: #9AA59E; opacity: 0; transform-box: fill-box; transform-origin: center; }
.financer-feu { fill: #F5A623; }
.financer-cle { opacity: 0; transform-box: fill-box; transform-origin: 80% 20%; }
.financer-ok { transform-box: fill-box; transform-origin: center; }
.financer-vitesse { opacity: 0; }
.schema-financer .roue { transform-box: fill-box; transform-origin: center; }

.financer-cartes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.financer-cartes li { background: var(--fond, #fff); border: 1px solid var(--filet); border-top: 5px solid var(--jaune-500); border-radius: var(--radius-lg, 18px); box-shadow: var(--ombre-carte); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.financer-cartes strong { font-size: 1.08rem; color: var(--encre); }
.financer-cartes li > span:last-child { font-size: .95rem; line-height: 1.5; color: var(--encre-douce); }
.financer-pastille { align-self: flex-start; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--vert-700); }
.financer-montant { color: var(--vert-700); font-size: 1.15em; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* départ : voiture en panne au milieu, fumée, feux de détresse */
.schema-pret .financer-voiture { transform: translateX(150px); }
.schema-pret .financer-ok { transform: scale(0); }
.schema-pret .financer-cartes li { opacity: 0; transform: translateY(18px); }

.schema-joue .financer-fumee circle { animation: fumee 1.4s ease-out 0s 2; }
.schema-joue .financer-fumee circle:nth-child(2) { animation-delay: .45s; }
.schema-joue .financer-fumee circle:nth-child(3) { animation-delay: .9s; }
.schema-joue .financer-feu { animation: detresse .5s steps(1) 0s 6; }
.schema-joue .financer-cle { animation: cle-repare 1.3s ease-in-out 1.4s 1; }
.schema-joue .financer-ok { animation: ok-pop .5s cubic-bezier(.3, 1.6, .5, 1) 2.7s forwards; }
.schema-joue .financer-voiture { animation: voiture-repart 1.6s cubic-bezier(.5, 0, .3, 1) 3.1s forwards; }
.schema-joue .financer-scene .roue { animation: roue-tourne .45s linear 3.1s 4; }
.schema-joue .financer-vitesse { animation: vitesse 1.2s ease-out 3.4s 1; }
.schema-joue .financer-cartes li { animation: etape-arrive .6s ease-out calc(1.4s + var(--n) * .7s) forwards; }

@keyframes fumee { 0% { opacity: .8; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(-20px, -70px) scale(1.8); } }
@keyframes detresse { 50% { fill: #3B4A41; } }
@keyframes cle-repare { 0% { opacity: 0; transform: rotate(-40deg); } 20% { opacity: 1; } 50% { transform: rotate(30deg); } 80% { opacity: 1; transform: rotate(-20deg); } 100% { opacity: 0; transform: rotate(0); } }
@keyframes ok-pop { to { transform: scale(1); } }
@keyframes voiture-repart { from { transform: translateX(150px); } to { transform: translateX(300px); } }
@keyframes vitesse { 0% { opacity: 0; transform: translateX(160px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(60px); } }

@media (max-width: 860px) { .financer-cartes { grid-template-columns: 1fr; } }

/* --- Points Info Mobilité --------------------------------------------------- */

.schema-points-info { max-width: 1000px; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 40px; align-items: center; }
.schema-anime .pim-radar { max-width: 400px; }
.pim-ondes circle { fill: none; stroke: var(--vert-500); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pim-balayage { transform-origin: 200px 200px; opacity: .9; }
.pim-points circle { fill: var(--jaune-500); stroke: #fff; stroke-width: 4; transform-box: fill-box; transform-origin: center; }
.pim-titre { font-weight: 800; font-size: 1.05rem; color: var(--vert-800); margin: 0 0 8px; }
.pim-lieux, .pim-questions { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pim-lieux li { padding: 6px 14px; border-radius: 999px; background: var(--vert-700); color: #fff; font-weight: 700; font-size: .92rem; }
.pim-questions li { padding: 6px 14px; border-radius: 16px 16px 16px 4px; background: var(--jaune-100); color: var(--vert-800); border: 1px solid var(--jaune-500); font-size: .92rem; }
.pim-questions li::after { content: " ?"; }
.schema-chiffre--gauche { text-align: left; margin: 6px 0 0; }

/* animation continue (douce) une fois lancée ; figée sans JS */
.schema-joue .pim-ondes circle { animation: onde 3s ease-out var(--o) infinite; }
.schema-joue .pim-balayage { animation: balayage 6s linear infinite; }
.schema-pret .pim-balayage { opacity: 0; }
.schema-joue .pim-balayage { opacity: .9; }
.schema-pret .pim-points circle { transform: scale(0); }
.schema-pret .pim-lieux li, .schema-pret .pim-questions li { opacity: 0; transform: translateY(10px) scale(.95); }
.schema-joue .pim-points circle { animation: point-pop .45s cubic-bezier(.3, 1.6, .5, 1) calc(.4s + var(--n) * .35s) forwards, point-pulse 2.4s ease-in-out calc(2.4s + var(--n) * .3s) infinite; }
.schema-joue .pim-lieux li { animation: etape-arrive .45s ease-out calc(.45s + var(--n) * .35s) forwards; }
.schema-joue .pim-questions li { animation: bulle .5s cubic-bezier(.3, 1.5, .5, 1) calc(2.2s + var(--q) * .2s) forwards; }

@keyframes onde { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(4.6); } }
@keyframes balayage { to { transform: rotate(360deg); } }
@keyframes point-pop { to { transform: scale(1); } }
@keyframes point-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@keyframes bulle { to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
	.schema-points-info { grid-template-columns: 1fr; gap: 18px; }
	.schema-anime .pim-radar { max-width: 300px; margin-inline: auto; }
}

/* Réduction des animations : tout figé, état final. */
@media (prefers-reduced-motion: reduce) {
	.schema-anime *, .schema-anime *::before { animation: none !important; transition: none !important; }
}


/* ==========================================================================
   Accueil — « Comment se passe un accompagnement » animé
   Les blocs restent modifiables dans l'éditeur ; tout le décor est en CSS.
   Sans JS / « réduire les animations » : état final (voiture à l'arrivée).
   ========================================================================== */

.parcours.schema-anime { --g: var(--wp--preset--spacing--space-6); --col: calc((100% - 3 * var(--g)) / 4); margin-block: 0; }
.parcours.schema-anime::before {
	left: calc(var(--col) / 2); right: calc(var(--col) / 2);
	border-top: 0; height: 4px;
	background: repeating-linear-gradient(90deg, var(--jaune-500) 0 12px, transparent 12px 22px);
}
/* la voiture, posée sur le pointillé, au-dessus des pastilles */
.parcours.schema-anime::after {
	content: ""; position: absolute; z-index: 2; width: 64px; height: 36px;
	top: calc(var(--wp--preset--spacing--space-8) + 26px - 31px);
	left: calc(var(--col) * 3.5 + var(--g) * 3 - 88px);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 36'%3E%3Cpath d='M6 24c0-6 4-8 9-8l8-8c2-2 4-2 6-2h12c3 0 4 1 6 3l7 7c6 0 9 3 9 8v3H6z' fill='%231D5F2D'/%3E%3Cpath d='M25 16l6-7h7v7zM41 16V9h5l6 7z' fill='%23EAF4EC'/%3E%3Ccircle cx='18' cy='28' r='6' fill='%231E2420'/%3E%3Ccircle cx='50' cy='28' r='6' fill='%231E2420'/%3E%3Ccircle cx='18' cy='28' r='2.4' fill='%23fff'/%3E%3Ccircle cx='50' cy='28' r='2.4' fill='%23fff'/%3E%3Ccircle cx='62' cy='22' r='2' fill='%23FBB41A'/%3E%3C/svg%3E") center / contain no-repeat;
	filter: drop-shadow(0 4px 4px rgba(22, 56, 40, .2));
}
.parcours.schema-anime .parcours-etape::after {
	content: ""; position: absolute; top: -8px; left: calc(50% + 16px); width: 30px; height: 30px; border-radius: 50%;
	background: var(--jaune-500) center / 18px no-repeat; box-shadow: 0 0 0 3px var(--fond); z-index: 1;
}
.parcours.schema-anime .parcours-etape:nth-child(1)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23163828' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); }
.parcours.schema-anime .parcours-etape:nth-child(2)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23163828' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 3h6v3H9zM8.5 12l2 2 4-4M8.5 17h7'/%3E%3C/svg%3E"); }
.parcours.schema-anime .parcours-etape:nth-child(3)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23163828' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M11 12l9-9M17 6l3 3M14 9l2 2'/%3E%3C/svg%3E"); }
.parcours.schema-anime .parcours-etape:nth-child(4)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23163828' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4M5 4h11l-2 4 2 4H5'/%3E%3C/svg%3E"); }
.parcours.schema-anime .parcours-num { position: relative; }

/* état de départ */
.parcours.schema-pret::before { clip-path: inset(0 100% 0 0); }
.parcours.schema-pret::after { left: calc(var(--col) * .5 - 88px); opacity: 0; }
.parcours.schema-pret .parcours-num { background: #C9D3CC; }
.parcours.schema-pret .parcours-etape::after { transform: scale(0); }
.parcours.schema-pret .parcours-etape > :not(.parcours-num) { opacity: 0; transform: translateY(10px); }

/* lecture : arrivée aux étapes à 0,2 s, 1,4 s, 2,8 s et 4,2 s */
.parcours.schema-joue { --t1: .2s; --t2: 1.4s; --t3: 2.8s; --t4: 4.2s; }
.parcours.schema-joue::before { animation: parcours-trace 5s linear forwards, parcours-defile 1.2s linear 5s infinite; }
.parcours.schema-joue::after { animation: parcours-voiture 5s linear forwards; }
.parcours.schema-joue .parcours-etape:nth-child(1) { --t: var(--t1); }
.parcours.schema-joue .parcours-etape:nth-child(2) { --t: var(--t2); }
.parcours.schema-joue .parcours-etape:nth-child(3) { --t: var(--t3); }
.parcours.schema-joue .parcours-etape:nth-child(4) { --t: var(--t4); }
.parcours.schema-joue .parcours-num { animation: parcours-allume .5s ease-out var(--t) forwards, parcours-onde 1.1s ease-out var(--t) 1; }
.parcours.schema-joue .parcours-etape::after { animation: parcours-picto .5s cubic-bezier(.3, 1.6, .5, 1) calc(var(--t) + .25s) forwards; }
.parcours.schema-joue .parcours-etape:nth-child(4)::after { animation: parcours-picto .5s cubic-bezier(.3, 1.6, .5, 1) calc(var(--t) + .25s) forwards, parcours-drapeau 1.6s ease-in-out calc(var(--t) + 1s) 1; }
.parcours.schema-joue .parcours-etape > :not(.parcours-num) { animation: texte-monte .6s ease-out calc(var(--t) + .15s) forwards; }

@keyframes parcours-trace { 0%, 8% { clip-path: inset(0 100% 0 0); } 28%, 36% { clip-path: inset(0 66.67% 0 0); } 56%, 64% { clip-path: inset(0 33.33% 0 0); } 84%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes parcours-defile { to { background-position: 22px 0; } }
@keyframes parcours-voiture {
	0% { left: calc(var(--col) * .5 - 88px); opacity: 0; } 4% { opacity: 1; } 8% { left: calc(var(--col) * .5 - 88px); opacity: 1; }
	28%, 36% { left: calc(var(--col) * 1.5 + var(--g) - 88px); opacity: 1; }
	56%, 64% { left: calc(var(--col) * 2.5 + var(--g) * 2 - 88px); opacity: 1; }
	84%, 100% { left: calc(var(--col) * 3.5 + var(--g) * 3 - 88px); opacity: 1; }
}
@keyframes parcours-allume { from { background: #C9D3CC; transform: scale(.9); } 60% { transform: scale(1.12); } to { background: var(--vert-500); transform: none; } }
@keyframes parcours-onde { 0% { box-shadow: 0 0 0 6px var(--fond), 0 0 0 6px rgba(38, 122, 58, .45); } 100% { box-shadow: 0 0 0 6px var(--fond), 0 0 0 26px rgba(38, 122, 58, 0); } }
@keyframes parcours-picto { to { transform: none; } }
@keyframes parcours-drapeau { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(10deg); } }

/* mobile : trait vertical, pas de voiture */
@media (max-width: 899px) {
	.parcours.schema-anime::before { border: 0; left: 26px; right: auto; width: 4px; height: auto; background: repeating-linear-gradient(180deg, var(--jaune-500) 0 12px, transparent 12px 22px); }
	.parcours.schema-anime::after { display: none; }
	.parcours.schema-anime .parcours-etape::after { top: -6px; left: 38px; width: 26px; height: 26px; background-size: 16px; }
	.parcours.schema-pret::before { clip-path: inset(0 0 100% 0); }
	@keyframes parcours-trace { 0%, 8% { clip-path: inset(0 0 100% 0); } 28%, 36% { clip-path: inset(0 0 66.67% 0); } 56%, 64% { clip-path: inset(0 0 33.33% 0); } 84%, 100% { clip-path: inset(0 0 0 0); } }
	@keyframes parcours-defile { to { background-position: 0 22px; } }
}

/* --- Circuit d'une orientation (page prescripteurs) -------------------------- */

.schema-orientation { max-width: 1060px; }
.schema-anime .orientation-scene { max-width: 1000px; margin-inline: auto; }
.orientation-fil { fill: none; stroke: var(--jaune-500); stroke-width: 3; stroke-dasharray: 8 9; }
.orientation-fil--retour { stroke: var(--vert-500); }
.orientation-nom { font-size: 21px; font-weight: 800; fill: var(--encre); }
.orientation-pastille { font-size: 11px; font-weight: 800; fill: #fff; letter-spacing: .08em; }
.orientation-msg { transform-box: view-box; opacity: 0; }
.orientation-msg--fiche { transform: translate(500px, 130px); }
.orientation-msg--courriel { transform: translate(850px, 130px); }
.orientation-msg--retour { transform: translate(150px, 170px); }
.orientation-aiguille { transform-box: view-box; transform-origin: 625px 215px; }
.orientation-jauge { transform-box: fill-box; transform-origin: left center; }
.orientation-etapes { list-style: none; counter-reset: oe; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 22px; }
.orientation-etapes li { counter-increment: oe; position: relative; padding: 12px 14px 12px 52px; border-radius: 14px; background: var(--fond, #fff); border: 1px solid var(--filet); font-size: .94rem; line-height: 1.45; color: var(--encre-douce); }
.orientation-etapes li::before { content: counter(oe); position: absolute; left: 12px; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: var(--vert-500); color: #fff; font-weight: 800; font-size: .9rem; display: grid; place-items: center; }
.orientation-etapes strong { display: block; color: var(--encre); }

/* départ */
.schema-pret .orientation-msg { opacity: 0; }
.schema-pret .orientation-tel, .schema-pret .orientation-horloge, .schema-pret .orientation-plan { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; }
.schema-pret .orientation-coches { stroke-dasharray: 40; stroke-dashoffset: 40; }
.schema-pret .orientation-jauge { transform: scaleX(0); }
.schema-pret .orientation-etapes li { opacity: .35; }
.schema-pret .orientation-etapes li::before { background: #C9D3CC; }

/* lecture (9 s, rejouée en boucle) */
.schema-joue .orientation-msg--fiche { animation: om-fiche 1.3s ease-in-out .3s both; }
.schema-joue .orientation-msg--courriel { animation: om-courriel 1s ease-in-out 1.6s both; }
.schema-joue .orientation-tel { animation: om-pop .4s ease-out 2.6s forwards, om-sonne .12s linear 2.8s 8 alternate; }
.schema-joue .orientation-horloge { animation: om-pop .4s ease-out 3.8s forwards; }
.schema-joue .orientation-aiguille { animation: om-tour 1.2s linear 4s 1; }
.schema-joue .orientation-plan { animation: om-pop .4s ease-out 4.6s forwards; }
.schema-joue .orientation-coches { animation: coche .6s ease-out 4.9s forwards; }
.schema-joue .orientation-jauge { animation: om-jauge 1.2s ease-out 5.4s forwards; }
.schema-joue .orientation-msg--retour { animation: om-retour 1.3s ease-in-out 6.6s both; }
.schema-joue .orientation-etapes li { animation: om-li .5s ease-out var(--t) forwards; }
.schema-joue .orientation-etapes li::before { animation: om-num .5s ease-out var(--t) forwards; }

@keyframes om-fiche { 0% { opacity: 0; transform: translate(150px, 130px); } 10% { opacity: 1; } 50% { transform: translate(325px, 70px) rotate(-8deg); } 85% { opacity: 1; transform: translate(500px, 130px) scale(1); } 100% { opacity: 0; transform: translate(500px, 130px) scale(.3); } }
@keyframes om-courriel { 0% { opacity: 0; transform: translate(500px, 130px); } 10% { opacity: 1; } 50% { transform: translate(675px, 70px); } 85% { opacity: 1; transform: translate(850px, 130px) scale(1); } 100% { opacity: 0; transform: translate(850px, 130px) scale(.3); } }
@keyframes om-retour { 0% { opacity: 0; transform: translate(500px, 170px); } 10% { opacity: 1; } 50% { transform: translate(325px, 230px) rotate(6deg); } 85% { opacity: 1; transform: translate(150px, 170px) scale(1); } 100% { opacity: 0; transform: translate(150px, 170px) scale(.3); } }
@keyframes om-pop { to { opacity: 1; transform: none; } }
@keyframes om-sonne { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
@keyframes om-tour { to { transform: rotate(360deg); } }
@keyframes om-jauge { to { transform: none; } }
@keyframes om-li { to { opacity: 1; } }
@keyframes om-num { to { background: var(--vert-500); } }

@media (max-width: 860px) { .orientation-etapes { grid-template-columns: 1fr; } .orientation-nom { font-size: 26px; } }

/* --- Écran Movelya qui se construit ------------------------------------------- */

.schema-movelya { max-width: 1080px; }
.mv-fenetre { border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 24px 60px rgba(22, 56, 40, .18), 0 0 0 1px var(--filet); }
.mv-barre { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--vert-800); }
.mv-barre i { width: 11px; height: 11px; border-radius: 50%; background: #E5383B; }
.mv-barre i:nth-child(2) { background: #F5A623; } .mv-barre i:nth-child(3) { background: #2ECC5C; }
.mv-barre span { margin-left: 10px; color: #fff; font-weight: 800; font-size: .92rem; letter-spacing: .02em; }
.mv-corps { display: grid; grid-template-columns: 200px 1fr; min-height: 340px; }
.mv-menu { list-style: none; margin: 0; padding: 14px 10px; background: var(--vert-100); display: flex; flex-direction: column; gap: 4px; }
.mv-menu li { padding: 8px 12px; border-radius: 8px; font-size: .9rem; font-weight: 700; color: var(--vert-800); display: flex; align-items: center; gap: 8px; }
.mv-menu li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--vert-500); flex: 0 0 auto; }
.mv-tuiles { list-style: none; margin: 0; padding: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; background: #F7FAF8; }
.mv-tuiles li { background: #fff; border: 1px solid var(--filet); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.schema-anime .mv-tuiles svg { width: 100%; height: auto; }
.mv-tuiles span { font-size: .82rem; font-weight: 700; color: var(--encre); line-height: 1.3; }
.mv-ligne { fill: #D8E2DB; transform-box: fill-box; transform-origin: left center; }
.mv-resa { fill: var(--vert-500); transform-box: fill-box; transform-origin: left center; }
.mv-badge text { font: 800 12px/1 var(--wp--preset--font-family--sans, sans-serif); fill: var(--vert-800); }
.mv-badge { transform-box: fill-box; transform-origin: center; }
.mv-anneau { stroke-dasharray: 151; stroke-dashoffset: 30; }
.mv-isochrone { transform-box: fill-box; transform-origin: center; }
.mv-onde rect { transform-box: fill-box; transform-origin: center; }
.mv-barres rect { transform-box: fill-box; transform-origin: bottom center; }
.mv-legende { text-align: center; font-size: .82rem; color: var(--encre-douce); margin-top: 10px; }

/* départ */
.schema-pret .mv-menu li { opacity: 0; transform: translateX(-14px); }
.schema-pret .mv-tuiles li { opacity: 0; transform: scale(.85); }
.schema-pret .mv-ligne, .schema-pret .mv-resa { transform: scaleX(0); }
.schema-pret .mv-badge { transform: scale(0); }
.schema-pret .mv-coche { stroke-dasharray: 30; stroke-dashoffset: 30; }
.schema-pret .mv-signature { stroke-dasharray: 80; stroke-dashoffset: 80; }
.schema-pret .mv-anneau { stroke-dashoffset: 151; }
.schema-pret .mv-isochrone { transform: scale(.2); }
.schema-pret .mv-barres rect { transform: scaleY(0); }

/* lecture : un module toutes les 0,45 s, le menu d'abord */
.schema-joue .mv-menu li { animation: etape-arrive .4s ease-out calc(.2s + var(--n) * .45s) forwards; }
.schema-joue .mv-tuiles li { animation: mv-tuile .5s cubic-bezier(.3, 1.4, .5, 1) calc(.35s + var(--n) * .45s) forwards; }
.schema-joue .mv-tuiles li:nth-child(1) .mv-ligne { animation: mv-trait .5s ease-out calc(.7s + var(--k) * .25s) forwards; }
.schema-joue .mv-badge { animation: point-pop .45s cubic-bezier(.3, 1.6, .5, 1) 1.3s forwards, point-pulse 2s ease-in-out 2s infinite; }
.schema-joue .mv-coche { animation: coche .6s ease-out 1.7s forwards; }
.schema-joue .mv-signature { animation: mv-signe 1s ease-out 2.1s forwards; }
.schema-joue .mv-resa { animation: mv-trait .6s ease-out calc(2.1s + var(--k) * .3s) forwards; }
.schema-joue .mv-anneau { animation: mv-anneau 1.2s ease-out 2.5s forwards; }
.schema-joue .mv-isochrone { animation: mv-iso 1.4s ease-out 3s forwards, mv-iso-respire 3s ease-in-out 4.4s infinite; }
.schema-joue .mv-onde rect { animation: mv-onde .6s ease-in-out calc(3.4s + var(--k) * .12s) infinite alternate; }
.schema-joue .mv-tuiles li:nth-child(7) .mv-ligne { animation: mv-trait 1.6s ease-out 3.6s forwards; }
.schema-joue .mv-barres rect { animation: mv-barre .7s cubic-bezier(.3, 1.3, .5, 1) calc(3.8s + var(--k) * .15s) forwards; }

@keyframes mv-tuile { to { opacity: 1; transform: none; } }
@keyframes mv-trait { to { transform: none; } }
@keyframes mv-signe { to { stroke-dashoffset: 0; } }
@keyframes mv-anneau { to { stroke-dashoffset: 30; } }
@keyframes mv-iso { to { transform: none; } }
@keyframes mv-iso-respire { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes mv-onde { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes mv-barre { to { transform: none; } }

@media (max-width: 860px) {
	.mv-corps { grid-template-columns: 1fr; }
	.mv-menu { display: none; }
	.mv-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; gap: 10px; }
}
/* Movelya : une fois l'écran construit, la sélection parcourt les modules (8 s par tour). */
.schema-joue .mv-menu li { animation: etape-arrive .4s ease-out calc(.2s + var(--n) * .45s) forwards, mv-actif 8s ease-in-out calc(4.6s + var(--n) * 1s) infinite; }
.schema-joue .mv-tuiles li { animation: mv-tuile .5s cubic-bezier(.3, 1.4, .5, 1) calc(.35s + var(--n) * .45s) forwards, mv-tuile-active 8s ease-in-out calc(4.6s + var(--n) * 1s) infinite; }
@keyframes mv-actif { 0%, 12.5%, 100% { background-color: rgba(255, 255, 255, 0); box-shadow: 0 2px 8px rgba(22, 56, 40, 0); } 2%, 10% { background-color: rgba(255, 255, 255, 1); box-shadow: 0 2px 8px rgba(22, 56, 40, .12); } }
@keyframes mv-tuile-active { 0%, 12.5%, 100% { box-shadow: none; border-color: var(--filet); } 2%, 10% { box-shadow: 0 0 0 3px var(--jaune-500); border-color: var(--jaune-500); } }

/* --- Feu Vert : la semaine -------------------------------------------------- */

.schema-feuvert-semaine { max-width: 1080px; }
.fv-haut { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; align-items: center; }
.fv-jours { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.fv-jours li { border-radius: 14px; padding: 14px 8px; min-height: 110px; text-align: center; background: var(--vert-500); color: #fff; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.fv-jours b { font-size: .95rem; }
.fv-jours span { font-size: .8rem; opacity: .9; }
.fv-jours .fv-libre { background: var(--jaune-100); color: var(--vert-800); border: 2px dashed var(--jaune-500); }
.fv-jours .fv-libre::before { content: "♥"; font-size: 1.3rem; color: #D2405A; line-height: 1; }
.fv-groupe { text-align: center; }
.fv-places { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 260px; margin: 0 auto 8px; }
.fv-place { width: 22px; display: block; }
.schema-anime .fv-place svg, .schema-anime .fv-p svg { width: 100%; height: auto; display: block; }
.fv-place svg { fill: var(--vert-700); }
.fv-place--plus svg { fill: none; stroke: var(--vert-700); stroke-width: 2; stroke-dasharray: 3 2; }
.fv-groupe p { margin: 0; font-size: .95rem; color: var(--encre-douce); }
.fv-fil { position: relative; margin-top: 26px; padding: 18px 20px; border-radius: 16px; background: var(--fond, #fff); border: 1px solid var(--filet); }
.fv-fil-titre { margin: 0 0 14px; font-size: .98rem; color: var(--encre); }
.fv-fil-titre span { display: inline-block; background: #D2232A; color: #fff; font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; padding: 3px 10px; border-radius: 999px; margin-right: 6px; }
.fv-perles { list-style: none; margin: 0; padding: 18px 0 0; display: flex; flex-wrap: wrap; gap: 10px; position: relative; }
.fv-perles::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 2px; background: #D2232A; transform-origin: left center; }
.fv-perles li { position: relative; font-size: .88rem; font-weight: 700; color: var(--vert-800); background: var(--vert-100); padding: 7px 14px; border-radius: 999px; }
/* (traits de liaison retirés : ils tombaient au hasard quand les étiquettes passent à la ligne) */
.fv-fin { margin: 16px 0 0; font-size: .95rem; color: var(--encre); }

.schema-pret .fv-jours li { opacity: 0; transform: translateY(14px) scale(.95); }
.schema-pret .fv-place { opacity: 0; transform: translateY(-10px); }
.schema-pret .fv-perles::before { transform: scaleX(0); }
.schema-pret .fv-perles li { opacity: 0; transform: translateY(10px); }
.schema-pret .fv-fin { opacity: 0; }

.schema-joue .fv-jours li { animation: etape-arrive .5s cubic-bezier(.3, 1.4, .5, 1) calc(var(--n) * .22s) forwards; }
.schema-joue .fv-jours .fv-libre { animation: etape-arrive .5s cubic-bezier(.3, 1.4, .5, 1) .44s forwards, fv-coeur 1.6s ease-in-out 1.4s 2; }
.schema-joue .fv-place { animation: jeton-tombe .4s cubic-bezier(.3, 1.6, .5, 1) calc(1.1s + var(--k) * .07s) forwards; }
.schema-joue .fv-perles::before { animation: mv-trait 1.6s ease-out 2.2s forwards; }
.schema-joue .fv-perles li { animation: etape-arrive .45s ease-out calc(2.4s + var(--n) * .25s) forwards; }
.schema-joue .fv-fin { animation: fondu .6s ease-out 4.2s forwards; }
@keyframes fv-coeur { 0%, 100% { transform: none; } 50% { transform: scale(1.06); } }

@media (max-width: 860px) {
	.fv-haut { grid-template-columns: 1fr; }
	.fv-jours { gap: 5px; }
	.fv-jours li { min-height: 92px; padding: 10px 4px; }
	.fv-jours b { font-size: .8rem; } .fv-jours span { font-size: .68rem; }
}

/* --- Feu Vert : les 24 inscrits ---------------------------------------------- */

.schema-feuvert-resultats { max-width: 1000px; }
.fv-res-titre { text-align: center; color: var(--encre-douce); margin: 0 0 16px; }
.fv-res-titre strong { color: var(--encre); }
.fv-res { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fv-res li { display: grid; grid-template-columns: 64px 1fr 220px; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 14px; background: var(--fond, #fff); border: 1px solid var(--filet); }
.fv-n { font-size: 2rem; font-weight: 800; color: var(--vert-700); text-align: right; font-variant-numeric: tabular-nums; }
.fv-rang { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; }
.fv-p { display: block; }
.fv-p svg { fill: #D5DDD7; }
.fv-on--code svg { fill: var(--vert-500); } .fv-on--permis svg { fill: #C2667A; } .fv-on--emploi svg { fill: var(--jaune-600); } .fv-on--formation svg { fill: #1F5FAE; }
.fv-l { font-weight: 700; color: var(--encre); font-size: .95rem; }

.schema-pret .fv-res li { opacity: 0; transform: translateX(-16px); }
.schema-pret .fv-on svg { fill: #D5DDD7; }
.schema-joue .fv-res li { animation: etape-arrive .5s ease-out calc(var(--r) * 1.1s) forwards; }
.schema-joue .fv-res li:nth-child(1) .fv-on svg { animation: fv-allume--code .3s ease-out calc(.6s + var(--k) * .08s) forwards; }
.schema-joue .fv-res li:nth-child(2) .fv-on svg { animation: fv-allume--permis .3s ease-out calc(1.7s + var(--k) * .08s) forwards; }
.schema-joue .fv-res li:nth-child(3) .fv-on svg { animation: fv-allume--emploi .3s ease-out calc(2.8s + var(--k) * .08s) forwards; }
.schema-joue .fv-res li:nth-child(4) .fv-on svg { animation: fv-allume--formation .3s ease-out calc(3.9s + var(--k) * .08s) forwards; }
.fv-p svg { transform-box: fill-box; transform-origin: bottom center; }
@keyframes fv-allume--code { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { fill: var(--vert-500); transform: none; } }
@keyframes fv-allume--permis { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { fill: #C2667A; transform: none; } }
@keyframes fv-allume--emploi { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { fill: var(--jaune-600); transform: none; } }
@keyframes fv-allume--formation { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { fill: #1F5FAE; transform: none; } }

@media (max-width: 760px) {
	.fv-res li { grid-template-columns: 48px 1fr; gap: 6px 10px; }
	.fv-rang { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.fv-n { font-size: 1.6rem; text-align: left; }
}

/* --- Réseau des communes (pages plateformes) ----------------------------------- */

.schema-reseau { max-width: 1000px; }
.reseau-zone { fill: var(--vert-100); opacity: .55; transform: scaleX(1.85); transform-box: fill-box; transform-origin: center; }
.reseau-lien { fill: none; stroke: var(--jaune-500); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.reseau-point { fill: var(--vert-500); stroke: #fff; stroke-width: 3; transform-box: fill-box; transform-origin: center; }
.reseau-nom { font-size: 17px; font-weight: 700; fill: var(--vert-800); }
.reseau-siege-halo { fill: var(--vert-500); opacity: .2; transform-box: fill-box; transform-origin: center; }
.reseau-siege-nom { font-size: 22px; font-weight: 800; fill: var(--encre); paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-width: 6px; }
.reseau-puces { display: none; list-style: none; margin: 10px 0 0; padding: 0; flex-wrap: wrap; gap: 6px; justify-content: center; }
.reseau-puces li { font-size: .82rem; font-weight: 700; color: var(--vert-800); background: var(--vert-100); padding: 4px 10px; border-radius: 999px; }
.reseau-chiffres { display: flex; justify-content: center; gap: 36px; flex-wrap: wrap; margin-top: 8px; }
.reseau-chiffres p { margin: 0; color: var(--encre); font-weight: 600; }

.schema-pret .reseau-lien { stroke-dashoffset: 1; }
.schema-pret .reseau-point { transform: scale(0); }
.schema-pret .reseau-nom, .schema-pret .reseau-puces li { opacity: 0; }
.schema-pret .reseau-chiffres p { opacity: 0; transform: translateY(10px); }

.schema-joue .reseau-siege-halo { animation: reseau-halo 2.4s ease-out 0s infinite; }
.schema-joue .reseau-lien { animation: reseau-lien .7s ease-out calc(.3s + var(--i) * .18s) forwards; }
.schema-joue .reseau-point { animation: point-pop .4s cubic-bezier(.3, 1.6, .5, 1) calc(.85s + var(--i) * .18s) forwards; }
.schema-joue .reseau-nom, .schema-joue .reseau-puces li { animation: fondu .4s ease-out calc(.9s + var(--i) * .18s) forwards; }
.schema-joue .reseau-chiffres p { animation: etape-arrive .5s ease-out 3.4s forwards; }
.schema-joue .reseau-chiffres p + p { animation-delay: 3.7s; }
@keyframes reseau-lien { to { stroke-dashoffset: 0; } }
@keyframes reseau-halo { 0% { transform: scale(1); opacity: .35; } 100% { transform: scale(2.2); opacity: 0; } }

@media (max-width: 760px) {
	.reseau-nom { display: none; }
	.reseau-puces { display: flex; }
}
.reseau-chiffres .schema-chiffre-valeur { display: inline-block; font-size: 2.2rem; margin: 0 6px 0 0; vertical-align: -4px; }
@media (max-width: 760px) { .reseau-chiffres { gap: 6px 24px; } .reseau-chiffres .schema-chiffre-valeur { font-size: 1.7rem; } }

/* --- Calendrier des permanences (Libournais) ------------------------------------ */

.schema-calendrier { max-width: 960px; }
.cal-grille { display: grid; grid-template-columns: 74px repeat(5, minmax(0, 1fr)); gap: 6px; }
.cal-jour { text-align: center; font-weight: 800; font-size: .85rem; color: var(--vert-800); padding: 4px 0; }

.cal-sem { display: flex; align-items: center; font-size: .8rem; font-weight: 700; color: var(--encre-douce); }
.cal-case { min-height: 78px; border-radius: 10px; background: #F2F5F3; border: 1px solid #E3E9E5; padding: 8px; display: flex; flex-direction: column; gap: 2px; font-size: .78rem; line-height: 1.25; }
.cal-case b { color: var(--encre); font-size: .84rem; }
.cal-case em { font-style: normal; color: var(--encre-douce); }
.cal-case i { font-style: normal; font-weight: 800; color: var(--vert-700); margin-top: auto; }
.cal-case--perm { background: var(--fond, #fff); border: 2px solid var(--vert-500); box-shadow: 0 6px 14px rgba(22, 56, 40, .1); }
.cal-case--fronsac { background: var(--jaune-100); border: 2px dashed var(--jaune-500); }
.cal-legende { text-align: center; font-size: .85rem; color: var(--encre-douce); margin-top: 10px; }

.schema-pret .cal-case--perm, .schema-pret .cal-case--fronsac { opacity: 0; transform: scale(.8); }
.schema-joue .cal-case--fronsac { animation: mv-tuile .45s cubic-bezier(.3, 1.4, .5, 1) calc(.2s + var(--s) * .12s) forwards; }
.schema-joue .cal-case--perm { animation: mv-tuile .5s cubic-bezier(.3, 1.4, .5, 1) calc(1s + var(--n) * .55s) forwards, cal-ping 1.2s ease-out calc(1s + var(--n) * .55s) 1; }
@keyframes cal-ping { 0% { box-shadow: 0 0 0 0 rgba(38, 122, 58, .5); } 100% { box-shadow: 0 0 0 16px rgba(38, 122, 58, 0), 0 6px 14px rgba(22, 56, 40, .1); } }

@media (max-width: 760px) {
	.cal-grille { grid-template-columns: 34px repeat(5, minmax(0, 1fr)); gap: 3px; }
	.cal-sem { font-size: .62rem; writing-mode: vertical-rl; transform: rotate(180deg); justify-content: center; }
	.cal-case { min-height: 74px; padding: 4px; font-size: .6rem; border-radius: 7px; }
	.cal-case b { font-size: .64rem; word-break: break-word; hyphens: auto; }
	.cal-case em { display: none; }
	.cal-case--fronsac em { display: block; }
}

/* --- Territoire qui se construit (ingénierie) ----------------------------------- */

.schema-territoire { max-width: 1100px; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.ter-sol { fill: var(--vert-100); stroke: #CFE2D4; stroke-width: 3; }
.ter-riviere { fill: none; stroke: #9CC8E6; stroke-width: 9; stroke-linecap: round; opacity: .8; }
.ter-routes path { fill: none; stroke: #8A9A90; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; }
.ter-villes g { fill: var(--vert-700); }
.ter-loupe { transform: translate(520px, 210px); opacity: 0; }
.ter-groupe-dessin { fill: var(--jaune-600); }
.ter-groupe, .ter-repere { transform-box: fill-box; transform-origin: bottom center; }
.ter-repere > path:first-child { fill: var(--vert-500); stroke: #fff; stroke-width: 3; }
.ter-legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ter-legende li { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--filet); background: var(--fond, #fff); font-size: .92rem; line-height: 1.45; color: var(--encre-douce); border-left: 6px solid var(--vert-500); }
.ter-legende li:nth-child(2) { border-left-color: var(--jaune-600); }
.ter-legende li:nth-child(3) { border-left-color: var(--vert-700); }
.ter-legende strong { display: block; color: var(--encre); font-size: 1rem; margin-bottom: 2px; }

.schema-pret .ter-routes path { stroke-dashoffset: 1; stroke: #8A9A90; }
.schema-pret .ter-groupe, .schema-pret .ter-repere { opacity: 0; }
.schema-pret .ter-legende li { opacity: .35; }

/* couche 1 (0-3,4 s) : la loupe balaie, les routes se tracent et passent au vert */
.schema-joue .ter-loupe { animation: ter-loupe 3.2s ease-in-out .2s 1 both; }
.schema-joue .ter-routes path { animation: reseau-lien 1.2s ease-out .6s forwards, ter-route-verte .6s ease-out 2.6s forwards; }
.schema-joue .ter-routes path:nth-child(2) { animation-delay: 1s, 2.7s; }
.schema-joue .ter-routes path:nth-child(3) { animation-delay: 1.4s, 2.8s; }
.schema-joue .ter-routes path:nth-child(4) { animation-delay: 1.8s, 2.9s; }
/* couche 2 (3,6-5,4 s) : les groupes */
.schema-joue .ter-groupe { animation: ter-pose .5s cubic-bezier(.3, 1.6, .5, 1) calc(3.6s + var(--i) * .35s) both; }
/* couche 3 (5,8-7,6 s) : les repères tombent */
.schema-joue .ter-repere { animation: ter-tombe .6s cubic-bezier(.3, 1.5, .5, 1) calc(5.8s + var(--i) * .4s) both; }
.schema-joue .ter-legende li { animation: om-li .5s ease-out calc(.2s + var(--c) * 3.2s) forwards, ter-legende-active 3.2s ease-in-out calc(.2s + var(--c) * 3.2s) 1; }

@keyframes ter-loupe { 0% { opacity: 0; transform: translate(170px, 190px); } 10% { opacity: 1; } 35% { transform: translate(380px, 140px); } 60% { transform: translate(560px, 300px); } 85% { opacity: 1; transform: translate(800px, 180px); } 100% { opacity: 0; transform: translate(850px, 170px); } }
@keyframes ter-route-verte { to { stroke: var(--vert-500); } }
@keyframes ter-pose { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
@keyframes ter-tombe { 0% { opacity: 0; transform: translateY(-60px); } 70% { opacity: 1; transform: translateY(4px); } 100% { opacity: 1; transform: none; } }
@keyframes ter-legende-active { 0%, 100% { box-shadow: none; } 15%, 85% { box-shadow: 0 0 0 3px var(--jaune-500); } }

@media (max-width: 860px) { .schema-territoire { grid-template-columns: 1fr; gap: 14px; } }

/* --- La route vers le permis (vue du dessus) --------------------------------------- */

.schema-permis-route { max-width: 1060px; }
.pr-herbe { fill: var(--vert-100); opacity: .55; }
.pr-route { fill: none; stroke: #3B4A41; stroke-width: 46; stroke-linecap: round; }
.pr-route-ligne { fill: none; stroke: #fff; stroke-width: 3; stroke-dasharray: 18 16; opacity: .8; }
.pr-voie { fill: none; stroke: #8A9A90; stroke-width: 18; stroke-linecap: round; opacity: .55; }
.pr-texte { font-size: 19px; fill: var(--vert-800); font-weight: 600; }
.pr-texte--fort { font-size: 21px; font-weight: 800; fill: var(--encre); }
.pr-num { font-size: 22px; font-weight: 800; fill: #fff; }
.pr-diag-halo { fill: var(--vert-500); opacity: .2; transform-box: fill-box; transform-origin: center; }
.pr-barriere { transform-box: view-box; transform-origin: 426px 211px; transform: rotate(-80deg); }
.pr-plots path { fill: #F28C28; stroke: #fff; stroke-width: 2; transform-box: fill-box; transform-origin: bottom center; }
.pr-referent { opacity: 1; }
.pr-main { transform-box: view-box; transform-origin: 818px 210px; }
.pr-drapeau { transform-box: view-box; transform-origin: 934px 176px; }
.pr-voiture { transform: translate(960px, 264px); }
.pr-warning { opacity: 0; }
.pr-temps { list-style: none; counter-reset: pt; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pr-temps li { counter-increment: pt; position: relative; padding: 14px 16px 14px 56px; border-radius: 14px; background: var(--fond, #fff); border: 1px solid var(--filet); font-size: .93rem; line-height: 1.45; color: var(--encre-douce); }
.pr-temps li::before { content: counter(pt); position: absolute; left: 14px; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--vert-500); color: #fff; font-weight: 800; display: grid; place-items: center; }
.pr-temps strong { display: block; color: var(--encre); }

/* la voiture est pilotée par animateMotion ; on retire sa position finale pendant la lecture */
.schema-pret .pr-voiture { transform: none; }
.schema-pret .pr-alt, .schema-pret .pr-referent { opacity: 0; }
.schema-pret .pr-barriere { transform: none; }
.schema-pret .pr-temps li { opacity: .35; }

.schema-joue .pr-diag-halo { animation: reseau-halo 1.6s ease-out .1s 2; }
.schema-joue .pr-alt { animation: fondu .5s ease-out calc(.6s + var(--i) * .35s) forwards; }
.schema-joue .pr-barriere { animation: pr-leve .5s ease-in-out 3.2s forwards; }
.schema-joue .pr-plots path { animation: pr-plot .5s ease-in-out calc(4.3s + var(--i) * .25s) 1; }
.schema-joue .pr-warning { animation: detresse .5s steps(1) 5.3s 3; opacity: 1; }
.schema-joue .pr-referent { animation: fondu .4s ease-out 5.4s forwards; }
.schema-joue .pr-main { animation: pr-main .4s ease-in-out 5.8s 3 alternate; }
.schema-joue .pr-drapeau { animation: parcours-drapeau 1.2s ease-in-out 8.1s 1; }
.schema-joue .pr-temps li:nth-child(1) { animation: om-li .5s ease-out .2s forwards; }
.schema-joue .pr-temps li:nth-child(2) { animation: om-li .5s ease-out 2.4s forwards; }
.schema-joue .pr-temps li:nth-child(3) { animation: om-li .5s ease-out 5.3s forwards; }
@keyframes pr-leve { to { transform: rotate(-80deg); } }
@keyframes pr-plot { 50% { transform: rotate(14deg); } }
@keyframes pr-main { to { transform: rotate(-25deg); } }

@media (max-width: 760px) {
	.pr-texte { display: none; }
	.pr-texte--fort { display: inline; font-size: 30px; }
	.pr-temps { grid-template-columns: 1fr; }
}

/* --- Années de terrain (qui sommes-nous) ------------------------------------------ */

.schema-anciennete { max-width: 980px; }
.anc-routes { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.anc-routes li { display: grid; grid-template-columns: 240px 1fr 110px; align-items: center; gap: 16px; }
.anc-nom { font-weight: 800; color: var(--encre); text-align: right; }
.anc-piste { position: relative; height: 34px; border-radius: 17px; background: #EEF2EF; overflow: visible; }
.anc-route { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--ans) / 13 * 100%); border-radius: 17px; background: #3B4A41 repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--ans) - 3px), rgba(255, 255, 255, .55) calc(100% / var(--ans) - 3px) calc(100% / var(--ans))); }
.anc-auto { position: absolute; right: -14px; top: -10px; width: 46px; height: 26px; background: var(--jaune-500); border-radius: 9px 14px 6px 6px; box-shadow: 0 3px 6px rgba(0, 0, 0, .2); }
.anc-auto::before, .anc-auto::after { content: ""; position: absolute; bottom: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--encre); border: 2px solid #fff; }
.anc-auto::before { left: 5px; } .anc-auto::after { right: 5px; }
.anc-ans { font-weight: 700; color: var(--encre-douce); }
.anc-ans b { font-size: 1.9rem; color: var(--vert-700); font-variant-numeric: tabular-nums; }
.anc-legende { text-align: center; color: var(--encre-douce); font-size: .9rem; margin-top: 10px; }

.schema-pret .anc-route { width: 0; }
.schema-joue .anc-route { animation: anc-pousse 2.4s cubic-bezier(.4, 0, .2, 1) calc(.2s + var(--n) * .3s) forwards; }
@keyframes anc-pousse { to { width: calc(var(--ans) / 13 * 100%); } }

@media (max-width: 760px) {
	.anc-routes li { grid-template-columns: 1fr auto; gap: 6px 10px; }
	.anc-nom { text-align: left; }
	.anc-piste { grid-column: 1 / -1; grid-row: 2; }
	.anc-ans { grid-row: 1; grid-column: 2; }
	.anc-ans b { font-size: 1.4rem; }
}

/* --- Flux de l'accompagnement (chiffres) --------------------------------------------- */

.schema-flux { max-width: 1000px; }
.flux-points circle { fill: #fff; stroke: var(--vert-700); stroke-width: 2; }
.flux-etiquettes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 6px; }
.flux-etiquettes p { margin: 0; text-align: center; color: var(--encre-douce); font-size: .95rem; }
.flux-etiquettes b { display: block; font-size: 2.3rem; color: var(--vert-700); font-variant-numeric: tabular-nums; }
.flux-etiquettes p:nth-child(3) b { color: var(--jaune-600); }
.flux-points { display: none; }
.schema-joue .flux-points { display: inline; }
.flux-barre { transform-box: fill-box; transform-origin: bottom center; }
.schema-pret .flux-barre { transform: scaleY(0); }
.schema-pret .flux-bande { clip-path: inset(0 100% 0 0); }
.schema-pret .flux-etiquettes p { opacity: 0; transform: translateY(10px); }
.schema-joue .flux-barre { animation: mv-barre .7s cubic-bezier(.3, 1.3, .5, 1) 0s forwards; }
.schema-joue .flux-barre:nth-of-type(2) { animation-delay: .8s; }
.schema-joue .flux-barre:nth-of-type(3) { animation-delay: 1.6s; }
.schema-joue .flux-bande--1 { animation: route-se-trace 1s ease-out .4s forwards; }
.schema-joue .flux-bande--2 { animation: route-se-trace 1s ease-out 1.2s forwards; }
.schema-joue .flux-etiquettes p { animation: etape-arrive .5s ease-out calc(.2s + var(--n) * .8s) forwards; }
@media (max-width: 760px) { .flux-etiquettes b { font-size: 1.5rem; } .flux-etiquettes p { font-size: .78rem; } }

/* --- Poteau indicateur « Par où commencer ? » ---------------------------------------- */

.schema-panneau { position: relative; max-width: 760px; margin: var(--wp--preset--spacing--space-6) auto; padding: 14px 0 26px; display: grid; justify-items: center; gap: 14px; }
.pan-poteau { position: absolute; top: 0; bottom: 18px; left: 50%; width: 16px; margin-left: -8px; border-radius: 8px; background: linear-gradient(90deg, #6F5A3E, #8C7350 50%, #6F5A3E); }
.pan-socle { position: absolute; bottom: 0; left: 50%; width: 120px; margin-left: -60px; height: 22px; border-radius: 50%; background: var(--vert-100); }
.pan-fleche { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; min-width: 360px; max-width: 92%; padding: 14px 54px 14px 24px; background: var(--vert-700); color: #fff; text-decoration: none; font-weight: 800; font-size: 1.05rem; line-height: 1.25; clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 50%, calc(100% - 34px) 100%, 0 100%); transform-origin: 50% 50%; transition: background-color .2s, transform .2s; }
.pan-fleche small { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--jaune-500); margin-bottom: 3px; }
.pan-fleche--gauche { padding: 14px 24px 14px 54px; text-align: right; clip-path: polygon(34px 0, 100% 0, 100% 100%, 34px 100%, 0 50%); background: var(--vert-500); }
.pan-fleche:nth-of-type(3) { background: var(--vert-800); }
.pan-fleche:hover, .pan-fleche:focus-visible { background: var(--jaune-500); color: var(--vert-900); transform: scale(1.03); }
.pan-fleche:hover small, .pan-fleche:focus-visible small { color: var(--vert-800); }
.pan-fleche:focus-visible { outline: 3px solid var(--vert-900); outline-offset: 3px; }
.pan-fleche--droite { margin-left: 120px; } .pan-fleche--gauche { margin-right: 120px; }

.schema-pret .pan-poteau { transform: scaleY(0); transform-origin: bottom; }
.schema-pret .pan-fleche { opacity: 0; transform: rotateY(90deg); }
.schema-joue .pan-poteau { animation: mv-trait .6s ease-out 0s forwards; }
.schema-joue .pan-fleche { animation: pan-pivote .7s cubic-bezier(.3, 1.4, .5, 1) calc(.5s + var(--n) * .3s) forwards, pan-montre 1.4s ease-in-out calc(2.4s + var(--n) * 1.6s) 1; }
@keyframes pan-pivote { from { opacity: 0; transform: rotateY(90deg); } to { opacity: 1; transform: none; } }
@keyframes pan-montre { 0%, 100% { transform: none; filter: none; } 40% { transform: translateX(10px) rotate(-1.5deg); filter: brightness(1.15); } }
.pan-fleche--gauche { --sens: -1; }

@media (max-width: 760px) {
	.pan-fleche { min-width: 0; width: 88%; font-size: .95rem; }
	.pan-fleche--droite, .pan-fleche--gauche { margin: 0; }
}
.anc-auto { right: 2px; }
.anc-routes li { grid-template-columns: 240px 1fr 120px; }
@media (max-width: 760px) { .anc-routes li { grid-template-columns: 1fr auto; } .pan-fleche { width: 82%; } }

/* Encart « Restez informé » de l'accueil (lien vers la page Lettre d'information). */
.wp-block-group.is-style-carte.encart-lettre { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--space-4); height: auto; }
.encart-lettre-texte { flex: 1 1 22rem; }
.encart-lettre-texte h2 { margin-top: 0; }
.encart-lettre-texte p { margin-bottom: 0; }

/* Lien « Recevoir notre lettre » du pied de page : visible mais plus discret que le téléphone et le courriel. */
.pied-de-page .lien-lettre { margin-top: var(--wp--preset--spacing--space-3); font-weight: 600; }
.pied-de-page .lien-lettre a { text-decoration: underline; text-underline-offset: 3px; }