/* =========================================================================
   M-oove — pages de silo (piliers et pages filles)
   Chaque selecteur est prefixe par .mv-si : le kit Elementor pose encore
   .elementor-kit-6 button { color:#FFF; border-radius:20px } en (0,1,1)
   sur ces pages, qui battrait une classe simple.
   ========================================================================= */

.mv-si {
	--mv-teal: #259C99;
	--mv-teal-texte: #1a7573;
	--mv-teal-clair: #58d3cf;
	--mv-or: #D9B24B;
	/* L or de marque tombe a 2,02 sur blanc : illisible des qu il porte
	   une information. Cette declinaison foncee tient 5,11 sur blanc. */
	--mv-or-texte: #8a6a12;
	--mv-encre: #10151c;
	--mv-corps: #454c56;
	--mv-corps-doux: #545b65;
	--mv-corps-sombre: #c2cad4;
	--mv-surface-claire: #f4f7f7;
	--mv-surface-sombre: #131920;
	--mv-rayon: 5px;
	--mv-large: 1280px;
	--mv-marge: 24px;

	background: #ffffff;
	color: var(--mv-corps);
	font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 18px;
	line-height: 1.62;
	overflow-x: clip; /* jamais overflow:hidden : cela tuerait tout sticky descendant */
}

/* Le coeur pose :root :where(.is-layout-flow) > * { margin-block-start } en
   (0,2,0). On neutralise en meme temps qu on declare le conteneur. */
.mv-si > *,
.mv-si .mv-si__enveloppe > * {
	margin-block: 0;
}

.mv-si :where(ul, ol, li, p, figure, blockquote) {
	margin: 0;
	padding: 0;
}

.mv-si :where(ul, ol) {
	list-style: none;
}

/* Un display auteur neutralise l attribut hidden (regle UA) : on le retablit. */
.mv-si [hidden] {
	display: none !important;
}

.mv-si .mv-si__enveloppe {
	width: min(100% - 2 * var(--mv-marge), var(--mv-large));
	margin-inline: auto;
}

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

.mv-si .mv-si__titre,
.mv-si .mv-si__h2,
.mv-si .mv-si__h3 {
	font-family: 'Lato', system-ui, sans-serif;
	font-weight: 900;
	letter-spacing: -0.025em;
	color: var(--mv-encre);
	line-height: 1.1;
}

.mv-si .mv-si__titre {
	font-size: clamp(34px, 4.4vw, 52px);
}

.mv-si .mv-si__h2 {
	font-size: clamp(26px, 2.9vw, 38px);
}

.mv-si .mv-si__h2--large {
	font-size: clamp(28px, 3.2vw, 42px);
}

.mv-si .mv-si__h3 {
	font-size: clamp(19px, 1.5vw, 23px);
	line-height: 1.25;
}

.mv-si .mv-si__h2--sombre,
.mv-si .mv-si__h3--silo {
	color: #ffffff;
}

/* De l air apres chaque titre : un titre colle a son texte se lit mal.
   Mesure a 0px sur la section de texte et sur l en tete des volets. */
.mv-si .mv-si__h2 + *,
.mv-si .mv-si__h3 + * {
	margin-top: 22px;
}

.mv-si .mv-si__h2--large + * {
	margin-top: 30px;
}

.mv-si .mv-si__h3--volet + * {
	margin-top: 16px;
}

/* Sur-titre : filet de 32px en degrade teal vers or, puis capitales espacees */
.mv-si .mv-si__surtitre {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mv-teal-texte);
}

.mv-si .mv-si__filet {
	display: block;
	flex: 0 0 32px;
	height: 2px;
	background: linear-gradient(90deg, var(--mv-teal), var(--mv-or));
}

/* --------------------------------------------------------------- En tete */

.mv-si .mv-si__hero {
	position: relative;
	isolation: isolate;
	background: var(--mv-surface-claire);
	padding-block: clamp(64px, 8vw, 116px);
}

/* Un en tete a image porte sa propre profondeur : image, voile en degrade,
   deux halos. Aucune borne de degrade en blanc, sinon bande blanche. */
.mv-si .mv-si__hero--image {
	background: var(--mv-encre);
	padding-block: clamp(76px, 9vw, 132px);
}

.mv-si .mv-si__hero-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: -1;
}

.mv-si .mv-si__hero-fond {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 38%;
	transform: scale(1.04);
}

.mv-si .mv-si__hero-voile {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(102deg, rgba(12, 17, 23, 0.96) 0%, rgba(13, 19, 26, 0.9) 44%, rgba(16, 24, 32, 0.62) 78%, rgba(19, 30, 38, 0.5) 100%),
		linear-gradient(0deg, rgba(12, 17, 23, 0.62) 0%, rgba(12, 17, 23, 0) 46%);
}

.mv-si .mv-si__hero-halo {
	position: absolute;
	top: -22%;
	right: -8%;
	width: 46%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(37, 156, 153, 0.42) 0%, rgba(37, 156, 153, 0) 68%);
	filter: blur(8px);
}

.mv-si .mv-si__hero-halo--or {
	top: auto;
	right: auto;
	bottom: -30%;
	left: 32%;
	width: 34%;
	background: radial-gradient(circle, rgba(217, 178, 75, 0.26) 0%, rgba(217, 178, 75, 0) 70%);
}

/* En tete asymetrique : titraille a gauche, preuves a droite. */
.mv-si .mv-si__hero-grille {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
	gap: clamp(32px, 4vw, 72px);
	align-items: center;
}

/* ⛔ Le teal clair etait pose sans condition : il ne tient que sur l encre
   du hero a image (1,68 sur la surface claire d un hero sans image). */
.mv-si .mv-si__surtitre--hero {
	color: var(--mv-teal-texte);
}

.mv-si .mv-si__hero--image .mv-si__surtitre--hero {
	color: var(--mv-teal-clair);
}

.mv-si .mv-si__hero--image .mv-si__titre {
	color: #ffffff;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.34);
}

.mv-si .mv-si__hero--image .mv-si__soustitre {
	color: var(--mv-teal-clair);
}

.mv-si .mv-si__hero--image .mv-si__chapo {
	color: #dbe2ea;
}

.mv-si .mv-si__soustitre {
	margin-top: 18px;
	font-size: clamp(18px, 1.6vw, 22px);
	font-weight: 700;
	color: var(--mv-teal-texte);
}

.mv-si .mv-si__chapo {
	margin-top: 20px;
	max-width: 56ch;
	font-size: 17px;
	color: var(--mv-corps-doux);
}

.mv-si .mv-si__hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 32px;
}

/* Les preuves : carte en relief posee sur l image, fond OPAQUE car
   l arriere plan n est pas maitrise. */
.mv-si .mv-si__preuves {
	padding: clamp(22px, 2.4vw, 30px);
	background: rgba(10, 15, 21, 0.86);
	border: 1px solid rgba(88, 211, 207, 0.26);
	border-radius: var(--mv-rayon);
	box-shadow: 0 26px 60px rgba(0, 0, 0, 0.42);
	backdrop-filter: blur(6px);
}

.mv-si .mv-si__preuves-liste {
	display: grid;
	gap: 18px;
}

.mv-si .mv-si__preuve {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mv-si .mv-si__preuve:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.mv-si .mv-si__preuve-picto {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: var(--mv-rayon);
	background: linear-gradient(135deg, rgba(37, 156, 153, 0.34), rgba(217, 178, 75, 0.22));
	color: var(--mv-teal-clair);
}

.mv-si .mv-si__preuve-intitule {
	display: block;
	font-family: 'Lato', system-ui, sans-serif;
	font-size: 17px;
	font-weight: 900;
	letter-spacing: -0.02em;
	color: #ffffff;
}

.mv-si .mv-si__preuve-precision {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	color: #c2cad4;
}

/* Un filet degrade ferme l en tete sans fabriquer de bande. */
.mv-si .mv-si__hero::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--mv-teal) 0%, var(--mv-or) 46%, rgba(37, 156, 153, 0.15) 100%);
}

/* -------------------------------------------------------------- Sections */

.mv-si .mv-si__section {
	padding-block: clamp(52px, 6vw, 88px);
}

.mv-si .mv-si__section--clair {
	background: var(--mv-surface-claire);
}

.mv-si .mv-si__section--blanc {
	background: #ffffff;
}

.mv-si .mv-si__section--sombre {
	background: var(--mv-surface-sombre);
	color: var(--mv-corps-sombre);
}

/* ⛔ Colonne de lecture centree = titre decale et grand vide a droite,
   defaut signale par le client. La parade est le motif duo : une colonne
   d appui etroite, un corps large, et un vide a droite qui vaut ZERO. */
.mv-si .mv-si__duo {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: clamp(32px, 4vw, 76px);
	align-items: start;
}

.mv-si .mv-si__duo-appui {
	position: sticky;
	top: 132px;
}

.mv-si .mv-si__duo-trait {
	display: block;
	width: 2px;
	height: 84px;
	margin-top: 22px;
	background: linear-gradient(180deg, var(--mv-teal), var(--mv-or) 62%, rgba(217, 178, 75, 0.06));
}

/* 866px de corps rendaient 101 signes par ligne, au dela de la fourchette
   confortable. On remonte la taille plutot que de retrecir la colonne, ce
   qui rouvrirait le vide a droite. */
.mv-si .mv-si__duo-corps > .mv-si__prose {
	font-size: 18.5px;
	line-height: 1.66;
}

/* ⛔ `end` alignait le titre sur le BAS du chapo : quand celui-ci faisait
   deux paragraphes, un grand vide s ouvrait au-dessus du titre. Les deux
   colonnes partent desormais du meme bord haut. */
.mv-si .mv-si__entete {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	gap: clamp(24px, 3vw, 56px);
	align-items: start;
	margin-bottom: clamp(32px, 4vw, 56px);
}

/* Le titre suit le defilement pendant la lecture du chapo. La plage de
   collage s arrete au bas de l entete : un element colle ne peut pas sortir
   de son parent. Elle vaut donc la hauteur du chapo moins celle du titre. */
.mv-si .mv-si__entete > .mv-si__h2 {
	position: sticky;
	top: 104px;
}

.admin-bar .mv-si .mv-si__entete > .mv-si__h2 {
	top: 136px;
}

@media (max-width: 1024px) {
	/* En colonne unique, le titre se retrouverait plaque au-dessus de son
	   propre chapo. */
	.mv-si .mv-si__entete > .mv-si__h2 {
		position: relative;
		top: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mv-si .mv-si__entete > .mv-si__h2 {
		position: relative;
		top: auto;
	}
}

.mv-si .mv-si__entete-titraille {
	grid-column: 1 / -1;
}

.mv-si .mv-si__entete-chapo {
	color: var(--mv-corps-doux);
}

.mv-si .mv-si__entete-chapo--sombre {
	color: var(--mv-corps-sombre);
}

/* L en tete du maillage porte un titre puis une ligne de remontee vers le
   pilier, pas un chapo en vis a vis : la grille de deux colonnes briderait
   le titre a la moitie gauche des que le h2 cesse d etre :only-child. On
   repasse donc en colonne unique. row-gap a 0 laisse la regle generale
   `.mv-si__h2 + *` fixer seule les 22px, sans les cumuler avec le gap. */
.mv-si .mv-si__entete.mv-si__entete--pleine {
	grid-template-columns: minmax(0, 1fr);
	row-gap: 0;
}

.mv-si .mv-si__entete-chapo.mv-si__entete-chapo--rubrique {
	font-size: 15px;
	line-height: 1.6;
}

/* ⛔ Ce lien ne prend PAS .mv-si__lien--suite : sur la variante claire du
   silo, la regle de cette classe l emporterait en specificite et poserait
   le teal clair #58d3cf sur un fond #f4f7f7, soit 1,8 de contraste. La
   variante claire est deja servie plus bas par `.mv-si__silo--clair
   .mv-si__lien` en teal texte souligne : on ne traite ici que le fond
   sombre, ou le teal clair mesure 9,9. */
.mv-si .mv-si__silo:not(.mv-si__silo--clair) .mv-si__lien.mv-si__lien--rubrique {
	color: var(--mv-teal-clair);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mv-si .mv-si__silo:not(.mv-si__silo--clair) .mv-si__lien.mv-si__lien--rubrique:hover {
	color: #ffffff;
}

.mv-si .mv-si__prose > p {
	margin-bottom: 16px;
}

.mv-si .mv-si__prose > p:last-child {
	margin-bottom: 0;
}

.mv-si .mv-si__prose strong {
	color: var(--mv-encre);
	font-weight: 700;
}

.mv-si .mv-si__section--sombre .mv-si__prose strong,
.mv-si .mv-si__bandeau .mv-si__prose strong {
	color: #ffffff;
}

/* La mise en avant de marque : teal lisible, jamais le teal a 3,24. */
.mv-si .mv-si__accent {
	background: none;
	color: var(--mv-teal-texte);
	font-weight: 700;
}

.mv-si .mv-si__section--sombre .mv-si__accent,
.mv-si .mv-si__bandeau .mv-si__accent {
	color: var(--mv-teal-clair);
}

/* ---------------------------------------------------------------- Volets */

.mv-si .mv-si__onglets {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 28px;
	border-bottom: 1px solid rgba(16, 21, 28, 0.12);
}

.mv-si .mv-si__onglet.mv-si__bouton-onglet {
	appearance: none;
	position: relative;
	min-height: 48px;
	padding: 12px 20px;
	border: 0;
	border-radius: var(--mv-rayon) var(--mv-rayon) 0 0;
	background: transparent;
	font-family: 'Lato', system-ui, sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--mv-corps-doux);
	cursor: pointer;
	transition: color 0.18s ease;
}

.mv-si .mv-si__onglet.mv-si__bouton-onglet::after {
	content: '';
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: -1px;
	height: 2px;
	background: linear-gradient(90deg, var(--mv-teal), var(--mv-or));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.24s ease;
}

.mv-si .mv-si__onglet.mv-si__bouton-onglet:hover,
.mv-si .mv-si__onglet.mv-si__bouton-onglet[aria-selected='true'] {
	color: var(--mv-encre);
}

.mv-si .mv-si__onglet.mv-si__bouton-onglet[aria-selected='true']::after {
	transform: scaleX(1);
}

.mv-si .mv-si__volet {
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

/* ⛔ Colonne de texte plus courte que la carte : le vide s ouvrait en bas.
   Centre verticalement, le vide se repartit et se lit comme une composition. */
.mv-si .mv-si__volet-texte {
	position: relative;
	padding-left: 26px;
}

.mv-si .mv-si__volet-texte::before {
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: linear-gradient(180deg, var(--mv-teal), var(--mv-or) 58%, rgba(217, 178, 75, 0.05));
}

.mv-si .mv-si__volet-liste {
	padding: clamp(22px, 2.4vw, 32px);
	background: #ffffff;
	border: 1px solid rgba(16, 21, 28, 0.09);
	border-radius: var(--mv-rayon);
}

.mv-si .mv-si__section--blanc .mv-si__volet-liste {
	background: var(--mv-surface-claire);
	border-color: rgba(16, 21, 28, 0.07);
}

.mv-si .mv-si__amorce {
	margin-bottom: 14px;
	font-weight: 700;
	color: var(--mv-encre);
}

.mv-si .mv-si__puces {
	display: grid;
	gap: 10px;
	margin-bottom: 20px;
}

.mv-si .mv-si__puce {
	position: relative;
	padding-left: 26px;
	font-size: 16px;
}

.mv-si .mv-si__puce::before {
	content: '';
	position: absolute;
	left: 0;
	top: 9px;
	width: 10px;
	height: 10px;
	border: 2px solid var(--mv-teal);
	border-radius: 50%;
}

.mv-si .mv-si__prose--chute {
	margin-bottom: 22px;
	font-size: 16px;
	color: var(--mv-corps-doux);
}

/* --------------------------------------------------------------- Etapes */

/* ------------------------------------------------------- Chronologie */

/* ⛔ L ancienne grille rangeait les etapes en colonnes de 230px : a six
   etapes, la sixieme partait seule sur une deuxieme ligne et la lecture
   « 01 puis 02 puis 03 » se cassait. La chronologie verticale garde la
   lecture lineaire quel que soit le nombre d etapes et quelle que soit la
   longueur des textes, qui vont ici de 66 a 473 signes. */
.mv-si .mv-si__chrono {
	position: relative;
	display: grid;
	gap: clamp(26px, 3vw, 40px);
	margin-bottom: 28px;
	padding-left: 78px;
	list-style: none;
}

/* Le rail au repos, puis la jauge qui le recouvre a mesure du defilement.
   --mv-avancee va de 0 a 1 et n est posee que par le script : sans lui, le
   rail reste gris et TOUT le contenu demeure lisible. */
.mv-si .mv-si__chrono::before,
.mv-si .mv-si__chrono::after {
	content: '';
	position: absolute;
	left: 25px;
	top: 10px;
	width: 2px;
	border-radius: 2px;
}

.mv-si .mv-si__chrono::before {
	bottom: 10px;
	background: rgba(16, 21, 28, 0.11);
}

/* ⛔ La jauge etait d abord pilotee par sa HAUTEUR en pourcentage. Mesure :
   sur ce pseudo-element, meme `calc(100% - 20px)` se resout a 0px, la hauteur
   du bloc conteneur etant traitee comme indeterminee. On la pilote donc par
   une mise a l echelle, qui ne depend d aucun pourcentage, ne declenche aucun
   recalcul de mise en page et s anime sur le compositeur. */
.mv-si .mv-si__chrono::after {
	bottom: 10px;
	background: linear-gradient(180deg, var(--mv-teal) 0%, var(--mv-teal-texte) 46%, var(--mv-or) 100%);
	transform: scaleY(var(--mv-avancee, 0));
	transform-origin: 50% 0;
	/* ⛔ Pas de transition ici : mesure faite, Chrome n interpole pas un
	   transform dont la valeur vient d une variable non enregistree, et la
	   jauge restait bloquee a zero. Le script la met a jour a chaque image,
	   ce qui est de toute facon le bon comportement : une jauge de
	   progression doit coller au defilement, pas le suivre avec du retard. */
	will-change: transform;
}

.mv-si .mv-si__jalon {
	position: relative;
}

/* La pastille est en position absolue : la classe est-atteint peut donc la
   grossir sans jamais deplacer le jalon lui-meme. C est ce qui permet au
   script de mesurer une position que son propre effet ne touche pas. */
.mv-si .mv-si__jalon .mv-si__jalon-pastille {
	position: absolute;
	left: -78px;
	top: -3px;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #ffffff;
	border: 2px solid rgba(16, 21, 28, 0.12);
	font-family: 'Lato', system-ui, sans-serif;
	font-size: 16px;
	font-weight: 900;
	letter-spacing: -0.02em;
	/* 6,52 sur blanc. */
	color: var(--mv-or-texte);
	transition: transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1),
		background-color 380ms ease, border-color 380ms ease, color 380ms ease,
		box-shadow 380ms ease;
}

/* Teal texte plutot que teal de marque : le blanc y tient 4,92, contre 3,34
   sur le teal clair, et le chiffre est bien du TEXTE. */
.mv-si .mv-si__jalon.est-atteint .mv-si__jalon-pastille {
	background: var(--mv-teal-texte);
	border-color: transparent;
	color: #ffffff;
	transform: scale(1.08);
	box-shadow: 0 0 0 5px rgba(37, 156, 153, 0.13), 0 10px 24px rgba(26, 117, 115, 0.24);
}

.mv-si .mv-si__jalon .mv-si__jalon-corps {
	padding-top: 4px;
	transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 420ms ease;
}

.mv-si .mv-si__jalon.est-atteint .mv-si__jalon-corps {
	transform: translateX(4px);
}

.mv-si .mv-si__jalon .mv-si__jalon-titre {
	margin-bottom: 6px;
	font-family: 'Lato', system-ui, sans-serif;
	font-size: 19px;
	font-weight: 900;
	letter-spacing: -0.02em;
	color: var(--mv-encre);
}

.mv-si .mv-si__jalon .mv-si__jalon-texte {
	font-size: 16px;
	color: var(--mv-corps-doux);
}

.mv-si .mv-si__section--sombre .mv-si__chrono::before {
	background: rgba(255, 255, 255, 0.16);
}

.mv-si .mv-si__section--sombre .mv-si__jalon .mv-si__jalon-titre {
	color: #ffffff;
}

.mv-si .mv-si__section--sombre .mv-si__jalon .mv-si__jalon-texte {
	color: var(--mv-corps-sombre);
}

@media (max-width: 767px) {
	.mv-si .mv-si__chrono {
		padding-left: 60px;
	}

	.mv-si .mv-si__chrono::before,
	.mv-si .mv-si__chrono::after {
		left: 20px;
	}

	.mv-si .mv-si__jalon .mv-si__jalon-pastille {
		left: -60px;
		width: 42px;
		height: 42px;
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* Rien ne bouge, mais rien ne reste eteint non plus : la jauge est
	   pleine et les jalons sont tous allumes. */
	.mv-si .mv-si__chrono::after {
		transform: scaleY(1);
	}

	.mv-si .mv-si__jalon .mv-si__jalon-corps {
		transform: none;
	}
}

/* --------------------------------------------------------------- Cartes */

.mv-si .mv-si__cartes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
	gap: clamp(18px, 2vw, 26px);
}

/* ⛔ La repartition automatique isolait une carte seule en fin de rangee
   (5 cartes sur 4 colonnes) : le trou se lisait comme un vide. Le gabarit
   calcule le nombre de colonnes qui n abandonne personne. */
.mv-si .mv-si__cartes.mv-si__cartes--colonnes {
	grid-template-columns: repeat(var(--mv-colonnes, 3), minmax(0, 1fr));
}

@media (max-width: 1023px) {
	.mv-si .mv-si__cartes.mv-si__cartes--colonnes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 639px) {
	.mv-si .mv-si__cartes.mv-si__cartes--colonnes {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ⛔ Le calcul de colonnes ecarte la carte SEULE en fin de rangee, mais pas
   le trou d UNE place : 5 cartes sur 3 colonnes, 7 sur 4. Ce vide au bout de
   la grille se lit comme un oubli. La derniere carte s y etale. */
.mv-si .mv-si__cartes--colonnes .mv-si__carte.mv-si__carte--comble {
	grid-column: span 2;
}

@media (max-width: 1023px) {
	/* La grille repasse a deux colonnes : le trou ne depend plus de la
	   grille d origine mais de la seule parite. */
	.mv-si .mv-si__cartes--colonnes .mv-si__carte.mv-si__carte--comble {
		grid-column: auto;
	}
	.mv-si .mv-si__cartes--colonnes.mv-si__cartes--impair .mv-si__carte:last-child {
		grid-column: span 2;
	}
}

@media (max-width: 639px) {
	/* Une seule colonne : plus rien a combler. */
	.mv-si .mv-si__cartes--colonnes .mv-si__carte.mv-si__carte--comble,
	.mv-si .mv-si__cartes--colonnes.mv-si__cartes--impair .mv-si__carte:last-child {
		grid-column: auto;
	}
}

.mv-si .mv-si__carte {
	padding: clamp(22px, 2.4vw, 30px);
	background: #ffffff;
	border: 1px solid rgba(16, 21, 28, 0.09);
	border-radius: var(--mv-rayon);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.mv-si .mv-si__section--blanc .mv-si__carte {
	background: var(--mv-surface-claire);
}

.mv-si .mv-si__carte:hover {
	transform: translateY(-6px);
	box-shadow: 0 14px 34px rgba(16, 21, 28, 0.09);
}

.mv-si .mv-si__carte-picto {
	display: inline-flex;
	margin-bottom: 14px;
	color: var(--mv-teal);
	transition: color 0.22s ease;
}

.mv-si .mv-si__carte:hover .mv-si__carte-picto {
	color: var(--mv-or);
}

/* Dans une grille de cartes, un titre qui passe sur deux lignes decale son
   texte par rapport aux cartes voisines. On reserve la place de la seconde
   ligne pour que tous les textes s alignent. */
.mv-si .mv-si__h3--carte {
	min-height: calc(2 * 1.25em);
}

.mv-si .mv-si__carte-texte {
	margin-top: 10px;
	font-size: 16px;
	color: var(--mv-corps-doux);
}

.mv-si .mv-si__carte-texte--sombre {
	color: var(--mv-corps-sombre);
}

/* Dans une plaque, le dessin de 24px est trop menu : on l agrandit sans
   toucher a l epaisseur de trait, invariant de la famille. */
.mv-si .mv-si__preuve-picto .mv-si__picto,
.mv-si .mv-si__carte-picto .mv-si__picto {
	width: 30px;
	height: 30px;
}

/* Animation d ecriture des pictogrammes : pathLength=1 normalise les traces. */
.mv-si .mv-trace path,
.mv-si .mv-trace circle {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

.mv-si .mv-si__carte:hover .mv-trace path,
.mv-si .mv-si__carte:hover .mv-trace circle {
	animation: mv-si-trace 0.62s ease forwards;
}

.mv-si .mv-trace :nth-child(2) {
	animation-delay: 0.07s;
}

.mv-si .mv-trace :nth-child(3) {
	animation-delay: 0.14s;
}

@keyframes mv-si-trace {
	from {
		stroke-dashoffset: 1;
	}
	to {
		stroke-dashoffset: 0;
	}
}

/* ------------------------------------------------------- Maillage du silo */

.mv-si .mv-si__carte--silo {
	position: relative;
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.13);
}

.mv-si .mv-si__carte--silo:hover {
	background: rgba(255, 255, 255, 0.09);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.mv-si .mv-si__lien.mv-si__lien--carte {
	color: #ffffff;
	text-decoration: none;
}

/* Pas de lien etire : en grille il n est pas fiable et rend le texte
   insaisissable. Le clic sur la carte est relaye par silo.js. */
.mv-si .mv-si__carte--silo {
	cursor: pointer;
}

.mv-si .mv-si__lien.mv-si__lien--carte:focus-visible {
	outline: 2px solid var(--mv-or);
	outline-offset: 3px;
}

/* Un lien en ligne dans le corps du texte. Sans regle propre il tombe sur
   .elementor-kit-6 a, qui le peint en or : 2,02 sur blanc. Deux classes
   pour battre le kit, et le teal texte qui tient 4,92. */
.mv-si .mv-si__lien.mv-si__lien--suite {
	color: var(--mv-teal-texte);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.mv-si .mv-si__lien.mv-si__lien--suite:hover {
	color: var(--mv-encre);
}

.mv-si .mv-si__lien.mv-si__lien--suite:focus-visible {
	outline: 2px solid var(--mv-teal-texte);
	outline-offset: 3px;
}

.mv-si .mv-si__lien.mv-si__lien--sombre {
	color: var(--mv-teal-clair);
	text-underline-offset: 3px;
}

.mv-si .mv-si__fleche--carte {
	display: block;
	margin-top: 16px;
}

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

.mv-si .mv-si__bouton {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 13px 24px;
	border-radius: var(--mv-rayon);
	font-family: 'Lato', system-ui, sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Encre sur teal : 5,47. Le blanc sur teal ne donnerait que 3,34. */
.mv-si .mv-si__bouton--principal {
	background: var(--mv-teal);
	color: var(--mv-encre);
}

.mv-si .mv-si__bouton--principal:hover {
	background: var(--mv-teal-clair);
	transform: translateY(-2px);
}

.mv-si .mv-si__bouton--or {
	background: var(--mv-or);
	color: var(--mv-encre);
}

.mv-si .mv-si__bouton--or:hover {
	background: #e7c66a;
	transform: translateY(-2px);
}

/* Meme fleche que le heros de l accueil, pour que le site n en porte qu une.
   Le picto est pose en MASQUE et non en <img> : action.svg est dessine en
   currentColor, il suivrait donc la couleur du bouton dans un cas et
   sortirait noir dans l autre. La boite garde le ratio 128x86 du fichier. */
.mv-si .mv-si__fleche {
	display: inline-block;
	width: 16px;
	height: 11px;
	background: currentColor;
	-webkit-mask: url("/wp-content/uploads/2025/09/action.svg") center / contain no-repeat;
	mask: url("/wp-content/uploads/2025/09/action.svg") center / contain no-repeat;
	transition: transform 0.2s ease;
}

.mv-si .mv-si__bouton:hover .mv-si__fleche {
	transform: translateX(4px);
}

/* -------------------------------------------------------------- Bandeau */

.mv-si .mv-si__bandeau {
	padding-block: clamp(46px, 5vw, 72px);
}

.mv-si .mv-si__bandeau--sombre {
	background: var(--mv-surface-sombre);
}

.mv-si .mv-si__bandeau--teal {
	background: var(--mv-teal);
}

.mv-si .mv-si__bandeau--clair {
	background: var(--mv-surface-claire);
}

.mv-si .mv-si__bandeau-grille {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, auto);
	gap: clamp(24px, 3vw, 48px);
	align-items: center;
}

.mv-si .mv-si__bandeau--sombre .mv-si__h2--bandeau {
	color: #ffffff;
}

.mv-si .mv-si__bandeau--sombre .mv-si__prose--bandeau {
	color: var(--mv-corps-sombre);
}

.mv-si .mv-si__bandeau--teal .mv-si__h2--bandeau,
.mv-si .mv-si__bandeau--teal .mv-si__prose--bandeau {
	color: var(--mv-encre);
}

.mv-si .mv-si__prose--bandeau {
	margin-top: 18px;
	max-width: 78ch;
}

/* ----------------------------------------------------------------- Avis */

.mv-si .mv-si__avis-liste {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2vw, 26px);
}

.mv-si .mv-si__avis-carte {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: clamp(22px, 2.4vw, 30px);
	background: #ffffff;
	border: 1px solid rgba(16, 21, 28, 0.09);
	border-radius: var(--mv-rayon);
}

.mv-si .mv-si__etoiles {
	display: inline-flex;
	gap: 3px;
	color: var(--mv-or-texte);
}

.mv-si .mv-si__avis-texte {
	font-size: 16px;
	color: var(--mv-corps);
}

.mv-si .mv-si__avis-auteur {
	margin-top: auto;
	font-family: 'Lato', system-ui, sans-serif;
	font-weight: 900;
	letter-spacing: -0.02em;
	color: var(--mv-encre);
}

/* ------------------------------------------------------------------ FAQ */

.mv-si .mv-si__faq-grille {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}

.mv-si .mv-si__question {
	border-bottom: 1px solid rgba(16, 21, 28, 0.12);
}

.mv-si .mv-si__question-titre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 56px;
	padding-block: 16px;
	font-family: 'Lato', system-ui, sans-serif;
	font-size: 17px;
	font-weight: 900;
	letter-spacing: -0.02em;
	color: var(--mv-encre);
	cursor: pointer;
	list-style: none;
}

.mv-si .mv-si__question-titre::-webkit-details-marker {
	display: none;
}

.mv-si .mv-si__question-titre::after {
	content: '';
	flex: 0 0 14px;
	height: 14px;
	background: currentColor;
	clip-path: polygon(44% 0, 56% 0, 56% 44%, 100% 44%, 100% 56%, 56% 56%, 56% 100%, 44% 100%, 44% 56%, 0 56%, 0 44%, 44% 44%);
	transition: transform 0.22s ease;
}

.mv-si .mv-si__question[open] .mv-si__question-titre::after {
	transform: rotate(135deg);
}

.mv-si .mv-si__question-reponse {
	padding-bottom: 20px;
	font-size: 16px;
	color: var(--mv-corps-doux);
}

.mv-si .mv-si__question-reponse p {
	margin-bottom: 12px;
}

.mv-si .mv-si__question-reponse p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------ Relief et matiere */

/* Bouton en contour, pour le second appel de l en tete. */
/* ⛔ Le contour etait blanc sans condition : invisible (1,08) des que le
   bouton se pose ailleurs que sur l encre du hero a image. Version sur
   fond clair par defaut, version claire redeclaree pour ce hero. */
.mv-si .mv-si__bouton--contour {
	background: transparent;
	border: 1px solid rgba(16, 21, 28, 0.28);
	color: var(--mv-encre);
}

.mv-si .mv-si__bouton--contour:hover {
	background: rgba(16, 21, 28, 0.05);
	border-color: var(--mv-teal-texte);
	color: var(--mv-teal-texte);
	transform: translateY(-2px);
}

.mv-si .mv-si__hero--image .mv-si__bouton--contour,
.mv-si .mv-si__section--sombre .mv-si__bouton--contour,
.mv-si .mv-si__bandeau--sombre .mv-si__bouton--contour {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.42);
	color: #ffffff;
}

.mv-si .mv-si__hero--image .mv-si__bouton--contour:hover,
.mv-si .mv-si__section--sombre .mv-si__bouton--contour:hover,
.mv-si .mv-si__bandeau--sombre .mv-si__bouton--contour:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: var(--mv-or);
	color: var(--mv-or);
}

/* Un halo tres doux donne du relief aux surfaces claires, sans fabriquer
   de bande : le degrade part d une teinte et s eteint en transparent. */
.mv-si .mv-si__section--clair,
.mv-si .mv-si__section--blanc {
	position: relative;
	isolation: isolate;
}

.mv-si .mv-si__section--clair::before,
.mv-si .mv-si__section--blanc::before {
	content: '';
	position: absolute;
	top: -14%;
	right: -6%;
	width: 38%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(37, 156, 153, 0.09) 0%, rgba(37, 156, 153, 0) 68%);
	z-index: -1;
	pointer-events: none;
}

.mv-si .mv-si__section--blanc::before {
	right: auto;
	left: -8%;
	top: auto;
	bottom: -16%;
	background: radial-gradient(circle, rgba(217, 178, 75, 0.1) 0%, rgba(217, 178, 75, 0) 68%);
}

/* Les cartes prennent de la matiere : filet d accent en tete, ombre douce. */
.mv-si .mv-si__carte,
.mv-si .mv-si__volet-liste,
.mv-si .mv-si__avis-carte {
	position: relative;
	box-shadow: 0 10px 30px rgba(16, 21, 28, 0.06);
}

.mv-si .mv-si__volet-liste {
	overflow: hidden;
}

.mv-si .mv-si__volet-liste::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--mv-teal), var(--mv-or) 62%, rgba(217, 178, 75, 0.08));
}

.mv-si .mv-si__carte::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--mv-teal), var(--mv-or));
	border-radius: var(--mv-rayon) 0 0 0;
	transition: width 0.34s ease;
}

.mv-si .mv-si__carte:hover::before {
	width: 62%;
}

.mv-si .mv-si__carte:hover {
	box-shadow: 0 20px 44px rgba(16, 21, 28, 0.12);
}

/* Le pictogramme d une carte vit dans une plaque en degrade. */
.mv-si .mv-si__carte-picto {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: var(--mv-rayon);
	background: linear-gradient(135deg, var(--mv-teal) 0%, #1d7f7d 62%, var(--mv-or) 100%);
	color: #ffffff;
	box-shadow: 0 8px 20px rgba(37, 156, 153, 0.26);
}

.mv-si .mv-si__carte:hover .mv-si__carte-picto {
	background: linear-gradient(135deg, var(--mv-or) 0%, #c79f3c 58%, var(--mv-teal) 100%);
	color: var(--mv-encre);
	box-shadow: 0 10px 26px rgba(217, 178, 75, 0.32);
}

/* Les puces portent une coche dessinee, plus une pastille vide. */
.mv-si .mv-si__puce {
	padding-left: 32px;
}

.mv-si .mv-si__puce::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	width: 20px;
	height: 20px;
	border: 0;
	border-radius: var(--mv-rayon);
	background:
		linear-gradient(135deg, rgba(37, 156, 153, 0.2), rgba(217, 178, 75, 0.2));
}

.mv-si .mv-si__puce::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 9px;
	width: 10px;
	height: 6px;
	border-left: 2px solid var(--mv-teal-texte);
	border-bottom: 2px solid var(--mv-teal-texte);
	transform: rotate(-45deg);
}

/* Le bandeau sombre gagne une profondeur en degrade et un halo. */
.mv-si .mv-si__bandeau--sombre {
	position: relative;
	isolation: isolate;
	background: linear-gradient(118deg, #0d1219 0%, #131920 46%, #16303a 100%);
	overflow: hidden;
}

.mv-si .mv-si__bandeau--sombre::before {
	content: '';
	position: absolute;
	top: -46%;
	right: 4%;
	width: 32%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(37, 156, 153, 0.34) 0%, rgba(37, 156, 153, 0) 68%);
	z-index: -1;
}

.mv-si .mv-si__silo {
	background: linear-gradient(140deg, #0f151c 0%, #131920 58%, #12242c 100%);
}

/* Un guillemet en filigrane signe les avis. */
.mv-si .mv-si__avis-carte::after {
	content: "“";
	position: absolute;
	top: 4px;
	right: 16px;
	font-family: 'Lato', system-ui, sans-serif;
	font-size: 76px;
	font-weight: 900;
	line-height: 1;
	color: rgba(37, 156, 153, 0.12);
	pointer-events: none;
}

.mv-si .mv-si__avis-carte:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 44px rgba(16, 21, 28, 0.12);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

/* Les questions repondent au survol. */
.mv-si .mv-si__question-titre:hover {
	color: var(--mv-teal-texte);
}

/* ------------------------------------------------- Apparition au defilement */

.mv-si .mv-si__section,
.mv-si .mv-si__bandeau {
	--mv-decalage: 14px;
}

.mv-si .mv-revele {
	opacity: 0;
	transform: translateY(var(--mv-decalage));
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.mv-si .mv-revele.mv-revele--vu {
	opacity: 1;
	transform: none;
}

/* ------------------------------------------------------------ Responsive */

@media (max-width: 1024px) {
	.mv-si .mv-si__hero-grille,
	.mv-si .mv-si__duo,
	.mv-si .mv-si__entete,
	.mv-si .mv-si__volet,
	.mv-si .mv-si__faq-grille,
	.mv-si .mv-si__bandeau-grille {
		grid-template-columns: minmax(0, 1fr);
	}

	.mv-si .mv-si__bandeau-grille {
		align-items: start;
	}

	.mv-si .mv-si__avis-liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mv-si .mv-si__duo-appui {
		position: static;
	}

	.mv-si .mv-si__duo-trait {
		display: none;
	}
}

@media (max-width: 640px) {
	.mv-si {
		--mv-marge: 20px;
		font-size: 17px;
	}

	.mv-si .mv-si__onglets {
		gap: 4px;
	}

	.mv-si .mv-si__onglet.mv-si__bouton-onglet {
		padding-inline: 14px;
		font-size: 15px;
	}

	.mv-si .mv-si__avis-liste {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mv-si *,
	.mv-si *::before,
	.mv-si *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}

	.mv-si .mv-revele {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------ Maillage en variante claire

   Employee quand le bloc precedent est deja sombre : deux fonds identiques
   ne doivent jamais se suivre. Posee en FIN de feuille et avec une classe
   de plus que les regles sombres, sinon celles-ci gagnent : .mv-si__lien
   .mv-si__lien--carte pese (0,3,0) et bat une variante a deux classes. */

.mv-si .mv-si__silo.mv-si__silo--clair {
	background: linear-gradient(150deg, #f4f7f7 0%, #eef4f3 56%, #f8f5ed 100%);
}

.mv-si .mv-si__silo--clair .mv-si__carte.mv-si__carte--silo {
	background: #ffffff;
	border-color: rgba(16, 21, 28, 0.09);
}

.mv-si .mv-si__silo--clair .mv-si__carte.mv-si__carte--silo:hover {
	background: #ffffff;
	box-shadow: 0 20px 44px rgba(16, 21, 28, 0.12);
}

.mv-si .mv-si__silo--clair .mv-si__h3.mv-si__h3--silo,
.mv-si .mv-si__silo--clair .mv-si__lien.mv-si__lien--carte {
	color: var(--mv-encre);
}

.mv-si .mv-si__silo--clair .mv-si__carte-texte,
.mv-si .mv-si__silo--clair .mv-si__entete-chapo {
	color: var(--mv-corps-doux);
}

/* Tout lien de la variante claire, y compris celui du chapo qui ne porte
   que .mv-si__lien : l or #D9B24B ne donne que 1,81 sur ce fond. */
.mv-si .mv-si__silo--clair .mv-si__lien,
.mv-si .mv-si__silo--clair .mv-si__lien.mv-si__lien--sombre,
.mv-si .mv-si__silo--clair .mv-si__entete-chapo a {
	color: var(--mv-teal-texte);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mv-si .mv-si__silo--clair .mv-si__h3.mv-si__h3--silo .mv-si__lien.mv-si__lien--carte {
	text-decoration: none;
}

.mv-si .mv-si__silo--clair .mv-si__fleche--carte {
	color: var(--mv-teal-texte);
}

/* Un volet dont la colonne de gauche ne porte QUE son titre laisse un vide
   face a la carte de droite. On resserre alors la colonne au profit du
   contenu. `:has` n est pas supporte partout : sans lui, la grille garde
   ses proportions par defaut, ce qui reste lisible. */
.mv-si .mv-si__volet:has(.mv-si__volet-texte > .mv-si__h3:only-child) {
	grid-template-columns: minmax(0, 0.58fr) minmax(0, 1.42fr);
}

/* ------------------------------------------------------- Offres et tarifs */

.mv-si .mv-si__offres {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
	gap: clamp(18px, 2vw, 26px);
	align-items: stretch;
}

.mv-si .mv-si__offre {
	display: flex;
	flex-direction: column;
	position: relative;
	padding: clamp(24px, 2.6vw, 34px);
	background: #ffffff;
	border: 1px solid rgba(16, 21, 28, 0.09);
	border-radius: var(--mv-rayon);
	box-shadow: 0 10px 30px rgba(16, 21, 28, 0.06);
}

.mv-si .mv-si__section--blanc .mv-si__offre {
	background: var(--mv-surface-claire);
}

.mv-si .mv-si__offre::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--mv-teal), var(--mv-or) 62%, rgba(217, 178, 75, 0.08));
	border-radius: var(--mv-rayon) var(--mv-rayon) 0 0;
}

.mv-si .mv-si__offre-resume {
	margin-top: 10px;
	font-size: 16px;
	color: var(--mv-corps-doux);
}

/* Le tarif est l information que l on vient chercher : il porte le poids. */
.mv-si .mv-si__offre-prix {
	margin-top: 20px;
	font-family: 'Lato', system-ui, sans-serif;
	font-size: clamp(21px, 2vw, 26px);
	font-weight: 900;
	letter-spacing: -0.025em;
	color: var(--mv-encre);
}

.mv-si .mv-si__offre-mention {
	margin-top: 6px;
	font-size: 15px;
	font-weight: 700;
	color: var(--mv-teal-texte);
}

.mv-si .mv-si__puces--offre {
	margin-top: 20px;
	margin-bottom: 24px;
}

/* Le bouton se cale en bas : les cartes d une meme rangee s alignent. */
.mv-si .mv-si__offre-action {
	margin-top: auto;
	align-self: flex-start;
}

/* Sur fond sombre le teal texte tombe a 2,4 : la variante claire se declare
   ici, en fin de feuille et avec une classe de plus, sinon la regle claire
   ci-dessus l emporte. */
.mv-si .mv-si__section--sombre .mv-si__lien.mv-si__lien--suite,
.mv-si .mv-si__bandeau .mv-si__lien.mv-si__lien--suite,
.mv-si .mv-si__silo .mv-si__lien.mv-si__lien--suite {
	color: var(--mv-teal-clair);
}

.mv-si .mv-si__section--sombre .mv-si__lien.mv-si__lien--suite:hover,
.mv-si .mv-si__bandeau .mv-si__lien.mv-si__lien--suite:hover,
.mv-si .mv-si__silo .mv-si__lien.mv-si__lien--suite:hover {
	color: #ffffff;
}

/* ----------------------------------------------------- Plan du site */

/* Le hero du plan n a pas d encart de preuves : la titraille occupe
   toute la largeur plutot que de laisser un vide a droite. */
.mv-si .mv-si__hero-grille.mv-si__hero-grille--seule {
	grid-template-columns: minmax(0, 1fr);
}

.mv-si .mv-si__carte.mv-si__carte--plan {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Le titre de rubrique reste un titre : ni souligne ni de la meme couleur
   que les liens qu il coiffe, sinon la hierarchie disparait. */
.mv-si .mv-si__h3--carte .mv-si__lien.mv-si__lien--suite {
	color: var(--mv-encre);
	text-decoration: none;
}

.mv-si .mv-si__h3--carte .mv-si__lien.mv-si__lien--suite:hover {
	color: var(--mv-teal-texte);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mv-si .mv-si__carte--plan .mv-si__h3--carte {
	margin-bottom: 6px;
}

.mv-si .mv-si__plan-liste {
	display: grid;
	gap: 10px;
}

.mv-si .mv-si__plan-liste.mv-si__plan-liste--large {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px 26px;
}

.mv-si .mv-si__plan-item {
	position: relative;
	padding-left: 16px;
	line-height: 1.5;
}

/* Un filet tient lieu de puce : la feuille retire les puces natives. */
.mv-si .mv-si__plan-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.75em;
	width: 8px;
	height: 1px;
	background: var(--mv-teal);
}

/* La cible tactile d un lien de plan doit tenir 44px sans ecarter la liste. */
.mv-si .mv-si__plan-item .mv-si__lien.mv-si__lien--suite {
	display: inline-block;
	padding-block: 11px;
}

/* ------------------------------------------- Inscription newsletter */

.mv-si .mv-si__nl-grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

@media (max-width: 899px) {
	.mv-si .mv-si__nl-grille {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Le bloc d inscription empile son titre et son texte : l en tete du
   gabarit est une grille duo, imbriquee ici elle disloquait le titre. */
.mv-si .mv-si__nl-texte {
	display: grid;
	gap: 14px;
	align-content: start;
}

.mv-si .mv-si__nl-boite {
	padding: clamp(22px, 2.6vw, 32px);
	background: #ffffff;
	border: 1px solid rgba(16, 21, 28, 0.09);
	border-radius: var(--mv-rayon);
	box-shadow: 0 18px 44px rgba(16, 21, 28, 0.07);
}

.mv-si .mv-si__section--blanc .mv-si__nl-boite {
	background: var(--mv-surface-claire);
}

.mv-si .mv-si__nl-ligne {
	display: grid;
	gap: 8px;
}

.mv-si .mv-si__nl-etiquette {
	font-family: 'Lato', system-ui, sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: var(--mv-encre);
}

.mv-si .mv-si__nl-champ {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	border: 1px solid rgba(16, 21, 28, 0.22);
	border-radius: var(--mv-rayon);
	background: #ffffff;
	font-family: 'Nunito', system-ui, sans-serif;
	font-size: 16px;
	color: var(--mv-encre);
}

.mv-si .mv-si__nl-champ:focus-visible {
	outline: 2px solid var(--mv-teal-texte);
	outline-offset: 2px;
}

.mv-si .mv-si__nl-consentement {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	margin-top: 18px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--mv-corps);
}

.mv-si .mv-si__nl-consentement input {
	width: 20px;
	height: 20px;
	margin-top: 2px;
	accent-color: var(--mv-teal);
}

.mv-si .mv-si__bouton.mv-si__nl-soumettre {
	margin-top: 20px;
}

/* Pot de miel : hors ecran plutot que display none, que les robots lisent. */
.mv-si .mv-si__nl-miel {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mv-si .mv-si__nl-message {
	margin-bottom: 16px;
	padding: 12px 14px;
	border-radius: var(--mv-rayon);
	font-size: 15px;
}

.mv-si .mv-si__nl-message.mv-si__nl-message--ok {
	background: rgba(37, 156, 153, 0.12);
	color: var(--mv-teal-texte);
}

.mv-si .mv-si__nl-message.mv-si__nl-message--erreur {
	background: rgba(176, 42, 42, 0.1);
	color: #8c1f1f;
}

/* ==========================================================================
   Relief, lumiere et cascade des cartes
   ==========================================================================
   ⛔ Une grille de cartes blanches, sans ombre ni matiere, se lit comme un
   tableau : « trop plat comme composition » (client, 31/08/2026). Trois
   apports, par ordre d importance reelle :
     1. la LUMIERE  : deux lueurs tres diluees aux angles, teal et or, les
        deux couleurs de la marque, qui donnent une matiere a la surface ;
     2. le RELIEF   : une ombre douce des le repos, la carte cesse de
        flotter sur du vide, et l ombre du survol prend la teinte teal ;
     3. le MOUVEMENT: les cartes montent en cascade quand la section entre
        dans l ecran.
   Aucun liseré permanent : le filet teal-or reste reserve au survol, le
   liseré d accent pose en permanence ayant deja ete rejete ailleurs. */

.mv-si .mv-si__carte {
	position: relative;
	isolation: isolate;
	box-shadow: 0 1px 2px rgba(16, 21, 28, 0.04), 0 14px 30px rgba(16, 21, 28, 0.055);
}

/* ::before porte deja le filet de survol : la lumiere passe par ::after. */
.mv-si .mv-si__carte::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background:
		radial-gradient(125% 95% at 100% 0%, rgba(37, 156, 153, 0.13), rgba(37, 156, 153, 0) 58%),
		radial-gradient(95% 85% at 0% 100%, rgba(217, 178, 75, 0.10), rgba(217, 178, 75, 0) 62%);
	opacity: 0.82;
	transition: opacity 0.28s ease;
	pointer-events: none;
}

.mv-si .mv-si__carte:hover::after,
.mv-si .mv-si__carte:focus-within::after {
	opacity: 1;
}

.mv-si .mv-si__carte:hover,
.mv-si .mv-si__carte:focus-within {
	box-shadow: 0 2px 4px rgba(16, 21, 28, 0.05), 0 22px 46px rgba(37, 156, 153, 0.16);
}

@keyframes mv-si-monte {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* La classe mv-revele n est posee QUE par le script, et celui-ci s abstient
   quand le visiteur demande moins d animation : sans script, rien n est
   jamais masque. Le script pose de plus mv-revele--vu au bout de 2,5 s quoi
   qu il arrive, ce qui interdit tout contenu durablement invisible. */
.mv-si .mv-revele:not(.mv-revele--vu) .mv-si__cartes .mv-si__carte {
	opacity: 0;
}

.mv-si .mv-revele--vu .mv-si__cartes .mv-si__carte {
	animation: mv-si-monte 0.52s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

.mv-si .mv-revele--vu .mv-si__cartes .mv-si__carte:nth-child(2) { animation-delay: 60ms; }
.mv-si .mv-revele--vu .mv-si__cartes .mv-si__carte:nth-child(3) { animation-delay: 120ms; }
.mv-si .mv-revele--vu .mv-si__cartes .mv-si__carte:nth-child(4) { animation-delay: 180ms; }
.mv-si .mv-revele--vu .mv-si__cartes .mv-si__carte:nth-child(5) { animation-delay: 240ms; }
.mv-si .mv-revele--vu .mv-si__cartes .mv-si__carte:nth-child(6) { animation-delay: 300ms; }
.mv-si .mv-revele--vu .mv-si__cartes .mv-si__carte:nth-child(7) { animation-delay: 360ms; }
.mv-si .mv-revele--vu .mv-si__cartes .mv-si__carte:nth-child(8) { animation-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
	/* Filet : meme si la classe se retrouvait posee, rien ne reste cache. */
	.mv-si .mv-revele:not(.mv-revele--vu) .mv-si__cartes .mv-si__carte {
		opacity: 1;
	}
}

/* ---------------------------------------- Cartes de parcours entre silos */

/* Le pied de carte doit s aligner d une carte a l autre : la carte devient
   une colonne et la mention d action est poussee vers le bas. */
.mv-si .mv-si__carte.mv-si__carte--silo {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.mv-si .mv-si__carte--silo .mv-si__carte-texte {
	flex: 1 1 auto;
}

/* Le pictogramme reprend celui du menu, dans la meme plaque que les autres
   cartes du site : la navigation et le maillage parlent le meme langage. */
.mv-si .mv-si__carte-picto.mv-si__carte-picto--silo {
	margin-bottom: 16px;
}

/* ⛔ Le picto vient de l entete, qui lui impose le teal texte : pose tel quel
   dans la plaque, il sortait teal sur teal, soit 1,5 de contraste. Il doit
   suivre la couleur de la PLAQUE, blanche au repos et encre au survol. */
.mv-si .mv-si__carte-picto.mv-si__carte-picto--silo .mv-tete__picto {
	width: 26px;
	height: 26px;
	color: inherit;
}

/* ⛔ Une fleche seule en bas de carte n annonce rien. Le libelle dit ce que
   le clic apporte ; le lien reel reste le titre, cette mention est donc
   masquee aux lecteurs d ecran pour ne pas doubler l annonce. */
.mv-si .mv-si__action.mv-si__action--silo {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-top: 14px;
	font-family: 'Lato', system-ui, sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--mv-teal-texte);
	transition: gap 0.22s ease, color 0.22s ease;
}

.mv-si .mv-si__carte--silo:hover .mv-si__action.mv-si__action--silo,
.mv-si .mv-si__carte--silo:focus-within .mv-si__action.mv-si__action--silo {
	gap: 14px;
}

/* Sur fond sombre, le teal texte tomberait a 2,1 : le blanc s impose. */
.mv-si .mv-si__silo--sombre .mv-si__action.mv-si__action--silo,
.mv-si .mv-si__section--sombre .mv-si__action.mv-si__action--silo {
	color: #ffffff;
}

.mv-si .mv-si__fleche.mv-si__fleche--action {
	width: 16px;
	height: 11px;
}

/* ------------------------------------------ Photo de fond d une section */

/* La photo se pose SOUS un voile clair, jamais sous un voile noir : le noir
   eteint l image, qui n a alors plus de raison d etre la. Le voile est
   dense en haut, ou vivent le titre et le chapo, et s allege vers le bas,
   ou les cartes opaques n ont plus besoin d etre protegees : l image y
   reste franchement visible entre les cartes. */
.mv-si .mv-si__section.mv-si__section--photo {
	position: relative;
	isolation: isolate;
	background-image: var(--mv-photo);
	background-size: cover;
	background-position: center;
	/* Jamais fixed : un ancetre filtre suffit a decrocher le fond. */
	background-attachment: scroll;
}

/* ⛔ ::before porte deja le halo decoratif des sections claires, et deux
   regles visant le MEME pseudo-element se CUMULENT : redefinir son fond
   laissait intacts son width de 38%, son aspect-ratio et son border-radius,
   et le voile sortait en rond. Le voile vit donc dans ::after, libre, qui
   est peint apres ::before et couvre donc aussi le halo. */
.mv-si .mv-si__section.mv-si__section--photo::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.90) 0%,
		rgba(255, 255, 255, 0.80) 34%,
		rgba(255, 255, 255, 0.62) 100%
	);
}

/* Sur une section sombre, c est l inverse : le voile doit foncer, sinon le
   texte blanc se perd. */
.mv-si .mv-si__section--sombre.mv-si__section--photo::after {
	background: linear-gradient(
		180deg,
		rgba(9, 22, 26, 0.90) 0%,
		rgba(9, 22, 26, 0.80) 34%,
		rgba(9, 22, 26, 0.66) 100%
	);
}

/* Posees sur une photo, les cartes doivent redevenir franchement opaques :
   la lueur d angle suffisait sur un aplat, elle ne suffit plus ici. */
.mv-si .mv-si__section--photo .mv-si__carte {
	background-color: #ffffff;
	box-shadow: 0 2px 6px rgba(16, 21, 28, 0.06), 0 18px 38px rgba(16, 21, 28, 0.10);
}

@media (max-width: 767px) {
	/* En colonne etroite, la photo n a plus la place de se lire et ne fait
	   que gener : on la laisse, mais sous un voile presque plein. */
	.mv-si .mv-si__section.mv-si__section--photo::after {
		background: linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.94) 0%,
			rgba(255, 255, 255, 0.90) 100%
		);
	}
}

/* ⛔ L entete est une grille de deux colonnes : un titre reste seul y
   laisserait toute la moitie droite vide. Il reprend alors la largeur
   entiere, sans etre borne : le titre n est jamais bride. */
.mv-si .mv-si__entete > .mv-si__h2:only-child {
	grid-column: 1 / -1;
}

/* ==========================================================================
   Diptyque : deux blocs de prose dans une seule section
   ==========================================================================
   Deux fonds franchement differents, l un clair et l autre encre, plutot que
   deux bandes empilees qui se ressemblent. Le panneau le plus fourni mene et
   prend la colonne large ; le second lui repond en encart sombre. */

.mv-si .mv-si__enveloppe.mv-si__diptyque {
	display: grid;
	grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
	gap: clamp(18px, 2vw, 28px);
	align-items: stretch;
}

.mv-si .mv-si__panneau {
	display: flex;
	flex-direction: column;
	padding: clamp(28px, 3.2vw, 48px);
	border-radius: var(--mv-rayon);
}

.mv-si .mv-si__panneau.mv-si__panneau--clair {
	background-color: #ffffff;
	border: 1px solid rgba(16, 21, 28, 0.09);
	box-shadow: 0 1px 2px rgba(16, 21, 28, 0.04), 0 16px 34px rgba(16, 21, 28, 0.06);
}

/* Le second fond n est pas une nuance du premier mais son contraire : c est
   ce qui donne au diptyque sa lecture, et non deux gris voisins. */
.mv-si .mv-si__panneau.mv-si__panneau--sombre {
	background-image: linear-gradient(152deg, #131920 0%, #10151c 52%, #0d2a2a 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 18px 42px rgba(13, 42, 42, 0.22);
}

.mv-si .mv-si__panneau .mv-si__h2.mv-si__h2--panneau {
	margin-top: 14px;
	font-size: clamp(23px, 2.2vw, 30px);
}

/* Qui neutralise redeclare : sur le panneau sombre, tout ce que la feuille
   posait pour un fond clair doit etre repose. */
.mv-si .mv-si__panneau--sombre .mv-si__h2--sombre {
	color: #ffffff;
}

.mv-si .mv-si__panneau--sombre .mv-si__prose--sombre {
	color: var(--mv-corps-sombre);
}

.mv-si .mv-si__panneau--sombre .mv-si__prose--sombre strong {
	color: #ffffff;
}

.mv-si .mv-si__panneau--sombre .mv-si__prose--sombre a {
	color: var(--mv-teal-clair);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mv-si .mv-si__panneau--sombre .mv-si__surtitre--sombre {
	color: var(--mv-teal-clair);
}

.mv-si .mv-si__panneau--sombre .mv-si__surtitre--sombre .mv-si__filet {
	background: linear-gradient(90deg, var(--mv-teal-clair), var(--mv-or));
}

/* Le panneau court laisserait un blanc en pied : son fond va jusqu au bord,
   ce qui se lit comme une surface et non comme un trou. La prose garde donc
   sa place en haut, elle n est jamais centree verticalement. */
.mv-si .mv-si__panneau .mv-si__prose {
	flex: 1 1 auto;
}

@media (max-width: 1023px) {
	.mv-si .mv-si__enveloppe.mv-si__diptyque {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}
}

/* ---------------------------------------- Colonne de volet, collee au scroll */

/* La colonne de gauche etait centree verticalement pour absorber le vide que
   laissait une liste beaucoup plus longue qu elle. Elle remonte desormais en
   haut et SUIT le defilement : le titre du volet reste sous les yeux pendant
   la lecture de la liste, et le vide disparait sans qu on ait a le repartir.
   `align-items: start` est indispensable : etiree sur toute la hauteur de la
   piste, la colonne n aurait aucune marge pour coller. */
.mv-si .mv-si__volet {
	align-items: start;
}

.mv-si .mv-si__volet .mv-si__volet-texte {
	position: sticky;
	/* L entete collee mesure 66px : on garde de l air sous elle. */
	top: 104px;
}

.admin-bar .mv-si .mv-si__volet .mv-si__volet-texte {
	top: 136px;
}

@media (max-width: 1024px) {
	/* Une seule colonne : la colonne collee resterait plantee au-dessus de
	   sa propre liste. */
	.mv-si .mv-si__volet .mv-si__volet-texte {
		position: relative;
		top: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mv-si .mv-si__volet .mv-si__volet-texte {
		position: relative;
		top: auto;
	}
}

/* ---- Filigrane de marque ---- */

/* Le bandeau d appel et le bloc de maillage, quand ils sont sombres. Le
   heros de silo est exclu : son ::after sert deja a autre chose.

   ⛔ Le motif est borne par `top` et `bottom`, jamais par une hauteur en
   pourcentage : sur un pseudo-element, une hauteur en % ne se resout pas
   toujours, alors que les decalages, eux, se resolvent toujours. Le trace
   reste ainsi dans sa section quelle que soit sa hauteur, sans qu on ait a
   toucher a l overflow des sections existantes.

   ⛔ Toujours ::after : ::before porte deja les lueurs de ces sections. */
.mv-si .mv-si__bandeau--sombre::after,
.mv-si .mv-si__silo--sombre::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 6%;
  bottom: 6%;
  right: 4%;
  width: min(26%, 300px);
  background: var(--mv-motif) no-repeat right center / contain;
  opacity: 0.26;
  pointer-events: none;
}

@media (max-width: 900px) {
  .mv-si .mv-si__bandeau--sombre::after,
.mv-si .mv-si__silo--sombre::after {
    right: -8%;
    width: 46%;
    opacity: 0.14;
  }
}