/**
 * « Notre histoire » — handoff design_handoff_notre_histoire (2a « Plein cadre » et 3a « Le récit de poche »).
 * Valeurs reprises des maquettes HTML (Histoire C.dc.html, Histoire Mobile.dc.html), qui font foi : couleurs en
 * clair (pas de jeton « proche »), boutons en border-box et liens en content-box comme dans le navigateur.
 * Fenêtre ≥ 1024 × 680 px → 2a ; en dessous → 3a. Même requête dans recit.js (ORDINATEUR).
 * Tailles des cartes photo calculées ici (ratio exact, jamais de recadrage) ; view.js ne fait que changer --dd.
 */

/* Commun ------------------------------------------------------------------------------------------------ */

.mi-histoire {
	--mi-h-ease: cubic-bezier(.2, .7, .2, 1);
	--mi-h-marge: min(120px, 8.3334vw);
	--mi-h-serif: "Cormorant Garamond", Georgia, serif;
	--mi-h-mono: "IBM Plex Mono", monospace;
	position: relative;
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #022d22;
	color: #f5ecd9;
	font-family: "Hanken Grotesk", system-ui, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	/* Rendu des maquettes (le thème lisse les polices sur tout le site). */
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
	text-rendering: auto;
}

/* Remises à zéro sans poids (:where) : chaque composant ci-dessous les remplace par une seule classe.
   Boîtes comme dans les maquettes : content-box, sauf les boutons (border-box, réglage du navigateur). */
:where(.mi-histoire) *,
:where(.mi-histoire) *::before,
:where(.mi-histoire) *::after {
	box-sizing: content-box;
}

:where(.mi-histoire) a {
	text-decoration: none;
}

/* Boutons : réglages du navigateur des maquettes (police et interligne propres aux boutons). */
:where(.mi-histoire) button {
	box-sizing: border-box;
	appearance: none;
	margin: 0;
	font-family: inherit;
	font-size: 13.3333px;
	font-weight: 400;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	text-transform: none;
	text-indent: 0;
	text-shadow: none;
	word-spacing: normal;
}

.mi-histoire [hidden] {
	display: none !important;
}

/* Titre de la page pour les lecteurs d'écran, hors couverture (render.php). */
.mi-histoire .mi-histoire__titre-page {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Écran qui reçoit le focus quand la commande activée disparaît (view.js) : pas d'anneau sur tout l'écran. */
.mi-histoire__ecran:focus {
	outline: none;
}

.mi-histoire svg {
	display: block;
	flex: none;
}

.mi-histoire .mi-histoire__h1,
.mi-histoire .mi-histoire__titre,
.mi-histoire .mi-histoire__panneau-titre {
	margin: 0;
	color: inherit;
	font-family: var(--mi-h-serif);
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
}

.mi-histoire__h1-accent {
	font-style: italic;
	color: #e7b95d;
}

.mi-histoire__lieu,
.mi-histoire__etiquette {
	font-family: var(--mi-h-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #f2d48d;
}

.mi-histoire__intro,
.mi-histoire__para,
.mi-histoire__legende {
	margin: 0;
	text-wrap: pretty;
}

.mi-histoire__grand {
	display: flex;
	align-items: baseline;
	white-space: nowrap;
}

.mi-histoire__grand-chiffre,
.mi-histoire__grand-sous {
	font-family: var(--mi-h-serif);
	font-style: italic;
	font-weight: 500;
}

.mi-histoire__grand-chiffre {
	line-height: .8;
	letter-spacing: -.02em;
	color: #e7b95d;
}

.mi-histoire__grand-sous {
	line-height: 1;
	color: #f2d48d;
}

.mi-histoire .mi-histoire__titre {
	text-wrap: balance;
}

.mi-histoire__frise {
	list-style: none;
	padding: 0;
	border-top: 1px solid rgba(245, 236, 217, .2);
}

.mi-histoire__frise li {
	display: grid;
	align-items: baseline;
	margin: 0;
	border-bottom: 1px solid rgba(245, 236, 217, .2);
}

.mi-histoire__frise-date {
	font-family: var(--mi-h-mono);
	color: #f2d48d;
}

.mi-histoire__bouton {
	align-items: center;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
}

.mi-histoire__bouton--urgent,
.mi-histoire__bouton--don,
.mi-histoire__bouton--commencer {
	background: #e7b95d;
	color: #12352b;
}

/* Chapitre V : « Pourquoi c'est urgent » mène à l'écran « Soutenir » sans quitter le récit (10/10/2026). */
.mi-histoire__bouton--urgent {
	border: 0;
	cursor: pointer;
}

.mi-histoire__bouton--chantier {
	border: 1.5px solid rgba(245, 236, 217, .6);
	color: #f5ecd9;
}

.mi-histoire__lien-texte {
	border: 0;
	background: transparent;
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: pointer;
}

.mi-histoire__lien-texte--debut {
	color: #dce7d5;
}

.mi-histoire :is(.mi-histoire__bouton--chantier, .mi-histoire__lien-texte, .mi-histoire__fleche--prec, .mi-histoire__barre-prec, .mi-histoire__ouvrir, .mi-histoire__ligne-chap, .mi-histoire__carte):focus-visible,
.mi-histoire .mi-histoire__etape:focus-visible {
	outline: 2px solid #e7b95d;
}

.mi-histoire :is(.mi-histoire__bouton--urgent, .mi-histoire__bouton--don, .mi-histoire__bouton--commencer, .mi-histoire__fleche--suiv, .mi-histoire__barre-suiv, .mi-histoire__barre-don, .mi-histoire__appel):focus-visible {
	outline: 2px solid #f5ecd9;
	outline-offset: 3px;
}

/* Pile de photos : la carte du dessus (--dd = 0) devant, les suivantes décalées derrière ; au-delà de 3, cachées. */
.mi-histoire__pile {
	position: relative;
}

.mi-histoire__carte {
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	padding: 0;
	border: 0;
	border-radius: 14px;
	overflow: hidden;
	background: #0c4838;
	z-index: calc(30 - var(--dd));
	-webkit-tap-highlight-color: transparent;
}

button.mi-histoire__carte {
	cursor: pointer;
}

.mi-histoire__carte[data-loin] {
	opacity: 0;
}

.mi-histoire__carte img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
}

.mi-histoire__pastille {
	position: absolute;
	border-radius: 999px;
	background: #e7b95d;
	color: #12352b;
	font-weight: 600;
	line-height: normal;
}

.mi-histoire__carte:not([data-dd="0"]) .mi-histoire__pastille {
	display: none;
}

/* Emplacement « Photographie d'archive à fournir » (maquette : composant image-slot vide). */
.mi-histoire__archive {
	position: absolute;
	border-radius: 14px;
	overflow: hidden;
	background: #0c4838;
	color: #dce7d5;
}

.mi-histoire__archive-vide {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px;
	background: rgba(127, 127, 127, .08);
	text-align: center;
	font: 13px/1.3 system-ui, -apple-system, sans-serif;
}

.mi-histoire__archive-vide svg {
	opacity: .45;
}

.mi-histoire__archive-texte {
	max-width: 90%;
	font-weight: 500;
	letter-spacing: .01em;
	opacity: .75;
}

.mi-histoire__archive-cadre {
	position: absolute;
	inset: 0;
	border: 1.5px dashed currentColor;
	opacity: .35;
	pointer-events: none;
}

.mi-histoire__position {
	flex: none;
	font-family: var(--mi-h-mono);
	color: #e7b95d;
}

.mi-histoire__legende {
	flex: 1;
	min-width: 0;
	font-style: italic;
	color: #dce7d5;
}

.mi-histoire__aide {
	font-size: 13px;
	color: #dce7d5;
}

/* Tailles des cartes : w = min(maxW, maxH × r), h = w / r, arrondis au pixel comme dans les maquettes. */
.mi-histoire__carte {
	width: min(var(--mi-h-lw, var(--mw)), var(--mw), var(--mh) * var(--r), var(--mi-h-lh, var(--mh) * var(--r)));
	height: calc(min(var(--mi-h-lw, var(--mw)), var(--mw), var(--mh) * var(--r), var(--mi-h-lh, var(--mh) * var(--r))) / var(--r));
}

@supports (width: round(1px, 1px)) {
	.mi-histoire__carte {
		--mi-h-w: round(min(var(--mi-h-lw, var(--mw)), var(--mw), var(--mh) * var(--r), var(--mi-h-lh, var(--mh) * var(--r))), 1px);
		width: var(--mi-h-w);
		height: round(var(--mi-h-w) / var(--r), 1px);
	}
}

/* 2a « Plein cadre » (ordinateur) ------------------------------------------------------------------------ */

@media (min-width: 1024px) and (min-height: 680px) {
	.mi-histoire__bandeau,
	.mi-histoire__barre,
	.mi-histoire__feuille,
	.mi-histoire__liste,
	.mi-histoire__aide--toucher {
		display: none !important;
	}

	.mi-histoire__scene {
		position: relative;
		flex: 1;
		min-height: 0;
	}

	/* Couverture */
	.mi-histoire__couverture {
		position: absolute;
		inset: 0;
		padding: 40px var(--mi-h-marge) 52px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.mi-histoire__ariane ol {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 0;
		font-size: 15px;
		line-height: 1.5;
		color: #dce7d5;
	}

	.mi-histoire__ariane li {
		display: inline-flex;
		align-items: center;
		margin: 0;
	}

	.mi-histoire__ariane li + li::before {
		content: "›";
		margin: 0 8px;
		opacity: 1;
	}

	.mi-histoire .mi-histoire__ariane a,
	.mi-histoire .mi-histoire__ariane a:hover {
		display: inline;
		min-height: 0;
		color: #dce7d5;
		opacity: 1;
		text-decoration: none;
	}

	.mi-histoire__ariane [aria-current="page"] {
		color: #f5ecd9;
		font-weight: 500;
	}

	.mi-histoire__couv-bas {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 440px;
		gap: 80px;
		align-items: end;
	}

	.mi-histoire .mi-histoire__h1 {
		font-size: clamp(140px, 13.9vw, 200px);
		line-height: .82;
		letter-spacing: -.015em;
	}

	.mi-histoire__couv-texte {
		display: flex;
		flex-direction: column;
		gap: 22px;
		padding-bottom: 14px;
	}

	.mi-histoire__lieu {
		font-size: 13px;
	}

	.mi-histoire__intro {
		font-size: 22px;
		line-height: 1.5;
	}

	.mi-histoire__bouton--commencer {
		align-self: flex-start;
		display: inline-flex;
		gap: 12px;
		height: 56px;
		padding: 0 28px;
		border: 0;
		font-size: 17px;
		font-weight: 600;
		cursor: pointer;
	}

	.mi-histoire__bouton--commencer:hover {
		background: #f2d48d;
	}

	/* Chapitre : texte à gauche, pile de photos à droite */
	.mi-histoire__chapitre {
		position: absolute;
		inset: 0;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.mi-histoire__texte {
		position: relative;
		z-index: 2;
		min-height: 0;
		overflow-y: auto;
		padding: 34px 56px 28px var(--mi-h-marge);
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	/* Bloc de texte centré sur la pile de photos (demande du 10/10/2026). La pile s'arrête au-dessus de la ligne
	   de légende (hauteur publiée par view.js dans --mi-h-legendes) : un espace en bas, de même hauteur moins
	   10 px (écarts de marges entre les deux colonnes), aligne les deux centres. Il se réduit jusqu'à 0 quand le
	   texte manque de place : rien n'est pris au texte, qui commence alors en haut (marges automatiques à 0). */
	.mi-histoire__texte > .mi-histoire__etiquette {
		margin-top: auto;
	}

	.mi-histoire__texte > .mi-histoire__corps {
		margin-bottom: auto;
	}

	.mi-histoire__texte::after {
		content: "";
		flex: 0 1 calc(10px + var(--mi-h-legendes, 60px));
		margin-top: -16px;
	}

	.mi-histoire__etiquette {
		font-size: 13px;
	}

	.mi-histoire__grand {
		gap: 18px;
		margin: -6px 0 -10px -8px;
	}

	.mi-histoire__grand-chiffre {
		font-size: clamp(150px, 13.9vw, 200px);
	}

	.mi-histoire__grand-sous {
		font-size: 40px;
	}

	.mi-histoire__corps {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	.mi-histoire__suite {
		display: contents;
	}

	.mi-histoire .mi-histoire__titre {
		font-size: 46px;
		line-height: 1.02;
	}

	.mi-histoire__para {
		font-size: 17px;
		line-height: 1.65;
		color: #dce7d5;
	}

	.mi-histoire__frise {
		margin: 2px 0 0;
	}

	.mi-histoire__frise li {
		grid-template-columns: 128px minmax(0, 1fr);
		gap: 16px;
		padding: 7px 0;
	}

	.mi-histoire__frise-date {
		font-size: 13px;
	}

	.mi-histoire__frise-texte {
		font-size: 16px;
		line-height: 1.4;
	}

	.mi-histoire__actions {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.mi-histoire__actions--suite {
		margin-top: 6px;
	}

	.mi-histoire__actions--soutenir {
		gap: 14px;
		margin-top: 8px;
	}

	.mi-histoire__bouton--urgent {
		display: inline-flex;
		gap: 10px;
		height: 56px;
		padding: 0 28px;
		font-size: 17px;
	}

	.mi-histoire__bouton--don {
		display: inline-flex;
		gap: 10px;
		height: 60px;
		padding: 0 34px;
		font-size: 18px;
	}

	.mi-histoire .mi-histoire__bouton--urgent:hover,
	.mi-histoire .mi-histoire__bouton--don:hover {
		background: #f2d48d;
		color: #12352b;
	}

	.mi-histoire__bouton--chantier {
		display: inline-flex;
		height: 60px;
		padding: 0 26px;
		font-size: 16px;
	}

	.mi-histoire .mi-histoire__bouton--chantier:hover {
		background: rgba(245, 236, 217, .1);
		color: #f5ecd9;
	}

	.mi-histoire__lien-texte {
		height: 44px;
		padding: 0 4px;
	}

	.mi-histoire :is(.mi-histoire__bouton--chantier, .mi-histoire__lien-texte):focus-visible {
		outline-offset: 3px;
	}

	/* Colonne photo */
	.mi-histoire__visuel {
		position: relative;
		z-index: 1;
		min-height: 0;
		display: flex;
		flex-direction: column;
		padding: 36px 48px 22px 32px;
		overflow: hidden;
	}

	.mi-histoire__pile {
		flex: 1;
		min-height: 0;
		container-type: size;
	}

	.mi-histoire__pile--plusieurs {
		--mw: 500px;
		--mh: 430px;
	}

	.mi-histoire__pile--seule {
		--mw: 580px;
		--mh: 500px;
	}

	/* Fenêtre plus petite que la maquette : la carte reste entière dans sa colonne (sans effet à 1440 × 900). */
	.mi-histoire__carte {
		--mi-h-lw: 100cqw - 40px;
		--mi-h-lh: (100cqh - 40px) * var(--r);
		transform: translate(-50%, -50%) translate(calc(var(--dd) * 16px), calc(var(--dd) * -12px)) rotate(calc(var(--dd) * 2.2deg)) scale(calc(1 - var(--dd) * .05));
		transition: transform .65s var(--mi-h-ease), opacity .4s ease;
		box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55);
	}

	.mi-histoire .mi-histoire__carte:focus-visible {
		outline-width: 3px;
		outline-offset: 4px;
	}

	.mi-histoire__pastille {
		left: 16px;
		top: 16px;
		padding: 7px 13px;
		font-size: 13px;
	}

	.mi-histoire__archive {
		left: 50%;
		top: 50%;
		width: 520px;
		height: 390px;
		transform: translate(-50%, -50%);
		box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55);
	}

	.mi-histoire__legendes {
		flex: none;
		display: flex;
		align-items: baseline;
		gap: 16px;
		margin-top: 18px;
		padding-top: 16px;
		border-top: 1px solid rgba(245, 236, 217, .18);
	}

	.mi-histoire__position {
		font-size: 13px;
	}

	.mi-histoire__legende {
		font-size: 15px;
		line-height: 1.45;
	}

	.mi-histoire__aide--clic {
		flex: none;
	}

	/* Sommaire fixe */
	.mi-histoire__sommaire {
		flex: none;
		position: relative;
		z-index: 3;
		background: #022d22;
		border-top: 1px solid rgba(245, 236, 217, .22);
		padding: 0 40px 0 var(--mi-h-marge);
		display: grid;
		grid-template-columns: repeat(var(--mi-histoire-n, 5), minmax(0, 1fr)) 190px auto;
		gap: 22px;
		align-items: stretch;
	}

	.mi-histoire__etape {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		padding: 18px 0 22px;
		border: 0;
		background: transparent;
		text-align: left;
		color: #dce7d5;
		cursor: pointer;
	}

	.mi-histoire[data-ecran-courant="-1"] .mi-histoire__etape,
	.mi-histoire__etape[data-etat="courant"] {
		color: #f5ecd9;
	}

	.mi-histoire .mi-histoire__etape:hover {
		color: #f2d48d;
	}

	.mi-histoire .mi-histoire__etape:focus-visible {
		outline-offset: -2px;
	}

	.mi-histoire__etape-barre {
		position: absolute;
		left: 0;
		right: 0;
		top: -1px;
		height: 3px;
		background: transparent;
		transition: background .35s ease;
	}

	.mi-histoire__etape[data-etat="courant"] .mi-histoire__etape-barre {
		background: #e7b95d;
	}

	.mi-histoire__etape[data-etat="lu"] .mi-histoire__etape-barre {
		background: rgba(231, 185, 93, .4);
	}

	.mi-histoire__etape-haut {
		display: flex;
		align-items: baseline;
		gap: 10px;
	}

	.mi-histoire__etape-roman {
		font-family: var(--mi-h-serif);
		font-style: italic;
		font-size: 30px;
		line-height: 1;
		color: #e7b95d;
	}

	.mi-histoire__etape-repere {
		font-family: var(--mi-h-mono);
		font-size: 12px;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: #dce7d5;
	}

	.mi-histoire__etape-titre {
		font-family: var(--mi-h-serif);
		font-size: 20px;
		line-height: 1.1;
		font-weight: 500;
		text-wrap: balance;
	}

	.mi-histoire__etape[data-etat="courant"] .mi-histoire__etape-titre {
		font-weight: 600;
	}

	.mi-histoire__appel {
		align-self: center;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		padding: 14px 18px 16px;
		border-radius: 14px;
		/* Contour invisible sur la couverture, qui se dessine au fil des chapitres (view.js : --mi-h-progression
		   de 0 à 1) ; plein au chapitre V, fond doré sur l'écran « Soutenir » (demande du 10/10/2026). */
		border: 1.5px solid rgba(231, 185, 93, var(--mi-h-progression, 0));
		background: transparent;
		color: #f5ecd9;
		text-align: left;
		cursor: pointer;
		transition: background .3s ease, color .3s ease, border-color .35s ease;
	}

	.mi-histoire__appel[aria-current="step"] {
		background: #e7b95d;
		color: #12352b;
	}

	.mi-histoire .mi-histoire__appel:hover {
		border-color: #f2d48d;
	}

	.mi-histoire__appel-sur {
		font-family: var(--mi-h-mono);
		font-size: 12px;
		letter-spacing: .08em;
		text-transform: uppercase;
	}

	.mi-histoire__appel-titre {
		font-family: var(--mi-h-serif);
		font-size: 21px;
		line-height: 1.1;
		font-weight: 600;
	}

	.mi-histoire__fleches {
		display: flex;
		align-items: center;
		gap: 12px;
		padding-left: 8px;
	}

	.mi-histoire__fleche {
		width: 52px;
		height: 52px;
		padding: 0;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.mi-histoire__fleche--prec {
		border: 1.5px solid rgba(245, 236, 217, .55);
		background: transparent;
		color: #f5ecd9;
	}

	.mi-histoire .mi-histoire__fleche--prec:hover {
		background: rgba(245, 236, 217, .1);
	}

	.mi-histoire .mi-histoire__fleche--prec:focus-visible {
		outline-offset: 3px;
	}

	.mi-histoire__fleche--suiv {
		border: 0;
		background: #e7b95d;
		color: #12352b;
	}

	.mi-histoire .mi-histoire__fleche--suiv:hover {
		background: #f2d48d;
	}

	.mi-histoire__fleche:disabled {
		opacity: .35;
	}

	.mi-histoire__compteur {
		min-width: 64px;
		text-align: center;
		font-family: var(--mi-h-mono);
		font-size: 15px;
		letter-spacing: .06em;
	}

	.mi-histoire__compteur-or {
		color: #e7b95d;
	}

	/* Transitions entre écrans : out (260 ms) → pre (sans transition) → idle. */
	.mi-histoire__couverture,
	.mi-histoire__corps,
	.mi-histoire__etiquette,
	.mi-histoire__legendes {
		transition: opacity .3s ease, transform .45s var(--mi-h-ease);
	}

	.mi-histoire__grand {
		transition: opacity .35s ease, transform .7s var(--mi-h-ease);
	}

	.mi-histoire__pile {
		transition: opacity .4s ease, transform .8s var(--mi-h-ease);
	}

	.mi-histoire[data-phase="out"] :is(.mi-histoire__couverture, .mi-histoire__corps) {
		opacity: 0;
		transform: translateY(-10px);
	}

	.mi-histoire[data-phase="out"] :is(.mi-histoire__etiquette, .mi-histoire__legendes) {
		opacity: 0;
	}

	.mi-histoire[data-phase="out"] .mi-histoire__grand {
		opacity: 0;
		transform: translateX(calc(-60px * var(--d)));
	}

	.mi-histoire[data-phase="out"] .mi-histoire__pile,
	.mi-histoire[data-phase="pre"] .mi-histoire__pile {
		opacity: 0;
		transform: translateX(calc(40px * var(--d)));
	}

	.mi-histoire[data-phase="pre"] :is(.mi-histoire__couverture, .mi-histoire__corps) {
		opacity: 0;
		transform: translateY(14px);
	}

	.mi-histoire[data-phase="pre"] :is(.mi-histoire__etiquette, .mi-histoire__legendes) {
		opacity: 0;
	}

	.mi-histoire[data-phase="pre"] .mi-histoire__grand {
		opacity: 0;
		transform: translateX(calc(90px * var(--d)));
	}

	.mi-histoire[data-phase="pre"] :is(.mi-histoire__couverture, .mi-histoire__corps, .mi-histoire__etiquette, .mi-histoire__legendes, .mi-histoire__grand, .mi-histoire__pile) {
		transition: none;
	}
}

/* 3a « Le récit de poche » (téléphone, et toute fenêtre plus petite que 1024 × 680) ------------------------ */

@media not all and (min-width: 1024px) and (min-height: 680px) {
	.mi-histoire {
		width: 100%;
		max-width: 520px;
		margin: 0 auto;
	}

	.mi-histoire__sommaire,
	.mi-histoire__ariane,
	.mi-histoire__bouton--commencer,
	.mi-histoire__bouton--don,
	.mi-histoire__aide--clic {
		display: none !important;
	}

	/* Bandeau de progression */
	.mi-histoire__bandeau {
		flex: none;
		padding: 12px 20px 2px;
		display: flex;
		flex-direction: column;
		gap: 4px;
		border-bottom: 1px solid rgba(245, 236, 217, .14);
	}

	.mi-histoire__segments {
		display: flex;
		gap: 4px;
	}

	.mi-histoire__segment {
		flex: 1;
		height: 3px;
		border-radius: 2px;
		background: rgba(245, 236, 217, .25);
		transition: background .35s ease;
	}

	.mi-histoire__segment[data-rempli] {
		background: #e7b95d;
	}

	.mi-histoire__ouvrir {
		display: flex;
		align-items: center;
		gap: 10px;
		min-height: 48px;
		padding: 0;
		border: 0;
		border-radius: 6px;
		background: transparent;
		color: #f5ecd9;
		text-align: left;
		cursor: pointer;
	}

	.mi-histoire .mi-histoire__ouvrir:focus-visible {
		outline-offset: 2px;
	}

	.mi-histoire__ouvrir-etiquette {
		flex: none;
		font-family: var(--mi-h-mono);
		font-size: 12px;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: #f2d48d;
	}

	.mi-histoire__ouvrir-titre {
		flex: 1;
		min-width: 0;
		font-size: 15px;
		font-weight: 600;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.mi-histoire__ouvrir-sommaire {
		flex: none;
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 14px;
		font-weight: 600;
		color: #dce7d5;
	}

	/* Corps : seule zone qui défile */
	.mi-histoire__scene {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		overflow-x: hidden;
		overscroll-behavior: contain;
	}

	/* Couverture */
	.mi-histoire__couverture {
		padding: 28px 20px 28px;
		display: flex;
		flex-direction: column;
		gap: 18px;
	}

	.mi-histoire__couv-bas,
	.mi-histoire__couv-texte {
		display: contents;
	}

	.mi-histoire__lieu {
		order: 1;
		font-size: 12px;
	}

	.mi-histoire .mi-histoire__h1 {
		order: 2;
		font-size: 96px;
		line-height: .82;
		letter-spacing: -.015em;
	}

	.mi-histoire__intro {
		order: 3;
		font-size: 18px;
		line-height: 1.55;
	}

	.mi-histoire__liste {
		order: 4;
		list-style: none;
		margin: 6px 0 0;
		padding: 0;
		border-top: 1px solid rgba(245, 236, 217, .18);
	}

	.mi-histoire__liste li {
		margin: 0;
	}

	.mi-histoire__ligne-chap {
		width: 100%;
		display: grid;
		grid-template-columns: 36px minmax(0, 1fr) auto;
		gap: 12px;
		align-items: center;
		min-height: 60px;
		padding: 6px 0;
		border: 0;
		border-bottom: 1px solid rgba(245, 236, 217, .18);
		background: transparent;
		color: #f5ecd9;
		text-align: left;
		cursor: pointer;
	}

	.mi-histoire .mi-histoire__ligne-chap:focus-visible {
		outline-offset: -2px;
	}

	.mi-histoire__ligne-roman {
		font-family: var(--mi-h-serif);
		font-style: italic;
		font-size: 26px;
		line-height: 1;
		color: #e7b95d;
	}

	.mi-histoire__ligne-titre {
		font-size: 17px;
		font-weight: 500;
		line-height: 1.3;
	}

	.mi-histoire__ligne-repere {
		font-family: var(--mi-h-mono);
		font-size: 12px;
		color: #dce7d5;
	}

	.mi-histoire__ligne-chap--soutenir {
		color: #e7b95d;
	}

	.mi-histoire__ligne-chap--soutenir .mi-histoire__ligne-roman {
		font-family: inherit;
		font-style: normal;
		font-size: 20px;
		color: inherit;
	}

	.mi-histoire__ligne-chap--soutenir .mi-histoire__ligne-titre {
		font-weight: 600;
	}

	.mi-histoire__ligne-chap--soutenir .mi-histoire__ligne-repere {
		color: inherit;
	}

	/* Chapitre : grand chiffre, étiquette, titre, photos, légende, puis le texte */
	.mi-histoire__chapitre {
		padding: 18px 20px 32px;
		display: flex;
		flex-direction: column;
		gap: 12px;
		container-type: inline-size;
	}

	.mi-histoire__texte,
	.mi-histoire__corps,
	.mi-histoire__visuel,
	.mi-histoire__actions {
		display: contents;
	}

	.mi-histoire__grand {
		order: 1;
		gap: 12px;
		margin: 0 0 -2px -4px;
	}

	.mi-histoire__grand-chiffre {
		font-size: 108px;
	}

	.mi-histoire__grand-sous {
		font-size: 26px;
	}

	.mi-histoire__etiquette {
		order: 2;
		font-size: 12px;
	}

	.mi-histoire .mi-histoire__titre {
		order: 3;
		font-size: 34px;
		line-height: 1.04;
	}

	.mi-histoire__pile {
		order: 4;
		margin-top: 8px;
		--mi-h-W: clamp(280px, 100cqw, 480px);
	}

	.mi-histoire__pile--plusieurs {
		--mw: calc(var(--mi-h-W) - 32px);
		--mh: 250px;
		height: 284px;
	}

	.mi-histoire__pile--seule {
		--mw: var(--mi-h-W);
		--mh: 280px;
		height: calc(min(280px, var(--mi-h-W) / var(--r)) + 4px);
	}

	@supports (width: round(1px, 1px)) {
		.mi-histoire__pile--seule {
			height: calc(round(min(280px, var(--mi-h-W) / var(--r)), 1px) + 4px);
		}
	}

	.mi-histoire__pile--archive {
		height: 262px;
	}

	.mi-histoire__carte {
		transform: translate(-50%, -50%) translate(calc(var(--dd) * 10px), calc(var(--dd) * -9px)) rotate(calc(var(--dd) * 2deg)) scale(calc(1 - var(--dd) * .04));
		transition: transform .6s var(--mi-h-ease), opacity .35s ease;
		box-shadow: 0 22px 40px -20px rgba(0, 0, 0, .6);
	}

	.mi-histoire__pile--plusieurs .mi-histoire__carte {
		top: calc(50% + 12px);
	}

	.mi-histoire .mi-histoire__carte:focus-visible {
		outline-width: 3px;
		outline-offset: 3px;
	}

	.mi-histoire__pastille {
		left: 12px;
		top: 12px;
		padding: 6px 11px;
		font-size: 12px;
	}

	.mi-histoire__archive {
		left: 0;
		right: 0;
		top: 50%;
		height: 262px;
		transform: translateY(-50%);
	}

	.mi-histoire__legendes {
		order: 5;
		display: flex;
		gap: 12px;
		align-items: baseline;
	}

	.mi-histoire__position {
		font-size: 12px;
	}

	.mi-histoire__legende {
		font-size: 14px;
		line-height: 1.5;
	}

	.mi-histoire__aide--toucher {
		order: 6;
		margin-top: -4px;
	}

	.mi-histoire__suite {
		order: 7;
		display: flex;
		flex-direction: column;
		gap: 14px;
		margin-top: 10px;
		padding-top: 18px;
		border-top: 1px solid rgba(245, 236, 217, .18);
	}

	.mi-histoire__para {
		font-size: 17px;
		line-height: 1.65;
		color: #f5ecd9;
	}

	.mi-histoire__frise {
		margin: 4px 0 0;
	}

	.mi-histoire__frise li {
		grid-template-columns: 104px minmax(0, 1fr);
		gap: 12px;
		padding: 10px 0;
	}

	.mi-histoire__frise-date {
		font-size: 12px;
	}

	.mi-histoire__frise-texte {
		font-size: 15px;
		line-height: 1.45;
	}

	.mi-histoire__bouton--urgent,
	.mi-histoire__bouton--chantier {
		margin-top: 6px;
		display: flex;
		justify-content: center;
		height: 52px;
		padding: 0;
		border: 1.5px solid rgba(245, 236, 217, .6);
		background: transparent;
		color: #f5ecd9;
		font-size: 16px;
	}

	/* Bouton : même boîte que le lien en contour de la maquette (52 px + contour). */
	.mi-histoire__bouton--urgent {
		box-sizing: content-box;
		gap: 10px;
	}

	.mi-histoire .mi-histoire__bouton--urgent:hover,
	.mi-histoire .mi-histoire__bouton--chantier:hover {
		background: transparent;
		color: #f5ecd9;
	}

	.mi-histoire .mi-histoire__bouton--urgent:focus-visible,
	.mi-histoire .mi-histoire__bouton--chantier:focus-visible {
		outline-color: #e7b95d;
		outline-offset: 3px;
	}

	.mi-histoire__lien-texte--debut {
		align-self: center;
		height: 44px;
		padding: 0 8px;
	}

	.mi-histoire .mi-histoire__lien-texte--debut:focus-visible {
		outline-offset: 3px;
	}

	/* Barre d'action */
	.mi-histoire__barre {
		flex: none;
		display: flex;
		gap: 10px;
		align-items: center;
		padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
		background: #022d22;
		border-top: 1px solid rgba(245, 236, 217, .14);
	}

	.mi-histoire__barre-prec {
		flex: none;
		width: 56px;
		height: 56px;
		padding: 0;
		border-radius: 50%;
		border: 1.5px solid rgba(245, 236, 217, .55);
		background: transparent;
		color: #f5ecd9;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.mi-histoire .mi-histoire__barre-prec:focus-visible {
		outline-offset: 3px;
	}

	.mi-histoire__barre-don {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		height: 56px;
		border-radius: 999px;
		background: #e7b95d;
		color: #12352b;
		font-size: 17px;
		font-weight: 600;
	}

	.mi-histoire .mi-histoire__barre-don:hover {
		color: #12352b;
	}

	.mi-histoire__barre-suiv {
		flex: 1;
		min-width: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		height: 56px;
		padding: 0 18px;
		border: 0;
		border-radius: 999px;
		background: #e7b95d;
		color: #12352b;
		font-size: 16px;
		font-weight: 600;
		cursor: pointer;
	}

	.mi-histoire__barre-libelle {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Panneau sommaire (dialogue modal) */
	.mi-histoire__feuille[open] {
		position: fixed;
		inset: 0;
		width: 100%;
		max-width: 520px;
		height: 100%;
		max-height: none;
		margin: 0 auto;
		padding: 0;
		border: 0;
		background: transparent;
		color: #022d22;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		overflow: hidden;
		font-family: "Hanken Grotesk", system-ui, sans-serif;
		font-size: 16px;
		line-height: 1.5;
	}

	.mi-histoire__feuille::backdrop {
		background: transparent;
	}

	.mi-histoire__voile {
		position: absolute;
		inset: 0;
		padding: 0;
		border: 0;
		background: rgba(1, 20, 15, .62);
		cursor: pointer;
	}

	.mi-histoire__panneau {
		position: relative;
		background: #f5ecd9;
		color: #022d22;
		border-radius: 24px 24px 0 0;
		padding: 10px 16px 22px;
		display: flex;
		flex-direction: column;
		gap: 2px;
		box-shadow: 0 -20px 40px -20px rgba(0, 0, 0, .5);
	}

	.mi-histoire__poignee {
		align-self: center;
		width: 40px;
		height: 4px;
		border-radius: 2px;
		background: #d9c9a6;
		margin-bottom: 6px;
	}

	.mi-histoire__panneau-tete {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 4px 6px;
	}

	.mi-histoire .mi-histoire__panneau-titre {
		font-size: 28px;
		line-height: 1.5;
	}

	.mi-histoire__fermer {
		width: 44px;
		height: 44px;
		padding: 0;
		border-radius: 50%;
		border: 1px solid #e0d2b4;
		background: transparent;
		color: #022d22;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.mi-histoire__feuille-ligne {
		width: 100%;
		display: grid;
		grid-template-columns: 32px minmax(0, 1fr) auto;
		gap: 10px;
		align-items: center;
		min-height: 56px;
		padding: 4px 10px;
		border: 0;
		border-radius: 12px;
		background: transparent;
		color: #022d22;
		text-align: left;
		cursor: pointer;
	}

	.mi-histoire__feuille-ligne[aria-current="step"] {
		background: #dce7d5;
	}

	.mi-histoire__feuille-roman {
		font-family: var(--mi-h-serif);
		font-style: italic;
		font-size: 24px;
		line-height: 1;
		color: #073f30;
	}

	.mi-histoire__feuille-titre {
		font-size: 16px;
		line-height: 1.3;
		font-weight: 500;
	}

	.mi-histoire__feuille-ligne[aria-current="step"] .mi-histoire__feuille-titre {
		font-weight: 700;
	}

	.mi-histoire__feuille-repere {
		font-family: var(--mi-h-mono);
		font-size: 12px;
		color: #3f5a4f;
	}

	.mi-histoire__feuille-soutenir {
		margin-top: 8px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 56px;
		padding: 0 18px;
		border: 0;
		border-radius: 999px;
		background: #073f30;
		color: #f5ecd9;
		font-size: 16px;
		font-weight: 600;
		cursor: pointer;
	}

	.mi-histoire__feuille-retour {
		align-self: center;
		margin-top: 6px;
		height: 44px;
		padding: 0 8px;
		border: 0;
		background: transparent;
		color: #073f30;
		font-size: 15px;
		font-weight: 600;
		text-decoration: underline;
		text-underline-offset: 4px;
		cursor: pointer;
	}

	.mi-histoire .mi-histoire__fermer:focus-visible,
	.mi-histoire .mi-histoire__feuille-retour:focus-visible {
		outline: 2px solid #073f30;
		outline-offset: 2px;
	}

	.mi-histoire .mi-histoire__feuille-ligne:focus-visible {
		outline: 2px solid #073f30;
		outline-offset: -2px;
	}

	.mi-histoire .mi-histoire__feuille-soutenir:focus-visible {
		outline: 2px solid #073f30;
		outline-offset: 3px;
	}

	/* Transitions entre écrans : out (220 ms) → pre (sans transition) → idle. */
	.mi-histoire__ecran {
		transition: opacity .28s ease, transform .45s var(--mi-h-ease);
	}

	.mi-histoire__grand {
		transition: transform .75s var(--mi-h-ease);
	}

	.mi-histoire[data-phase="out"] .mi-histoire__ecran {
		opacity: 0;
		transform: translateX(calc(-28px * var(--d)));
	}

	.mi-histoire[data-phase="pre"] .mi-histoire__ecran {
		opacity: 0;
		transform: translateX(calc(36px * var(--d)));
		transition: none;
	}

	.mi-histoire[data-phase="pre"] .mi-histoire__grand {
		transform: translateX(calc(60px * var(--d)));
		transition: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mi-histoire *,
	.mi-histoire *::before,
	.mi-histoire *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* Un chapitre sans photographie conserve une seule colonne de lecture. */
@media (min-width: 1024px) and (min-height: 680px) {
	.mi-histoire__chapitre--sans-photo { grid-template-columns: minmax(0, 1fr); }
	.mi-histoire__chapitre--sans-photo .mi-histoire__texte { width: 100%; max-width: 880px; margin-inline: auto; box-sizing: border-box; }
}